Author 诗语

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

Preview & Publish your page

After you』re done designing your page, you can Preview it and Publish it.

Go to the bottom panel:

To preview click the  icon.  If you are satisfied with the result, go ahead and click the  button. Click 『Have a Look『 to view the published page

Note: The Preview link is different than the actual page link

Save Draft

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

Click the arrow next to Update / PublishChoose Save Draft

Next step – Mobile responsive editing

Elementor 2.7 – Overview

Introducing v2.7: Enhanced Backgrounds & Dividers

Enhanced Backgrounds:

Backgrounds just got cooler! In Elementor v2.7 we』ve added several improvements and capabilities to backgrounds:

1. Background Slideshow

Now you can use a sideshow as the background for sections, columns, and inner-sections. This can help you build more complex structures and layouts, while still preserving a transition effect. 

From the section』s or column』s Style > Background Type tab, select Slideshow from the Background Type options. Use the presentation settings for the image gallery to create various slideshow effects.

2. Vimeo Video as a Background

As part of enhancing the background capabilities, we』ve added Vimeo as a source for your background videos. So now, both team YouTube and team Vimeo can enjoy sweet backgrounds.

From the section』s or column』s Style tab, enter a Vimeo video URL into the Video URL field of the section』s or column』s Style > Background Type > Background Video field.

3. Allow Background Video to Play on Mobile

Until recently, most mobile phones didn』t play background videos. Recent browsers policy changes have added this functionality to some browsers. Starting with v2.7, Elementor will not play background videos by default. However, you will be able to change this default by turning on the 「Play On Mobile」 switch. See our dev blog post.

From any section』s background video element, switch Play On Mobile to On. This should allow the video to now play on mobile.

Improved Dividers

Dividers are one of the most basic and useful design elements in web design. So, of course, we went ahead and made them even better, with newly added elements and shapes.

Divider widget Improvements

Our Divider widget used to be quite basic and traditional. For v2.7, we added some fancy features to it. You can now choose from a list of new shiny SVG dividers and control their style and behavior.

In addition, we added the option to include some text or an icon before, in the middle or after your divider.

Add a Divider widget to your page, select a Divider Style, add an icon from the Divider widget』s Content tab, and style both the divider and the icon from the widget』s Style tab.

Under the Hood Improvements:

In the following releases, we will gradually release major infrastructure improvements, which will allow Elementor to be more extendable, reliable and stable. Those improvements include unification of multiple libraries, update JS handlers to ES6, new Editor JS API mechanism to improve current flow and to support future exciting modules and MEGA features.

More Improvements

Please don』t miss these points:

New: Editor JS API ($e) to improve capabilities and stabilityTweak: Converted all widgets JS handlers to ES6 classes Tweak: Added option to select the version you rollback to in Version Control toolTweak: Use swiper.js instead of slick.js in Image Carousel widget Tweak: Implemented virtual list render in Icons Library to improve performance and stabilityTweak: Added support of wp_body_open in Canvas templateTweak: Editor Panel UI tweaksTweak: Moved structure control into section panel in Section elementTweak: Added option to allow background video to play on mobile devices if device support itTweak: Added more post statuses to show in the Finder Tweak: Added Space-around, Space-between and Space-evenly to Vertical Align options in Section elementTweak: Updated Eicons library to v5.4.0Deprecated: Removed old deprecated aliases 

Fixes:

Fix: Background video plays on mobile devices in some casesFix: Icon List alignment issueFix: Two clicks needed to start Vimeo videos with image overlayFix: Init navigator only once when changing page template

How To Create a Full-Width Page Using Elementor

A Full-Width Page means the content spans from right to left and takes the full 100% of the screen』s width.

With Elementor there numerous ways to do this, here are three:

Use a Full-Width page templateUse the Canvas page templateStretch the sections. See the video below

Subscribe to Our Youtube Channel, or click to learn more about full-width and full-screen headers

How To Make Clickable Phone Links or Mailto Links in Elementor Widgets

Use Smart Links

With Elementor Pro』s Dynamic Contact URL feature, quickly create 「smart」 links, such as clickable phone links or mailto links from any widget that has a Link field, like the Button widget. Many other smart links can be created with this feature as well, including SMS message links, Whatsapp conversation links, Skype call links, Viber call links, Waze navigation links, Facebook Messenger links, and calendar event links. Click to learn how easy it is to use these smart links.

To manually create clickable phone links and mailto links instead of using Smart Links, follow the instructions below:

Clickable Phone Links

To Create a Clickable Phone Link That Opens a Dial Dialog on Smartphones and Mobile Devices:

Enter tel: followed by the complete phone number, without dashes or any other symbols, like this:

tel:9855551212

Mailto Links

Simply enter the appropriate mailto: code into the Link field of any linkable widget.

To Create a Basic Mailto Link, with the TO: field filled out:

Type mailto: followed by the email address to send the email to, as shown in the example below:

mailto:[email protected]

To Create a Mailto Link, with the TO: field and the SUBJECT: field filled out:

Add subject= followed by the text of the email』s subject

mailto:[email protected]?subject=Thank You For Getting In Touch

Or

mailto:[email protected]?subject=Thank%20You%20For%20Getting%20In%20Touch

Note: Spaces between the words of the Subject will probably be okay, but in some cases, it may not work well. The safest way to handle that is to replace the spaces with %20.

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.

How To Show Hamburger Menu On Desktop

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

Popups: Hello Bar

Hello Bars are popular popups, primarily used for sales promotion announcements. For this example, we want our Hello Bar to only show on the Shop page, with no overlay, and a simple close button. In addition, we want to wait until the user scrolls down 60% of the page before popping up. By that time, our visitor is well engaged and is likely ready to consider our offer.

Create Popup

Go to Dashboard > Templates > Popups > Add NewName your template and click 『Create Template』In the Library, open the category dropdown to choose a Hello Bar, or create your own design

Popup Settings

Settings

Set the Horizontal position to Center and the vertical position to Top.Hide OverlayShow Close Button

Style

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

Publish Settings

Conditions: Include: WooCommerce > Shop Page

Triggers: On Scroll: Down within 60%

Creating a WooCommerce Shop Page / Archive Template with Elementor Pro

When visiting an online store (shop page), you see the front page of the website. You can then choose to see only a specific category (i.g. Shoes), or filter the results by size etc. What you』re actually viewing is an Archive page.

WooCommerce Archives have different terms that you can use to filter them, terms you』re familiar with: Date, Category, Price, Popularity, Rating, Tags, or any other taxonomy (e.g. Size, Color, etc.)

Under Templates > Theme Builder > Product Archive > Add New, from the dropdown choose Product Archive, give it a name, and click Create Template.Choose a Product Archive Block and Insert. Alternatively, you can design your own.After you』ve finished designing, click Publish.Choose a Condition. Click to learn about conditions.

Important! In order for the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.

Single Post Widgets

Elementor offers a set of widgets called 『Theme Elements『 that can be used to create your single post. These include the Post Title widget, Post Info (Meta Data) widget, Post Excerpt widget, Post Content widget, Featured Image widget, Search Form widget, Author Box widget, Post Comments widget, Post Navigation widget, and Breadcrumbs widget (if Yoast SEO plugin is installed and active).

Post Title

The title of the current post.

Post Info (Meta)

The current post』s meta data such as Author, Date, Time, and Number of Comments.

Post Excerpt

The short summary of the current post.

Post Content

The heart of the current post is the content, of course!

Featured Image

The featured image of the current post.

Author Box

A box which features the author』s bio.

Search Form

A search form to help users find content on your site.

Post Comments

A user comments section.

Post Navigation

Navigation to allow users to easily navigate between posts.

Breadcrumbs

Breadcrumbs which enable users to navigate your site easily, while also providing search engines clues as to the structure of your site. (Requires Yoast SEO plugin).

Read the tutorial showing how to Create a Single Post Template