An Easy-to-Follow Guide on How to Edit a Website with Elementor
Table of Contents
- What is Elementor and why should you use it?
- How to edit your website with Elementor
- What are the advanced features you can use?
- Frequently asked questions
- Is Elementor compatible with other themes?
- Does elementor cause any website speed issue?
- Does Elementor affect SEO?
- Editing with Elementor is easier with professionals
So, you’ve heard about Elementor and you’ve got a website that’s crying out for a makeover.
We know Elementor has lots of features, and it might feel overwhelming at first. But, editing your site with Elementor is not just easy; it’s also fun. You don’t need to be a tech expert or a professional designer. If you can click and drag, you’re more than halfway there.
Elementor gives you the tools to change your site’s look and feel without having to mess with complicated code. Want to update your homepage? Easy. Thinking about adding some cool new sections? No problem. How about adjusting color codes, fonts, or adding images? You guessed it — you can do all that directly within Elementor.
In this guide, we’ll walk you through the basics of editing your website with Elementor. From installing Elementor and understanding the basics, to using templates and exploring advanced features, we’ve got you covered. By the end, you’ll have the confidence to easily make edits to your website’s design, making it look however you want it to.
What is Elementor and why should you use it?
Elementor is a drag-and-drop editor page builder plugin for WordPress, enabling users to design websites visually with drag-and-drop tools. It’s a comprehensive tool that allows complete control over website design on a single platform, including customization options like motion effects, style options, various fonts, and background images.
The plugin suits all skill levels; non-technical users can easily use its visual editor to add elements such as buttons and star ratings using over 90 widgets. Meanwhile, developers appreciate Elementor for its advanced features like script optimization, custom attributes, and the ability to revert to previous versions.
Step-by-step guide: Installing Elementor
Installing Elementor on WordPress is straightforward. We recommend downloading the plugin through the WordPress Dashboard.
Step 1: In your WordPress admin dashboard, navigate to Plugins > Add New.
Go to Plugins > Add New in WordPress dashboard.
Step 2: Type “Elementor” into the search bar and find Elementor Website Builder.
Search ‘Elementor’ and locate Elementor Website Builder.
Step 3: Click “Install Now.” Once installed, click “Activate.” Elementor will then appear in your dashboard sidebar, mainly for accessing its settings, not for page editing.
Elementor appears in dashboard sidebar for settings
How to edit your website with Elementor
Elementor allows you to transform your design ideas into reality through live editing, showing changes in real-time. Here’s a brief guide to using the Elementor editor effectively:
- Starting Out:
- Create a new page or post and select “Edit with Elementor.”
Choose ‘Edit with Elementor’ for a new page or post.
- Navigating the Editor:
- The Elementor editor opens, showing your page on the right and the widget library on the left.
Elementor editor: Page on right, widgets on left.
- Understanding the 3 Building Blocks:
On the left side of your screen, you’ll find the Elementor sidebar, which features all the drag-and-drop tools you need to construct your webpage.
Before you start using these tools, it’s important to grasp the basics of the Elementor editor, which is built on three key components:
- Sections – This is where you place your content sections
- Columns – Columns where you can insert basic widgets
- Widgets – Edit widgets like Image, Text Editor, Heading etc.
Image of a page highlighting different parts: Sections, columns, widgets.
When you’re moving a widget around, the editor will show you potential places for it by marking sections and columns with a pink outline. However, remember that widgets can’t be placed into areas like the navigation bar or the header.
To manage sections, columns, and widgets, use the pink handle. To make changes, simply right-click on the handle.
Use the pink handle to manage sections, columns, and widgets. Right-click for changes.
- Adding Widgets:
- Drag widgets from the widget library to your page. The editor highlights where widgets can be placed. You can choose from basic elements, such as a heading or an image gallery, to more advanced elements like animations and effects.
Drag widgets from the widget library to the page; the editor highlights the placement.
- Customizing Pages:
- Use the search function to find specific widgets. You have a variety of basic and advanced elements to choose from.
Search for widgets; choose from basic & advanced elements.
- Setting Site Preferences:
- Access Site Settings via the hamburger menu to set default colors, fonts, and global settings.
Access Site Settings for default colors, fonts, global settings.
- Using Revision History:
- To review your changes, click on the History icon located at the bottom of the panel, which takes you to Elementor’s Revision History feature. Within the Actions tab, you’ll find a log of your edits, allowing you to navigate forward or backward through each change.
In the Revisions tab, you can explore different versions of your work and, if needed, revert to any earlier version.
Click the History icon for Elementor’s Revision History.
This guide helps you lay a solid foundation for building web pages with Elementor, making web design an intuitive and straightforward process.
Steps in building your first page
Elementor’s user-friendly design lets you build your first webpage without needing any coding knowledge. Here’s how to start:
1. Access WordPress Dashboard:
- Log in to your WordPress dashboard.
2. Create a New Page:
- Navigate to Pages > Add New.
3. Launch Elementor:
- Click on “Edit with Elementor” to open the page builder.
4. Familiarize with Elementor:
- Elementor’s workspace will open, showing a widget library on one side and your new page on the other.
5. Add Elements:
- Start by adding a Heading, Text Editor, and Image widget to your page by dragging and dropping them where you want.
6. Customize Widgets:
- Customize each widget with your content. You can edit text, choose images, and adjust settings directly within each widget.
Customize widgets: edit text, choose images, adjust settings.
7. Preview and Publish:
- Use the left panel to preview your work by clicking the eye icon.
- Once satisfied, click the green “Publish” button to make your page live.
Congratulations, you’ve just created your first page with Elementor!
Elementor Templates Guide
Elementor templates are pre-designed pages that simplify the process of building your WordPress site. “Pages” refer to full content layouts, while “Blocks” are specific sections equipped with pre-built widgets, such as footers, headers, and FAQs.
Elementor allows you to freely utilize any template for your business, offering a search feature to easily find templates by page type, name, or tag. Additionally, all templates are designed to be mobile-friendly. You can add them to your pages with just a single click.
To use a template:
1. In the Elementor editor, go to the bottom of the page and click on the white folder icon where it says “Add widget here.”
Click white folder icon in Elementor editor for widgets
2. A library will appear. To see a template’s details, click on the magnifying glass icon or directly on its image. You can also hover over a template for a quick view.
View template details: click magnifying glass or image.
3. To select a template, click the pink “Insert” button.
4. If this is your first time using Elementor’s template library, you’ll be prompted to connect. Follow the steps to register or log in on Elementor’s website.
5. Once you’ve registered or logged in, your connection to the library will be confirmed.
6. Go back to your page editor and insert the template you chose.
And that’s it! Your template is now ready for you to personalize and make your own.
What are the advanced features you can use?
Elementor Pro is a paid service that can elevate your WordPress site with its advanced features. You get access to more widgets, theme builder, custom field capabilities, and the popup builder. Here’s a quick guide on utilizing these enhancements:
Advanced feature #1: Pop ups
Creating pop-up forms with Elementor Popup builder is a straightforward process. Here’s how you can easily capture email addresses from your leads:
1. Navigate to Pop-Up Templates:
- Go to Templates > Popups > Add New in your WordPress dashboard.
2. Create Your Popup:
- Name your template and click on “Create Template.”
3. Design Your Popup:
- Choose a pre-designed template from the Elementor Library or start from scratch to create your custom design.
4. Publish Your Popup:
- Once you’re satisfied with the design, click “Publish,” then “Save and Close.”
5. Add a Button to Trigger Your Popup:
- Open a new page with Elementor (use CTRL + E on PC or Command + E on Mac).
- Drag a button widget to your page.
6. Set Up the Button to Open Your Popup:
- In the button settings under Layout, set the link to Dynamic > Actions > Popup.
- Navigate to Popup > Open Popup and choose the popup you’ve created.
7. Test Your Popup:
- View your live page and click the button to see your popup in action.
Video from: Elementor
Follow these steps, and you’ll have a functional and stylish pop-up form ready to gather leads on your website.
Advanced feature #2: WooCommerce product page
To customize your WooCommerce product pages with Elementor, ensuring you’ve installed and activated both WooCommerce and Elementor is essential. Also, make sure you’ve added some products to your WooCommerce store. Here’s how to design your product page:
1. Access Elementor Templates:
- Go to Elementor > My Templates in your WordPress dashboard.
2. Create a New Template:
- Click the “Add New” button.
3. Select Template Type:
- Choose “Single Product” as your template type and click “Create Template.”
Select ‘Single Product’, then click ‘Create Template’
Image Source: Elementor
4. Use Elementor Library:
- The Elementor Library will open, allowing you to select a pre-designed product page template or create your own.
Explore Elementor Library for product page templates
Image Source: Elementor
5. Customize Your Page:
- Customize your template by adding product widgets. You can view a list of available widgets here.
6. Preview Your Design:
- To preview your design, click the eye icon in the bottom left panel.
7. Set Product Display:
- Click “Settings” and select the product you wish to display on this page.
Choose product from Settings to display on page
Image Source: Elementor
8. Publish Your Product Page:
- Click the green “Publish” button to make your custom product page live.
Following these steps will help you create a unique and tailored product page that can enhance your online store’s appeal and potentially boost sales.
Frequently asked questions
Is Elementor compatible with other themes?
Elementor is designed to work seamlessly with all themes that follow WordPress’ coding standards. This compatibility ensures that you can use Elementor to customize your site, regardless of the theme you’ve chosen, without worrying about potential conflicts or issues.
Does elementor cause any website speed issue?
Elementor is known for being a speedy page builder. Yet, some websites might experience slower loading times. Elementor offers a guide to help improve website speed if this occurs.
Does Elementor affect SEO?
Elementor can impact SEO positively if used correctly. Although it might slow down your site, this issue can be managed by optimizing images and minimizing scripts. Essentially, Elementor is beneficial for SEO as it aids in creating attractive and responsive websites, encouraging visitors to stay longer.
Elementor supports SEO by enabling the construction of user-friendly and responsive sites, aligning with SEO best practices. This interaction with your content signals to search engines that your site is valuable, potentially raising your rankings and enhancing SEO.
Editing with Elementor is easier with professionals
And that’s a wrap! By now, you should have a deep understanding of how Elementor works, from its features like a user-friendly drag-and-drop interface to more advanced options.
Keep in mind, while Elementor simplifies your web designing process, adding a professional touch can take your site to the next level. This is where we can help! If you want assistance with the more advanced functionalities, our website support services are the perfect choice. Our team of professional WordPress website support can help you make your design visions a reality. Contact us today!
Need some help?
From one-time website fixes to future discussions about your website or branding plans, we're here to help.
Book a meeting or give us a call
at 613-704-5336.
