Author 诗语

Dynamic Content

Dynamic Content draws content from the website, or from the current pages.

The Post Title Widget is a good example. This widget displays the title of a Page or Post. It』s dynamic because it changes according to the Page or Post it『s used on.

Let』s consider another example. Let』s say we want to add the site』s tagline to our page. Here is how we could do that dynamically.

Drag a Heading widget onto the screen.Click the Dynamic icon in the upper right corner of the field.Select Site Tagline from the dropdown and watch the default Heading text immediately change to reflect your site』s tagline.

Before, After and Fallback Fields

You have the option to add Before, After and Fallback content to each dynamic element. This is helpful for adding static content before or after dynamic content. Use the Fallback field to set default content to be used in case the element has no content or does not exist.

Click the wrench icon next to the Dynamic Content type to open the Content Type』s options. For some types of Dynamic Content, you will find these options in an Advanced tab, especially if other options are available for the specific type of Dynamic Content chosen.

Dynamic Content – Not Just For Text

Text is not the only dynamic content available to use. Dynamic capabilities can also be used with the classic elements such as images, video, etc. – anywhere you see this  icon. Clicking on the icon will switch the widget content from being static to dynamic.

User Profile Pictures

For example, you can create dynamic user-centric pages that can dynamically generate a user』s profile picture, by simply using the User Profile Picture dynamic data.

Dynamic Number Controls

Beginning with Elementor Pro 2.7, numeric controls such as those found on Counter widgets, Price Table widgets, Star Rating widgets, etc. can now use dynamic numbers to enable creative, advanced functionality.

Custom Field Keys

Also beginning with Elementor Pro 2.7, custom field keys can be used to populate dynamic controls. Some custom fields don』t normally appear in the WordPress edit area. In such cases, you can use the Custom Field Key in the Dynamic option for 「Custom Key」.

Preview Dynamic Content in Single and Archive Templates

As you are working on single and archive templates, it is helpful to be able to choose which content you』ll see as you design and edit the template.  Although the template will likely be applied to multiple pages, you can choose any specific page as preview content so that you can see how the template will look when applied to that specific page as you edit. Choose different pages at any time during editing to preview how your template will look on those pages.

Preview Panel

Click the gear icon in the lower left of the Widgets Panel.Preview Dynamic Content As: Select the type of content to preview such as Post, Page, Media, etc. and then select the specific page, post, etc. to use as a the content to view while editing the template.

Elementor 2.5 – Overview

Meet Flexible Layout

Custom Positioning

Elementor is a grid-based editor, meaning all layouts are built according to a certain grid, or horizontal and vertical structure. Until now, you could drag in different widgets and they snap into place, according to the column and section you drag them to.

Now, we are expanding our positioning options and offering multiple advanced positioning methods especially for those pixel perfect enthusiasts:

NEW! Inline Elements

Want to place 2 buttons side by side in the same column? Now you can!

Before, each widget took up 100% of the column. Now, you can set the widget to be 『Inline』, meaning the widget will take up the minimum width it holds.

This allows you, for example, to place an Icon next to a Heading, all within the same column.

In addition, you also have the option to set any custom width, so the widget fits exactly in place.

Once you choose Inline Width, you』ll also get the option to define a specific vertical alignment per widget.

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

NEW! Absolute Position

Go to any widget, choose 『Position: Absolute』, and you will be able to drag the widget to any location on the page, regardless of the grid. Point anywhere on the screen, and simply drag the widget there.

Note: Absolute positioning is not the recommended method for building web page layouts. Having said that, it does come in handy in many situations where you want to position the various page elements more freely.

Don』t like dragging? You can also set the absolute position by using the X and Y scales. In the panel, you will find several additional controls: Horizontal Orientation & Vertical Orientation. This sets the reference point for the position absolute.

Absolute positioning can also be set separately for mobile, tablet and desktop devices.

NEW! Fixed Position

Do you enjoy using sticky positioning for widgets? Then you will LOVE this new option.

Set your widget to have a fixed position and place it in a custom position. Now your element will scroll alongside your users』 journey in your website.

Confused between Sticky and Fixed?

Sticky is a scrolling effect which is relative to the section it』s placed in, Fixed position, however, is relative to the user viewport. That』s it!

Column Vertical & Horizontal Alignment

Have you ever built a services section with different height columns that are not properly aligned?

We have now added several options for vertical and horizontal alignment inside columns.

Vertical Alignment

TopMiddleBottomNEW! Space Between – Widgets start and end at the edge of the column, with equal space between themNEW! Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgets.NEW! Space Evenly – Widgets have equal space between, before and after them.

Horizontal Alignment

This new feature extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row.

NEW! StartNEW! CenterNEW! EndNEW! Space Between – Widgets start and end at the edge of the column, with equal space between themNEW! Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgetsNEW! Space Evenly – Widgets have equal space between, before and after them

Responsive Improvements

In Elementor 2.5.0 we added a couple of largely demanded responsive enhancements:

Show/Hide columns per device

Now you can set your responsive behavior not just for sections, but also for columns. Choose on which device to show each of your columns, and get more design flexibility by using this option.

Responsive support for Entrance Animation

Need a slide-in entrance animation on desktop, but a different animation on mobile? No problem!

Simply pick your Entrance animation per device, and fully customize your website animations.

Please note that Entrance animation control moved to a new location, which used to be 「Scrolling Effects」 and is now called 「Motion Effects」. This new section contains the Entrance animation and Sticky controls.

Improved Text Editor Layout

Want to divide your Text Editor widget into columns? In Elementor v2.5.0, you』ll be able to set columns for the text inside the widget.

In addition, you can specify the columns per device and set its gap between the columns.

Just another small but significant tweak in this layout dust-shaking release!

More Improvements

Please don』t miss these points:

We』ve improved our infrastructure for better performance. The editor loading time has been reduced by at least 50%.Remember last used tab – When you edit a widget』s tab in the panel, and then switch to a different widget, the editor will remember the tab you used last. Then, when you re-edit the widget, the panel will display the last tab, exactly where you left it.You can now add text shadow for the Image widget captions.Added access to super admin role in Maintenance Mode (Thanks @GermanKrutov)

ConvertKit & Elementor Integration

In this guide, we will explain how to integrate  ConvertKit With Elementor Forms.

First set your ConvertKit API Key in the Integrations Settings. Under Elementor > Settings > Integrations Tab Create a form using Elementor Form Widget Click Actions After Submission Under Add Action choose ConvertKit

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

Match your form fields to ConvertKit』s Fields through the Field Mapping options You can draw the Tag Fields from the ConvertKit』s API.

Note : ConvertKit integration only supports field mapping for the  Email and First Name fields. Any additional custom field isn』t supported.

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

Elementor』s New Flexbox Features

Elementor 2.5.0 includes advanced layout capabilities made possible thanks to the transition to the Flexbox CSS method, incorporated into the columns.

Want to learn more about Flexbox CSS and WordPress? Watch the video and visit our full feature release

Until v2.5.0, the ` display: block` method set the default spacing between all widgets to 20px, and if you had set a different value, let』s say 40px, per widget – the larger value was added and displayed.

What does it mean for me, the user?Most users were not affected by this update. We have just rolled out a new version 2.5.4 which fixes possible 『extra spacing』 issues that some users faced.

The main issues happened because of a particular use of 『 margin-bottom『 that cause the disrupted spacing.

For users who already used the advanced inline option from v2.5 on pages, and came across these issues, go ahead and edit the page with Elementor, then save it again.

This behavior was due to the 「Collapsing Margins」. Read more here.

Now, if you will edit an existing page or create a new one, the calculation of the margins will be summed and not relate just to the higher value.

Let』s use our previous example: – Space between widgets: 20px – Margin-bottom on specific widget: 40px

In this new method, the value of the margins will be summed and will set to be 60px.

This may affect your website, only if you edit existing pages that were created before v2.5.0. Your newly created pages will use the flexbox rules.

Important! We strongly recommend you to review your website before hitting the Publish button and make sure all of your spacings are correct.

Read the full blog post here.

Caching Prevents Live Site From Showing Changes In Editor

Changes You See In The Editor Do Not Show On The Live Site

If the changes you』ve made look right in the editor, but they aren』t being reflected on the live site, this is often due to a caching issue. When your styles are not applied online, please follow the steps listed below for dealing with cache issues:

Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. Update your page. You may need to make a small change to enable the Update button. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

If this does not solve the problem, please see more possible solutions here:

My changes do not appear online. What can I do?

Popups: Classic Opt-In

Although there are many uses for the classic popup, it traditionally places an opt-in form in the middle of the screen, with an overlay that obscures the background. For this example, we』ll trigger the popup sitewide when the user shows intent to exit the page.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the Vertical position to CenterShow OverlayShow Close Button

Style

Change text, background image, button, and styling as needed.

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Exit Intent

How To Show Hamburger Menu On Desktop

In the Nav Menu widget, Go to Content > Layout, and under the Layout dropdown, choose Dropdown.

How to Add a Calendar to Elementor

It』s easy to add a Google calendar to any website with Elementor.

Open Google Calendar, and get the code to embed it in your websiteIn the top right, click Settings Settings and then Settings.On the left side of the screen, click the name of the calendar you want to embed.In the 「Integrate this calendar」 section, copy the iframe code displayed.Choose your options, then copy the HTML code displayed.Make sure your embedded calendar is set as public.Inside Elementor, drag the HTML widget, and paste the embed code of the calendar.

Congratulations, you』ve now added a calendar into Elementor!

Popups: Slide-Ins

Slide-In popups can be used for any purpose. In this example, we』ll use one as an age-gate, to force users to verify that they are over the age of 18 before viewing the site. We』ll redirect them to a search engine if they say they are under 18, and close the popup if they say they are over 18. No other method will allow the user to close the popup to enter the site.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』Choose a template from the Library or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the Vertical position to CenterShow OverlayHide Close ButtonSet Entrance Animation to Slide In Left

Style

Set Overlay to either a solid color or gradient, with no transparency.

Adjust Content

Change content as needed. We used YES and NO buttons to either close the popup or redirect the user to another site.

For the YES button, we used the link field to set a Dynamic Popup Action to Close Popup.

For the NO button, we set a link to Google, so the user would be sent away from our site.

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Load

Can I use Elementor for my commercial theme?

Yes. The free version of Elementor (only) can be used with your commercial theme.

 Please don』t change any credit or brand attribute, so we can continue to provide the plugin for free.