Top Elementor Tips & Tricks

49 min read
Table Of Contents hide

Top Elementor Tips & Tricks

Ever since I began utilizing Elementor, I by no means looked back. This web page builder is so superior that it made me keep on with it ever because it was launched. Through the years, I’ve used Elementor to build many web sites. This helped me study rather a lot about Elementor and create distinctive pages.

For those who’re new to Elementor or have been utilizing it for some time now, you have to’ve been on the lookout for some useful ideas and methods, proper? There are lots of methods you possibly can make the most of this web page builder and create pages rapidly without a lot trouble. On this article, I’m going to point out you the best Elementor ideas and methods that you simply should begin implementing NOW. Right here’s how these Elementor ideas and methods are going that can assist you:

    • Enhance your workflow and assist you build pages sooner.
    • Use superior features so as to add visible aptitude to your pages.
    • Build skilled pages in Elementor.


Elementor Ideas & Tips

I’ve lined all of the best Elementor ideas and methods on this article. Let’s begin with an important and the simplest tip that may prevent numerous time and enhance your workflow.

Copy/Paste Widgets & Sections Quickly

Issue – Straightforward Elementor Model – Free Ever come throughout sections or widgets that you should reuse in a web page or between pages? I see many Elementor customers duplicate a widget after which drag all of it the way in which to the realm the place they need to place it. That’s what I used to do once I first began utilizing Elementor. It’s very inefficient and time-consuming particularly in case your web page is long. As an alternative, you possibly can simply copy/paste widgets and sections in Elementor. Right here’s how you are able to do it:

Copy/Paste Widgets or Sections Immediately

Proper click on on the widget or part and click on ‘Copy’. Now, proper click on on the realm the place you need to paste the widget or part and click on ‘Paste’. Elementor - Copy And Paste Voila! It’s that straightforward.

Copy/Paste Style Of Widgets or Sections

Do you apply the identical type to all of your widgets/sections manually? It can save you your time by simply copying the type of 1 widget and pasting it on some other widget you need to. Elementor - Paste Style That is very helpful in circumstances when you need to apply the identical measurement or shade to an icon or a picture. Copying and pasting kinds this fashion will get the job completed a lot sooner. I like to recommend this observe to each new Elementor consumer because it’s tremendous easy and environment friendly.

Use Global Widgets Efficiently

Issue – Medium Elementor Model – Professional When you get across the behavior of utilizing copy/paste for reusing widgets, you can begin with world widgets. Elementor comes with a function of worldwide widgets that allow you to outline a widget and use it throughout totally different pages. As soon as a widget is outlined as world, any adjustments made to will probably be efficient on all of the pages the place the widget is added. It is a golden function in case you have a web site with so many pages which have the identical widget. For instance – a CTA button, testimonials, and so on. With world widgets, all you need to do is edit the part in a single place, and the adjustments can be utilized wherever that widget is current. Right here’s the right way to use a world widget in Elementor: Let’s say I need to set this CTA part as world: To do that, proper click on on the widget and click on on ‘Save as a International’. Give a reputation to your widget and click on Save. Save Global Widget - Elementor As soon as your widget is transformed into a world widget, you’ll see a yellow border round it. You may edit a world widget identical to you edit any regular widget. You may add your newly created world widget from the worldwide tab in Elementor to totally different pages. However, understand that adjustments to a world widget are utilized to all of the locations the place that widget is positioned. Use world widgets only when crucial with a view to keep away from conflicts.

Upload Your Own Fonts

Issue – Medium Elementor Model – Professional Elementor has a large assortment of fonts from Google Fonts that you should utilize to create gorgeous pages. However, if you happen to’re like me and need to stand out from the group, you’d use customized fonts. In Elementor, you possibly can add your individual fonts and use them in your pages. We listed here are Pixify additionally use customized fonts on our web site. Right here’s the right way to add customized fonts in Elementor: In your WordPress dashboard, go to Elementor > Customized Fonts. From the customized fonts web page, click on on ‘Add New’ to add your customized font. Upload Custom Fonts In Elementor You’ll be required to add the font within the following codecs:

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

It’s not advisable to add all of the codecs however it’s a good observe in order that your fonts are seen throughout totally different browsers. For those who don’t have all of the codecs of your font, you should utilize a font converter like this one to create totally different codecs of your font. Additionally, ensure you add all of the variations of your fonts. Whereas importing customized fonts on Elementor, you possibly can choose the font weight and magnificence.

Add Entrance Animation To Your Widgets/Sections

Issue – Medium Elementor Model – Free Even some refined visible components can change the entire UX of your web site. And, you are able to do that by including entrance animation results to your widgets and sections. Elementor presents nice features so as to add animations to your widgets. Right here’s how one can add an entrance animation impact in Elementor: Choose the widget and go to Superior > Movement Results. Adding Entrance Animation In Elementor From this tab, choose the doorway animation to your widget. There are lots of choices to select from. You too can set an animation period and delay for the widget.

Add Shape Dividers

Issue – Straightforward Elementor Model – Free I feel you most likely used this function in your web site. Form dividers are dividers which are added to the top/backside of a piece. As an alternative of utilizing plain dividers in your web page, you possibly can add form dividers to make your pages look a lot better. So as to add a form divider, choose the part the place you need to add a form divider and go to Fashion > Form Divider. Top Elementor Tips & Tricks You may select to display the form divider on the top or backside of the part. There are over 15 form dividers to select from. Top Elementor Tips & Tricks As soon as you choose your most popular form divider, you’ll have the ability to customise the colour, change the peak, flip the divider, and produce it to the entrance.

Add Filter Effects To Your Photographs

Issue – Straightforward Elementor Model – Free I’m certain you’ve completed fundamental picture customization on Elementor akin to altering the alignment, picture measurement, and width. However, are you aware you are able to do fundamental picture editing inside Elementor? Within the Fashion tab of the picture widget, there’s an possibility known as CSS Filters. With CSS Filters, you are able to do fundamental editing in your photographs. Add CSS Filter To Images You may tweak the brightness, distinction, saturation, and hue of the picture. You may even blur the picture. CSS Filters In Elementor That’s so superior! This function is useful once you’ve uploaded a picture that wants fundamental tweaks to make it look higher on the web page.

Set Default Fonts

Issue – Straightforward Elementor Model – Free Bored with altering fonts each time you create a web page? You may set a default font and by no means fear about altering fonts ever once more. How? Elementor allows you to select the default font of your web site. Right here’s how one can set default fonts: Click on on the top-left hamburger menu in Elementor. This can open the type and settings configuration menu. Right here, you’ll see an possibility for default fonts. Click on on this feature and set the default fonts. You may select totally different fonts for the first heading, secondary heading, physique textual content, and accent textual content. Choosing Default Fonts In Elementor When you’ve chosen the default fonts, they’ll be chosen mechanically everytime you edit a web page. Notice: The default fonts won’t be utilized wherever you’ve explicitly utilized a font.

Set Default Colours

Issue – Straightforward Elementor Model – Free Identical to fonts, you may also select default colours in Elementor. However in contrast to the default fonts, this function merely provides your chosen colours to the Elementor’s shade picker pre-set. It’s nonetheless a helpful function as you don’t have to repeat and paste a shade code each single time. To set default colours, click on on the Elementor hamburger menu on the top left and click on on Default Colours. Default Colors - Elementor Page Builder You may select a main, secondary, physique, and accent colours. There are additionally pre-made palettes you possibly can select as your default colours.

Add A Full Height Section

Issue – Straightforward Elementor Model – Free Do you need to add a piece that covers the entire browser display? You may create a full peak part simply with Elementor. Choose the part that you simply need to make full peak. Within the structure settings, click on on the peak and set it to ‘Match To Display’. Create A Full Height Section In Elementor This can mechanically match the entire part to the browser display.

Add Video Backgrounds

Issue – Medium Elementor Model – Free Video backgrounds look gorgeous and fortunately, you possibly can add video backgrounds to your web page with ease. Right here’s how one can add video backgrounds in Elementor: Choose the part and go to Fashion > Background. Change the background type within the background settings to a video. Add Video Background In Elementor When you select Video, you’ll have so as to add the hyperlink to the video. You may even set the beginning time and the top time of the video. There’s additionally an possibility to decide on a fallback picture. This picture replaces the background video on tablets and cell units.

Use Custom Dynamic Fields

Issue – Onerous Elementor Model – Free Customized Dynamic Fields will not be utilized by many individuals utilizing Elementor. Actually, only superior Elementor customers are conscious of this function. With this function, you possibly can display dynamic content material in your pages without including any third celebration plugin or extension. Dynamic fields will not be only for textual content or heading fields. You should use dynamic content material on hyperlinks, buttons, photographs, and extra. Right here’s the right way to use dynamic fields in Elementor: Let’s say you created a web page and need to add the title of that web page in Elementor. Now, as a substitute of typing the title, you should utilize dynamic fields to display the title mechanically. Click on on the Heading widget and go to the content material tab. Within the title discipline, click on on ‘Dynamic’. This can present you all of the dynamic fields you possibly can choose for the heading. 23 Elementor Tips And Tricks To Improve Your Workflow If you wish to make your heading the identical as your web page title, click on on ‘Post Title’ and that’s it. The heading will display the title of the web page. What’s nice is that everytime you change the title of the web page, will probably be mirrored on the heading in Elementor as well because it’s dynamic. There are lots of different methods you should utilize dynamic fields in Elementor to create pages with dynamic content material.

Use Customized Positions For Image Backgrounds

Issue – Medium Elementor Model – Free One of many largest issues freshmen face with Elementor is that they don’t know the right way to set the place of a background correctly. There are alternatives that allow you to set the place but when your background picture remains to be not correctly positioned, you should set a customized place. Within the type settings of the background picture, you’ll see place settings. This setting has totally different choices akin to Prime Left, Prime Proper, Heart Left, and so on. There’s additionally an possibility for the customized place. Selecting the customized place possibility allows you to set the x and y place of the picture simply. 23 Elementor Tips And Tricks To Improve Your Workflow That is actually useful in case your picture doesn’t match the part correctly with the opposite place choices. It’s additionally actually useful when positioning a picture for cell units.

Change Page Layout Settings

Issue – Medium Elementor Model – Free That is simply one other function many new Elementor customers will not be conscious of. With web page structure settings, you possibly can customise the structure of your web page. To vary your web page structure, click on on the settings button on the backside left. Within the basic settings part, you’ll discover an possibility to vary the web page structure. Change Page Layout In Elementor There are three totally different web page layouts obtainable:

  • Default Format
  • Elementor Canvas
  • Elementor Full Width

The default structure consists of the web page structure of your theme. So, if you wish to create a web page the place you don’t need the theme type and need to create your individual, you shouldn’t go for this structure. The second structure is Elementor Canvas which helps you to design your web page from a clean canvas. There aren’t any theme components akin to header or footer. With this structure, you begin from scratch. The final structure is Elementor Full Width which makes the content material full width. It additionally consists of the header and footer. This structure is preferable once you need to design the web page from scratch however need to hold the header and footer.

Add Parallax Results

Issue – Medium Elementor Model – Professional Parallax results make the web page extra participating and usable. Moreover being a design function, parallax results assist with the UX and create an immersive setting. Elementor lately launched Movement Results which helps you to add totally different parallax results. There are two varieties of movement results in Elementor:

  • Scroll Results
  • Mouse Results

Scroll results are the consequences once you scroll on the web page. You may add vertical and horizontal scroll results. Mouse results will help in creating a way of depth. It makes the factor transfer in relation to the mouse’s motion. So as to add these results, choose the widget to which you need to add the impact. Go to Superior > Movement Results. Elementor - Motion Scrolling Effects On this tab, you’ll discover the above two results. Allow the one you need to select and customise it the way in which you need. You may tweak the transparency, blur, scale, rotation, and different properties of the widget.

Use Elementor Shortcuts

Issue – Medium Elementor Model – Free Shortcuts will help us do easy duties rapidly making us extra productive. Elementor presents some shortcuts that you simply should begin utilizing to design pages rapidly. Listed below are the totally different shortcuts obtainable in Elementor: Keyboard Shortcuts In Elementor

Save Sections As Templates

Issue – Medium Elementor Model – Free We already mentioned how one can create world widgets and use them throughout your web site. However, what if you wish to reuse a piece however with totally different content material. This may be completed by saving sections or widgets as a template in Elementor.

Saving A Part As Template In Elementor

To save lots of a template, open Elementor and right-click on the part you need to save and click on on ‘Save as Template’. Elementor - Save A Widget Give a reputation to your template and also you’re completed. Your template can be saved within the Elementor templates library. However, if you wish to save the whole web page as a template?

Saving A Page As Template In Elementor

Click on on the inexperienced arrow icon subsequent to the Replace (Publish) button and click on on the ‘Save as Template’ possibility. Elementor - Save A Page Give a reputation to your template and will probably be saved. You may insert your saved templates identical to you insert some other template. Elementor additionally permits you to export templates. In your WordPress dashboard, go to Elementor > Saved Templates. From this web page, you possibly can obtain your saved templates in a .json format. You may then use these templates on some other web site without having to recreate the entire template once more.

Use Navigator

Issue – Straightforward Elementor Model – Free I feel the Navigator is probably the most under-utilized features of Elementor. Navigator principally allows you to navigate your complete web page from a small panel. To open the navigator, click on on the weather button within the panel footer of Elementor. Or you may also entry it by right-clicking on any widget and choose Navigator. With the Navigator, you possibly can entry any factor by clicking on it. You may see the widgets in a piece and in addition delete them proper from the Navigator. Elementor - Navigator For those who’re creating long pages, Navigator goes to be an enormous assist to you.

Create Anchor (Jump) Links

Issue – Straightforward Elementor Model – Free Anchor hyperlinks allow you to create a clean scrolling navigation expertise to your web page. You may create anchor hyperlinks (or soar hyperlinks) simply with Elementor. Step one to create an anchor listing is so as to add a menu anchor widget. Place the widget the place you need the hyperlink to scroll to. The menu anchor widget will not be seen on the web page and takes no area. Elementor - Menu Anchor Give a reputation to your anchor. Elementor - Menu Anchor Name The subsequent step is to edit the widget that you simply’ll be linking to. Within the hyperlink discipline, type ‘#’ adopted by the anchor identify of your menu anchor (For instance – #pricing). Elementor - Menu Anchor Link That’s it. Now, your widget will hyperlink to the menu anchor creating clean scrolling navigation in your web page.

Select A Correct Elementor Tag For Your Sections

Issue – Onerous Elementor Model – Free In Elementor, you might have the choice to decide on amongst a number of container tags like div, essential, article, part, and so on. The default and the commonest one is div (used just about by everybody), however others have their very own function, and utilizing them will assist you create a semantic HTML doc with a clearer distinction of hierarchy to the various search engines. So, which tag should you apply in keeping with HTML5 semantics, and when?

  1. article to a block of content material that has 1 writer (eg: Weblog Post, Remark).
  2. essential is only allowed as soon as and marks the primary a part of the top-level part.
  3. sections are like guide chapters, collectively they’ve one thing in widespread. Can be utilized for the touchdown web page sections.
  4. apart 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 utilized for anything aside from this.

It’s okay if you happen to don’t precisely comply with the above factors (as a result of Search Engines have gotten very sensible), however nonetheless helpful to create a correct, semantic HTML web page. Tip: For a greater understanding of those tags’ semantic significance, discuss with this answer on Stackoverflow.

Place One Element Over Another Using Z-Index

Issue – Onerous Elementor Model – Free Z-index is underused in Elementor as a result of not many customers find out about it. With Z-Index, you possibly can specify the stack order of components. This lets you have components on top of one in every of one other. Right here’s an instance: Elementor - Z-Index So as to add a Z-Index to any factor, choose the widget and go to Superior > Z-Index. Right here, you possibly can change the values and set the stack order for the weather.

Place Widgets Facet By Facet Horizontally

Issue – Medium Elementor Model – Free What if you wish to place two buttons side-by-side in Elementor? Properly, you are able to do that simply utilizing Elementor’s inline positioning function. To do that, first, you’ll have so as to add two widgets. Then, choose the primary widget and go to Superior > Customized Positioning. 23 Elementor Tips And Tricks To Improve Your Workflow Right here, change the width to Inline. Do the identical for the second widget as well.

Use Absolute Positioning

Issue – Onerous Elementor Model – Free Utilizing absolute positioning will help you design some actually artistic and gorgeous pages. Absolute Positioning permits you to place a widget anyplace. Actually anyplace! Right here’s one use of absolute positioning in Elementor: Elementor - Absolute Positioning Use Case As you possibly can see, the tiny circles are positioned by dragging the widget. To set an absolute place to your widgets, choose the widget and go to Superior > Customized Positioning. Change the place to Absolute and now it is possible for you to to freely transfer the widget utilizing your mouse. Elementor - Absolute Positioning

Make Your Elements Fixed

Issue – Medium Elementor Model – Free Elementor permits you to make your widgets mounted able because the web page is scrolled. This function is useful in circumstances the place you desire a mounted factor akin to a button in your web page. To set a hard and fast place, choose the widget and go to Superior > Customized Positioning. Set the Place to Mounted and drag and drop the widget to position it to your required location. Elementor - Fixed Positioning

Bonus: Use 3rd Party Elementor Plugins

Issue – Medium Elementor Model – Free The final Elementor professional tip is that you simply should begin utilizing third-party Elementor plugins. Sure, Elementor is nice however there are some superior Elementor plugins on the market that allow you to do extra together with your Elementor website. These plugins carry further features and widgets to Elementor. Listed below are a few of the best Elementor add-on plugins you should use.

Designer Powerup for Elementor

Designer Powerup for Elementor is our Elementor add-on plugin that helps designers and freelancers build web sites rapidly. The plugin has features akin to a web page grid, blob generator widget, 20+ distinctive form dividers, and extra.

CrocoBlocks Elementor Plugins

CrocoBlocks has a group of a few of the best Elementor plugins on the market. They’ve totally different plugins that allow you to add some superior widgets to Elementor.

Ultimate Addons For Elementor

This Elementor plugin has over 20 stunning widgets with a number of customization choices. For those who’re on the lookout for some distinctive Elementor widgets, you should try this plugin. Elementor Ideas and Tips are right here! Do you need to take pleasure in your work creating web sites, give attention to complicated duties, and deliver initiatives sooner? An Elementor web page builder is right here to assist. It permits you to neglect about the necessity to change the location code manually. As an alternative, you possibly can dedicate extra time to crafting extra fascinating and helpful components of the design. At the moment we’ll try 5 tremendous easy Elementor ideas and methods.

It will likely be particularly helpful for individuals who lately began utilizing Elementor. It is a quick Elementor tutorial that may assist everybody who desires to study a bit extra in regards to the web page builder. You can see these 5 small methods that may enhance your web page and make it look extra fascinating and really fashionable. All you want is a free model of the Elementor web page builder and nothing extra. To reveal these hacks, we used a stupendous assortment of WordPress themes from TemplateMonster market. Furthermore, you’ll find a ton of different products within the market for profitable web site building.

Gradient Button: Elementor Ideas and Tips

Since a button is a crucial factor in creating clean communication between the consumer and the applying, it’s price listening to its design. Utilizing a gradient (a clean transition of shade) when creating particular person components of a web web page permits you to spotlight these particulars and appeal to the customers’ consideration. The Elementor button widget is required to create an fascinating gradient impact of the button.

  1. Go to the Fashion tab to regulate the mandatory button settings.
  2. The Button part of the Fashion tab permits you to select the Background Shade. Gradient-Button_2
  3. Proceed to the Field Shadow and pick up the colour. Gradient-Button_3
  4. As soon as the colour is about, navigate to the Place and select Inset there. Gradient-Button_4
  5. Now you possibly can modify the place and blurriness of the gradient. Gradient-Button_5

You may mix any colours to create a gradient.

Inline Text Styles: Elementor Tips and Tricks

Inline textual content kinds are tremendous efficient once you desire a customer to the web web page to concentrate to a sure a part of the textual content and emphasize sure phrases. Enjoying with textual content kinds remains to be a strong tool to precise and deliver a message in web design. You may mix textual content and visible parts, which is able to assist you have the ability to attain the customer. Don’t miss the trick below.

  1. Within the Heading widget settings, go to the textual content enter discipline and type the title.
  2. Wrap the phrases you need in angle brackets to visually emphasize them, and write the kinds for properties you need to edit.

Inline-Text-Styles_2 You may change colours, fonts, or some other property you need to edit.

Negative Margins: Elementor Tips and Tricks

Discover ways to use destructive margins to create an interesting overlapping impact. Bear in mind, you are able to do this trick utilizing numerous components and make them look wonderful. Be sure to don’t ignore usability. This highly effective method will assist you enhance the structure.

  1. Select the Column widget > Format tab and begin adjusting the Column Width.
  2. Go to the Superior tab so as to add a destructive margin. You will notice the 2 columns overlap.
  3. Let’s take two columns of the identical peak and add some margins on the top. You may add both optimistic or destructive margins to get totally different designs.

Vertical Dividers: Elementor Tips and Tricks

The visible divider is a structure factor that helps separate items of content material into clear teams, sections, choices, or components. This fashion it helps a designer arrange the web page in keeping with the standard patterns of visible notion and make the structure clearer and extra digestible for customers. As soon as you should separate two components, you possibly can go to the settings of one in every of your columns to regulate the next values.

  1. Go to the Border part and select Strong for the Border Kind.
  2. Modify the Width.
  3. Choose up the preferable shade for the vertical divider.


Fixed Image Scroll: Elementor Tips and Tricks

This part reveals the right way to make a hard and fast picture scroll in Elementor quick and easy. This impact is sort of good and easy to implement. The background picture doesn’t transfer once you scroll the web page. The best method so as to add a parallax impact to your web web page is to easily add a background picture and alter the attachment to Mounted.

  1. Go to the Fashion tab of the Part widget and pull up the Background part.
  2. Change the Attachment worth to Mounted.

Fixed-Image-Scroll_2 Now, once you scroll the web page, the picture will keep utterly mounted.


Motion Shortcuts:

UndoCtrl / Cmd + ZUndo any change made on the web page
RedoCtrl / Cmd + Shift + ZRedo any change made on the web page
CopyCtrl / Cmd + CCopy a Part, Column or Widget
PasteCtrl / Cmd + VPaste a Part, Column or Widget
Paste FashionCtrl / Cmd + Shift + VPaste a Part, Column or Widget’s Fashion
DeleteDeleteTake away part / column / widget that’s edited
DuplicateCtrl / Cmd + DDuplicate part / column / widget that’s edited
SaveCtrl / Cmd + SSave your web page to the revision historical past

Go to shortcuts:

Panel / PreviewCtrl / Cmd + PSwap between the panel and preview view
Cell EditingCtrl / Cmd + Shift + MSwap between desktop, tablet and cell views
Historical pastCtrl / Cmd + Shift + HGo to the Historical past panel
NavigatorCtrl / Cmd + IOpens the Navigator
Template LibraryCtrl / Cmd + Shift + LOpens up our Template Library modal
Keyboard ShortcutsCtrl / Cmd + ?Opens up Keyboard Shortcuts Assist Window
Give upESCOpens up Settings and jumps to Exit to Dashboard

Save Sections for Reuse

Let’s say you designed a row which appears good and also you want to use the identical row someplace else as well. What do you do on this case? In fact, you won’t be redesigning it time and again for each occasion you need to use it. For this, saving the row and reusing it involves the rescue. Each row that you simply design may be saved and can be utilized in different components of your web site as well. This provides rather more freedom to customers relating to speed and fast entry as well. Top Elementor Tips & Tricks

Define your Color Palette

Now, once we are designing a web site or a webpage, we normally comply with a sample for the design which may be some shade mixtures that can be repeated. We don’t randomly choose a shade out of the blue, proper? (no pun supposed!). For this, selecting the colour each time from the colour palette or getting into the colour code can take numerous time. However to not fear, Elementor has an answer for that as well. You may add your colours to paint picker anytime by going to the settings and including colours to the pallet there. If you add your customized shade to the colour palette, it would all the time present up in customs colours within the shade palette. Additionally Learn: How to Sky Rocket your Web Design Business with Elementor Top Elementor Tips & Tricks

Use Global Rows to Reuse Common Sections

This function is nice relating to rushing issues up. Let’s say you need to present the identical row on a number of areas in your web site. This may be your Web site’s’ CTA row or a promotion row itemizing the sale particulars of your product. Now, what if you wish to make a minor change to that row. Will you be making the change to each single row? You may, however it would take endlessly. To deal with this downside, Elementor presents world rows. These rows are highlighted with yellow shade, and once you make any change to at least one row, all the opposite rows get modified in the identical method as well. Doing this protects numerous time and efforts. You may even unlink a world row in case you don’t want to make adjustments to different rows as well. Top Elementor Tips & TricksImage Source

Export/Import your Designs for Reuse on Another Site

Each other useful function is exporting and importing templates. With elementor, you possibly can simply export and import the templates on/out of your web site. This function will let you copy the identical design format that you’ve got designed to different web sites as well. For this, you go to my templates web page after which click on on the export template button for the respective template. Identical method if you wish to import a template, you are able to do that too by merely clicking on the import template button within the My templates tab. Then click on on the Import templates button on the top proper nook and choose the template and add it. This function comes useful when you need to make a structure to your consumer’s website domestically after which later need to export it to the consumer’s web site as it may be completed with tremendous simply. Top Elementor Tips & Tricks

Navigate through the sections using Navigator

Elementor has lately added the navigator on their web page builder. Personally, I consider it is without doubt one of the best features of Elementor that may assist you in rushing issues up. Consider navigator as Navigation tree window which gives you easy entry to each factor within the Web page Builder. This little window permits you to drag and drop the weather and customise them simply. This tool is most helpful with long pages or pages with a number of components and even the pages with complicated multi-layered designs. You may simply entry the navigator window by proper clicking on any widget and choosing the navigation possibility from the listing, or since we’re speaking about speed, you possibly can open it up by utilizing the Cmd/Ctrl + I command. Top Elementor Tips & Tricks

Configure the Basics

If you end up making a web web page, some settings could also be much like all rows of the web page. For this, as a substitute of fixing the identical setting for each row and ultimately losing numerous time, you possibly can remove redundancy with the assistance of International Settings. You may set Default Fonts for circumstances the place the chosen font will not be obtainable. You too can outline your customized content material width for the rows and in order for you your widgets to have some area between them, it may be completed as well utilizing the International Settings. Top Elementor Tips & Tricks

Find your way with Elementor Finder

Generally when you’re designing a number of pages or need to toggle from one elementor designed web page to a different web page, it may be time-consuming if you happen to save the web page > return to your dashboard > seek for the web page > after which open the web page once more in Elementor. This could take numerous your time if you happen to needed to do it time and again. As an alternative of going via all that hassle, you possibly can merely use the Elementor Finder. With this function, you possibly can instantly soar to any Elementor template, web page, settings, or a theme half by merely looking within the search bar. You may entry the Finder from Elementor Settings or with the Cmd/Ctrl + E keys. Take a look at this video and see what all you are able to do with Finder. 3_hqdefault

Use Elementor Add-ons

One other nice method to improve your Elementor Customization is by utilizing third Social gathering Elementor Addons. One of the vital in style addons is PowerPack for Elementor. PowerPack presents greater than 40 widgets that you should utilize with Elementor. You may try the Free Lite version of PowerPack as well, which presents 25+ artistic widgets to boost your customization. If you wish to take your design and speed game to a different degree, then try our Pro version of PowerPack Addon. With 40+ creative widgets at your disposal, it is possible for you to to do much more and that too in a lot lesser time. Check out the PowerPack addon for Elementor. Top Elementor Tips & TricksElementor has a reasonably good set of tools that you should utilize to your web site, and with the information talked about above, I’m certain it is possible for you to to spice up your web design speed considerably. Which tip did you discover probably the most useful? And if you happen to discovered this piece of content material helpful, do share it with others! ?

Gradient button

  1. Click on on a crucial button and make it greater for a cushty adjusting.
  2. Discover on the Fashion tab the Button configuration part.
  3. Go to Field shadow and pick a fascinating shade.
  4. Go to Place and select Insert.
  5. Modify the horizontal, vertical, blur and unfold indicators to create a novel gradient button.

Inline text styles

  1. Go to settings of Heading widget;
  2. Kind phrases on the title enter discipline;
  3. Wrap the phrase you need to change in angle brackets;
  4. To vary the colour write

<span type=”shade:#4B79B6”>your_word</span>

  1. To vary font-weight write

<span type=”font-weight:800;” >your_word</span>

  1. To vary font type write

<span type=”font-style:italic;” >your_word</span>

Negative margins

Adjusting destructive margins, you possibly can create an overlapping impact.

  1. On the column widget go to the structure tab.
  2. Change the Column width and see the way it appears.
  3. Go to the superior settings > margin.
  4. Add a destructive margin to see how the columns overlap.
  5. Additionally, you possibly can add on the top optimistic margins and on the backside destructive margins to make totally different designs.

Vertical divider

This trick could make a extra colourful and structural web page design. Separating columns with vertical dividers assist additionally to focus extra on the textual content sections.

  • Go to the column settings -> Border settings.
  • Select Strong on the Border type.
  • Then you possibly can modify the width and shade of the fascinating vertical divider.

Parallax Image Scroll

This expertise is gaining reputation increasingly these days as a result of it appears very cool. Many suppose that to realize such an impact, code expertise are crucial. However with Elementor web page builder you are able to do it with a number of clicks.

  • First, you should go to the Part> Fashion tab.
  • Add a background picture to the web site web page.
  • On the attachment tab select Mounted.

Now, once you scroll your web page, the picture will keep nonetheless, making a parallax impact.

The best way to add the Parallax – Mounted Impact

Parallax Fixed Background - Basic Elementor Plugin TricksParallax Background – Instance from Rife WP Theme Calling this Parallax Impact, on this case, is exaggerated as a result of the creators of the Elementor didn’t resolve to create a configurable system for setting the scrolling speed or different parameters, they used the mounted background, so a background picture doesn’t transfer with the content material and keep only in a single place. Perhaps someday Elementor could have extra potentialities to configure this factor, however for now, now we have to make use of the mounted built-in possibility.

Tutorial – Including the Parallax – Mounted Background

  1. Select a piece by which you need to apply Mounted Impact and click on on the Edit icon.
  2. Go to the “Fashion” tab.
  3. Select the “Background Kind – Traditional” icon and add any picture out of your media library.
  4. Right here you possibly can select the place of the picture. I wouldn’t have any particular ideas right here, select a place at your individual discretion.
  5. This level is essential and right here we will set the parallax impact. Choose “Mounted” from the “Attachment” possibility.

Necessary word to recollect: “Attachment Mounted works only on the desktop”.

How to add the Full Height Section

Full Height Section - Elementor Tutorials, Tips & TricksFull Top Part – Example from Rife WordPress Theme Many web sites use this impact to point out readers their product or service, akin to Microsoft, Buffy or Ember. We’ve got additionally been tempted so as to add this to some of our designs like Dancer and Chillout II. I usually come throughout the query – the right way to prolong the web page background to the complete peak, so I am going throughout all of the questioners and presents the way in which the right way to do it within the Elementor.

Tutorial – Including the Full Top Part

  1. Select a piece by which you need to add Full Top and click on on the Edit icon.
  2. Within the Format tab go to the Top parameter and select “Match to Display” possibility from the dropdown listing.


Tutorial – Including the Form Divider

  1. Select a piece by which you need to apply Form Divider and click on on the Edit icon.
  2. Go to the “Fashion” tab.
  3. Increase the Form Divider tab. Bear in mind that you would be able to select the Prime and Backside divider.
  4. Select your divider type from the dropdown listing within the Kind parameter.
  5. Beneath every Kind, you possibly can set many different kinds like Shade, Width, Top, Flip, Invert. Play with these settings and discover your best look.

You may select from many fancy kinds like Waves, Mountains, Tilts, Triangles, Drops, Curves, Piramides, Wave Brushes, Zigzags, Clouds, Books and lots of extra.

How to change the defaults Fonts & Colors

Custom Fonts & Colors - Elementor Tutorials, Tips & TricksEach trendy website in present occasions should use extra fascinating options than utilizing the Arial font. With assist come prepared and free options that completely well, Google Fonts, that are fairly often applied in builders together with Elementor. As well as, every separate textual content widget akin to Heading has a built-in possibility that permits you to change every font individually. Within the instance below, however, I’ll only take care of the change of fonts for International settings. International settings make it very easy to work as a result of there isn’t any want to vary every widget individually.

Tutorial – Altering the Default Fonts

  1. Click on on the Hamburger icon within the top left nook.
  2. Within the Fashion part click on the “Default Fonts”.
  3. Right here you possibly can change settings for the Major & Secondary Headlines, Physique Textual content and Accent Textual content.

Necessary! You should verify your adjustments by clicking the inexperienced “Apply” button because it seems.

Tutorial – Altering the Default Colours

Custom Fonts & Colors Steps - Elementor Tutorials, Tips & Tricks

  1. Click on on the Hamburger icon within the top left nook.
  2. Within the Fashion part click on the “Default Colours”.
  3. Right here you possibly can change colours for every part like Major, Secondary, Textual content, and Accent. You too can select predefined shade palettes made by the Elementor Staff.

Necessary! You should verify your adjustments by clicking the inexperienced “Apply” button because it seems.

The best way to add the Picture (or Icon) with Textual content

Text with Image on the Left - Elementor Tutorials, Tips & Tricks Textual content with Picture on the Left – Example from Raven Free Presentation of your companies is without doubt one of the key components of a well-designed web site. Widgets built-in Elementor permit us to simply create any presentation web page. Instruments that we will use permit us so as to add graphics created by you or choose any icon built into this plugin. Elementor makes use of free icons from the FontAwesome assortment, which we will insert instantly. Beneath I current including photos due to the Picture Field widget, however subsequent to it’s an Icon Field that permits you to add the vector icons described above.

Tutorial – Including the Picture Field

Text with Image on the Left - Elementor Tutorials, Tips & Tricks

  1. Click on on the Grid icon within the top proper nook.
  2. From the Normal Parts drag&drop the “Picture Field” and transfer it to your chosen part.

Ideas! Virtually the identical you are able to do it with the “Icon Field” if you need to make use of the FontAwesome Icons as a substitute of a picture.

Tutorial – Configuring the Picture Field

  1. Click on on the Grid icon on the Icon Field and extra settings will seem on the left bar.
  2. Add a picture out of your Media Library
  3. Swap the Picture Place to Left. You may switch to different sides (middle & proper) to search out your excellent picture place.


The best way to add the Video to the Background

Video in the Background - Elementor Tutorials, Tips & TricksVideo Background – Example from Dancer 2 Video within the background is a stupendous factor that may boost any web site. Individuals who use such answer on their web sites know this very well. Check out these examples Unsilenced, Minthis Resort, Antoni. Be like them and add your background video. Elementor permits you to place a video within the background in 5 steps, which I current on this tutorial. Straightforward-Peasy! Let’s Go! ?

Tutorial – Including the Video Background

  1. Select a piece by which you need to insert Video BG and click on on the Edit icon.
  2. Go to the “Fashion” tab.
  3. Click on on the “Background Kind – Video Background” icon.
  4. Add your Video Hyperlink on this discipline. Like you possibly can learn under this enter, you possibly can add a YouTube hyperlink or mp4 video file.
  5. Background Fallback possibility is critical on tablet units that don’t assist video background and on the decrease cell resolutions.


How to add the New Section

Earlier than I received to know the Elementor for good, there was one possibility that irritated me extremely (earlier than after all I discovered this magic cross :)), this was including new empty sections! Originally, I did it in such a method that every time once I wished so as to add a brand new part at first I needed to scroll the whole web page to the underside, the place the “Add new Part” button is all the time seen and I dragged this newly created part to the very top, bloodbath! Particularly once I had a dozen sections, it was very annoying. Till lastly, the success, I by chance clicked on the unknown (for me that point) cross and I noticed a button that was beforehand seen on the backside. Beneath I current a display for individuals who have confronted comparable irritation as I do ?

Tutorial – Including a New Part

New Section Steps - Basic Elementor Plugin Tricks

  1. Between the “duplicate part” and “saving part” you’ll find this cross, click on it!
  2. The entire rectangle seems with the opportunity of including a brand new part and the choice so as to add a template.


The best way to disable the Gap (Spaces)

Section with No Gap - Basic Elementor Plugin TricksWith this query, we frequently meet if somebody desires so as to add Slider Revolution by way of the shortcode widget in Elementor. Though the slider itself has a full-width mode, margins will seem round corners which spoil the ultimate impact. The tutorial one can find below can be helpful once you need to scale back the space between a number of columns in a single part. There are alternatives that let you take away this margin but in addition let you improve it.

Tutorial – Eradicating Gaps (Areas) from the Part

Section with No Gap Steps - Basic Elementor Plugin Tricks

  1. Select a piece by which you need to take away Gaps this impact and click on on the Edit icon.
  2. Within the Format tab edit the Columns Hole possibility and select the No Hole from the drop-down.


How To Take away Or Disable Elementor From A Single Web page?

First, go to the Pages web page in your WordPress Admin panel and edit the web page that was beforehand built with Elementor. Edit Elementor page Then, click on on the Again to WordPress Editor button. Back to WordPress-Editor button You’ll now see a warning message indicating that the design you might have created utilizing Elementor on the web page can be misplaced. Don’t fear, though your design built with Elementor can be misplaced, the content material that you simply added to the web page utilizing Elementor won’t be misplaced. So, click on the Proceed button. Continue to WordPress Editor Elementor will now be faraway from the web page, and you will notice the content material within the WordPress Editor that you simply had beforehand added to the web page utilizing Elementor. Content transferred from Elementor to WordPress And that’s it! You will have now efficiently eliminated Elementor from the web page. Alright! What now?

What Does Elementor Stuck On Loading Screen Mean?

There are lots of variations of ‘Elementor caught on loading display’. And numerous freshmen don’t know what type of error they’re going through. For those who’re caught on the loading display of Elementor, you could possibly be going through these three varieties of points:

1. Editor is Endlessly Loading

That is the commonest Elementor loading error. With this error, you’ll see the Elementor editor loading endlessly as proven below: Elementor Stuck On Loading This difficulty is usually brought on by plugin or theme incompatibility points.

2. Editor Loads a White Blank Page

One other type of loading error with Elementor is the editor masses a white clean web page. This error can be triggered as a consequence of plugin conflicts. The white clean web page error in Elementor will also be triggered as a consequence of server memory points.

3. Widget Panel is Not Loading

This type of loading error is new and causes the Elementor widgets panel to not load. Both the widget panel is totally grayed out or it masses endlessly as proven below: Elementor Widget Panel - Endless Loading Elementor says that this difficulty can be brought on by plugin conflicts.

How to Repair Elementor Stuck On Loading Screen Error

As per Elementor, lots of the Elementor caught on loading display errors are triggered as a consequence of plugin conflicts. However that’s not all the time the case. Listed below are the other ways to repair these points:

Test For Plugin Conflicts

Since Elementor says that these loading errors are triggered as a consequence of plugin conflicts, it’s higher to begin from right here. To debug this difficulty, test all of the plugins put in in your web site and see if there’s any plugin you believe you studied might be the rationale behind the error. If the Elementor loading difficulty is current in your web site, then test for plugins you’ve lately put in in your web site. Disable these plugins and test if the error is mounted. If you’re unable to search out the perpetrator, then comply with this plugin troubleshooting guide to only allow Elementor (and Elementor Professional in case you have it) and test if it’s is loading correctly once more. If sure, then begin activating plugins one after the other and test Elementor every time. For those who face the loading difficulty once more after activating a plugin, you then’ve discovered the perpetrator. For those who’re nonetheless unable to repair the problem, strive the opposite options given below.

Test Your PHP Model

An outdated model of PHP or a server with restricted PHP memory can even trigger the ‘Elementor not loading’ difficulty. Elementor web page builder recommends utilizing PHP 7.0 or larger to expertise the best efficiency whereas utilizing the editor. Additionally they suggest a most popular memory restrict of 128M or larger. To replace your PHP model, you possibly can merely go to your web host admin panel and replace PHP or you possibly can contact your webmaster to take action. For those who’re on an up to date model of PHP and nonetheless going through the problem, you then should test if the PHP memory restrict is 128M or not. To test the memory restrict, go to your WordPress dashboard and navigate to Elementor > System Data. How To Fix Elementor Stuck On Loading Screen On this web page, you’ll discover the memory restrict under the ‘WordPress Surroundings’ information. In case your memory restrict is below 128M, you should improve it. To do that, you’ll have to edit the wp-config.php file. This file is situated in your WordPress listing. You may entry the wp-config.php file via your cPanel or by utilizing a File Supervisor in WordPress. Open the wp-config.php file and seek for “/* That’s all, cease editing! Pleased running a blog. */”. Add the next code proper above this line: outline(‘WP_MEMORY_LIMIT’, ‘128M’);Save the file and return to the Elementor system information web page to test if the memory restrict is elevated. If the adjustments are up to date efficiently, open the Elementor editor and test if the issue is resolved.

Change Editor Loading Methodology

Elementor has an choice to switch the loading technique for the builder. There isn’t sufficient information on the way it works however Elementor suggests switching the tactic if you happen to’re having issues with the editor. To search out this feature, go to your WordPress dashboard and navigate to Elementor > Settings > Superior. Elementor - Switch Editor Loading Method Within the Superior tab, you’ll discover an choice to switch the editor loader technique. By default, this feature is disabled. Allow this feature and test if the editor masses efficiently.

How To Work With Padding & Margin Settings in Elementor

Padding and margin settings will not be only essential to make your web page structure on all units excellent, but in addition have a huge effect on the look & really feel of your web page. On this post, I’m going to stipulate the essential idea and share an instance to make it easy to know.

What is the difference between Padding and Margin?

A web page built in Elementor is structured in

  • Sections
  • Columns
  • Widgets with content material

The margin controls how a lot area is outdoors the border of the factor you’re editing. The padding controls how a lot area is contained in the border and the content material of the factor you’re editing. This picture from explains it very well.

image-2 Padding and Margin explained on

Lets create a easy instance in Elementor.

  • Part
    • Column
      • Content material

All 3 components might have padding and margin, however on this first instance, we’re only including padding and margin on part degree.

Annotation on 2019-5-2.png 50px of margin and padding on part degree

Each the column and the headline factor within the screenshot above do have zero margins and padding. Within the subsequent step we make this structure extra complicated by including 2 extra columns.


That is the structure without any margin or padding on column degree. The issue with this structure: With out margin and padding on column degree it doesn’t look very good. Let’s add some area between columns and between content material and the column border. This appears higher. Now check out one thing extra complicated.

Screen-Shot-on-2019-06-04-at-22_23_44-1024x450 Screenshot of – a function defined

Let’s rebuild this function part from Toggl with Elementor. The essential structure is fairly easy:

  • Part with background shade
    • A column with background shade and interior part
    • 2 columns
      • Column 1: Headline, Textual content
      • Column 2: Picture

The essential structure of the function part In Elementor, you possibly can set margin and padding for left, proper, top and backside. We have to customise these values for the left column to get an analogous search for our part to make it extra seem like By setting the values for margin to a destructive worth you possibly can transfer the textual content field outdoors the part it’s inside. It is a fairly widespread design tweak these days and easy to implement with Elementor. (How to use Minus Margin – Elementor Docs) To get the very same seem like on for this part you have to so as to add a border radius on the interior part and the column with the textual content. The final step is to tweak the margin worth between the textual content components (or widget area on column degree).


Do you have to use pixel or percentage worth for Padding/Margin?

There are tons of of articles and discussions on-line about that. I strive my very own reply right here. For those who going for a full-width design on desktop you would possibly need to work with share values for padding and margin. Check out this company web site, which is utilizing a full-width design. For those who would have a hard and fast pixel worth for the weather on the grid it could not scale to the display or look awkward. For those who work with percentages as a substitute of pixel values the structure adapts to the display measurement. As an instance this right here a fast instance once more. I’m altering from pixel to share on the textual content space after which change the scale of the browser window.

As you possibly can see within the video above, as long because the pixel worth of -50 is utilized to the column holding the textual content, the place of the white rectangle doesn’t change if I resize the browser window. After altering to share -10 and once more resizing the browser window, you possibly can see that the white rectangle does adapt and the place will not be mounted. On cell, I might suggest working with % values more often than not, as a result of you might have tons of of various system resolutions and normally, you need to use the entire area obtainable on a smartphone, so you’ll not work with a boxed content material container more often than not.

What in regards to the em worth on padding? The worth is related to the font measurement of a component. When you’ve got set a default physique font measurement of 18px, after which on a selected textual content widget a setting of 2em, it would double the font measurement to 36px. You may scale back the font measurement by 50% by setting 0.5em respectively. The advantage of working with em sizes on fonts is that you would be able to change your default font measurement as soon as and all font sizes throughout your website are modified without delay.

What else you should think about

  • Responsive settings: Paddings and margins must be optimized for all units (clearly). As I stated in earlier posts about Elementor, switch usually and early on between cell and desktop when working in your web page. This solves frustrations afterward
  • Consistency: You will need to have the identical paddings and margins throughout your complete website, not simply inside one web page. It provides to your model’s consistency
  • Hold your structure easy: Sure, you possibly can create cool trying issues with destructive paddings and margins, however hold it easy for the consumer to digest
  • Relying on the product or service you provide your web site can be visited from cell or desktop extra usually. I.e. now we have a consumer who has 95% of tourists coming from the desktop as a result of they provide a b2b gross sales software program which individuals only lookup throughout workplace hours. That may is totally totally different if you happen to work on a restaurant web site or any shopper product or service.
  • Assume your grid structure via to your website, attempt to cowl all use circumstances and begin engaged on padding and margin setting only after you might have added some actual content material. Websites usually look good with the identical lorem ipsum content material in each field!

What is Widget Space?

The widget area in Elementor defines how a lot area is added between content material widgets. You may centrally handle that in Elementor settings or on column degree.


The widget area setting in motion on column degree: Don’t confuse widget area with padding and margin.


As soon as you put in the Elementor web page builder, you might have the power to create web pages by including numerous ready-made blocks (widgets). You may neglect about touching the code since you’ll now have the ability to visualize your web site with a number of clicks of the mouse. Hopefully, you might have discovered these 5 Elementor hacks useful to your web design journey. Such easy Elementor ideas are nice for individuals who have simply began utilizing Elementor and those that need to speed up their web site. Here’s a listing of shortcuts which you should utilize to speed up your design course of.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge