Form Custom CSS

Add your own custom CSS to the form.

Learn more about the Form Widget (Pro)

Google Fonts Loading Method

In order to improve performance, we continue to focus on making fonts loading adjustments, and allow you to modify the default way Elementor loads Google Fonts.

Font-display property defines how font files are loaded and displayed by the browser. You can choose the loading method you wish using a designated control in your Elementor dashboard settings screen.

Google Font Loading Method Options

Go to Elementor > Settings > Advanced tab and change the Google Fonts Load to one of the options. From the dropdown menu, select from the following loading options:

Default – The font display strategy is defined by the browser.Blocking – Hides the text until the font has fully loaded.Swap – Use a fallback-font to display, until the font has fully loaded.Fallback – Hides the text for a minimal period and will use the font only if loaded within a few seconds.Optional – Hides the text for a minimal period and will use the fallback-font unless the font is already fully loaded.

Note: Font Awesome libraries loading options – In v3.1 we updated Font Awesome libraries to include font-display: block property by default as Font Awesome recommends to eliminate the effect of render-blocking processes.

How To Place Widgets Side By Side In The Same Column

Inline Positioning

Place widgets next to each other, horizontally, within the same column.

Each widget will only take up the minimum width necessary to hold it. 

https://www.youtube.com/watch?v=FtHXk2e6OF8

How To Use Inline Positioning

Under any Widget > Advanced > Custom Positioning

Width: Set to Inline for each widget in the horizontal stack.Position: Set to Default for side by side positioningUnder the Column > Layout, set your desired Horizontal Alignment. Choose between: Start, Center, End, Space between, Space Around, and Space Evenly. 

Note: To set several widgets inline, each widget needs to be defined as Inline separately.

Important!: Some elements may not function correctly when set to Inline Auto e.g. Image Carousel, Slides etc.

How to Add a Vertical Divider in Elementor

Using Column Borders

You may use the Border function from the column Style Tab to create vertical dividers by following the instructions below:

Create a multi-column layout by using sections or the Inner Section WidgetIn the Style Tab > Border  of the desired column, select the style from the dropdownUnlink the border Width properties and set the left or right width in PXSet the border color of the by choosing it in in the color pickerChange border properties for tablet and mobile breakpoints in the Responsive Controls

Example Resources

Using a Spacer Widget

You may use a Spacer Widget to create a vertical divider in Elementor by following the steps in the instructions below:

Create a multi-column section (example: 3).Set the width of the columns leaving only a minimum allowed space for the divider column (example: 48 | 4 | 48)Drag a Spacer Widget to the reserved section.Set the desired height of the widget in PX, VH, or EM from the Controls of the spacer widget.In The Advanced Tab > Margin, set the left and right margins to near 50% (example: 47%) to create the width of the spacerIn the Advanced Tab > Background, set the background color of the spacer by choosing it in in the color pickerAdjust the column widths for tablet and mobile in the Responsive Controls

Example Resources

How Do I Create My First Popup?

Follow these steps to get your first popup set up. Using this guide, you will manually trigger a popup using a button.

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own designClick 『Publish』, then 『Save and Close』Open a new page in Elementor (CTRL / CMD + E, new page)Drag in a button widgetUnder Layout, choose Link > Dynamic > Actions > PopupClick Popup > Open Popup > Select the popup you createdGo to the live page, click on the button and see the popup appear

With this type of basic popup which appears when a button is clicked, no Conditions, Triggers, or Advanced Rules are required.

That』s the basic setup. Try it out to get a handle on using Elementor Popups.

One example where you might want to use this is to create a popup with a form in it that is triggered when a button is clicked. Check out this video tutorial to see how this is done.

For more complex scenarios, see the Popups documentation.

Creating a Single Page Template with Elementor Pro

When you use a theme for your website, you get your theme』s Single Page Templates. With Elementor you can control the layout & design of the Single Page Templates.

Go to Templates > Theme Builder > Single > Add New, select Single from the dropdown, and under Select Post Type, choose Page and click Create Template.Choose a Page Block and Insert. Alternatively, you can design your own.Click the gear icon in the lower left corner of the widget panel to select a specific page as the preview example while editing.Edit any elements as you』d like. After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Templates > Add New

Choose Template Type (Single / Page)

Select from the Templates Library and Insert

Choose which page to preview while editing

Edit any elements needed, then Publish and set Display Conditions

Note: Templates are not pages and cannot be set as the home page in WordPress.

Only pages that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Creating A Custom Text Mask

By using the Mask function in the Elementor Advanced Tab you can easily upload a custom Text Mask to your video or or image.

Create your text in Ai or Ps and convert to a shape. Export as an SVG to your computerDrag a Video Widget and select an appropriate video. Choose the Autoplay, Mobile, Mute, and Loop functionsIn the Advanced Tab > Mask choose Custom from the shapes, and upload your SVGSelect the Size to fit, fill, or custom as neededSelect the Position alignment option to best fit your designSelect the Repeat option to best fit your design

Mask Option

The Elementor Mask Option allows you to add a mask to any element. Create stylish designs for any element you want like an image, video, Google Maps, and more using the preset shapes. Create your own masks in PNG or SVG formats and upload them for even more possibilities.

Option Controls

The mask options are found in the Advanced Tab of compatible widgets

Mask – Toggle this to enable the mask featuresShape – Choose one of the preset shapes– Circle– Flower– Sketch– Triangle– Blob– Hexagon– Custom (Upload a custom SVG path file)Image (When Custom is selected) –  You may upload a custom mask to the media library using .PNG or .SVG format and apply the custom shape presetFit – From the dropdown menu, select from the following options:– Fit– Fill– CustomPosition – Select the mask position from the following options in the dropdown menu:– Center Center– Center Left– Center Right– Top Center– Top Left– Top Right– Bottom Center– Bottom Left– Bottom RightRepeat – Choose from the following repeat opinions for your mask:– No Repeat– Repeat– Repeat-X– Repeat-Y– Round– Space

Theme Style – Global Settings

Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.  These settings override the theme styling settings and takes its place, allowing you to use Elementor to set styles for elements not built by Elementor. By default, this will apply styles only to non-Elementor elements, for example, WooCommerce checkout fields, Contact Form 7 labels, 3rd-party headings and much more. If you prefer, you can force these Theme Style settings to also apply to Elementor-built elements as well. 

Note: Elementor Pro users can also set Global Custom CSS which lets you apply custom CSS rules to your entire site. 

To Apply Theme Styles To Elementor Elements:

In order for Theme Style settings to apply to most of Elementor』s elements and widgets as well, you will need to disable Elementor』s default colors and fonts.

Disable default colors and default fonts by going to Elementor > Settings and placing a check in the boxes next to Disable Default Colors and Disable Default Fonts.

How To Set Theme Styles

Click the Hamburger menu in the upper left corner of any page or post』s widget panel to access the Site Settings > Theme Style settings. Theme Style consists of four tabs: Typography, Buttons, Images, and Form Fields.

Typography

Text Color: Choose the color of the default text

Typography: Change the typography options for the default text

Paragraph Spacing: Set the amount of default spacing after a paragraph (margin-bottom)

Link

Normal | Hover

Color: Choose the default color of links for both normal and hover states

Typography: Change the default typography of links for both normal and hover states

H1-H6

Color: Choose the default color for each Heading (H1, H2, H3, H4, H5, and H6)

Typography: Set the default typography options for each Heading (H1, H2, H3, H4, H5, and H6)

Buttons

Typography: Change the default typography for buttons

Text Shadow: Set the default text shadow for buttons

Normal | Hover

Text Color: Choose the default color for button text

Background Color: Choose the default background color of buttons

Border Type: Set the default type of border for buttons (None, Solid, Double, Dotted, Dashed, Groove)

Box Shadow: Set the default box shadow options for buttons

Border Radius: Set the default border radius to control corner roundness of buttons

Padding: Change the default button padding settings

Form Fields

Label

Color: Choose the default text color for the Field Labels

Typography: Set the default typography options for Field Labels

Field

Typography: Set the default typography options for Input Field text

Normal | Focus

Text Color: Choose the default text color for Input Field text

Background Color: Choose the default background color for Input Fields

Border Type: Set the default type of border for Input Fields (None, Solid, Double, Dotted, Dashed, Groove)

Border Radius: Set the default border radius to control corner roundness of Input Fields

Box Shadow: Set the default box shadow options for Input Fields

Transition Duration (ms) (Focus only): Set the default amount of time, in milliseconds, for the Focus Transition to take place.

Padding: Set the default padding options for Input Fields

Images

Normal | Hover

Border Type: Set the default type of border for Images (None, Solid, Double, Dotted, Dashed, Groove) in both Normal and Hover modes

Border Radius: Set the default border radius to control corner roundness of Images in both Normal and Hover modes

Opacity: Set the default opacity level of Images in both Normal and Hover modes

Box Shadow: Set the default box shadow options for Images in both Normal and Hover modes

CSS Filters: Set the default CSS Filters: Blur, Brightness, Contrast and Saturation for images in both Normal and Hover modes

Transition Duration (ms) (Hover only): Set the default amount of time, in milliseconds, for the Hover Transition to take place.

Undo / Redo & Draft / Publish

Just like any other Elementor editing you might do, Theme Style woks with the Revisions and History controls, so you can undo / redo any changes, and can always revert back to an earlier version of your Theme Style design.

Theme Style also works with Draft and Publish modes, so you can test the changes and save them to draft, without having them affect your live site. Your live site will only get the changes applied when you click the Theme Style』s Publish button.

HTML Elements Affected

Note: Some elements won』t get affected because Elementor doesn』t allow editing them (e.g fieldset, input[type=」reset」] and more)

Background color:

Buttons:

buttoninput[type=」button」]input[type=」submit」].elementor-buttonParagraph spacing:

Links:

Headings:

Form:

labelinput:not([type=」button」]):not([type=」submit」])textarea.elementor-field-textual

Images:

Why Did All My Theme Styles Disappear?

This happens when the Default Kit is deleted. If you go to Templates > Saved Templates, and then select to view All templates, you will see a new template listed there, called Default Kit. The Theme Styles are stored in this Saved Template. The Default Kit template, if deleted, will automatically recreate itself, but deleting it will remove all settings stored in the Theme Styles, so only delete this template if your goal is to completely reset your Theme Styles.

Global Website Editing

Elementor lets you design your entire site from one place. With Global Website Editing, you can edit your Elementor Pro header, footer, archive and single templates, as well as your page or post content, all within the same screen. 

While editing a page, for example, you can easily edit the header by hovering over it, and clicking the header』s orange handle.  

Edit the header as you normally would and save your changes.

To edit the footer, simply hover over it and click the footer』s orange handle.   

Edit the footer and save your changes.

To return to editing the page content, hover over it and click the content』s orange handle. 

Edit the page and save your changes.

Edit Any Area Of Your Site From The Elementor Page Editing Screen

Hover over the area you wish to edit (e.g. header, footer, archive, single product, product archive, single post, single page, etc).Click the orange handle at the top of that areaEdit that area as you wishSave changes and then edit another area as needed