Welcome to the fourth installment of our complete guide to creating a small business website. Today, we’re diving into the world of website design with a focus on the powerful Elementor Page Builder. As one of the most popular page builder plugins for WordPress, Elementor offers an abundance of features that allow you to create stunning websites without the need for coding expertise.
In this Beginner’s Guide to Elementor, we’ll take you on an exciting journey, exploring the ins and outs of this revolutionary tool. So, let’s embark on this adventure together and explore the Elementor Page Builder as we build your dream small business website.
Getting Started with Elementor
Why should you use Elementor?
Elementor is the ideal solution for creating professional-looking websites without any coding experience. Its easy-to-use drag-and-drop interface, enhanced design flexibility, and pre-designed templates make website creation a breeze.
With Elementor, you can efficiently build custom designs, optimize the user experience, and save costs. It offers a wide range of features, including integration with third-party tools, custom widgets, and more. Elementor allows you to create visually stunning websites in a cost-effective and efficient manner. Experience the power of Elementor and elevate your web design skills today.
How much is Elementor?
Elementor offers a free version with limited features, while their paid version, Elementor Pro, provides advanced functionalities. The pricing plans include:
- Essential ($49/year for one site)
- Advanced ($99/year for 3 sites)
- Expert ($199/year for 25 sites)
- Agency ($399/year for 1,000 sites)
Installing and activating Elementor
Like any WordPress plugin, before you can harness its power on your website, you need to install and activate Elementor. Fortunately, there are multiple methods to accomplish this task; in this tutorial, we will use the simplest method, which is installing via the WordPress dashboard.
Installing Elementor via the WordPress Dashboard
Step 1: From your WordPress dashboard, navigate to the “Plugins” tab and click “Add New”.
Step 2: In the search field, type “Elementor” and locate the “Elementor Page Builder” plugin.
Step 3: Click on the “Install Now” button next to Elementor. Once the installation is complete, click on the “Activate” button to activate the plugin.
Congratulations! You have successfully installed and activated Elementor on your WordPress website.
Now you can begin exploring its powerful features and creating stunning web pages.
As we mentioned in our previous tutorial, when you install any plugin like Elementor, it will automatically be added to the left navigation bar in your WordPress dashboard.
Look for the “Elementor” tab, which will now be easily accessible for you to start utilizing its features.
Explore the Elementor Page Builder Interface
To access Elementor and start building your page, you’ll first need to create a new page on your WordPress website.
Here’s how to do it:
Creating a new page with Elementor
Step 1: From your WordPress dashboard, go to the “Pages” tab and click on “Add New”.
Step 2: Enter a name for your page, such as “Home”, and click on the “Publish” button.
Once your page is published, you can start editing it with Elementor.
To do this, click on the “Edit with Elementor” button. This will redirect you to the Elementor page builder editor.
Elementor Panel
Welcome to the Elementor website builder interface!
On the left side of the Elementor interface, you’ll find the Elementor Panel, which serves as your gateway to a wealth of settings and options in the Elementor Page Builder.
This panel offers convenient access to various features and functionalities, enabling you to customize your website effortlessly.
Let’s delve into the key features of the Elementor Panel to discover its capabilities:
Starting from the top:
Hamburger button: By clicking on the Hamburger button on the left, you can access additional settings and options within the Elementor Panel. These settings include:
1. Site Settings: This section allows you to configure global settings for your website, such as typography, colors, and layout. You can customize the overall appearance and design of your site from this settings menu.
2. Theme Builder: The Theme Builder option provides advanced customization capabilities, allowing you to create and design templates for various parts of your website, such as headers, footers, and archive pages. This feature is only available in Elementor Pro.
3. User Preference: The User Preference section allows you to personalize your Elementor experience. You can adjust settings related to the editor’s interface, such as the editor mode (light or dark), panel width, toggle editing handle on or off, and more. These preferences enhance your workflow and tailor Elementor to your specific needs.
Also under the Hamburger button in the Elementor Panel, you’ll find the “Navigation From Page” section, which includes various options to assist you in managing your Elementor experience:
1. Note (Elementor Pro): This feature allows you to leave notes for other team members directly within Elementor.
2. Finder: The Finder tool is designed to help you quickly locate and access specific pages, templates, functions, or settings within Elementor.
3. View Page: Clicking on “View Page”, allows you to preview the page as it will appear to visitors.
4. Exit: The “Exit” option allows you to exit the Elementor editor and return to the regular WordPress dashboard.
Widgets Icon: Located on the right side of the hamburger button in the Elementor Panel, the Widgets Icon grants you access to a comprehensive list of available widgets. Clicking on this icon opens up the widget library, where you can explore and choose from a wide range of elements to enhance your website’s functionality and design.
Elements and Globals Tabs: Within the Elementor Panel, under the widget icon you’ll find the Elements and Globals tabs, each serving a unique purpose in the page-building process.
1. Elements Tab: The Elements tab showcases a comprehensive collection of widgets that you can utilize to build and customize your website. These widgets include text blocks, images, buttons, videos, galleries, and more. Simply click on the Elements tab to explore the extensive library of widgets.
Under the Elements tab in the Elementor Panel, you will find the
- Search Widget Bar: This search bar allows you to quickly and conveniently search for specific widgets within the extensive widget library. Instead of manually scrolling through the list of available widgets, you can simply enter relevant keywords or terms in the search bar, and Elementor will display matching widgets in real time.
- All Widgets: Within the Elementor widgets panel, you will find a variety of default widgets organized into different categories. These categories include:
- Layout: This category offers widgets that help with page layout and structure, such as sections or containers.
- Basic: Basic widgets encompass essential elements for content creation, including headings, text blocks, images, buttons, and icons.
- Pro: The Pro Widgets category includes additional advanced widgets available exclusively in Elementor Pro, which include posts, form, login, slides, nav menus, and more.
- General: General widgets encompass a wide range of versatile elements, including testimonials, counters, progress bars, accordions, tabs, and more.
- Site: Site widgets are specifically designed to integrate with WordPress features and enhance your site’s functionality. They include widgets for displaying post excerpts, author information, navigation menus, search forms, and more.
- WooCommerce: Elementor offers a dedicated category of widgets designed to enhance your online store. These widgets enable you to display product grids, add-to-cart buttons, product categories, and more. Also available in Elementor Pro
- WordPress: Elementor seamlessly integrates with the default WordPress widgets. You can find and use various WordPress widgets in this category, such as recent posts, archives, categories, calendars, and more.
Additionally, depending on the specific plugins you have installed and their compatibility with Elementor, you may discover additional widgets tailored to those plugins.
2. Globals Tab: The Globals tab, available in the Elementor Pro version, allows you to create and manage global widgets. Global widgets are widgets that you can save and reuse across multiple pages on your website.
When you make changes to a global widget, the modifications automatically reflect on all instances where the widget is used, ensuring consistency throughout your site.
Your WordPress site deserves a better host
Read: How To Buy Web Hosting With A Free Domain
At the bottom of the Elementor Panel
At the bottom of the Elementor Panel, you’ll find several important options and features to enhance your page-building experience, starting from the left:
1. Settings: This allows you to configure the global settings of the page you are currently working on. You can modify the page settings, including the page title, status, and page layout.
2. Navigator: The Navigator provides an overview of your page’s structure, displaying a hierarchical list of all the columns and widgets present on the page.
3. History: The History feature in Elementor allows you to track and review the changes made during your editing session. It provides a step-by-step history log, enabling you to undo or redo changes and revert to previous versions of your page design.
4. Responsive mode: The responsive option enables you to preview and customize your page’s appearance across different devices and screen sizes. It allows you to fine-tune the responsiveness of your design, ensuring optimal display and user experience on various devices.
5. Preview Changes: Clicking on the Preview Changes button allows you to preview your page in real time, giving you a glimpse of how your design will look to visitors before publishing it.
6. Update Button: The Update button is used to apply and save the changes you have made to your page. It ensures that your modifications are permanently implemented and visible on the live website.
7. Save Option: The Save option provides you with two choices for saving your work. You can save your page as a template, allowing you to reuse it across multiple pages or projects. Alternatively, you can choose to save your changes as a draft, keeping them private until you are ready to publish the updated version of your page.
Elementor Canvas
The Elementor Canvas serves as the primary workspace for building and structuring your website.
Within the Elementor canvas, you have the flexibility to effortlessly drag and drop Elementor widgets, allowing you to create a visually stunning and interactive design.
By clicking on the plus icon, you can choose the layout for your design, providing a solid foundation for your content.
Additionally, the “Add template” option enables you to incorporate ready-made template layouts into your page design.
Designing your first pages with Elementor
Designing your first web page with WordPress and Elementor is simple. Let’s dive into the process step by step:
1. Go to your WordPress dashboard. Log in to your WordPress website and navigate to the dashboard. From there, click on “Pages” and then select “Add New”. This will open a new page creation interface.
2. Enter the name of your page. Give your page a relevant name, such as “Home”, “About”, or “Contact”. Once you’ve entered the name, click on the “Publish” button to create the page.
3. Edit with Elementor. After publishing the page, you’ll see an “Edit with Elementor” button. Click on it to launch the Elementor editor. This is where the magic happens.
4. Choose the structure. Inside the Elementor editor, you’ll notice a plus icon. Click on it to open the structure panel. Here, you can choose from a variety of pre-designed structures that determine the layout of your design. Select the structure that best suits your content and design goals.
5. Drag-and-drop widgets: Once you’ve chosen the structure, it’s time to add content to your page. Simply drag and drop widgets from the left panel onto the structure you’ve selected.
Elementor offers a wide range of widgets, including headings, text editors, images, buttons, and many more.
6. Customize using tabs: Each Elementor widget comes with three tabs: content, style, and advanced.
Start with the Content tab to input the specific content for the widget, such as text for a heading or an image for an image widget.
Move on to the Style tab to customize the appearance of the widget, including colors, fonts, font sizes, and more.
Lastly, use the Advanced tab to fine-tune settings like padding, margin, animations, and other advanced options.
7. Check responsiveness: click on the “Responsive mode” icon in Elementor. This allows you to preview and make adjustments to your design specifically for tablet and mobile views.
8. Preview your page: Before publishing your web page, take a moment to preview it. Elementor provides an eye icon that allows you to quickly preview your page in a new tab.
9. Publish your design: Once you’re satisfied with your design and have made any necessary adjustments, it’s time to make it live. Click the “publish button” to publish your web page. This will make it accessible to your audience.
Congratulations! You’ve successfully created your first web page with Elementor.
Working with page templates
Creating a web page with Elementor was easy, but there’s an even simpler method: using templates.
Elementor provides a library of pre-made pages and blocks to streamline your website creation process.
- To create a page using a template, from the Elementor canvas, click on the “Add Template” icon located next to the plus icon.
2. The template library will load, presenting you with a wide selection of professionally designed templates.
Click on a template to preview it and get a sense of its layout and style.
3. Once you’ve found a template that suits your needs, click on the “Insert” button. If you haven’t connected your website to Elementor yet, it will prompt you to connect your account. Simply follow the instructions provided to connect your account seamlessly.
4. After connecting, you will be redirected back to the Elementor editor. The chosen template will be inserted into your page.
Now, it’s time to customize it to align with your brand’s identity and requirements. Modify the text, replace images, adjust colors, and make any necessary changes to personalize the template.
Please note that most of the Elementor templates require a Pro plan subscription.
Why you should consider the Elementor Pro
While we have been discussing the functionality of the free version of Elementor, it’s important to note that there is also a premium version available called Elementor Pro.
While the free version provides the necessary tools to create a basic, functional website, Elementor Pro takes your web design capabilities to the next level. With Elementor Pro, you gain complete control and access to advanced features that allow you to build more sophisticated and professional websites.
Here are several compelling reasons why investing in Elementor Pro is worth considering.
1. Theme Builder: Elementor Pro’s powerful Theme Builder feature enables you to create and customize every aspect of your website, including headers, footers, post templates, and more. With complete control over your site’s appearance, you can ensure a consistent and professional design throughout.
2. More Widgets: Elementor Pro expands your widget library with a wide range of advanced elements, including forms, sliders, pricing tables, countdown timers, and more.
3. Custom CSS: With Elementor Pro, you can add custom CSS code directly within the editor, giving you greater flexibility and control over the visual styling of your website.
4. Dynamic Content: Elementor Pro unlocks the powerful feature of dynamic content, enabling you to effortlessly showcase dynamic and real-time information from your WordPress site. With the pro version, you can seamlessly display dynamic content such as post titles, author details, and other relevant information on your website.
5. WooCommerce Builder: If you run an online store with WooCommerce, Elementor Pro’s dedicated WooCommerce Builder is a game-changer. Design and customize your product pages, category pages, and shopping cart to create visually stunning and conversion-optimized online shopping experiences.
6. Support: By purchasing Elementor Pro, you gain access to priority support from the Elementor team.
Build Your fully functional Professional Website without writing a single line of code with Elementor Pro
Conclusion
Elementor offers a user-friendly interface, enhanced design flexibility, and efficient website creation capabilities.
With its extensive widget library, template options, and advanced features in the Pro version, Elementor empowers users to build professional websites without coding knowledge.
If you’re looking to create stunning websites with ease, Elementor is the ideal choice. Get started with Elementor today and unlock endless possibilities for your web design journey.
Follow The Series
- Step 1: The Comprehensive Guide To Creating Your Small Business Website
- Step 2: How To Buy Web Hosting With A Free Domain
- Step 3: Exploring The WordPress Admin Dashboard
