Creating Info Pages with Elementor for TechShop’s Online Store
In addition to product pages and blog posts, TechShop wants to create informative info pages on their online store to provide valuable information to their customers. These info pages can include About Us, Contact Us, Shipping Information, and other essential details about the business and its operations. In this lesson, we will explore how TechShop can leverage Elementor to create these info pages effectively.
- Accessing the Elementor Editor:
- Navigate to the WordPress dashboard and select “Pages” > “Add New” to create a new page.
- Give the page a relevant title, such as “About Us” or “Contact Us.”
- Click on the “Edit with Elementor” button to launch the Elementor editor for the page.
-
Designing the Info Page:
- Elementor provides a range of pre-designed templates that can be customized to fit the specific needs of an info page.
- Start by selecting a suitable template or choose to design the page from scratch.
- Add elements to the page using the drag-and-drop functionality of Elementor. These elements can include headings, paragraphs, images, videos, buttons, contact forms, and more.
- Customize the content and styling of the elements using the various options available in the Elementor editor. Modify fonts, colors, backgrounds, spacing, and other visual aspects to match the branding and design preferences of TechShop.
- Consider incorporating relevant sections and columns to organize the content effectively. For example, the About Us page can have sections for company history, mission and vision, and team members.
- Utilize the Elementor widget library to add additional functionality to the info pages, such as maps, social media icons, testimonials, and FAQs.
-
Adding Contact Forms:
- To include a contact form on the Contact Us page, consider using a contact form plugin compatible with Elementor, such as “Contact Form 7” or “WPForms.” (In the following modules you will understand how to include Zoho Forms)
- Activate the preferred contact form plugin.
- Create a new form using the plugin’s interface, specifying the required fields and customization options.
- In the Elementor editor, add a contact form widget to the page and select the previously created form from the dropdown options.
- Customize the appearance of the contact form using the available styling options in Elementor.
-
Preview and Publish:
- Use the Elementor preview feature to visualize how the info page will appear to website visitors.
- Make any necessary adjustments to the content, layout, and styling based on the preview.
- Once satisfied with the design, click the “Publish” button to make the info page live on the website.
By utilizing Elementor to create info pages, TechShop can provide essential information to their customers in an engaging and visually appealing manner. In Lesson 6, we will explore the process of integrating Elementor with WooCommerce, allowing TechShop to showcase and manage their products effectively. Join us as TechShop continues its journey to enhance its online store with advanced functionalities.