Author 诗语

How To Change Link Color in Elementor

When changing the colors of links in Elementor you may use the following methods in this documentation. 

Global Site Settings For Link Color

Click the Hamburger menu in the upper left corner of any page or post』s widget panel to access the Site Settings > Theme Style > Typography.

Link – Normal | Hover

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

See Also: Theme Style – Global Settings

CSS Classes

If you need to override the Site Settings, you may create additional CSS link classes in the Site Settings > Custom CSS region. Add these classes to your text editor or widget links.

CSS Class Snippet

a.mygreenlink:link, a.mygreenlink:visited, a.mygreenlink:active{ color:green; text-decoration: none; } a.mygreenlink:hover { color: green; text-decoration: underline; }

Usage Example

My Green CSS Class Link

Inline HTML Style

You may additionally use the style property directly in your link HTML .

Usage Example

My Purple Inline CSS Link

How To Set Display Conditions for Global Templates

Elementor 2.0 added global templates like the Header and Footer. These templates are implemented across your entire site, or on any combination of pages of your choice.

With Conditions, you can set exactly where each template is implemented, whether it』s in a certain Category, Taxonomy, or on a Specific Page.

How are Conditions Displayed?

Each Condition setting lets you Include or Exclude a condition.

For example, we have a Header template with the Include condition Entire site. We can add a second condition of Exclude for a specific page – let』s use Front page.

Now we』ll have two headers on our site. The first one across the entire website, and another displayed only on the homepage.

You can always click on Display conditions to add, change or remove conditions.

Note: Display Conditions are only an option within Theme Builder Templates. These are not an option within regular pages. 

Tip: Did you know? You can create more than one Header, and assign it to different areas on your site!

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.

How To Add Text Over Image in Elementor

Adding text over images with Elementor can be accomplished in several ways. In this document you will learn two of the most common methods to accomplish this.

Using Negative Margin on the Text

Drag and drop an Image Widget into a column and select your image from the media libraryDrag and drop a Heading Widget below the image and edit your textIn the Advanced Tab, unlink the margin properties and apply a negative top margin (example: -40%)Set the Z-Index to a number greater than the image (example: 5)

Using the Text Over a Background Image

Drag and drop a Heading Widget to a column or section and edit the textFrom the column Style Tab > Background use the image option. Select an image from your library or upload a new imageSet the background size to Contain, or Cover (some cropping of the image will occur when using this option)In the Advanced Tab, unlink the padding properties and apply a top and bottom padding (example 40%). This will allow the image to retain its shape for tablet and mobile responsivenessAdd margin to increase the gap between the background image and the container

MailerLite and Elementor Integration

In this guide, we will explain how to integrate   MailerLite with Elementor Forms.

First set your MailerLite API Key in the Integrations Settings at Elementor > Settings > Integrations TabCreate a form using Elementor Form WidgetClick Actions After SubmissionUnder Add Action choose MailerLite

Tip: Click to learn how to  get your API Key from MailerLite

Selecting MailerLite Options

API Key: Use the default API Key or a custom oneGroup: Choose a group or use Select to allow visitors to self-select the group to joinEmail Field Mapping: Set the option to map your fieldsAllow Resubscribe: Set to Yes to allow users to resubscribe to your list if they have previously unsubscribed.

Note: The integration with MailerLite creates a new contact in your MailerLite account. It doesn』t update existing contacts.

Troubleshooting MailerLite

If you notice a field is missing in the Elementor Form widget panel, re-select the MailerLite group. For example, in the demo below, the 「Consent」 field was not showing up, but it appeared once the MailerLite group was selected again.

How to Add Related Posts in Elementor

By using the Posts Widget in the Single Post Template, you can display Related Posts by terms. Terms include Categories, Tags, Types, and Formats.

Create or Edit your Single Post TemplateFrom the Widgets Panel drag a Posts Widget to the desired locationIn the Source drop down options select RelatedInclude By – TermTerms – Choose by Categories, Tags, Type, or FormatSet the Exclude Terms if neededPublish or update your Single Post Template

Additional Resources:

https://developer.wordpress.org/themes/functionality/post-formats/

Categories, Tags, & Custom Taxonomies

What』s The Difference Between Elementor Canvas & Full Width?

When selecting the Page Layout you have the options of Default, Elementor Canvas, Elementor Full Width, and Theme. Choose the best option based on the following usages:

Default – This uses the default layout including the Header, Footer, Content, and Sidebar. This may be controlled by the active theme, or the Elementor Theme Style and Global Template Display ConditionsElementor Canvas – This displays only the Elementor created content without the Header, Footer, Content, or SidebarElementor Full Width – This displays the Elementor created content including the Header and FooterTheme – This displays the predefined layout of the active theme. These options are generally found in the Customizer of the active theme

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

How To Fix Elementor Stuck on Loading Screen | Elementor

If you get a gray page when you try to edit with Elementor, it is probably due to a conflict with another plugin or with a script inserted within the theme. In this case, activate the safe mode. If it helped, deactivate each plugin one by one, besides Elementor and Elementor Pro to figure out which one is causing the issue. We strive to solve the incompatibility issues with other plugins as much as possible. If you have noticed an incompatibility with a plugin, please report this issue to us and to the support of the conflicting plugin.  Sometimes, you can get this loading page because of an add-on installed on your browser. In this case, you can switch to another browser (It has to be Safari, Chrome, Firefox, or Opera).If your theme uses a preloader, you may need to disable the preloader within the theme』s options or within Customizer. Learn more.The gray page can be also due to X frame restrictions and Cross-origin issues. You can see if it is the issue by checking the error messages of your browser console (to do it, click right on your mouse, select 「inspect」 and then 「console」. Error messages are written in red). In this case, you will have to change the X-Frame-Options from DENY to SAMEORIGIN. This has to be solved by your hosting company.If you use Cloudflare, you may need to either switch off Rocket Loader or add rules to Cloudflare. When Rocket Loader is activated it can take time to load the editor of Elementor and sometimes you will get stuck on the gray loading page.  Click here for a solution. The cache of Cloudflare can also prevent your browser from recognizing the new versions of Elementor and Elementor pro so make sure that you clear/deactivate your cache before updating the plugins. If you are using both the free version of Elementor and Elementor Pro, make sure the versions are compatible. If you are using one that is older than another, conflicts can occur, because the newer version may be using code or functions that the older one is unaware of. Update both to the latest versions to troubleshoot this possibility.

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

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