Day 20: Understanding Elementor Part 3: Widgets, Templates & More

Basic and General Widgets

Here are some important points or suggestions about the widgets you’ll be using the most frequently.

Headings

• Heading 1
• For Headings, to be search-engine friendly and for proper SEO, you should only have 1 H1 heading per page, and that should be the page title.
  • Heading 2
  • Then each major section of the page should start with an H2 heading, which describes what that content is about.
    • Heading 3
    • Within each major section started by an H2, if there are subheadings, those should be H3s.
      • Heading 4
      • And if there are any sub-subheadings within the H3 sections, those should be H4s and so on. I think you get the point.

If you have more than one H1 heading, it confuses search engines because it makes it harder to understand your page structure.

Other Widgets

• All the images you add should be optimized, which we’ll will talk about in an upcoming lesson.
• While sliders or videos can look fantastic at the top of the Home page, for optimal loading times on mobile, it’s best just to have an image or text. So you could hide the slider or video on mobile under Advanced > Responsive and then have an image that’s only visible on mobile.
• Counters can be used to show off impressive statistics like the number of sales or subscribers or amount of revenue, and Image Carousel can be used to show off the brands or clients you’ve worked with.
• Tabs, Accordions and Toggles are a fantastic way to organize lots of content in a user-friendly way.

Menu Anchor

A menu anchor is for bringing the user to a specific point within a page.

Find the widget called Menu Anchor by scrolling or typing it in the Elementor panel. Drag and drop the widget where you want to the user to go, and then give the anchor a name, like “testimonials” if it’s above the testimonials.

Now to create the URL, you put the page plus “/#anchorname” together.

So in this case, it would something like “https://mydomain.com/#testimonials” or if it’s on the About page, “https://mydomain.com/about/#testimonials.

You can add the URL with the menu anchor to your main menu by using custom links, which we talked about earlier. Go to Appearance > Menu and in the Custom Links, put your special URL and give it a title, like Testimonials.

Menu anchors allow you to build one-page websites.

Saving Templates

Elementor and most page builders come with the option to save a section or page whose layout or design you want to use again to the template library.

The Update button has an arrow to the right. Click on it, and you’ll see Save as Template. Then give that template a name that’ll help you easily remember the contents, like Home Page or Testimonials.

You can see all your saved templates in Dashboard > Saved Templates under Elementor. When you want to add a template to page, instead of clicking on the “+” sign to add a new section, click on the folder icon, find the template you want and then click Insert.

Not Seeing Your Edits on the Frontend?

Disabled CDN

If you’re having trouble seeing changes on your website, make sure that the CDN is still disabled until you’re mostly done building the site.

Flush Cache

You might need to clear or flush the cache, and I’ll explain what this means.

When you go to a website for the first time, your browser stores files of the site, so when you visit again, it doesn’t have to download everything each time, which would mean longer loading times.

However, as a result of serving you the old files, the browser may not be showing you the latest version of your website.

So, go to your Dashboard > Managed WordPress in the admin toolbar above, and you’ll see a menu with some settings from your hosting account.

Click “Flush Cache.” That will erase the old, stored files of your website, and then your website will have to download the latest, fresh files of your website with all the changes you’ve recently made.

Explore Elementor

Take some time and play around to get comfortable with Elementor.

Spend 15-20 minutes:

• Adding and editing headings and styling them
• Writing a couple of paragraph lines and styling them
• Changing backgrounds
• Uploading an image and styling it
• Adding motion effects
• Adding a menu anchor and adding the new link to main menu
• Reversing your edits with Revisions
• Checking what the page looks like on mobile and tablet
• Publishing the page and reviewing it on the frontend

You can also get started on adding copy about your business to your site.

Wish You Could Do More With Elementor?

If you buy the Elementor Pro plugin, you’ll also get these handy widgets and tools:

• Template Library
• Form Builder
• Landing Page Builder
• Slider
• Carousels
• Price Tables
• Gallery
• Feed of Your Facebook Posts
• Blog Posts
• Woocommerce
• And much more as seen in the picture below.

More elements means an easier time adding more features and functionality to your website, and the pricing for Elementor Pro is quite reasonable.

You can also buy credits to use their AI tools to generate layouts, images, and text.