Code Highlight (Pro)

Elementor』s Code Highlight widget enables you to use syntax highlighting to present code examples in a readable, easy to copy format.

Language: Select your coding language to properly highlight your code』s syntax. Options include 50+ of supported languages such as Markup, HTML, XML, SVG, Mathml, CSS, Javascript, ActionScript, PHP, Ruby, etc.Code: Enter the snippet of code that you wish to display on the pageLine Numbers: Choose Show to display line numbers next to each lineCopy to Clipboard: Choose Show to allow users to copy the code with a single click on the Copy button in the upper right corner of the code box.Highlight Lines: Designate one or more lines to be highlighted. In the example above, lines 1 and 2 (designated by 「1-2」) and line 8 are highlighted by a different background color than lines 3 through 7. Sets of numbers should be separated by a comma. (e.g. 2-7, 10, 13-15 would highlight lines 2 through 7, line 10, and lines 13 through 15.)Word Wrap: Toggle to Show/Hide word wrapping. Theme: Select a theme for the code display. Both light and dark themes are available to choose from.Height: Enter a height for the code box.Font Size: Set your code』s font size.

reCAPTCHA & Elementor Integration

reCAPTCHA is one of the most popular ways to prevent spam and abuse by preventing bots from being able to submit forms.

To add a reCAPTCHA, you first need to get the reCAPTCHA keys from the Google website. You can choose from either reCAPTCHA v3 or reCAPTCHA v2. We recommend v3 as it is the new more secure, less intrusive method to use.

reCAPTCHA v3:

Go to the Google reCAPTCHA site and choose v3.Add a Label to identify this instance. Add a domain, e.g. example.comChoose the owner email address or add a new oneAccept the Terms of Service and Submit.On the next page, copy both the Site Key and the Secret Key.Enter these keys in the Elementor > Settings > Integrations > reCAPTCHA options and click Save Changes. (You can change the Score Threshold if desired. If bots manage to get around the reCAPTCHA, increase the score).Add a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Add ItemUnder Type choose reCAPTCHA3Choose whether to place the badge to the right (bottom of the page), left (bottom of the page), or inline.Click Save

You will now see the badge on the page.

reCAPTCHA v2:

Go to the Google reCAPTCHA site.Under Label fill in your website』s name, choose reCAPTCHA V2 「I』m not a robot」, enter the domains you wish to secure, and accept the Terms & Conditions.You will receive two API KeysReturn to the WordPress Dashboard > Elementor > Settings > IntegrationsUnder reCAPTCHA, enter the two API Keys and click Save ChangesAdd a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Under Type choose reCAPTCHAYou now see the 『I am not a robot『 text in the formClick Save

Hover Animations

The Hover Animations feature lets you animate elements on your WordPress website. Among the various animations available are grow, shrink, pulse, push, pop, bounce, rotate, float, sink, bob, hang, skew, wobble, and buzz.

I Changed the URL of My Website and Elementor Does Not Work Anymore

After you』ve migrated your website, most likely you changed the URL of your website as well, these are the steps you need to take:

Go to Elementor > Tools > Replace URL Tab Enter your old-url and your new-url and click Replace URLUnder the General Tab > Regenerate CSS, click Regenerate FilesIn Settings > General on your WordPress Dashboard, make sure that the URLs are similar.

Note: Make sure you assign the license to the new URL via your account on my.elementor.com

Important!: Adding an SSL Certificate to your website (HTTP to HTTPS) also requires you to replace the URL.

Popups

Popups are call to action modal windows that popup and overlay the page at a specified moment or under specific triggers and conditions. Popups are designed to focus a user』s attention once they have taken an action.

To begin, go to Templates > Popups. Control the layout, conditions, rules and styles of the popup,and then design the popup content.

Note: Click the Popup Settings gear icon in the panel』s bottom toolbar to edit the popup settings.

Design Popup

Settings

Layout

Width: Set the exact width of the popup, using either px or vhHeight: Set the exact height of the popup, using either px or vh. Use 100vh for both width and height to create full-screen popupsHorizontal: Choose the horizontal position of the popup, from Left, Center or RightVertical: Choose the vertical position of the popup, from Top, Center, or BottomOverlay: Show or Hide the background overlayClose Button: Choose to Show or Hide the Close buttonShow Button After x seconds (if Show Close Button was chosen): Select the number of seconds to wait before showing the close buttonEntrance Animation: Choose the popup』s entrance animation such as fade and zoom from the dropdown selections. Choose any animation effect to preview the effect.Exit Animation: Choose the popup』s exit animation such as fade and zoom from the dropdown selections. Choose any animation effect to preview the effect.Animation Duration: Set the length of time for animation, in milliseconds

General Settings

Title: Enter the title of popup. This title will only show on the backend, not to the user.Status: Draft, Pending Review, Private, or Published

Preview Settings

Preview Dynamic Content as: Choose from any Archives, Pages, Posts, Media, or 404 pages.

Note: To see the content you』ve chosen, you must reload the page after selecting the dynamic content.

Style

Popup

Background Type: Choose a background color, image, or gradientBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundness for each side of the popupBox Shadow: Adjust box shadow options

Overlay

Background Type: Choose a background color, image, or gradient

Close Button

Position: Choose to display the Close button on the Inside or the Outside of the popupVertical Position: Use the slider to select the vertical position of the Close buttonHorizontal Position: Use the slider to select the horizontal position of the Close button

Normal | Hover

Color: Select the color of the Close button for both the Normal and Hover statesBackground Color:  Choose the background color of the Close button for both the Normal and Hover statesSize: Set the size of the close button

Advanced

Advanced

Show Close Button After (sec): Enter a number of seconds. The close button will only appear after that time has passed.Automatically Close After (ms): Enter the number of ms to wait before automatically closing the popup. Leave blank to disable automatic close.Prevent Closing on Overlay: Select Yes to prevent users from being able to close the popup by clicking on the overlay.Prevent Closing on ESC Key: Select Yes to prevent users from being able to close the popup by pressing the ESC key.Disable Page Scrolling: Select Yes to prevent users from scrolling the page shown behind the popupAvoid Multiple Popups: If the user has seen another popup on the page he visits, hide this popup by selecting YesOpen By Selector: Enter a list of selectors that will manually trigger the popup (CSS IDs, classes or data-elements). See instructionsMargin: Adjust the marginsPadding: Adjust the padding around the popupCSS Classes: Add your custom class without the dot (e.g. my-class)

Custom CSS

Custom CSS: Enter your own CSS

Control Popup via Publish Settings

Set Conditions

Conditions allow you to set on which pages of your website the popup will appear.

Set the conditions that determine where your popup is used (excluding manual triggering). For example, add an Include condition and choose Singular > Front Page to only show the popup on the site』s home page. Learn more about Conditions.

Set Triggers

Triggers are the user actions that cause your campaign to popup. Select Yes or No for each option that will cause the popup to occur.

On Page Load: If set to Yes, set the number of seconds to wait, upon page load, before popup is triggered.On Scroll: If set to Yes, select direction (Up or Down) and the amount to scroll before popup is triggered. Down scroll is based on the percentage of the page scrolled down; Up scroll is based on the number of pixels scrolled up.On Scroll To Element: If set to Yes, enter the Selector name (CSS ID) that will trigger the popup when user scrolls to it. You must add the CSS ID to the Advanced tab of the element as well.On Click: If set to Yes, enter the number of clicks that will trigger the popupAfter Inactivity: If set to Yes, enter the number of seconds of user inactivity that will trigger the popup.On Page Exit Intent: Set to Yes to trigger the popup when user』s mouse activity indicates intent to exit the page

Advanced Rules

Advanced Rules specify other requirements that must be met to generate a popup.

Show after X page views: If set to Yes, set the number of page views before popup is triggered.Show after X sessions: If set to Yes, set the number of user sessions before popup is triggered (a session starts when the user visits the website and ends when the user closes the browser).Show up to X times: Max times the popup will be displayed. If Count is set to On Open, this will only allow the popup to open as many times as the number set. If Count is set to On Close, the popup will only open until the user has closed it for the Xth time, after which it will not open again. This setting is set in the Local Storage and will remain there until deleted.When arriving from specific URL: If set to Yes, Show or Hide the popup if a user arrives from a specific URL (enter the specific URL). Regex is an option for advanced users to set advanced rules for matching URL patterns.Show when arriving from: If set to Yes, show if user arrives from search engines, an external link (enter URL of specific link) and/or an internal link (enter URL of specific link).Hide for logged in users: Set to Yes to hide popup for all logged-in users or from select custom roles. For websites with cache, this feature might not work properlyShow on devices: Set to Yes to choose to show on Desktop, Tablet, and/or Mobile devices

Note: Popups cannot be displayed more than once if the page is not reloaded or re-entered.

Control Popup Via Manual Triggering

Popups can be triggered manually. Dynamic links can use the Popup Action to open or close a Popup. Form can use the Actions After Submit option to open or close a Popup. Any element can use a unique selector (class, ID or data-element) to manually trigger a popup when that element is clicked.

From any link element, choose Dynamic > Actions > Popup. Click Popup to select either Open Popup or Close Popup. If Close Popup is chosen, the option, 「Don』t Show Again」 will become an available option.From an Elementor form, choose Actions After Submit > Add Action > Open Popup or Close PopupFrom a Custom Selector: Any element can have a selector set which can be used as a manual popup trigger. Edit the element and go to Advanced > CSS Classes (or CSS ID) and give the element a class name (without the preceding dot) or ID name (without the preceding #). In the popup』s Conditions, choose the page that includes the element with the unique selector (e.g. Conditions > Include > Singular > Pages > Your Page Title). When a users visits that page, and clicks on the element, the popup will trigger. This is useful for opening a popup from a theme』s navigation menu item, content within a Text Editor widget, from a non-Elementor element or script, etc.

When triggering a popup from a custom selector, please note that the element doesn』t have to be a 「link」. A normally non-clickable element, such as plain text, can be clicked to generate the popup as well. Also note that the Triggers and Advanced Rules will be disregarded while using this option.

How to Use Z-Index in Elementor

The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order (i.e. an element with a Z-index of 10 will be on top of (in front of) an element with a Z-index of 5.

You can set the stack number on any Widget under the Advanced Tab > Z-Index

Global Colors

Create your own design system with global colors and text styles that can easily be assigned to elements across your site.

Global Colors

Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors from Elementor』s Global Settings.

Global

Predefined Global Colors

By default, the predefined colors ( Primary, Secondary, Text and Accent) are pre-populated from your theme』s CSS.  Change them here to override your theme』s settings. Learn which elements are impacted by the default color palette.

New Global Colors

In addition to the 4 predefined global colors (Primary, Secondary, Text, and Accent), you can add any colors you choose to the global palette, for use in any Elementor color options.

Inline Custom Colors

You can also select any custom color to be used inline without adding it to the global colors palette.

From any Elementor page or post, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Global Style > Global Settings > Colors & Typography.

Edit Color: Click the color swatch to select a new color for any existing color. The names can also be changed. Click the color』s name to change the name. For example, you could change Primary to Main, Accent to Highlight, etc.Add Color: Click Add Color button to add a new global or inline custom colorDelete Color: Hover over the color swatch and click the trash can icon that appears.

Note: By deleting a global color, all of its instances will inherit their values from an unknown source, possibly your theme, or your browser, etc.

Right Click

Starting from Elementor Version 2.1, we transferred all of our editing controls to a new context menu, that appears when you Right Click a Page/Section/Column/Widget handle.

Note: To access the browser』s original right-click functionality click CTRL/CMD + Right Click.

Copy/Paste

When you  Right Click you』ll find the Copy and Paste functions. There are three different types of Copy/Paste:

Copy/Paste Elements – Now you can simply Copy an element (Widget, Column or Section) and Paste it anywhere on the page. When pasting on top of an element, the pasted element will be placed below it.

Tip: Use the shortcut CTRL/CMD + C, and then CTRL/CMD + V, to copy and paste elements.

Copy/Paste Element Style – With Paste Style, you can paste just the style of any element you copy (Widget, Column or Section), then apply it on any other Widget, Column or Section.

Bonus Tip: Use the shortcut SHIFT+CTRL/CMD + C, and then SHIFT+CTRL/CMD + V, to copy and paste style only.

Copy/Paste Between Pages – Copy Paste and Copy Style actually work between pages! You can Copy any Widget, Column or Section, and Paste it on a different page on your site.

Reset Style – You can easily return to the default style settings of every element by right clicking and choosing Reset Style.

Navigator

Navigator is a navigation tree panel providing easy access to every element on the editor with just one click. Navigator enables the user to drag elements throughout the page and edit them, quickly and easily. Click to learn more

Right Click – Page Level

Right Click anywhere on the drop area, will get you these Page–level options:

Copy All Content – You can copy the entire page content and paste it to a different page.Delete All Content – The 『Delete All Content』 option moved into the Page Level Right Click.

Elementor drop area

Right Click on Mac

Go to the settings of the mouseModify the right click option and choose 「Secondary click」

Tip: If the secondary click solution doesn』t work, you can always click to 「Show Handles」 in the Elementor Settings > Advanced > Editing Handles

How To Hide Page Titles In WordPress

If you』re using Elementor, you can hide titles with one click, no need to use any code or any other plugin.

Follow these steps:

1. Go to your page and click 『 Edit with Elementor. Here we』ve prepared a page that has a title we are going to hide.

2. Click the gear icon for  Document settings at the bottom left of the widget panel.

3. Switch on 『 Hide Title『

4. Done! No coding and you successfully hid the title.

What to Do If Title Cannot Be Hidden

Note that if your theme is using a different class for the title, this option won』t automatically work and you will have to manually set it.

The default class for most themes is:

Title

If your theme is using a different class, you』ll need to change the Page Title Selector.

Simply 「Edit with Elementor」 any page or postClick the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings. Under Settings, click Layout.

Here you will see the Page Title Selector field with the description:

Elementor lets you hide the page title. This works for themes that have 「h1.entry-title」 selector. If your theme』s selector is different, please enter it above.

Now, add your theme』s selector for the title, and the hide title functionality should now work.

How Do I Know What Class Name My Theme Is Using For the H1 Title?

Visit your page in a Chrome browser, and thenright-click on the title to be hidden, chooseInspect, and make a note of the H1 class name, which is shown in quotes, as demonstrated below.

If the class name is 「abc-page-title」 for example, then you would type h1.abc-page-title into the Page Title Selector in the Elementor > Settings > Style area mentioned above.

Is There a White Label Option?

We currently don』t have plans to create a white label option for Elementor. 

Maybe one will be available in the future. In any case, Elementor is only visible on the site admin or if a user inspects the source code of a page. Your visitors won』t see any trace of Elementor on the frontend live view of a page.