Top Elementor Tips & Tricks: The Ultimate Guide to Mastering WordPress’s Most Powerful Page Builder

Ever since I began utilizing Elementor, I never looked back. This page builder is so powerful that it made me stick with it ever since it was launched. Over the years, I’ve used Elementor to build many websites. This helped me learn a lot about Elementor and create unique, high-converting pages.

If you’re new to Elementor or have been using it for a while, you’ve probably been looking for some useful tips and tricks, right? There are many ways you can make the most of this web page builder and create pages rapidly without much trouble. In this article, I’m going to show you the best Elementor tips and tricks that you should start implementing NOW. Here’s how these Elementor tips and tricks are going to help you:

• Enhance your workflow and help you build pages faster.
• Use advanced features to add visual flair to your pages.
• Build professional pages in Elementor without touching code.

We’ve covered all the best Elementor tips and tricks in this article. Let’s start with the most important and the simplest tip that will save you a ton of time and improve your workflow.

Copy/Paste Widgets & Sections Quickly

Difficulty – Easy Elementor Version – Free

Ever come across sections or widgets that you need to reuse on a page or between pages? I see many Elementor users duplicate a widget and then drag it all the way to the area where they want to place it. That’s what I used to do when I first started using Elementor. It’s very inefficient and time-consuming, especially if your page is long. Instead, you can simply copy/paste widgets and sections in Elementor. Here’s how you can do it:

Copy/Paste Widgets or Sections Instantly

Right-click on the widget or section and click ‘Copy’. Now, right-click on the area where you want to paste the widget or section and click ‘Paste’.

Voila! It’s that simple.

Copy/Paste Style of Widgets or Sections

Do you apply the same style to all your widgets/sections manually? It can save you time by simply copying the style of one widget and pasting it onto any other widget you want.

This is very helpful in cases where you need to apply the same size or color to an icon or image. Copying and pasting styles this way gets the job done much faster. I recommend this practice to every new Elementor user because it’s super simple and efficient.

Use Global Widgets Efficiently

Here’s how you can utilize a Global Widget in Elementor:

• Identify the Widget to Make Global: Let’s say you have a CTA section that you want to reuse across various pages.
• Access the Widget Options: Right-click on the CTA widget you want to make global. A context menu will appear.
• Select “Save as Global”: From the context menu, click on the option labeled “Save as Global.” This will initiate the process of creating a global widget.
• Provide a Name: A dialog box will appear prompting you to provide a name for your global widget. Give it a descriptive name that helps you identify its purpose. This name will make it easier for you to find and manage global widgets later.
• Click “Save”: Once you’ve named the global widget, click the “Save” button. This will save the widget as a global element.

From now on, you can add this global widget to any page where you want it to appear. Any changes you make to the global widget will automatically reflect on all pages where it’s used. This streamlines the editing process, as you only need to make changes in one place, and those changes will be applied wherever the global widget is present.

Using global widgets in Elementor is a powerful way to maintain consistency and save time when building and updating your website. It’s particularly handy for elements that are used frequently across different pages.

As soon as your widget is converted into a global widget, you’ll see a yellow border around it. You can edit a global widget just like you edit any regular widget. You can add your newly created global widget from the global tab in Elementor to different pages. However, keep in mind that changes to a global widget are applied to all the locations where that widget is placed. Use global widgets only when necessary in order to avoid conflicts.

Upload Your Own Fonts

Difficulty – Medium Elementor Version – Pro

Elementor has a large collection of fonts from Google Fonts that you can use to create stunning pages. But if you’re like me and want to stand out from the crowd, you’d use custom fonts. In Elementor, you can add your own fonts and use them on your pages. We here at Pixify also use custom fonts on our website. Here’s how to add custom fonts in Elementor: In your WordPress dashboard, go to Elementor > Custom Fonts. From the custom fonts page, click on ‘Add New’ to add your custom font.

You’ll be required to upload the font in the following formats:

• .woff
• .woff2
• .ttf
• .svg
• .eot

It’s not required to upload all the formats, but it’s a good practice so that your fonts are visible across different browsers. If you don’t have all the formats of your font, you can use a font converter like Transfonter to create different formats. Also, make sure you upload all the variations of your fonts. While uploading custom fonts in Elementor, you can select the font weight and style.

Add Entrance Animation To Your Widgets/Sections

Difficulty – Medium Elementor Version – Free

Even some subtle visual components can change the entire UX of your website. And you can do that by adding entrance animation effects to your widgets and sections. Elementor offers great features to add animations to your widgets. Here’s how you can add an entrance animation effect in Elementor: Select the widget and go to Advanced > Motion Effects.

From this tab, choose the entrance animation for your widget. There are many options to choose from. You can also set an animation duration and delay for the widget.

Add Shape Dividers

Difficulty – Easy Elementor Version – Free

I think you’ve probably used this feature on your website. Shape dividers are dividers that are added to the top/bottom of a section. Instead of using plain dividers on your page, you can add shape dividers to make your pages look much better. To add a shape divider, select the section where you want to add a shape divider and go to Style > Shape Divider.

You can choose to display the shape divider at the top or bottom of the section. There are over 15 shape dividers to choose from.

Once you select your preferred shape divider, you’ll be able to customize the color, change the height, flip the divider, and bring it to the front.

Add Filter Effects To Your Images

Difficulty – Easy Elementor Version – Free

I’m sure you’ve done basic image customization on Elementor such as changing alignment, image size, and width. But did you know you can do basic image editing inside Elementor? In the Style tab of the image widget, there’s an option called CSS Filters. With CSS Filters, you can do basic editing on your images.

You can tweak the brightness, contrast, saturation, and hue of the image. You can even blur the image.

That’s so awesome! This feature is useful when you’ve uploaded an image that needs basic tweaks to make it look better on the page.

Set Default Fonts

Tired of constantly adjusting fonts every time you create a new page? You can establish a default font and eliminate the need to change fonts repeatedly. Here’s how to set default fonts using Elementor’s straightforward method:

• Access the Style and Settings Menu: Start by clicking on the hamburger menu located at the top-left corner of the Elementor interface.
• Navigate to Default Fonts: Once you open the menu, you will find various configuration options. Look for the setting related to “Default Fonts” and click on it.
• Choose Font Styles: Within the Default Fonts section, you will be presented with options to select different font styles for various text elements on your website. These text elements typically include the primary heading, secondary heading, body text, and accent text.
• Set Font Preferences: For each type of text element, you can choose your preferred font from the available options. Elementor provides you with a range of fonts to choose from. Select the fonts that align with your website’s design and branding.
• Apply Changes: After you’ve selected the fonts for each text element, ensure to save your changes. This could involve clicking on a “Save” or “Apply” button, depending on the specific Elementor version you’re using.

By setting default fonts in Elementor, you establish a consistent typography across your website without needing to manually adjust fonts every time you create new pages. This not only saves you time but also ensures that your website maintains a cohesive and professional appearance.

Note: The default fonts won’t be applied anywhere you’ve explicitly applied a font.

Set Default Colors

Difficulty – Easy Elementor Version – Free

Just like fonts, you can also choose default colors in Elementor. But unlike default fonts, this feature simply adds your chosen colors to Elementor’s color picker preset. It’s still a helpful feature as you don’t have to copy and paste a color code every single time. To set default colors, click on the Elementor hamburger menu on the top left and click on Default Colors.

You can choose primary, secondary, body, and accent colors. There are also pre-made palettes you can select as your default colors.

Add A Full Height Section

Difficulty – Easy Elementor Version – Free

Do you want to add a section that covers the entire browser screen? You can create a full height section easily with Elementor. Select the section that you want to make full height. In the layout settings, click on the height and set it to ‘Fit To Screen’.

This will automatically fit the entire section to the browser screen.

Add Video Backgrounds

Difficulty – Medium Elementor Version – Free

Video backgrounds look gorgeous and fortunately, you can add video backgrounds to your page with ease. Here’s how you can add video backgrounds in Elementor: Select the section and go to Style > Background. Change the background type in the background settings to a video.

When you choose Video, you’ll have to add the link to the video. You can even set the start time and the end time of the video. There’s also an option to choose a fallback image. This image replaces the background video on tablets and mobile devices.

Use Custom Dynamic Fields

The usage of Custom Dynamic Fields in Elementor, while a powerful feature, might not be well-known to all users, primarily known and utilized by those who are more experienced with the advanced functionalities of Elementor. This feature allows you to showcase dynamic content on your web pages without the need for third-party plugins or extensions. Dynamic fields go beyond just text or headings; they can be applied to links, buttons, images, and various other elements. Here’s a guide on how to leverage dynamic fields within Elementor:

• Access the Dynamic Field Feature: Imagine you’ve designed a page and wish to incorporate the page’s title using dynamic fields. Instead of manually inputting the title, dynamic fields will automatically display it.
• Select the Heading Widget: Start by adding a Heading widget to your desired section or content area within Elementor.
• Navigate to the Content Tab: Within the settings panel of the Heading widget, you’ll find various tabs. Click on the “Content” tab to proceed.
• Activate Dynamic Content for the Title: In the “Content” tab, locate the field where you would normally enter the title. Instead of manually typing the title, click on the “Dynamic” button or option.
• Choose from Dynamic Fields: Upon clicking “Dynamic,” you’ll be presented with a list of dynamic fields that you can select from. This list encompasses a range of dynamic content possibilities for your heading. For instance, you can select the “Post Title” dynamic field to automatically populate the heading with the title of the current post or page.

By incorporating dynamic fields, you ensure that the content within your heading element stays relevant and responsive to changes in your website’s structure. These dynamic fields can be used not only for text but also for various other types of content, providing a dynamic and engaging user experience.

If you want to make your heading the same as your page title, click on ‘Post Title’ and that’s it. The heading will display the title of the page. What’s great is that every time you change the title of the page, it will be reflected on the heading in Elementor as well because it’s dynamic. There are many other ways you can use dynamic fields in Elementor to create pages with dynamic content.

Use Custom Positions For Image Backgrounds

Difficulty – Medium Elementor Version – Free

One of the biggest problems beginners face with Elementor is that they don’t know how to set the position of a background correctly. There are options that let you set the position, but if your background image is still not properly positioned, you should set a custom position. In the style settings of the background image, you’ll see position settings. This setting has different options such as Top Left, Top Right, Center Left, and so on. There’s also an option for custom position. Selecting the custom position option lets you set the x and y position of the image easily.

This is really helpful if your image doesn’t match the section properly with the other position options. It’s also really helpful when positioning an image for mobile devices.

Change Page Layout Settings

Difficulty – Medium Elementor Version – Free

This is just another feature many new Elementor users are not aware of. With page layout settings, you can customize the layout of your page. To change your page layout, click on the settings button at the bottom left. In the general settings section, you’ll find an option to change the page layout.

There are three different page layouts available:

• Default Layout
• Elementor Canvas
• Elementor Full Width

The default layout includes the page layout of your theme. So, if you want to create a page where you don’t want the theme style and want to create your own, you shouldn’t go for this layout. The second layout is Elementor Canvas which lets you design your page from a blank canvas. There are no theme components such as header or footer. With this layout, you start from scratch. The last layout is Elementor Full Width which makes the content full width. It also includes the header and footer. This layout is preferable when you want to design the page from scratch but want to keep the header and footer.

Add Parallax Effects

Difficulty – Medium Elementor Version – Pro

Parallax effects make the page more engaging and usable. Besides being a design feature, parallax effects help with the UX and create an immersive environment. Elementor recently launched Motion Effects which helps you add different parallax effects. There are two types of motion effects in Elementor:

• Scroll Effects
• Mouse Effects

Scroll effects are the effects when you scroll on the page. You can add vertical and horizontal scroll effects. Mouse effects help in creating a sense of depth. It makes the element move in relation to the mouse’s motion. To add these effects, select the widget to which you want to add the effect. Go to Advanced > Motion Effects.

In this tab, you’ll find the above two effects. Enable the one you want to select and customize it the way you want. You can tweak the transparency, blur, scale, rotation, and other properties of the widget.

Use Elementor Shortcuts

Difficulty – Medium Elementor Version – Free

Shortcuts can help us do simple tasks rapidly making us more productive. Elementor offers some shortcuts that you should start using to design pages quickly. Here are the different shortcuts available in Elementor:

Save Sections As Templates

Difficulty – Medium Elementor Version – Free

We already discussed how to create global widgets and use them across your website. But what if you want to reuse a section but with different content? This can be done by saving sections or widgets as a template in Elementor.

Saving A Section As Template In Elementor

To save a template, open Elementor and right-click on the section you want to save and click on ‘Save as Template’.

Give a name to your template and you’re done. Your template will be saved in the Elementor templates library. But what if you want to save the whole page as a template?

Saving A Page As Template In Elementor

Click on the green arrow icon next to the Update (Publish) button and click on the ‘Save as Template’ option.

Give a name to your template and it will be saved. You can insert your saved templates just like you insert any other template. Elementor also allows you to export templates. In your WordPress dashboard, go to Elementor > Saved Templates. From this page, you can download your saved templates in a .json format. You can then use these templates on any other website without having to recreate the entire template again.

Use Navigator

Difficulty – Easy Elementor Version – Free

I think the Navigator is the most under-utilized feature of Elementor. Navigator basically lets you navigate your entire page from a small panel. To open the navigator, click on the elements button in the panel footer of Elementor. Or you can also access it by right-clicking on any widget and selecting Navigator. With the Navigator, you can access any element by clicking on it. You can see the widgets in a section and also delete them right from the Navigator.

If you’re creating long pages, Navigator is going to be a huge help to you.

Create Anchor (Jump) Links

Difficulty – Easy Elementor Version – Free

Anchor links allow you to create a smooth scrolling navigation experience for your page. You can create anchor links (or jump links) easily with Elementor. The first step to create an anchor link is to add a menu anchor widget. Place the widget where you want the link to scroll to. The menu anchor widget is not visible on the page and takes no space.

Give a name to your anchor.

The next step is to edit the widget that you’ll be linking from. In the link field, type ‘#’ followed by the anchor ID of your menu anchor (For example – #pricing).

That’s it. Now, your widget will link to the menu anchor creating smooth scrolling navigation on your page.

Select A Correct Elementor Tag For Your Sections

Difficulty – Hard Elementor Version – Free

In Elementor, you have the option to choose among several container tags like div, main, article, section, etc. The default and the most common one is div (used by just about everyone), but others have their own purpose, and using them will help you create a semantic HTML document with a clearer distinction of hierarchy to the various search engines. So, which tag should you apply according to HTML5 semantics, and when?

1. article to a block of content that has one author (eg: Blog Post, Comment).
2. main is only allowed once and marks the main part of the top-level section.
3. sections are like book chapters; collectively they have something in common. Can be used for landing page sections.
4. aside should be used for a sidebar.
5. header and footer for the respective header, footer containers.
6. nav for a container having your navigation menu.
7. div is a general-purpose container markup and can be used for anything else.

It’s okay if you don’t exactly follow the above points (because search engines are getting very smart), but still helpful to create a proper, semantic HTML page. Tip: For a better understanding of these tags’ semantic importance, refer to this answer on Stackoverflow.

Place One Element Over Another Using Z-Index

Difficulty – Hard Elementor Version – Free

Z-index is underused in Elementor because not many users know about it. With Z-Index, you can specify the stack order of elements. This lets you have elements on top of one another. Here’s an example:

To add a Z-Index to any element, select the widget and go to Advanced > Z-Index. Here, you can change the values and set the stack order for the elements.

Place Widgets Side By Side Horizontally

Difficulty – Medium Elementor Version – Free

What if you want to place two buttons side-by-side in Elementor? Well, you can do that easily using Elementor’s inline positioning feature. To do this, first, you’ll have to add two widgets. Then, select the first widget and go to Advanced > Custom Positioning.

Here, change the width to Inline. Do the same for the second widget as well.

Use Absolute Positioning

Difficulty – Hard Elementor Version – Free

Using absolute positioning can help you design some really creative and stunning pages. Absolute Positioning allows you to place a widget anywhere. Really anywhere! Here’s one use of absolute positioning in Elementor:

As you can see, the tiny circles are positioned by dragging the widget. To set an absolute position for your widgets, select the widget and go to Advanced > Custom Positioning. Change the position to Absolute and now you will be able to freely move the widget using your mouse.

Make Your Elements Fixed

Difficulty – Medium Elementor Version – Free

Elementor allows you to make your widgets fixed in position as the page is scrolled. This feature is useful in cases where you want a fixed element such as a button on your page. To set a fixed position, select the widget and go to Advanced > Custom Positioning. Set the Position to Fixed and drag and drop the widget to position it to your desired location.

Bonus: Use 3rd Party Elementor Plugins

Difficulty – Medium Elementor Version – Free

The final Elementor pro tip is that you should start using third-party Elementor plugins. Yes, Elementor is great, but there are some awesome Elementor plugins out there that allow you to do more with your Elementor site. These plugins bring extra features and widgets to Elementor. Here are some of the best Elementor add-on plugins you can use.

Designer Powerup for Elementor

Designer Powerup for Elementor is our Elementor add-on plugin that helps designers and freelancers build websites rapidly. The plugin has features such as a page grid, blob generator widget, 20+ unique shape dividers, and more.

CrocoBlocks Elementor Plugins

CrocoBlocks has a collection of some of the best Elementor plugins on the market. They have different plugins that let you add some advanced widgets to Elementor.

Ultimate Addons For Elementor

This Elementor plugin has over 20 stunning widgets with multiple customization options. If you’re looking for some unique Elementor widgets, you should try this plugin.

Elementor Tips and Tricks are here! Do you want to enjoy your work creating websites, focus on complex tasks, and deliver projects faster? The Elementor page builder is here to help. It allows you to forget about the need to change the site code manually. Instead, you can dedicate more time to crafting more interesting and useful components of the design. Today we’ll also look at 5 super easy Elementor tips and tricks for beginners.

It will be especially helpful for people who recently started using Elementor. This is a quick Elementor tutorial that can help everyone who wants to learn a bit more about the page builder. You’ll find these small tricks that can enhance your page and make it look more interesting and modern. All you need is the free version of the Elementor page builder and nothing more. To demonstrate these hacks, we used a beautiful collection of WordPress themes from TemplateMonster marketplace. Furthermore, you’ll find a ton of other products in the marketplace for successful website building.

Gradient Button: Elementor Tips and Tricks

Since a button is an important element in creating smooth communication between the user and the application, it’s worth paying attention to its design. Using a gradient (a smooth transition of color) when creating individual components of a web page allows you to highlight those details and attract users’ attention. The Elementor button widget is required to create an interesting gradient effect of the button.

1. Go to the Style tab to adjust the necessary button settings.
2. The Button section of the Style tab allows you to choose the Background Color.
3. Proceed to the Box Shadow and pick up the color.
4. Once the color is set, navigate to the Position and select Inset there.
5. Now you can modify the position and blurriness of the gradient.

You can combine any colors to create a gradient.

Inline Text Styles: Elementor Tips and Tricks

Inline text styles are super effective when you want a visitor to the web page to pay attention to a certain part of the text and emphasize certain words. Playing with text styles is still a powerful tool to express and deliver a message in web design. You can combine text and visual elements, which will help you be able to reach the visitor. Don’t miss the trick below.

1. In the Heading widget settings, go to the text input field and type the title.
2. Wrap the words you want in angle brackets to visually emphasize them, and write the styles for properties you want to edit.

You can change colors, fonts, or any other property you want to edit.

Negative Margins: Elementor Tips and Tricks

Learn how to use negative margins to create an interesting overlapping effect. Remember, you can do this trick using numerous components and make them look amazing. Make sure you don’t ignore usability. This powerful technique will help you enhance the layout.

1. Select the Column widget > Layout tab and start adjusting the Column Width.
2. Go to the Advanced tab to add a negative margin. You will see the two columns overlap.
3. Let’s take two columns of the same height and add some margins on the top. You can add either positive or negative margins to get different designs.

Vertical Dividers: Elementor Tips and Tricks

The visual divider is a layout element that helps separate pieces of content into clear groups, sections, options, or components. This way it helps a designer arrange the page according to the standard patterns of visual perception and make the layout clearer and more digestible for users. Once you need to separate two elements, you can go to the settings of one of your columns to adjust the following values.

1. Go to the Border section and select Solid for the Border Type.
2. Adjust the Width.
3. Select the preferable color for the vertical divider.

Fixed Image Scroll: Elementor Tips and Tricks

This section shows how to make a fixed image scroll in Elementor quickly and easily. This effect is quite good and simple to implement. The background image doesn’t move when you scroll the page. The easiest way to add a parallax effect to your web page is to simply add a background image and change the attachment to Fixed.

1. Go to the Style tab of the Section widget and pull up the Background section.
2. Change the Attachment value to Fixed.

Now, when you scroll the page, the image will stay completely fixed.

Motion Shortcuts:

Undo	Ctrl / Cmd + Z	Undo any change made on the page
Redo	Ctrl / Cmd + Shift + Z	Redo any change made on the page
Copy	Ctrl / Cmd + C	Copy a Section, Column or Widget
Paste	Ctrl / Cmd + V	Paste a Section, Column or Widget
Paste Style	Ctrl / Cmd + Shift + V	Paste a Section, Column or Widget’s Style
Delete	Delete	Remove section / column / widget that is edited
Duplicate	Ctrl / Cmd + D	Duplicate section / column / widget that is edited
Save	Ctrl / Cmd + S	Save your page to the revision history

Go to shortcuts:

Panel / Preview	Ctrl / Cmd + P	Switch between the panel and preview view
Mobile Editing	Ctrl / Cmd + Shift + M	Switch between desktop, tablet and mobile views
History	Ctrl / Cmd + Shift + H	Go to the History panel
Navigator	Ctrl / Cmd + I	Opens the Navigator
Template Library	Ctrl / Cmd + Shift + L	Opens up our Template Library modal
Keyboard Shortcuts	Ctrl / Cmd + ?	Opens up Keyboard Shortcuts Help Window
Exit	ESC	Opens up Settings and jumps to Exit to Dashboard

Use Global Rows to Reuse Common Sections

This feature is great when it comes to speeding things up. Let’s say you want to show the same row on multiple areas on your website. This could be your website’s CTA row or a promotion row listing the sale details of your product. Now, what if you want to make a minor change to that row? Will you be making the change to every single row? You could, but it would take forever. To handle this problem, Elementor offers global rows. These rows are highlighted with a yellow color, and when you make any change to one row, all the other rows get changed in the same way as well. Doing this saves a ton of time and effort. You can even unlink a global row if you don’t want to make changes to other rows as well.

Image Source

Export/Import your Designs for Reuse on Another Site

Another valuable feature of Elementor is the ability to export and import templates, making it seamless to replicate and share your designs across different websites. This function allows you to duplicate the same design layout you’ve created on various sites. Here’s how you can utilize the export and import templates feature in Elementor:

Exporting Templates:

• Navigate to the “My Templates” Page: Access the “My Templates” section in your Elementor dashboard. This is where you’ll find all the templates you’ve created.
• Choose the Template to Export: Locate the template you want to export. Click on the respective template to select it.
• Click on the “Export Template” Button: Once you’ve selected the desired template, click on the “Export Template” button. This will initiate the process of creating an exportable file of the template.

Importing Templates:

• Access the “My Templates” Page: Just like when exporting, start by going to the “My Templates” section within your Elementor dashboard.
• Click on the “Import Template” Button: Within the “My Templates” section, look for the “Import Template” button and click on it.
• Choose the Template File to Import: A dialogue box will appear allowing you to select the template file you want to import. Locate the template file on your computer and choose it.
• Click on the “Import Now” Button: After selecting the template file, click on the “Import Now” button. This will initiate the process of importing the template to your current website.

This export and import templates feature proves particularly valuable when you want to replicate a layout you’ve created for one site onto another, or when you need to develop a layout locally and then effortlessly transfer it to a client’s website. It streamlines the process of sharing and maintaining consistent designs across different projects.

Find your way with Elementor Finder

The process of navigating between Elementor-designed pages can become cumbersome, especially if you’re repeatedly saving, returning to the dashboard, searching for specific pages, and reopening them in Elementor. However, Elementor has a solution to streamline this process through the Elementor Finder. This feature allows you to quickly jump to any Elementor template, page, settings, or theme element by utilizing the search bar. Here’s how you can use the Elementor Finder:

• Accessing the Elementor Finder: You can open the Elementor Finder using either of the following methods:
  • Go to Elementor Settings and look for the Finder option.
  • Use the keyboard shortcut Cmd + E (for Mac) or Ctrl + E (for Windows).
• Using the Elementor Finder: Once you open the Elementor Finder, you’ll see a search bar. This search bar allows you to quickly search for various Elementor components such as templates, pages, settings, and theme elements.
• Search for Your Target: Simply start typing in the search bar to find what you’re looking for. As you type, the Elementor Finder will start suggesting matches based on your search query.
• Select and Open: Once you see the result you’re looking for, you can select it and open it directly from the Elementor Finder. This eliminates the need to go back to the dashboard and navigate manually.

The Elementor Finder is designed to save you time and enhance your workflow by providing a quick and efficient way to jump between different Elementor elements. This is especially useful when you’re working on multiple pages or need to access various settings without the need for repetitive steps.

How To Work With Padding & Margin Settings in Elementor

Padding and margin settings are not only essential to make your page layout on all devices perfect, but also have a huge effect on the look & feel of your page. In this post, I’m going to outline the basic concept and share an example to make it easy to understand.

What is the difference between Padding and Margin?

A page built in Elementor is structured in sections, columns, and widgets with content. The margin controls how much space is outside the border of the element you’re editing. The padding controls how much space is inside the border and the content of the element you’re editing. This image from w3schools.com explains it very well.

Padding and Margin explained on w3schools.com

Let’s create a simple example in Elementor.

• Section
  • Column
    • Content

All 3 elements can have padding and margin, but in this first example, we’re only adding padding and margin at the section level.

Both the column and the headline element in the screenshot above have zero margins and padding. In the next step we make this layout more complex by adding 2 extra columns.

This is the layout without any margin or padding at the column level. The problem with this layout: Without margin and padding on column level it doesn’t look very good. Let’s add some space between columns and between content and the column border. This looks better. Now check out something more complex.

Let’s rebuild this feature section from Toggl with Elementor. The basic structure is pretty simple:

• Section with background color
  • A column with background color and inner section
  • 2 columns
    • Column 1: Headline, Text
    • Column 2: Image

In Elementor, you can set margin and padding for left, right, top and bottom. We need to customize these values for the left column to get a similar look for our section to make it more like toggl.com. By setting the values for margin to a negative value you can move the text box outside the section it’s inside. This is a fairly common design tweak these days and easy to implement with Elementor. (How to use Minus Margin – Elementor Docs) To get the exact same look as on toggl.com for this section you need to add a border radius on the inner section and the column with the text. The final step is to tweak the margin value between the text elements (or widget area on column level).

Should you use pixel or percentage value for Padding/Margin?

Using percentage values for padding, margin, and other layout elements is a crucial technique when designing responsive websites, especially those with full-width designs. This approach ensures that the design adapts gracefully to various screen sizes. Here’s a brief explanation of working with percentage and em values for responsive design:

Percentage Values for Full-Width Designs: When aiming for a full-width design on desktop, it’s advisable to use percentage values for padding and margin. This allows the layout to scale fluidly with the screen size. For example, if you set fixed pixel values for elements in a grid, they might not scale appropriately across different screens. Instead, using percentage values ensures that the layout remains visually appealing and functional regardless of screen dimensions.

Responsive Example: Changing the column’s text area from a fixed pixel value to a percentage value (e.g., from -50px to -10%) demonstrates how the white rectangle’s position remains adaptable when resizing the browser window. This dynamic behavior is crucial for ensuring your design looks good across various devices.

Em Values for Font-Related Sizing: Em values are tied to the font size of an element. For instance, if you set a default body font size of 18px and apply a setting of 2em to a specific text widget, it will double the font size to 36px. You can also reduce the font size by 50% by setting it to 0.5em. Using em sizes for fonts is advantageous because it allows you to modify your default font size once, affecting all font sizes consistently throughout your website.

Responsive Design Best Practices:

• Percentage Values: These are particularly effective for creating responsive layouts, ensuring that elements adjust proportionally to screen size changes.
• Em Values: These are useful for font-related sizing adjustments, allowing for easy, consistent changes across your entire site by modifying a single parameter.

It’s important to remember that the concept of using percentage and em values applies to responsive design in general, not just within the Elementor framework. Responsive design principles enable websites to provide optimal user experiences across a wide range of devices and screen sizes.

How to Fix Elementor Stuck On Loading Screen Error

There are many variations of ‘Elementor stuck on loading screen’. And many beginners don’t know what type of error they’re facing. If you’re stuck on the loading screen of Elementor, you could be facing these three types of issues:

1. Editor is Endlessly Loading

This is the most common Elementor loading error. With this error, you’ll see the Elementor editor loading endlessly as shown below:

This issue is usually caused by plugin or theme incompatibility issues.

2. Editor Loads a White Blank Page

Another type of loading error with Elementor is the editor loads a white blank page. This error can also be triggered due to plugin conflicts. The white blank page error in Elementor can also be triggered due to server memory issues.

3. Widget Panel is Not Loading

This type of loading error is new and causes the Elementor widgets panel to not load. Either the widget panel is completely grayed out or it loads endlessly as shown below:

Elementor says that this issue can also be caused by plugin conflicts.

How to Fix Elementor Stuck On Loading Screen Error

As per Elementor, most of the Elementor stuck on loading screen errors are triggered due to plugin conflicts. But that’s not always the case. Here are the different ways to fix these issues:

Check For Plugin Conflicts

Since Elementor says that these loading errors are triggered due to plugin conflicts, it’s better to start here. To debug this issue, check all the plugins installed on your website and see if there’s any plugin you suspect might be the reason behind the error. If the Elementor loading issue is present on your website, then check for plugins you’ve recently installed. Disable those plugins and check if the error is fixed. If you’re unable to find the culprit, then follow this plugin troubleshooting guide to only enable Elementor (and Elementor Pro if you have it) and test if it’s loading correctly again. If yes, then start activating plugins one by one and test Elementor each time. If you face the loading issue again after activating a plugin, then you’ve found the culprit. If you’re still unable to fix the problem, try the other solutions given below.

Check Your PHP Version

An outdated version of PHP or a server with limited PHP memory can also cause the ‘Elementor not loading’ issue. Elementor page builder recommends using PHP 7.0 or higher to experience the best performance while using the editor. They also recommend a preferred memory limit of 128M or higher. To update your PHP version, you can simply go to your web host admin panel and update PHP or you can contact your webmaster to do so. If you’re on an updated version of PHP and still facing the problem, then you should check if the PHP memory limit is 128M or not. To check the memory limit, go to your WordPress dashboard and navigate to Elementor > System Info.

On this page, you’ll find the memory limit under the ‘WordPress Environment’ information. If your memory limit is below 128M, you should increase it. To do this, you’ll have to edit the wp-config.php file. This file is located in your WordPress root directory. You can access the wp-config.php file via your cPanel or by using a File Manager in WordPress. Open the wp-config.php file and search for “/* That’s all, stop editing! Happy blogging. */”. Add the following code right above this line: define('WP_MEMORY_LIMIT', '128M'); Save the file and return to the Elementor system info page to check if the memory limit is increased. If the changes are updated successfully, open the Elementor editor and test if the issue is resolved.

Change Editor Loading Method

Elementor has an option to switch the loading method for the builder. There isn’t enough information on how it works, but Elementor suggests switching the method if you’re having problems with the editor. To find this option, go to your WordPress dashboard and navigate to Elementor > Settings > Advanced.

In the Advanced tab, you’ll find an option to switch the editor loader method. By default, this feature is disabled. Enable this feature and test if the editor loads successfully.

Key Takeaways

• Mastering copy/paste shortcuts can dramatically speed up your workflow.
• Global widgets ensure consistency across your entire website.
• Custom fonts and dynamic fields add a professional touch.
• Responsive design requires careful use of padding, margin, and percentage values.
• Regular troubleshooting of plugin conflicts and PHP settings keeps Elementor running smoothly.
• Use absolute and fixed positioning sparingly and always check mobile views.
• Third-party add-ons can extend Elementor’s power but install only trusted ones.

Frequently Asked Questions (FAQ)

1. How do I copy a widget style in Elementor?

Right-click the widget with the desired style, select “Copy Style,” then right-click the target widget and select “Paste Style.”

2. Can I use custom fonts in Elementor free?

No, custom font uploads require Elementor Pro.

3. What’s the difference between a global widget and a saved template?

A global widget updates everywhere when edited; a saved template remains static unless manually updated.

4. How do I fix Elementor not loading?

Check for plugin conflicts, update PHP version, increase memory limit, or switch the editor loading method in Elementor settings.

5. What are the best third-party add-ons for Elementor?

Popular options include PowerPack, CrocoBlocks, Ultimate Addons for Elementor, and Designer Powerup for Elementor.

6. How do I make my Elementor site faster?

Use a caching plugin (WP Rocket or W3 Total Cache), optimize images with Smush or ShortPixel, enable a CDN (Cloudflare), and minimize external scripts.

7. Can I use Elementor with any WordPress theme?

Elementor works with most WordPress themes, but it performs best with lightweight, Elementor-compatible themes like Hello Theme (by Elementor), Astra, or GeneratePress.

8. How do I make a sticky header in Elementor?

Go to the section containing your header, navigate to Advanced > Motion Effects, and enable “Sticky” with “Top” as the position. For the entire header, ensure the section has a background color to avoid transparency when sticky.

Conclusion

Once you install the Elementor page builder, you have the power to create web pages by adding various ready-made blocks (widgets). You can forget about touching the code because you’ll now be able to visualize your website with a few clicks of the mouse. Hopefully, you have found these Elementor hacks useful for your web design journey. Such simple Elementor tips are great for people who have just started using Elementor and those who want to accelerate their website building process.

Remember that mastering Elementor takes time. Start with the basics—copy/paste, global widgets, and templates—then gradually explore advanced features like motion effects, custom positioning, and dynamic fields. Keep your plugin count low, test changes on staging first, and always optimize for mobile. With consistent practice, you’ll build professional, high-converting websites faster than ever before.

Now go ahead and apply these tips to your next Elementor project. Happy building!