Intro to Dynamic Content

Intro to Dynamic Content

What Are Post Types

Post Types are 「types of content」, grouped together in a structured way within WordPress.

The Default WordPress Post Types

Currently, there are eight default WordPress post types.

PostPageAttachmentRevisionNavigation MenuCustom CSSChangesetsUser Data Request

Most users are familiar with the two most common post types: Posts and Pages. Although similar, Posts are time-based listings while Pages are hierarchical in structure, with Parent > Child relationships. In addition, Posts make use of taxonomies such as Categories and Tags, while Pages do not, and Pages use Page Templates for display, while Posts do not.

What Are Custom Post Types

WordPress allows users to create their own Custom Post Types, often referred to as CPTs.

Some of the more common Custom Post Types you』ve probably come across include:

MoviesTestimonialsReviewsProductsEventsPortfolios

Each of these defines a 「type of content」.

The editing screen will look very similar to the default Post and Page editors, as shown in this example of a Movie Custom Post Type.

When might you need a custom post type?

A common use of a CPT is an e-commerce website. Products are a specific type of content that don』t fit into the Posts or Pages default post types. Products need to include many extra pieces of information, such as Price, Size, and Color.

Custom Taxonomies

Just as the Post Type uses Categories and Tags taxonomies to help organize posts, a Custom Post Type can use its own custom taxonomies. A movie review CPT, for example, might use Genre as a custom taxonomy, to categorize movies into groups such as SciFi, Romance, etc.

Because CPTs are separate from Posts and Pages, they can be displayed separately, organized by their own taxonomy categorizations, and filters

Creating Custom Post Types

To create custom post types in WordPress, you can write the code manually in your functions.php file (Example shown below).

Or, you can use one of the popular plugins designed to make creating Custom Post Types much easier such as:Custom Post Type UI

By utilizing the Theme Builder, you can create Single Post Templates and Archive Templates for your Custom Post Types and then set the display conditions accordingly.

Note: When creating Custom Post Types the option for 「Has Archive」 must be set to 「True」 in order to create Archive Templates in the Theme Builder.

Creating Custom Fields

Custom fields store extra information about the content. Just as a blog post has an Author field, and an Excerpt field, a Post or Custom Post Type might have several custom fields assigned to it.

With Elementor and custom fields you can create dynamic pages without the use of code. You can use one of the following most popular plugins designed to make the process much easier: 

Advanced Custom FieldsToolset TypesPods

Elementor integrates directly with each of these plugins. Read more about each in the following articles:

Elementor and ACFElementor and ToolsetElementor and PODS

You can easily select your custom fields from any Dynamic Content list to display them anywhere you wish. 

Note: If the Single Post template is not being loaded for your CPT, and it looks as though the Display Conditions are set up properly, check the template you are using for your CPT posts. Make sure the posts are using the Default template. If they aren』t, change them to Default and you may find that this solves the problem, allowing the Single Post Template to load properly for your CPT posts.

Read the full blog post

Call to Action Widget (Pro)

Call to Action Widget (Pro)

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.

Content

Image

Skin: Choose either the Classic skin or the Cover skinLayout: (Only shown for Classic skin) Align the image to the left, right or on top of the image

If Classic Skin is chosen the following options are available:

Content

Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element:Icon: Select an icon from the FontAwesome library View: Choose the default icon view, or select Stacked or Framed.Title & Description: Choose the title and description that appears in the front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: Enter the URL for the button』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height – Set the minimum height of the whole boxAlignment – Align the content to the left, center or right of the boxVertical Position – Align the content to the top, center or bottom of the boxPadding – Set the padding for the content

Image

Min. Width: Set the minimum width for the imageMin. Height: Set the minimum height for the image

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Description

Typography: Set the typography options for the titleSpacing: Set the amount of space between the description and the button

Colors

Background Color: Choose the background colorTitle Color: Choose the title colorDescription Color: Choose the description colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the box shadow settings for the ribbon

Hover effects

Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at onceHover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down

The following items can be set independently for both the Normal and Hover states

Overlay Color: Choose the overlay color for the imageCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend modeTransition Duration (ms): (For Hover state) Set the duration for the hover effect

If Cover Skin is chosen, the following options are available:

Content

Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element:Icon: Select an icon from the FontAwesome library View: Choose the default icon view, or select Stacked or Framed.Title & Description: Choose the title and description that appears in the front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: Enter the URL for the button』s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height: Set the minimum height of the whole boxAlignment: Align the content to the left, center or right of the boxVertical Position: Align the content to the top, center or bottom of the boxPadding: Set the padding for the content

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Colors

Title Color: Choose the title colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeTypography: Set the typography options for the button textText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the 
box shadow settings for the ribbon

Hover Effects

Content

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downAnimation Duration: Set the amount of time the animation takes to completeSequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downOverlay Color: Choose the overlay color for normal and hoverCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend mode for the imageTransition Duration (ms): (For Hover state) Set the duration for the hover effect 

Advanced

Set the Advanced options that are applicable to this widget

Navigator

Navigator

In Elementor Version 2.2 we added a useful design feature to help you clear your pages clutter.

Navigator is a navigation tree panel providing easy access to every element on the editor with just one click. Navigator enables the user to drag elements throughout the page and edit them, quickly and easily.

Navigator is particularly useful for long pages or pages with complex multi-layered design, and for elements combining Z-Index, minus margin, position absolute, etc. It allows you to access element handles that may be positioned behind other elements.

Access Navigator

You can access Navigator in one of 3 simple ways:

Right-click any element and then click on Navigator. This will automatically redirect you to the specific element in the navigation tree.Click on the elements button  in the panel』s footer.Use the Cmd/Ctrl + I keyboard shortcut.

Choose an element to edit

Click once on any element to immediately scroll to its Edit panel.

Rearrange elements

Drag any element up or down and drop before or after any other element.

Right-click options

Right-click an element to enable all of its normal right-click menu options, such as Edit, Duplicate, Copy, Paste, etc.

Hide / Show elements

Click the element』s View button  to show or hide the element, enabling you to better focus on design.

Note: This will not affect the front end of your website.

Name elements

Double-click the element name. The area will change to a blue highlight, indicating you are in insert/edit mode.Type a custom name to help you easily identify the element at a later time.

Collapse/Expand one element

Click an individual element』s arrow button to expand or collapse that element.

Collapse/Expand all elements

Click the up  or down  arrow button in the upper left of the Navigator panel to expand or collapse all of the elements at one time.

Position Navigator panel

Float

Drag the Navigator panel anywhere on the page

Dock

Pin the Navigator panel to the side of the screen by dropping it inside the vertical blue drop zone that appears when the panel is dragged near the right side of the screen.

Paypal Button Widget (Pro)

Paypal Button Widget (Pro)

Elementor』s Paypal Button widget enables you to collect payments of any kind. Sell a single product like an E-book, create a fundraiser campaign, or sell a subscription-based service and seamlessly collect your fees.

Pricing & Payments

Paypal Account: Fill in the details of your merchant account. Transactions made through your PayPal button will be registered under this account.Transaction Type: Choose between Checkout, Donation, and Subscription.

Checkout Type

Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Price: Set your price.Currency: Choose between multiple currencies.Quantity: Set your quantity.Shipping Price: Set your shipping price.Tax: Choose between None or PercentageTax Percentage: Set your tax percentage.

Donation Type

Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Donation Amount: Choose between Fixed and Any Amount.– If Fixed is selected set your Amount and Currency.– If Any Amount is selected set your Currency.

Subscription Type

Item Name: Enter your item name (that will appear when the user is redirected to Paypal).SKU: Enter your item』s SKU.Price: Set your price.Currency: Choose between multiple currencies.Billing Cycle: Choose between Daily, Weekly, Monthly, or Yearly.Auto Renewal: Switch On/Off to enable auto renewal for the subscription.

Button

Text: Type your button』s text.Alignment: Align the button to the left, center, right, and justified.Icon: Choose between not display an icon, upload SVG, or add an icon from the icon library.Icon Position: Display the icon Before or After the text.Icon Spacing: Set the space between the icon and the text.Button ID: Add an ID to the button.

Additional Options

Redirect After Submit: Enter a URL to redirect after submit.Sandbox: Test out the functionality on a sandbox to ensure everything works properly. Switch On/Off. Click to learn more about setting up a Paypal sandboxSandbox Email Account: This is the address given to you by PayPal when you set up a sandbox with your developer account.Open Paypal In New Tab: Switch to Yes to open Paypal in a new tab.Custom Messages: Switch to Yes to type your own custom error message and Paypal not connected error message.

How To Delete A Widget

How To Delete A Widget

There are two easy ways to delete a widget from an Elementor column. In this example, we』ll first delete the widget from the Navigator. Then, we』ll use History to undo our deletion. Finally, we』ll delete the widget again from the Edit Widget handle.

Delete A Widget From The Navigator

Click the Navigator icon to open the Navigator.Find and select the widget element you wish to delete.Right-click the element and choose Delete from the drop-down selections.

Delete A Widget From The Widget』s Handle

Right-click the widget』s Edit Widget handle. Choose Delete from the drop-down selections.

How to Add Related Posts in Elementor

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

The Finder

The Finder

Elementor Finder is a search bar that pops up on when you click either CMD + E (Mac) or CTRL + E (Windows). Elementor Finder gives quick access to various areas across your site, within one window.

To Navigate To A Different Page or Template to Edit

Press CMD + E  or CTRL + E to open Finder or click the Hamburger icon  to go to Elementor』s Style and Settings Configuration section.Begin typing the name of the page, post, or template that you wish to edit. Elementor』s Autocomplete search will help you quickly find and navigate to the desired location.

To Create A New Page, Post, Template, Product, etc.

Press CMD + E  or CTRL + E to open FinderInstead of searching for something that already exists, search instead for the word Post, and you』ll get the option to open a new post. Likewise, search for Page, or Template, or Product, etc. to create a new page, template, product, etc.

Go to other areas of your site:

Finder can also be used to quickly jump to Elementor』s Templates, Role Manager, Knowledge Base, General Settings, Advanced Settings, Integrations, Tools, Version Control or Maintenance Mode. You can also navigate to the WordPress Dashboard or your Homepage.

To extend Elementor Finder capabilities read the developers doc here.

How to Create a Custom Text Path Shape

How to Create a Custom Text Path Shape

Introduction

When using the Text Path Widget, you have the option to select a custom SVG path. In this document you will learn how to create the custom path and upload it to your project. SVG paths can be created in one of the following ways covered below:

Create a path with design software such as Adobe Illustrator.Create a path with an online SVG path generator.

Guidelines for creating paths

When creating paths, you need to remember three ground rules:

The path you are creating needs to be a Path (not line, polyline, or circle…)Every path needs a starting pointThe path should be created from LTR (Clockwise)

Note: When creating a path from RTL, the text will be upside down.

Creating an SVG path with Adobe Illustrator

The process for creating an SVG path with Adobe Illustrator can be found below.

Create a New Artboard

Create a new Artboard in Ai  from the File menu (For example, Artboard size –  250X250 px)

Create an Open Path

Create any path shape you would like by using the Pen tool (For example, the wave shape shown below)

Make sure the Stroke color is solid black (#000) and the Fill is set to noneCreate your path using the Pen tool. To create curves, click and hold down the left mouse button while dragging the Pen tool. You may adjust the curves by using the handlesClick the Esc button to end the path

Create a Closed Path

The steps for creating a closed path are the same as above with the exception of the following:

Create a Closed circle path by using the Ellipse tool.Select the closed path and decide on a starting point with the Direct selection tool.Choose a point and then click on the 「Cut path on selected anchor points」. This action will create a break at the desired place.Make sure the path is left open.

Reduce the Artboard

Reduce the unnecessary space, and make sure the Artboard size is the same as the path, using the following steps:

Click on the path using the Selection toolFrom the primary menu, find and select Object > Artboards > Fit to Artwork Bounds

The Artboard should look like the following example:

Export the Path

Export the completed path as an SVG file to your computer using the following SVG Options settings:

Style – Internal CSSFont – SVGImages – LinkObject IDs – UniqueDecimal – 4Minify – SelectedResponsive – Unselected

Creating a path using an online SVG generator

If unable to have access to design software, you can use an online generator to create your path. Follow the instructions provided by the source.

Example Resources

https://yqnn.github.io/svg-path-editor/

https://mavo.io/demos/svgpath/

Clean the Path

When creating a SVG path, the design software or online generator, may add unnecessary styles and attributes. You can remove these attributes with an online SVG cleanup tool. The reduction of attributes also reduces the SVG file size.

Example Resources

https://jakearchibald.github.io/svgomg/

Important: After cleaning the desired attributes, ensure the path is still correct / working. Sometimes after reducing too many attributes, the path will no longer work. Please use this cleanup method with caution.

Upload the Path File

Upload the finished SVG file to your text path widget. Add your text and styles as needed for your project.

Teams

Teams

Teams allow you to add collaborators to your Elementor Pro subscription (Studio & Agency license). With Teams, everyone who is a team member in your subscription has access to VIP support.

Adding team members

To add a new team member to your Studio or Agency subscription, go to the Teams tab in your dashboard』s sidebar and click Add memberIn the text box, add your team member』s email address. If more than one, separate them by clicking Enter. Make sure to enter a valid email address format. The invited team members will receive an email invitation which they will need to accept in order to join your team. Invitations are valid for 24 hours from sendingFrom the Teams dashboard you can delete, resend invites, or add more team members. Once you』ve reached your plan limit, you will not be able to add additional team members unless you delete existing ones. Invitations sent but not accepted do count towards your team limit

Note: Team members must have an Elementor account based on the email you used to invite them. If they already have an account, they will have to log in, if they do not have an account, they will be directed to create an account before they can accept the invitation. 

Becoming a team member

When you are invited to be a team member in someone』s Studio or Agency subscription, you will receive an invitation to join the team via your email. To accept the invite, click Accept the InviteTo accept the invitation, you must have an Elementor account. The email used in your invitation must be the same as your Elementor account emailIf you have an account but are not logged in, you』ll be prompted to log. If you do not have an Elementor account, simply click 「Create an Account」 and create your Elementor account Once you are in your account (i.e in your Elementor dashboard), you』ll be prompted to Accept InvitationIf you have already connected your account to the websites you are working on, you will be able to view them in your dashboard as you did before, a 「Teams」 icon will be added to each website』s card and you will have access to the subscription ID of the Elementor Pro subscription that was activated on the site through the site menu If you have yet to connect your account to those sites, Click here to see how. In case you prefer not to connect your account to the websites you are a team member for, you can see the subscription ID of the Elementor Pro subscription as it will appear in a blue notification bar above the websites grid, in your dashboard』s Websites page

Get Support

To start a chat with a support agent, click the icon on the bottom right of the screen.

Tip: When reaching out to VIP Support, you might be prompted to provide the subscription ID of the Studio or Agency subscription that is activated on the website you are requesting support for.

Troubleshooting accepting an invitation 

Seeing this? 

If you accepted an invitation to be a team member but are receiving an error message, check the following things before contacting support:

Is the email the invitation was sent to the same as the email of the account you are logged in under?If you had an Elementor account before receiving the invitation which uses an email that is different from the one used in the invitation, it might be that your browser automatically logged you into the other account when you clicked 「accept」. This creates an email mismatch, and causes an error.Solution: Manually log out of your account using the 「Log out」 functionality in the profile menuWas the invitation sent out in the last 24 hours?Invitations expire after 24 hours.  Accepting an invitation after it expires results in an error.Solution: Contact the account owner and ask them to resend the invitationWas the invitation revoked?It might be that the invitation was erroneously sent and was revoked before it was accepted.Solution: Contact the account owner and ask them to resend the invitation

Dynamic Request Parameter (Pro)

Dynamic Request Parameter (Pro)

The Dynamic Request Parameter can populate a value that was transferred via:

Post Request (e.g. after a user is registered in an external CRM, a custom function could be coded to populate the user』s name onto the page.)Get Request (e.g a URL parameter could populate the value of the parameter onto the page)Query Vars Request (e.g can populate a field with data from any of the WordPress default Query Variables, such as the attachment ID.)

Note: WordPress maintains a list of reserved words that should not be used as request parameters. Doing so would result in a 404 Not Found error being returned. This is a WordPress function and is outside of Elementor』s control. See Reserved Terms list from WordPress.org documentation.

Advanced

Dynamic Widget Element (e.g. Subject Form Field)

Click on the Dynamic icon Site > Request Parameter: Selecting this will add Request Parameter in the Subject form field.Click in the Default Value field

Settings

Type: Select from Get, Post, or Query VarParameter Name: Enter your custom parameter (e.g. the_subject)

Advanced

Before: Optionally add static content before the dynamic elementAfter: Optionally add static content after the dynamic elementFallback: Optionally add default static content if the parameter does not exist.Use custom parameter as desired (e.g. Add custom parameter to button』s link)