Yes.
Elementor works with all posts and custom post types.
In the Elementor dashboard, you can set which post types will be editable in Elementor. Just go to Elementor > Settings and check the post types you wish to be editable.
The Viewport Control is a dual-slider control that lets you define viewport starting and ending points for scrolling effects.
The viewport is the user』s visible area of a web page. This visible area varies in size by device.
When scrolling down, each element enters the viewport at the bottom of the screen. When an element first comes into view from the bottom of the viewport, that represents 0 percentage from the bottom. As it scrolls more into view, the percentage of its place in the viewport changes. When the vertical middle of the element is in the center of the viewport, it is at 50%.
If the Viewport control is set at 0 Bottom and 100 Top, then the motion will begin when the element first enters the user』s viewport at the bottom of the screen, and will stop when the element exits the viewport.
If set to 30 Bottom and 65 Top, the motion will begin when the element has entered and reached 30% of the viewport, and will end when it has reached 65% of the viewport.
If using a motion effect such as Transparency > Fade Out In, the effect would be fully visible at 0%, would begin to fade out when the element reaches 30% of the viewport, would be fully invisible when it reaches 65%, and then would begin to fade back in at 65% of the viewport, until it reaches full visibility by the time it exits the viewport.
Fade In Out would be just the opposite. When the element first enters the viewport at 0%, it would be hidden. When the element reaches 30% of the viewport, it would begin to fade in, becoming more and more visible until it reaches maximum visibility at 65%. At 65% it will then begin to fade back out until it is completely hidden again by the time it leaves the viewport.
You can style the messages shown to the user after a form is submitted.
Typography: Set the typography of the message text.Success Message Color: Choose the color of the success messageError Message Color: Choose the color of the error message.Inline Message Color: Choose the color of the inline message.
More Form Options
This page outlines the Form Style > Messages Options. For other Form options, click one of the links below:
CONTENT
Form FieldsSubmit ButtonActions after submitAdditional Options
STYLE
FormFieldButtonMessages
The Post Comments widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display a post』s user comments.
Content
Comments
Skin: Select an available skin. Currently one skin is available, the Theme Comments skin. The Theme Comments skin uses the currently active theme comments design and layout to display the comment form and commentsSource: Select the source of the user comments, either those from the Current Post or Custom. If Custom is chosen, the following option becomes available: Search & Select: When you start typing a specific name of a post, you will get the autocomplete full name of the post, which you can then select. The comments from the selected post will be displayed.
Note: The Post Comments widget will only work if comments are allowed. This setting is controlled via WordPress Discussion settings.
Read the tutorial showing how to Create a Single Post Template
In this guide, we will explain how to integrate GetResponse With Elementor forms.
First set your GetResponse 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 GetResponse Match your Form Fields to GetResponse』s fields through the Field Mapping options
Tip: Click to learn how to get your API Key from GetResponse
Note: The integration with GetResponse creates a new contact in your GetResponse account It does not update existing contacts.
Unsupported Form Field Type May Return A 400 Error
If you receive a 400 error, you may have used an unsupported form field type. For example, the 「phone」 type is not supported. If you have this particular problem, here』s how to solve it.
Within your GetResponse account, please change the Phone Number field type to a Text field.Within your Elementor form, set the Type of field to Tel.
Set the image or gallery you wish to display for WooCommerce Products in the WooCommerce Single template
Style
Sale Flash: Show or Hide the Sale FlashBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the main imageColor: Choose a color for the borderBorder Radius: Set the border radius to control corner roundnessSpacing: Adjust the amount of space between the main image and thumbnails
Thumbnails
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the thumbnailsColor: Choose a color for the borderBorder Radius: Set the border radius to control corner roundnessSpacing: Adjust the amount of space between each thumbnail
Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.
「I』ve created a popup but users can』t see it「. If your visitors aren』t seeing your popup as expected, check that the Conditions, Triggers, and Advanced Rules are set properly.
Conditions determine where (on which page(s)) a popup will occur. Do your conditions indicate that the popup will happen on the page you expect?Triggers are user actions that cause a popup to happen. Did the user do what was needed to trigger the popup? (i.e. click something, scroll, etc).Advanced Rules cover other situations that would cause a popup to happen. Do you have an Advanced Rule set? Is that situation occurring? For example, you may have set an advanced rule to show a popup when a visitor comes to the page from a search engine. Did that scenario happen?Advanced Rules > Hide for Logged In Users option may not work properly on cached websites.
Also consider that you may have several different conditions, triggers, and advanced rules set that must all happen before a popup will occur. If only some of those rules are met, but not all, then the popup will not happen.
Let』s look at an example.
One of the services offered on a website is a high-priced business mentor membership program. In order to show the value of joining the program, three high-quality comprehensive free guides have been created for anyone who signs up as a trial member. A popup will be shown to anyone who attempts to leave the membership landing page without having joined. The popup will offer one of the three guides to be given to the user if they fill out the form within the popup. Which guide offered will depend upon where the user came from before landing on this page, so three popups will be created.
Popup A – Offers a guide about acquiring new clients
Condition: only shown on the membership landing page
Trigger: only shown when the user intends to exit the page
Advanced Rule: only shown to users who are not logged in who came from an internal page that discusses client acquisition
Popup B – Offers a guide about managing client projects effectively
Condition: only shown on the membership landing page
Trigger: only shown when the user intends to exit the page
Advanced Rule: only shown to users who are not logged in who came from an internal page that discusses project management
Popup C – Offers a generic guide about the benefits of the entire business membership program
Condition: only shown on the membership landing page
Trigger: only shown when the user intends to exit the page
Advanced Rule: only shown to users who are not logged in who came from a search engine
For any of the three popups to be shown, each of the rules must apply, or the popup will not occur. In this example:
If the user came from anywhere other than the 2 specified internal pages, or from a search engine, no popup will be shown.If the user meets all of the rules for one of the popups but the user is logged in, no popup will be shown.If the user is not on the membership page, no popup will be shown.
Popups may encounter layout issues with iOS10 or below, and Popups are not compatible with, or supported by, IE 11 or below.
Learn more about Popups here
In this step-by-step tutorial, I』ll show you the easy process of building landing pages with Elementor, while creating a live example of a stylishly crafted landing page.
Note! Some features mentioned in this tutorial, like the Forms widget, are only available in Elementor Pro. If you still haven』t, we strongly recommend upgrading to Pro.
You will learn why professional designers choose Elementor as their preferred solution for building landing pages and complete websites.
What you need before you start
An active WordPress installationInstall ElementorInstall Elementor Pro
Setting Up Your Landing Page
First, in the WordPress dashboard, click Pages > Add NewClick Edit With Elementor
Go to the bottom left gear iconSwitch Page Layout to Elementor Canvas, in order to work on a blank landing page
Adding the Elements of Your Landing Page
1. Click on the folder icon to add a template
2. Click on the Blocks tab
3. Using the select dropdown, start adding the different blocks that will make up your landing page. A possible landing page structure you can follow is:
Header – For landing pages, we usually minimize the header. In this example, we will only show the site logo, centered to the middle.
Hero – This is, without a doubt, the most important part of your landing page. It is sometimes called the 『Above the Fold』 section, as it is the first thing your visitor sees before scrolling the page. For this reason, we will place the most important elements here. Title, sub-title and subscribe form.
Services – Here, we go into more details, depicting the main services or features our business provides.
Testimonial – The testimonial section shows social proof that your current clientele are satisfied with the service they received from you.
Portfolio – Show the visitor examples of your work, so they know if you match what they are looking for.
Footer – Because your visitors have already scrolled down the page, you want to offer them another call to action, to encourage them to do what you want them to do.
Closing the page, we end with the footer, which usually includes your Privacy Policy and Terms of Use.
Customizing Each Block – Challenge Yourself!
Go over each block and make the changes needed to make it personal.
Here are some example changes:
Change title content – Try to change the text to fit your own business descriptionChange images – Try to change the images in the Portfolio section for your ownChange colors – Choose 3 colors you want to work with and apply them across the pageChange backgrounds – Change the background image in the hero section for your own
Customizing it For Mobile
All blocks come pre-designed as 100% mobile responsive. Even so, you can switch to mobile view and start customizing margins, paddings and other settings for mobile and tablet devices.
See this tutorial to learn how.
Previewing Result & Publishing Your Landing Page
Before you hit publish, a good rule of thumb is to preview the result and make sure everything looks in order.
To do so, click on the eye icon at the bottom left panel.
Then, publish the article. You will notice that the green publish button changes to grey Update.
The Sitemap widget creates a structured, organized, and accessible HTML sitemap of your website, which provides users and search engines easy, one-click access to your site』s pages.
Content
Sitemap
Items
Type: Select either Post Type or TaxonomySource: Choose Posts, Pages, or any available custom post types if Post Type was selected. Choose Categories, Tags, Format, or any available custom taxonomies if Taxonomy was selected.Title: Enter a titleOrder By: Choose how to order the links. For Post Type selection, choose from Date, Title, Menu Order, or Random. For Taxonomy selection, choose from ID or Name.Order: Choose to list the links in ascending (ASC) or descending (DESC) orderHide Empty: If type chosen is Taxonomy, this option is available. Set to YES to hide if taxonomy is emptyHierarchical View: Set to YES to show hierarchical view (both parents and children).Max Depth: If Hierarchical View is set to YES, this option becomes available. Select depth of hierarchy to show, from 1 to 6, or ALL.
Columns: Adjust the number of columns, from 1 to 6Title HTML Tag: Set the Title tag to H1-H6, Div, Span or ParagraphAdd nofollow: Slide to YES to add rel=」nofollow」 to all sitemap links
Additional Options
Exclude: Choose to exclude the current post or manually search and select a post to excludeAvoid Duplicates: Choose Yes to avoid displaying duplicate posts that might appear in multiple categoriesProtected Posts: Choose to HIDE or SHOW protected posts
Style
List
Indent: Set the amount of indentation within the listsPadding: Set the padding around the sitemap columns
Title
Color: Choose the color of the title』s textTypography: Change the typography options for the title
List Item
Color: Choose the color of the page linksTypography: Change the typography options for the page links
Bullet
Color: Choose the color of the list bulletsStyle: Select the type of list bullet, choosing from Disc, Circle, Square, or None
Layers now integrates seamlessly with Elementor.
What is Elementor?
Elementor is a drag & drop website builder plugin that enables you to create complex layouts visually and design your website live.
This integration means that you』ll find some differences in the Dashboard and other functions of 『Layers』 you are currently familiar with.
You』ll no longer find the 『Layers』 tab on the WordPress menu.
Nor will you see the 『Layers』 dashboard.
You will find the known 『Layers』 steps setup, with 『Install Elementor』 as the last step.
How to create a new page
With 『Layers』 you created a page via the 『Layers』 tab. Now with Elementor, you just need to click the regular WordPress 『Add new page』, and click to 『 Edit with Elementor』.
To learn more about creating pages with Elementor click here.
Pre-designed Page Layouts – Elementor Library
When creating a new page with 『Layers』, you』ve had some pre-designed page layouts to choose from. With Elementor, you get to choose from a vast library of pre-designed pages & blocks.
With Elementor Pro you get 300+ layouts and designs.
Customizer / Elementor Live Preview Editor
Elementor uses a live preview drag & drop editor, while with 『Layers』 you are used to editing via the Customizer:
Layers: Edit via Customizer
With Elementor, you literally design your site via a live preview:
Elementor: Edit via Live Preview
Widgets
Elementor uses widgets, just like 『Layers』. It uses them in an intuitive, user-friendly matter.
To learn more about all the different widgets click here.
Layers』 Widgets
Elementor Widgets
