Top 31 Elementor Hidden Features Tips And Tricks (free & pro)

Discover 31 essential tips and tricks for using Elementor, including hidden features that can enhance your design experience. These insights cater to users of both the free and pro versions, offering valuable techniques regardless of proficiency level. Learn how these strategies can significantly improve efficiency and creativity in web development.

Elementor Finder streamlines navigation for administrators, allowing quick access to pages. By pressing Command + E on Mac or Control + E on PC, users can open the finder and type a page name like 'Home Page' to locate it instantly. This feature refreshes the selected page within Elementor for immediate editing.

In Elementor, you can create nested sections by using a simple trick. Start with one section and add an inner section; then right-click on the main column holding the inner section to copy it. Paste this copied column into another desired location within your layout, effectively creating intersections within intersections. This process allows for infinitely complex layouts but is considered bad practice due to potential issues with design structure or performance.

To create a vertical divider, start by placing a divider widget between the header and text. Center-align it for proper positioning, then rotate it 90 degrees using advanced transform settings. Adjust its weight in style options to control thickness and set its width in pixels under content settings (e.g., 50px). For additional spacing above or below the divider, modify top and bottom margins as needed.

To dynamically display the current year in an Elementor footer, first ensure you have a custom footer created. While logged into your site, hover over "Edit with Elementor" and access the custom footer editor. Add an icon list element and open its first item to replace placeholder text by selecting dynamic tags. Choose "Current Date Time," adjust settings under date format to 'Custom,' input a capital Y for formatting, then add copyright symbols before it using advanced options. This setup ensures that the displayed year updates automatically.

In WordPress, the Replace URLs tool within Elementor simplifies updating old links when transferring a website to a new domain. This feature prevents errors caused by outdated URLs by allowing users to input the old and new addresses for automatic replacement. It is particularly useful for large-scale updates, such as fixing hundreds of outdated links efficiently.

Elementor provides a convenient tool for rolling back to previous versions with just one click. By navigating to the tools section and selecting the version control tab, users can choose from various past versions, including 3.0.8.1 or earlier for standard accounts and 3.0.1 for pro accounts at the time of recording this video.

Maintenance mode is useful for updating a website without public visibility. To enable it, navigate to Elementor tools and select the maintenance mode tab. Choose "maintenance" as the mode to inform Google of temporary unavailability, decide who can access (default: logged-in users), and create a custom template if none exists by designing with Elementor Canvas layout. Once activated, visitors see your chosen message until you disable maintenance mode.

The Elementor navigator is a useful tool for managing and organizing sections in your design. It can be accessed via the bottom left corner of the window or by using shortcuts (Command + I on Mac, Control + I on PC). The navigator displays all sections, allowing quick access to specific ones by clicking them. Expanding elements within a section provides direct access when interface navigation becomes challenging.

To achieve a cleaner interface in Elementor, you can dock the navigator. Simply drag it to the right and release; it will automatically attach itself to that side of your screen. This feature enhances workspace organization and usability.

To streamline your interface, especially on larger screens, you can customize widget favorites. If a frequently used widget is buried in the list, right-click it and select 'Add to Favorites.' This action places the chosen widget at the top of your favorites section for quicker access.

Anchor links, also known as jump links, enable navigation within the same page. To create one, assign a unique ID to the target section in its advanced settings without using symbols like hashtags. Then link a button or element by typing "#" followed by that exact ID in its link field. Alternatively, use an anchor widget from your menu favorites and set it at the desired location with an identical ID to ensure seamless functionality.

Layouts that work well on desktops may not translate effectively to tablets and mobile devices. For instance, a call-to-action might be visible immediately on desktop but hidden in tablet view due to column arrangement. To fix this, reverse the columns by selecting the section, navigating to advanced responsive settings, and enabling 'reverse columns' for both tablet and mobile modes. This adjustment ensures important elements like calls-to-action remain prominent across all device types.

To add custom breakpoints in Elementor, navigate to the settings and activate "Additional Custom Breakpoints" under the experiments tab. Save changes, refresh your page with the editor open, and access responsive mode from the bottom left corner. Use the toolbar's manage breakpoints icon to add new modes like mobile extra or widescreen by clicking on plus signs. After updating these settings, reload Elementor Editor as prompted; you’ll see additional icons for each breakpoint added.

Elementor provides a variety of entrance animations for items, columns, and sections. Users can select from options like rotate in, slide up or left, fade in/up, and zoom in to create dynamic effects. Animation duration and delay are customizable; for instance: one element may have no delay while others stagger at 400ms intervals or more. This feature allows elements on the page to appear sequentially with smooth transitions.

A styled image widget is created to rotate on scroll and open a menu pop-up when clicked. To reuse this across the website, it can be saved as a global widget by right-clicking, naming it appropriately, and saving. This allows easy access under the 'global' tab for consistent behavior across pages without manual duplication. Editing globally updates all instances of the widget; alternatively, individual widgets can be unlinked for separate customization.

Templates allow for efficient content management across multiple pages. By saving a section as a template, it can be reused and edited centrally; changes made to the template automatically update all instances where it's used. This is particularly useful for elements like banners that appear on numerous pages, eliminating repetitive edits.

To add a video background in Elementor, select the section and navigate to 'Style,' then choose 'Video' under background type. Paste a YouTube link and set a start time if needed; update and refresh the page for changes to take effect. To ensure professionalism during loading times, use the 'Background Fallback' option by selecting an image that displays before the video loads.

To overlay elements in Elementor, start by selecting the widget you want to adjust. Unlink margin values under 'Advanced' settings and use negative margins to move it closer or on top of another element. Adjust the z-index value for layering; higher numbers bring widgets forward while lower ones push them back. Use tools like Navigator (Command/Control + I) for precise selection when items overlap, ensuring easy adjustments even in complex layouts.

Elementor offers a dark and light theme option for its user interface. Users can access this feature by clicking the hamburger icon in the top left corner, selecting 'User Preferences,' and choosing their preferred UI theme. The auto-detect setting adjusts based on your computer’s clock to switch between day or night modes automatically.

To place buttons side by side, select each button individually and adjust their positioning settings to 'inline auto' under the advanced options. After aligning them inline, address spacing issues by adding a right margin to one of the buttons. Linking margin values allows for consistent adjustments; setting it at 20 pixels creates an appropriate gap between the two.

To eliminate unwanted space between widgets, unlink the margin values in the advanced settings of each widget to ensure no top or bottom margins are applied. If gaps persist, adjust the column's 'widget space' setting from its default value (e.g., 20) to zero. This approach ensures a seamless alignment without vertical spacing issues.

Elementor template kits simplify the process of exporting and importing complete website designs. To enable this feature, activate 'Import Export Template Kit' in Elementor settings under experiments. In WordPress admin, navigate to Elementor tools for export or import options; free users can only access certain features while pro users have full functionality. Official templates are available via the kit library where you can filter by category or plan, preview on various devices, connect with an account (free version supported), and apply desired components to create a new site.

Custom fonts can enhance a dedicated brand identity, which is highly recommended for creating a cohesive visual presence. To add custom fonts in Elementor, navigate to 'Elementor Custom Fonts,' click on 'Add New,' name your font (e.g., "My Font"), and upload the required format variations. After publishing the font, it becomes accessible under typography settings when styling text on any page.

To enhance a hero section, start by selecting the section and navigating to the style tab. Change the background type from color to slideshow, then add two or three images for optimal website performance. Create and insert your gallery; note that slides transition every five seconds by default but can be adjusted with effects like fade or slide in various directions. The Ken Burns effect adds subtle motion for visual appeal.

Elementor hotkeys are keyboard shortcuts designed to streamline your workflow. They can be accessed using Command + ? on Mac or Control + ? on PC, though some users may need additional key combinations like Shift due to keyboard layouts. If accessing the shortcut menu is problematic, it's advisable to screenshot the list from Elementor's website for reference. For instance, undoing a mistake such as deleting a section can easily be done with Command/Control + Z.

Mistakes during editing can be corrected using the history feature, which tracks all steps within a single session. By clicking on 'history' at the bottom left corner of the window, users can revert to any previous step from that session. However, refreshing the page starts a new session and clears this history. For edits beyond one session or after refreshing, revisions provide access to an extended edit log for restoring earlier versions by selecting specific timestamps.

Copying and pasting between browser tabs is straightforward. Decide what to copy, such as a widget, column, or section. Hover over the desired element's six dots, right-click to select 'copy,' or use shortcuts like Command+C on Mac or Ctrl+C on PC. Navigate to another page where you want it pasted; either right-click below your target area and choose 'paste' or hover over the section for quick insertion.

Quickly replicate styles between elements by using the 'copy' and 'paste style' functions. Right-click on an element, select copy, then right-click another element and choose paste style to instantly apply the same formatting. This method saves time when aligning design consistency across sections.

To change the background color of a section to match another element, first select the desired section and navigate to its style settings. Click on "background color" and use the provided color sampler tool by selecting it. The mouse pointer will transform into a picker that allows you to hover over elements on your page and choose their colors directly. Once selected, confirm your choice, instantly updating the background with ease.

To create dual-color headings, start by selecting the heading and aligning it temporarily to the left. In the section of your editor's left panel, insert a span tag before typing text for styling purposes. Close this tag after applying changes to see real-time updates in color differentiation within your heading.

Elementor simplifies managing website styles by allowing global color changes. By setting primary, secondary, text, and accent colors at the start of a project within site settings, you can easily update your entire site's palette later. Any elements linked to these global colors will automatically reflect updates across all pages. However, items with background images or unreferenced custom colors remain unchanged.