Widgets: Pro

The second main category of widgets are referred to as “Pro” widgets in your Elementor builder. This is because your site was built using the “Pro” version of Elementor under our licensing agreement with Elementor.

If you haven’t already, please read about switching to your own Elementor account.

The Share Buttons Widget adds share buttons to any WordPress page or post. Share Buttons Widget gives you full control over your Share Buttons design & style.


Content

Share Buttons

  1. Click the to add a social network
  2. Under the Network dropdown > Choose a social network
  3. View: Choose between Icon & text, Icon only, and Text only
  4. Label: Show or Hide the Label
  5. Skin: Choose your Social Buttons Skin
  6. Shape: Choose your Social Buttons Shape
  7. Columns: Choose the number of Columns
  8. Alignment: Set the Social Buttons Alignment
  9. Target URL: Sets the Social Buttons URL

Style

Share Buttons

  1. Columns Gap: Set the space between each button’s column
  2. Rows Gap: Set the space between each row of buttons
  3. Button Size: Set the size of the buttons
  4. Icon Size: Set the size of the icons
  5. Button Height:Set the height of the buttons
  6. Color: Choose either the Official button color combination or specify a custom color combination, with Primary Color for the background color of the buttons, and Secondary Color for the button text. Custom Colors can be set for both the Normal and Hover states.
  7. Typography: Set the typography options for the buttons’ text.

Advanced

Set the Advanced options that are applicable to this widget

Note: If a custom excerpt exists for a post, the Twitter share button will use the custom excerpt as the tweet’s content, followed by the post’s link. 

The Site Logo widget is a dynamic widget that displays the Site Logo that was assigned in the WordPress Customizer. Although the logo can only be replaced or deleted in the WordPress Customizer, the Site Logo widget gives you the ability to change some design aspects of the logo.

Content

  1. Choose Image: The image is dynamically retrieved for you
  2. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size
  3. Alignment: Align the site logo to the left, right, or center
  4. Caption: Add a caption to the bottom of the image. Select from None, Attachment Caption, or Custom Caption
  5. Link to: Set the logo’s link, selecting from None, Media File or Custom Link. If Media File is chosen, set the Lightbox to Default, Yes, or No. If Custom Link is chosen, the URL will be automatically, dynamically retrieved for you.

Style

  1. Width: Set the width of the image in either percentage (%), pixels (px), or viewport width (vw).
  2. Max Width: Set the maximum width of the image as a percentage.
  3. Opacity: Set the opacity level
  4. CSS Filters: Set CSS Filters: Blur, Brightness, Contrast and Saturation
  5. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  6. Border Radius: Set the border radius to control corner roundness
  7. Transition Duration (only on Hover): Set the hover animation duration
  8. Hover Animation (only on Hover): Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

Advanced

Set the Advanced options that are applicable to this widget

Note: The display of the logo depends on your theme. Elementor follows the coding standards of WordPress set by its official Codex. If your theme does not use the default function of WordPress which calls the custom-logo, it won’t be displayed: https://codex.wordpress.org/Theme_Logo

The Price Table widget allows you to create stylish, advanced price tables that display your products or services.


Content

Header

  1. Title: Enter the title of the specific price plan
  2. Subtitle: Enter the subtitle that appears below the main title
  3. Heading Tag: Set the Header’s Title tag, choosing from H2 – H6

Pricing

  1. Currency Symbol: Switch between the main currencies, or choose a custom symbol
  2. Price: Set the exact pricing of your product or service, including cents
  3. Currency Format: Choose the thousands separator format
  4. Sale: Display the original price with a strikethrough and the new sale price
  5. Period: Enter text for the period of time for each payment that appears under the price

Features

List Items

A list of all the features you are offering. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

By clicking on each item you can customize their content and settings, which are:

  1. Text: Enter the description of the feature
  2. Icon: Choose from a list of Font Awesome icons
  3. Icon Color: Choose a color for the icon

Footer

  1. Button Text: Write the text that will appear for the button
  2. Link: Enter the URL for the item’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.
  3. Additional Info: Include a line of additional info below the button

Ribbon

  1. Show: Show or hide a corner ribbon
  2. Title: Enter the text to be displayed on the ribbon
  3. Horizontal Position: Display the ribbon on the top left or top right of the pricing table


Style

Header

  1. Background Color: Choose the background color for the top section of the widget
  2. Padding: Choose the padding for the heading

Title

  1. Color: Choose any color for the main title
  2. Typography: Change the title typography

Sub Title

  1. Color: Choose any color for the main title
  2. Typography: Change the title typography

Pricing

  1. Background Color: Choose a background color for the pricing area
  2. Padding: Change the padding of the pricing area
  3. Color: Choose the color of the price
  4. Typography: Set the typography options for the pricing area

Currency Symbol

  1. Size:  Change the size of the currency symbol
  2. Position: Display the currency symbol to the left or right of the price
  3. Vertical Position: Set the currency symbol to display at the top, middle or bottom of the price

Fractional part

  1. Size: Set the size of the fractional part of the price
  2. Vertical Position: Set the fractional part to display at the top, middle or bottom of the price

Period

  1. Color: Choose the color of the text of the time period
  2. Typography: Set the typography options for the text of the time period
  3. Position: Set the time period below or beside the price

Features

  1. Background Color: Choose the background color of the features list
  2. Padding: Customize the padding of the features list
  3. Color: Choose the color of the features list text
  4. Typography: Set the typography options for the features list text
  5. Alignment: Align the list to the right, left or center
  6. Width: Set the width of the features list

Divider

  1. Style: Choose the features list divider style, from solid, dotted, double or dashed
  2. Color: Choose the color of the divider
  3. Weight: Set the thickness of the divider
  4. Width: Set the width of the divider
  5. Gap: Set the distance between the divider and the feature item

Footer

  1. Background Color: Choose the background color of the footer area
  2. Padding: Set the padding of the footer area

Button

  1. Size: Choose from 5 button sizes
  2. Text Color: Choose the color of the button’s text
  3. Typography: Set the typography options for the button’s text
  4. Background Color: Choose the background color of the button
  5. Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
  6. Border Radius: Set the border radius of the button to control corner roundness
  7. Text Padding: Set the distance between the button text and the border

Ribbon

  1. Background Color: Choose the background color of the ribbon
  2. Distance: Control the distance between the ribbon and the corner
  3. Text Color: Choose the color of the ribbon’s text
  4. Typography: Set the typography options for the ribbon’s text
  5. Box Shadow: Add a box shadow effect to the ribbon

Advanced

Set the Advanced options that are applicable to this widget

Set up a contact form on your website to allow your site’s visitors a simple way to get in touch with you.

View Help Articles on how to build Forms.

Here are the options available for this widget:

CONTENT

  1. Form Fields
  2. Submit Button
  3. Actions after submit
  4. Additional Options

STYLE

  1. Form
  2. Field
  3. Button
  4. Messages

ADVANCED

  1. Advanced
  2. Motion Effects
  3. Background
  4. Border
  5. Custom Positioning
  6. Responsive
  7. Attributes
  8. Custom CSS

The Portfolio Widget allows you to display your posts, pages, and custom post types in an attractive, filterable grid.

Note: The Portfolio widget ONLY works with posts, pages, and custom post types. The Portfolio widget does NOT work with Galleries.


Content

Layout

  1. Columns: Set the number of columns displayed in the widget
  2. Posts count: Set the exact amount of posts to be displayed in the widget
  3. Image size: Set the size of the images
  4. Item ratio: Set the ratio of the items
  5. Show title: Choose whether to show or hide the title. The title will display while hovering over the images
  6. Title HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, current query, and related. Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Include
  1. Include By: Term or Author, then use Search and Select to choose which ones to use
  2. Date: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) 
  3. Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or Random
  4. Order: DESC (descending) or ASC (ascending)
  5. Ignore Sticky Posts: Yes or No
  6. Query ID: Give your Query a custom unique ID to allow server side filtering
Exclude
  1. Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choices
  2. Avoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.
  3. Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)
  4. Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)
  5. Order By: Date, Title, Menu Order, or Random
  6. Order: DESC (descending) or ASC (ascending)
  7. Ignore Sticky Posts: Yes or No
  8. Query ID: Give your Query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Filter Bar

  1. Show: Set whether to show or hide the filter bar above the portfolio
  2. Taxonomy: Choose the taxonomy from which to display the posts. Options include: Categories, Tags, and any custom post type taxonomies

Style

Items

  1. Item Gap: Set the exact gap between the items
  2. Rows Gap: Set the exact gap between rows of items
  3. Border Radius: Set the border radius for the images to control corner roundness

Item overlay

  1. Background Color: Set the background color of the overlay when you hover over the image
  2. Color: Set the post’s Title color. The title appears within the overlay when you hover over the image
  3. Typography: Customize the typography of the Title

Filter bar

  1. Color: Set the color of the Filter Bar text
  2. Active Color: Set the color for the Filter Bar’s active text
  3. Typography: Customize the typography of the Filter Bar text
  4. Space Between Items: Set the space between the items in the Filter Bar
  5. Filter Spacing: Set the spacing between the Filter Bar and the images

Advanced

Set the Advanced options that are applicable to this widget

Note: Featured images must be used in your posts for any images to show up in the Portfolio widget.

The Countdown widget enables you to add countdowns to your page without the use of 3rd party plugins.


Content

  1. Type: Choose either Due Date or Evergreen Timer
  2. Due Date: If Due Date is the type chosen, this option will appear. Set the destination date and time for your countdown
  3. Hours / Minutes: If Evergreen Timer is the type chosen, these options will appear. Set the hours and minutes of the countdown

    Note: Evergreen Timer means every single visitor gets the same countdown time frame you set

  4. View: Choose between Block or Inline
  5. Days: Show or Hide the Days display
  6. Hours: Show or Hide the Hours display
  7. Minutes: Show or Hide the Minutes display
  8. Seconds: Show or Hide the Seconds display
  9. Show Labels: Show or Hide the Labels
  10. Custom Labels: Edit the Labels’ text
  11. Actions After Expire: Choose from Redirect, Hide, or Show Message. If Redirect is chosen, enter the Redirect URL. If Hide is chosen, the countdown will be hidden when the target’s time reached. If Show Message is chosen, enter the message to be shown after the time expires.


Style

Boxes

  1. Container Width: Set the width of the Countdown’s container
  2. Background Color: Choose the background color of the boxes
  3. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  4. Border Radius: Set the border radius to control corner roundness
  5. Space Between: Control the space between boxes
  6. Padding: Set the padding within the boxes

Content

Digits 

  1. Color: Choose the color of the numerical digits
  2. Typography: Change the typography options for the numerical digits

Label

  1. Color: Choose the color of the Labels’ text
  2. Typography: Change the typography options for the Labels’ text

Expire Message

  1. Alignment: Align the Expire Message to the left, right, center, or justified
  2. Text Color: Choose the color of the Expire Message’s text
  3. Typography: Change the typography options for the Expire Message

Note: Expire message will be displayed only when selecting the After Expire Action > Show Message.


Advanced

Set the Advanced options that are applicable to this widget

Add a Facebook Like Button  to your website, so you visitors can like your pages or posts.

Content

Button

  1. Type: Choose a Button Type, either Like or Recommend
  2. Layout: Select from either Standard, Button, Button Count or Box Count buttons.
  3. Size: Set the Button size, either Small or Large
  4. Color scheme: Select between Light and Dark schemes
  5. Share button: Includes a Share Button next to the Like
  6. Faces: Show Profile photos
  7. Target URL: Set the Like Button for the Current Page or a Custom URL
  8. URL Format: Select Plain Permalink or Pretty Permalink

Note: Set your Facebook App ID in the Elementor Settings > Integrations tab.

The Template widget inserts a custom global template into your page.

From the Content > Template tab > Choose Template, Select a template that you’ve previously saved in Templates.


After the page is published, an Edit Template button will become available in the widget options. If you need to edit the template, click the Edit Template button to quickly navigate to the template within the Template Library

Note: Editing and updating the template in the Template Library will cause all uses of that template widget across the site to update as well.

The Image Gallery widget allows you to easily add and style complex and beautiful image galleries on your page.

Content

Settings

  1. Type: Select type of gallery, choosing from Single or Multiple. Multiple allows you to have a filterable portfolio-style gallery of images. 
  2. Add Images: Choose multiple images from the media library to insert into your gallery and type a Title for the gallery.
  3. Order By: Choose Default or Random order
  4. Lazy-Load: Set to Yes to use Lazy Load to improve loading speed.
  5. Layout: Select from Grid, Justified, or Masonry.The Grid is based on an aspect ratio of your choosing. Justified lets you set the height for each row, and adjusts to different widths per image. Masonry maintains the same image width and adjust to varying heights.
  6. Columns: Set how many columns will be displayed per row, from 1 to 24. Not available if Justified Layout is chosen.
  7. Row Height: Set the height of each row, in pixels. Only available if Justified Layout is chosen.
  8. Spacing: Control the amount of space between each image in a row.
  9. Link: Set the link for the images to None, Media File, or Custom URL
  10. Aspect Ratio: Choose the Aspect Ratio, selecting from 1:1, 3:2, 4:3, 9:16, 16:9, and 21:9. Only available for Grid layout. 
  11. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size.

If Type: Multiple is chosen, the following Filter Bar additional options become available:

Filter Bar (only available if Multiple type is chosen)
  1. “All” Filter: Select Yes to include the “All” filter, or No to exclude it.
  2. “All” Filter Label: If set to Yes, enter the desired label. “All” is default.
  3. Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.
  4. Animation: Set the Pointer’s animation style. Choose from Fade, Slide, Grow, Drop In, Drop Out, or None.

Overlay

  1. Background: Select Yes to have an overlay appear upon hovering over each image, or No for no overlay.
  2. Title: Choose which meta attribute to display as the overlay’s Title. Select from the image’s Title, Caption, Alt, Description, or None.
  3. Description: Choose which meta attribute to display as the overlay’s Description. Select from the image’s Title, Caption, Alt, Description, or None.


Style

Image

  1. Border Color: Choose the color of the image border, for Normal and Hover states
  2. Border Width: Choose the thickness of the border for Normal state only.
  3. Border Radius: Control the corner roundness of the image border, for Normal and Hover states.
  4. CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast and Saturation for Normal and Hover states.
  5. Hover Animation: Choose the animation of the image upon hover, selecting from None, Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down, for Normal and Hover states.
  6. Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Overlay

  1. Overlay: Select the type of Overlay (Classic or Gradient) for the images’ Normal and Hover states.
  2. Color: Set the Overlay color or gradient colors for the images’ Normal and Hover states.
  3. Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.
  4. Hover Animation: Choose the overlay’s Entrance or Exit animation upon hover. Select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. If Entrance Animation is chosen, images are shown full opacity in Normal state, with the overlay covering the image upon hover. If Exit Animation is chosen, the overlay covers the image in the Normal state, and is removed upon hover.
  5. Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Content

  1. Alignment: Align the content to the left, right, or center
  2. Vertical Position: Align the content to the top, middle, or bottom
  3. Padding: Adjust the content’s padding
Title
  1. Color: Choose the Title’s color
  2. Typography: Set the typography options for the Title
  3. Spacing: Set the amount of space between the Title and the Description
Description
  1. Color: Choose the Description’s color
  2. Typography: Set the typography options for the Description
  1. Hover Animation: Choose the content’s Entrance, Reaction, or Exit Animation upon hover. For Entrance Animation, select from Slide In Right, Slide In Left, Slide In Up, Slide In Down, Zoom In, Zoom Out, and Fade In. For Reaction Animation, select from Grow, Shrink, Move Left, Move Right, Move Up, or Move Down. For Exit Animation, select from Slide Out Right, Slide Out Left, Slide Out Up, Slide Out Down, Zoom In, Zoom Out, and Fade Out.
  2. Animation Duration: Set the amount of time the animation takes, in milliseconds.
  3. Sequenced Animation: Set to Yes to have Title and Description animate in sequence. Set to No to have Title and Description animate at the same time.

Filter Bar 

These Filter Bar additional options become available only if Type: Multiple was chosen.

  1. Text Color: Choose the color of the Filter bar text for Normal, Hover, and Active states.
  2. Typography: Set the typography options for the Filter bar text.
  3. Pointer Color: Choose the color of the Filter bar pointer. Only available in Hover or Active states.
  4. Pointer Width: Select the thickness of the pointer.
  5. Space Between: Control the amount of space between Filter text items.
  6. Gap: Control the amount of space between the Filter text and the gallery images.

Advanced

Set the Advanced options that are applicable to this widget

The Archive Posts Widget displays a list of any posts within Archive templates, which are created in Templates > Theme Builder > Archive.

Note: The number of posts per page is controlled from the WordPress Reading settings (Dashboard >  Settings > Reading)


Content

Layout

  1. Skin: Select a pre-designed skin, either Classic or Cards
  2. Columns: Set how many columns will be displayed, from 1 to 6
  3. Image Position: Set the image position, relative to the content. Options include: Top / left / right / none
  4. Masonry: Slide on or off
  5. Image Size: Set the size of the image, from thumbnail to full
  6. Image Ratio: Set the exact ratio of the images
  7. Image Width: Set the exact width of the images
  8. Title: Choose to show or hide the title
  9. Title HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p
  10. Excerpt: Choose to show or hide the excerpt
  11. Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed
  12. Meta Data: Select the meta data to be displayed in the widget. A click on the field opens the list of options. The options include author, date, time and comments
  13. Read More: Show or hide the Read More button
  14. Read More Text: Customize the Read More text
  15. Badge (Only available if Cards skin is selected): Slide to YES to show badge
  16. Badge Taxonomy (Only available if Cards skin is selected): Select the taxonomy to be used for the badge, choosing from Categories, Tags, etc.
  17. Avatar (Only available if Cards skin is selected): Show or Hide the Author avatar

Note: When Elementor displays a post, if it has no excerpt, Elementor automatically generates an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, the excerpt length only applies to posts in which no manual excerpt has been entered. The length specified in the Elementor widget is ignored if a manually-generated excerpt exists for a post. 

Pagination

  1. Pagination: Choose how you wish to paginate the results. Options include None, Numbers, Previous/Next, or Numbers + Previous/Next
  2. Page Limit: Limit the pagination to the number you enter here.
  3. Shorten: If there are many pages of results, this adds an ellipsis (…) between the first few pages and the last few pages. i.e. 1 2 3 …. 8 9
  4. Previous Label / Next Label: Enter text to be used for Previous and Next labels. Option is only available if Previous/Next or Numbers + Previous/Next was chosen for Pagination.
  5. Alignment: Align the pagination to the left, right, or center

Advanced

  1. Nothing Found Message: Enter text to be displayed when there are no posts to show.

Style

Layout

  1. Columns Gap: Set the exact gap between the columns
  2. Rows Gap: set the exact gap between the rows
  3. Alignment: Set the alignment of the content in the widget as left, center or right

Card (Displayed only if Cards skin is chosen)

  1. Background Color: Choose the background color of the card
  2. Border Color: Choose the border color of the card
  3. Border Width: Set the thickness of the border around the card
  4. Border Radius: Set the roundness of the border corners of the card
  5. Horizontal Padding: Set the horizontal padding of the card’s content
  6. Vertical Padding: Set the vertical padding of the card’s content
  7. Box Shadow: Choose Yes to apply a pre-defined box shadow to the card
  8. Hover Effect: Select a hover effect, either None or Gradient
  9. Meta Border Color: Choose the border color above the meta data

Image

  1. Spacing: Set the exact spacing between the image and the content
  2. CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings

Badge (Only available if Cards skin is chosen)

  1. Badge Position: Align badge to the left or right of the card
  2. Background Color: Choose the background color of the badge
  3. Text Color: Choose the text color of the badge
  4. Border Radius: Set the border radius to control corner roundness
  5. Size: Set the size of the badge
  6. Margin: Control the distance of the badge from the top and side of the card
  7. Typography: Set the typography of the badge text

Avatar (Only available if Cards skin is chosen)

  1. Size: Set the size of the avatar.

Content

Title

  1. Color: Set the color of the titles
  2. Typography: Set the typography of the titles
  3. Spacing: Set the spacing between the title and the content

Meta (Only available if Cards skin is chosen)

  1. Color: Set the color of the  meta data
  2. Separator Color: Set the color of the  meta data separator
  3. Typography: Set the typography for the  meta data

Excerpt

  1. Color: Set the color of the excerpt
  2. Typography: Set the typography of the excerpt
  3. Spacing: Set the spacing between the excerpt and the read more

Read More

  1. Color: Set the color of the read more
  2. Typography: Set the typography for the read more text
  3. Spacing: Set the spacing between the read more text and the bottom of the post box

Pagination

  1. Typography: Set the typography for the pagination text
  2. Color: Choose the color for the pagination text for Normal, Hover, and Active states
  3. Space Between: Set the spacing between the pagination elements

Nothing Found Message

  1. Color: Choose the color for the message
  2. Typography: Set the typography for the message

The Table of Contents widget automatically organizes your page content based on H1 through H6 levels of hierarchy.  Although the process is automatic, you have plenty of control over what gets included and what gets excluded from the display.

Content

Table of Contents

Title: Type the heading text shown above the Table of Contents

HTML Tag: Select the HTML tag to use for the title, from H2 to H6, or div


Include | Exclude
Include

Anchors By Tags: Click to select the page’s H1-H6 tags to be automatically included 

Container: This control confines the Table of Contents to heading elements under a specific container

Exclude

Anchors By Selector: Enter CSS selectors to be excluded, in a comma-separated list


Marker View: Choose to display numbers or bullets next to list items

Icon: (only available if Marker View is set to Bullets). Click the Icon Library to choose an icon or click None to not use any bullet icon.


Additional Options

Word Wrap: Slide to Yes to turn Word Wrap on, to wrap text when column width cannot accommodate long text on one line

Minimize Box: Slide to No to display Table of Contents fully expanded or Yes to force a click to expand a minimized Table of Contents box

Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is minimized to indicate user should click to expand the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimize Icon: Click the Icon Library to choose an icon from the Icon Library that will display when widget is fully expanded to indicate user should click to minimize the widget. Click None to not display an icon. Click Upload SVG to upload your own SVG icon.

Minimized On (only available if Minimize Box is set to Yes): Select to minimize on Mobile, Tablet, or None

Hierarchical View: Slide to Yes to display list items with indention based on Tag hierarchy

Collapse Subitems: (only available if Hierarchical View is set to Yes) The “Collapse” option should only be used if the Table of Contents is made sticky. Slide to Yes to collapse nested lists and only show top level items

Style

Box

Background Color: Choose a background color for the entire Table of Contents box

Border Color: Choose a color for the box’s border

Border Width: Set the width of the box’s border

Border Radius: Set the border radius to control corner roundness

Padding: Change the padding settings of the widget

Min Height: Set the minimum height of the widget

Box Shadow: Set the box shadow options

Header

Background Color: Choose a background color for the header

Text Color: Choose a color for the text of the header

Typography: Change the typography options for the header text

Icon Color: Choose the color of the Expand / Minimize icon

Separator Width: Set the thickness of the widget header’s bottom border

List

Typography: Change the typography options for the text of the anchors

Indent: Set the amount of indentation for the anchors

Normal | Hover | Active

The following options can be set independently for the normal, hover, and active states.

Text Color: Choose a color for the anchor text

Underline: Select Yes to underline the anchor text


Marker

Color: Choose a color for the marker

Size: Change the size of marker if you wish it to be a different size than the text

The Animated Headline widget allows you to create attention grabbing headlines that either rotate or include highlighted animation.


Content

Headline

Style: Choose Highlighted or Rotating style

If Highlighted style is chosen, the following options become available:

  1. Shape: Choose the shape of the highlight, including Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and X
  2. Before Text: Type the headline text that will appear before the highlighted text
  3. Highlighted Text: Type the text that will be highlighted
  4. After Text: Type the headline text that will appear after the highlighted text
  5. Alignment: Set the alignment of the headline, Left, Center, or Right
  6. HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph

If Rotating style is chosen, the following options become available:

  1. Animation: Choose the animation of the rotating text including Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, and Slide Down
  2. Before Text: Type the headline text that will appear before the rotating text
  3. Rotating Text: Enter the list of rotating text, in the order of rotation
  4. After Text: Type the headline text that will appear after the rotating text
  5. Alignment: Set the alignment of the headline, Left, Center, or Right
  6. HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph

Style

Shape (option only available if Highlighted type is chosen)

  1. Color: Choose the color of the highlighted shape
  2. Width: Set the width of the highlighted shape
  3. Bring to Front: Slide to Yes to Bring the shape to the front
  4. Rounded Edges: Slide to Yes to round the edges of the shape

Headline

  1. Text Color: Choose the color of the headline’s before and after text
  2. Typography: Set the typography options for the headline’s before and after text

Animated Text

  1. Text Color: Choose the color of the animated text
  2. Typography: Set the typography options for the headline’s animated text

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Animated Headline widget

The Nav Menu widget lets you use menus that you’ve created in WordPress and design them in whatever way you want.
Check out this video explaining the various features of this widget.


Content

Layout

  1. Menu: Select a menu you’ve previously set up via Appearance > Menus
  2. Layout: Choose a Horizontal, Vertical, or Dropdown layout
  3. Align: Set the menu item alignment, either Left, Center, Right, or Justified
  4. Pointer: Select a pointer, either None, Underline, Double Line, Framed, Background, or Text
  5. Animation: Choose the pointer animation, either Fade, Slide, Grow, Drop In, Drop Out, or None
  6. Submenu Indicator: Choose the icon that indicates an item has submenu items, either None, Classic, Chevron, Angle, or Plus

Mobile Dropdown

  1. Breakpoint: Select at which point the mobile dropdown menu kicks in, either on Mobile, Tablet or None.
  2. Full Width: Select whether the mobile dropdown spans full width of the device, either Yes or No
  3. Align: Choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or Center
  4. Toggle Button: Show the Hamburger icon as the toggle button or not
  5. Toggle Align: Show the toggle button on the Left, Center, or Right of the screen

Style

Main Menu

Typography: Set the typography options for the menu item text.

The following items can be set independently for all three states: Normal, Hover, and Active. 

Note that if a Hover color is set but no Active color is set, the Active color will use the Hover color by default.

  1. Text Color: Choose the color of the menu item text
  2. Pointer Color: Choose the color of the pointer’s hover or active states. The normal state uses the color set as the Accent Color in the Default Colors settings.
  3. Pointer Width: Set the width of the pointer
  4. Horizontal Padding: Set the horizontal padding around the text of the menu items
  5. Vertical Padding: Set the vertical padding around the text of the menu items
  6. Space Between: Set the space between each menu item

Dropdown

On desktop, this will affect the submenu. On mobile this will affect the entire menu.

The following items can be set independently for all three states: Normal, Hover, and Active.

  1. Text Color: Choose the color of the menu item text
  2. Background Color: Choose the background color of the menu items
  3. Typography: Set the typography options for the menu items
  4. Border Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or Groove
  5. Width: Set the width of the border
  6. Color: Choose the color of the border
  7. Border Radius: Set the border radius to control corner roundness
  8. Box Shadow: Create a box shadow around the dropdown menu
  9. Horizontal Padding: Set the horizontal padding around the text of the menu items
  10. Vertical Padding: Set the vertical padding around the text of the menu items

Divider

  1. Border Type: Select a border type for the divider, choosing either None, Solid, Double, Dotted, Dashed, or Groove
  2. Color: If divider border is chosen, choose the color of the divider border
  3. Border Width: If divider border is chosen, set the width of the divider border
  4. Distance: Set the amount of space between the toggle and the dropdown menu

Tip: Go to Elementor > Settings > Advanced and make sure Load Font Awesome 4 Support is set to Yes so that your submenu indicators will display properly.

Toggle Button

The following items can be set independently for both the normal and hover states.

  1. Color: Choose the color of the toggle button icon
  2. Background Color: Choose the background color of the toggle button
  3. Size: Set the size of the toggle button
  4. Border Width: Set the width of the border around the toggle button
  5. Border Radius: Set the border radius of the toggle button

Note: The toggle button refers to the hamburger menu icon.


Accessibility Attributes

The Nav Menu Widget has the following accessibility attributes:

  • tabindex
  • aria-expanded
  • aria-hidden
  • role=”navigation”

Advanced

Set the Advanced options that are applicable to this widget

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

  1. Skin: Choose either the Classic skin or the Cover skin
  2. Layout: (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

  1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
  2. If 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.
  3. 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.
  4. Title & Description: Choose the title and description that appears in the front of the flip box
  5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
  6. Button Text: Enter the text to be displayed on the button
  7. Link: 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

  1. Min. Height – Set the minimum height of the whole box
  2. Alignment – Align the content to the left, center or right of the box
  3. Vertical Position – Align the content to the top, center or bottom of the box
  4. Padding – Set the padding for the content

Image

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

Content

Title

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the title and description

Description

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the description and the button

Colors

  1. Background Color: Choose the background color
  2. Title Color: Choose the title color
  3. Description Color: Choose the description color
  4. Button Color: Choose the button color

Button

  1. Size: Select the button size, from Extra Small to Extra Large
  2. Text Color: Choose the color for the button’s text
  3. Background Color: Choose the color for the button’s background
  4. Border Color: Choose the color for the button’s border
  5. Border Width: Set the border width
  6. Border Radius: Set the border radius to control corner roundness

Ribbon

  1. Background Color: Choose the color for the ribbon’s background
  2. Text Color: Choose the color for the ribbon’s text
  3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
  4. Typography: Set the typography options for the ribbon’s title
  5. Box Shadow: Set the box shadow settings for the ribbon

Hover effects

  1. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once
  2. Hover 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

  1. Overlay Color: Choose the overlay color for the image
  2. CSS Filters: Set blur, brightness, contrast and saturation for the image
  3. Blend Mode: (For Normal state) Set a blend mode
  4. Transition Duration (ms): (For Hover state) Set the duration for the hover effect


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

Content

  1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
  2. If 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.
  3. 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.
  4. Title & Description: Choose the title and description that appears in the front of the flip box
  5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
  6. Button Text: Enter the text to be displayed on the button
  7. Link: 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

  1. Min. Height: Set the minimum height of the whole box
  2. Alignment: Align the content to the left, center or right of the box
  3. Vertical Position: Align the content to the top, center or bottom of the box
  4. Padding: Set the padding for the content

Content

Title

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the title and description

Colors

  1. Title Color: Choose the title color
  2. Button Color: Choose the button color

Button

  1. Size: Select the button size, from Extra Small to Extra Large
  2. Typography: Set the typography options for the button text
  3. Text Color: Choose the color for the button’s text
  4. Background Color: Choose the color for the button’s background
  5. Border Color: Choose the color for the button’s border
  6. Border Width: Set the border width
  7. Border Radius: Set the border radius to control corner roundness

Ribbon

  1. Background Color: Choose the color for the ribbon’s background
  2. Text Color: Choose the color for the ribbon’s text
  3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
  4. Typography: Set the typography options for the ribbon’s title
  5. Box Shadow: Set the  box shadow  settings for the ribbon

Hover Effects

Content

  1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
  2. Animation Duration: Set the amount of time the animation takes to complete
  3. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

  1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
  2. Overlay Color: Choose the overlay color for normal and hover
  3. CSS Filters: Set blur, brightness, contrast and saturation for the image
  4. Blend Mode: (For Normal state) Set a blend mode for the image
  5. Transition Duration (ms): (For Hover state) Set the duration for the hover effect 

Advanced

Set the Advanced options that are applicable to this widget

 

The Media Carousel widget allows you to create a slider of videos and images.


The widget includes 3 skins:

  1. Carousel is the standard rotating carousel skin that shows a customized number of image or video slides per view. 
  2. Slideshow is a slider skin that displays one primary slide and small image thumbnails below.
  3. Coverflow is a slider skin that shows a central slide in the front and two side slides in the back. 

Inside each slide, you can add the image or video, and have it link to its media file or an external link. The carousel can display a mixture of both images and videos at once.
If you have Lightbox enabled, this will also be available for this widget.

The Media Carousel widget also has options for optimal display on mobile devices.

 

Carousel Skin

Content

Slides

  1. Skin: Carousel
  2. Slides: Choose the image or video to display and set the URL to link to
  3. Effect: Choose how each slide transitions, either Slide, Fade, or Cube
  4. Slides Per View: Set number of slides to view at one time, maximum of 10
  5. Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10
  6. Height: Set the height of the carousel
  7. Width: Set the width of the carousel

Additional Options

  1. Arrows: Choose to show or hide the navigation arrows
  2. Pagination: Select None, Dots, Fraction, or Progress
  3. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.
  4. Autoplay: Show or hide
  5. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.
  6. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
  7. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
  8. Overlay: Select overlay type, when user hovers over a slide. None, Text, or Icon
  9. Image Size: Select size of image, from Thumbnail to Full, or Custom
  10. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Slideshow Skin

Content

  1. Skin: Slideshow
  2. Slides: Choose the image or video to display and set the URL to link to
  3. Effect: Choose how each slide transitions, either Slide, Fade, or Cube
  4. Height: Set the height of the carousel
  5. Thumbnails:
    Slides Per View: Number of slides, per view, maximum of 10
    Ratio: Select from 1:1, 4:3, 16:9, or 21:9

Additional Options

  1. Arrows: Choose to show or hide the navigation arrows
  2. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second
  3. Autoplay: Show or hide
  4. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second
  5. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
  6. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
  7. Image Size: Select size of image, from Thumbnail to Full, or Custom
  8. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Coverflow Skin

Content

  1. Skin: Coverflow
  2. Slides: Choose the image or video to display and set the URL to link to
  3. Slides Per View: Set number of slides to view at one time, maximum of 10
  4. Slides to Scroll: Set number of slides to scroll per swipe, maximum of 10
  5. Height: Set the height of the carousel
  6. Width: Set the width of the carousel

Additional Options

  1. Arrows: Choose to show or hide the navigation arrows
  2. Pagination: Select None, Dots, Fraction, or Progress
  3. Transition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second.
  4. Autoplay: Show or hide
  5. Autoplay Speed: Set the time between each slide. This time is in milliseconds, so 1000 ms is equal to 1 second.
  6. Infinite Loop: Show carousel in continuous loop, infinitely. Yes or No
  7. Pause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No
  8. Overlay: None, Text, or Icon
  9. If Text is chosen:
    Caption: Choose which text to display as the caption – Title, Caption, or Description
    Animation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In
  10. If Icon is chosen:
    Icon: Choose from a search icon, plus icon, eye icon, or link icon
  11. Animation: Choose from Fade, Slide Up, Slide Down, Slide Right, Slide Left, Zoom In
  12. Image Size: Select size of image, from Thumbnail to Full, or Custom
  13. Image Fit: Select how image fits into its container, either Cover, Contain, or Auto

Style

Slides

  1. Space Between: Set the space between slides
  2. Background Color: Choose a background color for the carousel
  3. Border Size: Control the thickness of the border
  4. Border Color: Choose a color for the border
  5. Padding: Set the padding
  6. Border Radius: Set the border radius to control corner roundness

Navigation

Arrows

  1. Size: Scale arrow size up or down
  2. Color: Choose the color for the arrows

Pagination (not available on Slideshow type)

  1. Position: Place pagination outside or inside of slides
  2. Size: Scale pagination size up or down
  3. Color: Set the color of the pagination

Play Icon (You must have videos in the slides to see it)

  1. Color: Set the color of the video play icon
  2. Size: Set the size of the video play icon
  3. Text Shadow: Set the text shadow of the video play icon

Overlay (not available on Slideshow type)

If Text was chosen for the Overlay:

  1. Background Color: Choose a background color for the overlay
  2. Text Color: Choose the color of the overlay text
  3. Typography: Change the typography options for the overlay text

If Icon was chosen for Overlay:

  1. Background Color: Choose a background color for the overlay
  2. Text Color: Choose the color of the overlay icon
  3. Icon Size: Scale the size of the overlay icon up or down

Lightbox

  1. Color: Choose the lightbox background color
  2. UI Color: Choose the UI Color. This affects the lightbox arrow and dot navigations and the X closing icon.
  3. UI Hover Color: Choose the UI hover color. This affects the lightbox arrow and dot navigations and the X closing icon when the user hovers over each.
  4. Video Width: Set the width of the video

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

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

  1. Type: Select either Post Type or Taxonomy
  2. Source: 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.
  3. Title: Enter a title
  4. Order 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.
  5. Order: Choose to list the links in ascending (ASC) or descending (DESC) order
  6. Hide Empty: If type chosen is Taxonomy, this option is available. Set to YES to hide if taxonomy is empty
  7. Hierarchical View: Set to YES to show hierarchical view (both parents and children).
  8. 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.

  1. Columns: Adjust the number of columns, from 1 to 6
  2. Title HTML Tag: Set the Title tag to H1-H6, Div, Span or Paragraph
  3. Add nofollow: Slide to YES to add rel=”nofollow” to all sitemap links

Additional Options

  1. Exclude: Choose to exclude the current post or manually search and select a post to exclude
  2. Avoid Duplicates: Choose Yes to avoid displaying duplicate posts that might appear in multiple categories
  3. Protected Posts: Choose to HIDE or SHOW protected posts

Style

List

  1. Indent: Set the amount of indentation within the lists
  2. Padding: Set the padding around the sitemap columns

Title

  1. Color: Choose the color of the title’s text
  2. Typography: Change the typography options for the title

List Item

  1. Color: Choose the color of the page links
  2. Typography: Change the typography options for the page links

Bullet

  1. Color: Choose the color of the list bullets
  2. Style: Select the type of list bullet, choosing from Disc, Circle, Square, or None

Global Widget gives you full control over a specific widget that is displayed in multiple places on your site. Editing it in one place will instantly update the rest. 


 

For example, let’s say you’ve edited and designed a Testimonial widget on one page, and you now want to use your creation on many other pages on your site. Simply save it as a Global Widget and then drag your new widget onto any page. You can then edit all of them at once by editing the global widget. 

Create a Global Widget

  1. Right Click the widget’s handle and click on Save as a Global
  2. Name your new global template and click the Save button

Edit a Global Widget

Once the widget is saved as a global widget it is instantly surrounded by a yellow border instead of the standard blue border. In addition, in the panel, all of the saved global widgets are displayed as a two column widget list.

To edit the global widget, Right Click the widget’s handle 

You’ll see the message “ This is a global widget and is now locked”

  1. Clicking Edit global widget allows editing the global widget. Any changes made here will instantly update all the places in which the global widget is placed on the site
  2. Clicking Unlink from global will unlink the widget from the rest of the global widgets, and let you edit only the specific widget, without affecting all other global widgets.

Insert a Global Widget

There is a number of ways to insert a global widget to other places on your site:

Elementor Dashboard:

  1. On the new page click Global, and drag a global widget to your page.

WordPress widgets area:

  1. Go to Appearance > Widgets
  2. Add the Elementor Library Widget to the area you want (footer, sidebar, etc.)
  3. Click the dropdown and pick the template or global widget you want to use.

Shortcode

  1. Go to Templates > Saved Templates > Global Widget.
  2. Copy the Shortcode
  3. Paste it in any area that supports shortcodes.

How to delete the Global Widget

Go to

Templates > Saved Templates

and delete the widget.

Important! Notice that deleting a Global Widget will delete it from everywhere.

The Slides widget allows you to quickly create simple slides that work perfectly, without a fuss. 


Content

Slides:  Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide.  When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.   

Background

  1. Color: Set the background color for the slide
  2. Image: Choose an image from the media library

If an image is chosen as a slide background, additional options appear:

  • Size: Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmospheric images, where the showing of the entire image is less important.
  • Ken Burns Effect: Choose YES to enable this popular zooming effect on the background image.
  • Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay’s color.

Content

  1. Title & Description: Insert the title and description for the slide
  2. Button Text: Set the text for the button
  3. Link: Add a URL the slide or button will link to
  4. Apply Link On: If a link is set, this option appears. Choose if the link applies to only the button or to the whole slide

Style

Styling for individual tabs is OFF by default, relying on the global styles which are set on the widget’s Style tab. If you wish to override the global slide styles, turn the Custom switch to ON. This will enable you to set custom styles for that individual slide. The custom styles for individual slides are:

  1. Horizontal Position: Position the content horizontally: Left, right or center
  2. Vertical Position: Position the content to the top, middle or bottom
  3. Text Align: Align the text left, center or right
  4. Content Color: Choose the color of the content
  5. Height: Set the exact height of the slide in either PX, VH, or EM

Slider Options

  1. Navigation: Choose to display arrows, dots, both or none
  2. Pause on Hover: Make the slide pause when the mouse hovers over it
  3. Autoplay: Get the slides to rotate automatically, according to the speed you set
  4. Autoplay Speed: Set the time it takes for the slide to start rotating
  5. Infinite Loop: Have the slides rotate in an infinite loop and without stopping
  6. Direction: Choose a direction for the slider as left or right
  7. Transition: Set the transition of the slides as slide or fade
  8. Transition Speed: Set the time it takes for the slides to rotate
  9. Content Animation: Set the animation effect of the content’s display when the slide is shown: None, Down, Up, Right, Left, or Zoom

Style

Slides

  1. Content width: Set the width of the content inside the slide
  2. Padding: Set the inner spacing between the edge of the content and the edge of the slide
  3. Horizontal Position: Set the position of the content as right, left and center
  4. Vertical Position: Set the position of the content as top, middle or bottom
  5. Text Align: Align the text to the right, left or center
  6. Text Shadow: Add a shadow and blur to the text

Note: If an individual slide has Custom styles set, these global styles will have no effect upon that slide.

  Title

  1. Spacing: Set the spacing between the title and the description
  2. Text Color: Set the color of the title
  3. Typography: Set the typography of the title

Description

  1. Spacing: Set the spacing between the description and the button
  2. Text Color: Set the color of the description
  3. Typography: Set the typography of the description

Button

  1. Size: Set the size of the button, from extra small to extra large
  2. Text Color: Set the text color for the button
  3. Typography: Set the typography of the button
  4. Border Width: Set the border width of the button
  5. Border Radius: Set the border radius, to control corner roundness
Normal state / Hover State
  1. Text Color – Set the text color
  2. Background Color – Set the background color of the button
  3. Border Color – Set the border color of the button

Navigation

Arrows
  1. Arrows position – Set the position of the arrows inside or outside the slider
  2. Arrows size – Set the exact size of the arrows
  3. Arrows color – Set the color of the arrows
Dots 
  1. Dots Position – Set the position of the dots inside or outside the slider
  2. Dots size – Set the exact size of the dots
  3. Dots color – Set the color of the dots

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Note: Using Elementor template shortcodes within the widget may sometimes work, but it is not a supported feature.

Advanced

Set the Advanced options that are applicable to this widget

Add your Facebook Page Feed (previously named Like box) to your site. 

  1. URL: Type your Facbook Page URL
  2. Layout: Choose between Timeline, Events and Messages 
  3. Small header: Displays a Facebook Header in a narrow view
  4. Cover: Show / hide the cover image
  5. Profile photos: Show photos of people who liked your page
  6. Custom CTA button: Choose between the page’s official CTA button, or the default Share Button
  7. Height: Set the height of the box (desktop, tablet and mobile)

Advanced

Set the Advanced options that are applicable to this widget

The Search Form widget allows you to add a search bar anywhere on your website.


Content

Search Form

  1. Skin: Choose classic, minimal or full-screen pre-built styles
  2. Placeholder: Set the text that appears inside the search form

Full-screen shows only a small button which opens the search form as a lightbox popup

Button or Toggle

  1. Type: Choose to display an Icon or Custom Text on the button
  2. Icon or Text: If using an icon on the button, choose from a search or arrow icon. If using custom text, specify the text that will appear on the button
  3. Size: Adjust the size of the button or search icon
  4. Alignment (for full-screen skin only): Align the search icon to the left, center, or righ

Style

Input

  1. Overlay Color (for Full Screen skin only): Select the color of the full screen overlay
  2. Typography: Change the typography options of the search bar for both normal and focused modes
  3. Text color: Choose the color of the text
  4. Background color: Choose the background color
  5. Border color: Choose the border color
  6. Box-shadow: Give the search bar a box shadow
  7. Border size: Control the thickness of the border
  8. Border radius:  Set the border radius to control corner roundness

Button or Toggle

  1. Text color: Choose the color of the text
  2. Background color: Choose the background color of the button
  3. Icon size: Scale the icon size up and down
  4. Width: Adjust the width of the button
  5. Border Width: Control the thickness of the border
  6. Border Radius: Set the border radius to control corner roundness

Advanced

Set the Advanced options that are applicable to this widget

The Facebook Embed widget lets you easily embed Facebook posts, videos or comments on your website’s page.

The following options are available depending upon which type of embed is chosen: Post, Video, or Comment.

Post Embed

  1. URL: Choose which URL will be embedded in the page
  2. Full post: Switch ON to show full text of the post, or OFF to show the shorter post text

Video Embed

  1. URL: Choose which URL will be embedded in the page
  2. Full Post: Switch ON to show full text of the post, or OFF to show the shorter post text
  3. Allow Full Screen: Switch ON to allow video in Full Screen
  4. Autoplay: Switch ON to automatically play the video
  5. Captions: Switch ON to show the Captions of the video if available (shown only on desktop devices)

Comment Embed

  1. URL: Choose which URL will be embedded in the page
  2. Parent comment: Switch ON to include the parent comment, if the comment being embedded is a reply

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Advanced

Set the Advanced options that are applicable to this widget

The Page Title widget is a dynamic widget that displays the Page Title that was assigned in the WordPress page editor.

Content

  1. Title: The title is automatically, dynamically retrieved for you
  2. Link: The link is automatically, dynamically retrieved for you
  3. Size: Select the size of the Page Title, from Small to XXL
  4. HTML Tag: Set the Page Title’s tag to H1-H6, Div, Span or Paragraph
  5. Alignment: Align the Page Title to the left, right, center, or justified

Style

  1. Text Color: Choose the color of the Page Title’s text
  2. Typography: Change the typography options for the Page Title’s text
  3. Text Shadow: Add a shadow and blur to the Page Title’s text
  4. Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.

The Reviews widget displays a sliding carousel of user reviews.


Content

Slides

Items

Shows a list of all the items in the slide. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

  1. Image: Upload or choose the reviewer’s image
  2. Name: Enter the reviewer’s name
  3. Title: Enter the reviewer’s job title
  4. Rating: Assign a numerical rating, from 0.0 to 5.0
  5. Icon: Choose the type of icon to use, either Font Awesome or Unicode
  6. Link: Link the review to a URL
  7. Review: Enter the text of the review

 

  1. Slides Per View: Select the number of slides to show at one time, from 1 to 10
  2. Slides to Scroll: Select how many slides to scroll per swipe, from 1 to 10
  3. Width: Set the width of the carousel, in percentage or pixels

Additional Options:

  1. Arrows: Show or hide the navigation arrows
  2. Pagination: Select the carousel pagination style, either None, Dots, Fraction, or Progress
  3. Transition Duration: Set the time between slide movement, in milliseconds
  4. Autoplay: Slide to YES to have the carousel slide automatically
  5. Autoplay Speed: Set the speed at which the carousel will slide, in milliseconds
  6. Infinite Loop: Set to YES to have the carousel continue sliding, infinitely
  7. Pause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clicked
  8. Image Size: Set the size of the image, from thumbnail to full, or enter a custom size

Style

Slides

  1. Space Between: Control the space between review items
  2. Background Color: Choose the background color of the review card
  3. Border Size: Set the thickness of the border around the review card
  4. Border Radius: Set the border radius to control corner roundness
  5. Border Color: Choose a color for the border
  6. Padding: Set the padding within the border of the review card’s box

Header

  1. Background Color: Choose the background color of the review card’s header
  2. Gap: Control the space between the Header and the Review text
  3. Separator: Choose to show or hide the separator line between the header and the review text
  4. Color: Choose the color of the separator line
  5. Size: Set the height of the separator line

Text

Name / Title / Review

  1. Color: Choose the color of the Name/Title/Review
  2. Typography: Change the typography options for the Name/Title/Review

Image

  1. Image Size: Adjust the size of the reviewer’s image
  2. Image Gap: Control the space between the image and the reviewer’s profile information
  3. Border Radius: Set the border radius to control corner roundness

Icon

  1. Color: Set the color of the social icon. Choose either the Official Color of the social network, or set a custom color of your choice
  2. Size: Adjust the size of the social icon

Rating

  1. Icon: Choose the type of icon to use, either Font Awesome or Unicode
  2. Unmarked Style: Choose Solid or Outline for unmarked icons
  3. Size: Set the size of the rating stars
  4. Spacing: Adjust the amount of space between each star
  5. Color: Choose the color of the rating stars
  6. Unmarked Color: Choose the color of the unmarked portion of the stars

Navigation

Arrows / Pagination
  1. Size: Adjust the size of the navigation arrows
  2. Color: Choose the color of the navigation arrows


Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

The Site Title widget is a dynamic widget that displays the Site Title that was assigned in the WordPress Customizer. Although the site’s title can only be replaced or deleted in the WordPress Customizer, the Site Title widget gives you the ability to change some design aspects of the title.

Content

  1. Title: The title is automatically, dynamically retrieved for you
  2. Link: The link is automatically, dynamically retrieved for you
  3. Size: Select the size of the Site Title, from Small to XXL
  4. HTML Tag: Set the Site Title’s tag to H1-H6, Div, Span or Paragraph
  5. Alignment: Align the Site Title to the left, right, center, or justified

Style

  1. Text Color: Choose the color of the Site Title’s text
  2. Typography: Change the typography options for the Site Title’s text
  3. Text Shadow: Add a shadow and blur to the Site Title’s text
  4. Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.

The Login Widget makes it easy to create a custom login page, instead of the default WordPress login page.

How to add a login page to WordPress

Create a New Page, and add the Login Widget


Form fields

  1. Label: Show or Hide the form Label
  2. Input size: Choose the Form Fields input size.

Button

  1. Text: Type the button’s text
  2. Size: Choose the size of the button
  3. Alignment: Set the button’s alignment

Additional options

  1. Redirect After Login: Set to ON or OFF.
  2. Lost Your Password: Choose whether or not to display the “Lost Your Password” link
  3. Remember me: Choose whether or not to display the “Remember Me” checkbox
  4. Logged in message: Choose whether or not to display the a Logged In user a message
  5. Custom label: Change the default form label and placeholder text

Style

Form

  1. Rows Gap: Set the exact gap between each row
  2. Links Color: Choose the color of the links
  3. Links Hover Color: Choose the color of the links when hovered over

Label

  1. Spacing: Set the exact gap between the label and its corresponding field
  2. Text Color: Choose the color of the label text
  3. Typography: Set the typography options for the label text

Fields

  1. Text Color: Choose the color of the text within the fields
  2. Typography: Set the typography options for the text within the fields
  3. Background Color: Choose the background color of the fields
  4. Border Color: Choose the border color of the fields
  5. Border Width: Set the thickness of the border around the fields
  6. Border Radius: Set the border radius to control corner roundness of the fields

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

  1. Text Color: Choose the color of the button’s text
  2. Typography: Set the typography options for the button’s text
  3. Background Color: Choose the background color of the button

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border radius to control corner roundness of the button
  3. Text Padding: Set the amount of padding around each side of the text in the button

Advanced

Set the Advanced options that are applicable to this widget


Note: Use your regular WordPress login credentials with the Login Widget

Add Facebook Comments to the end of your posts to allow your readers to easily comment using their Facebook account.

Content

Comments Box

  1. Comment Count: Set the number of comments displayed in the page
  2. Order By: Sort the comments order according to the Facebook Social factor, Time or Reverse Time
  3. Target URL: Get the Comments of the Current Page, or for a Custom URL
  4. URL Format: Select Plain Permalink or Pretty Permalink

Advanced

Set the Advanced options that are applicable to this widget

Note: Set your Facebook App ID in the Elementor Settings > Integrations tab.

The Blockquote Widget allows you to embed fully styled quotes. You can also set these as Click To Tweet quotes, enabling users to easily share them on Twitter.


Content

  1. Skin: Choose the Blockquote skin, selecting either Border, Quotation, Boxed, or Clean
  2. Alignment: (available for Quotation, Boxed and Clean Skins) Align the quote elements to the left, center, or right
  3. Content: Type your Blockquote content
  4. Author: Enter the Author name
  5. Tweet Button: Toggle the Tweet Button ON or OFF

Tweet Button Settings:

  1. View: Choose between Icon & Text, Icon, or Text only
  2. Skin: Choose between Classic, Bubble and Link
  3. Label: Type your Label
  4. Via: Type your Twitter Account username i.e. @your_acount
  5. Target URL: Choose between the Current Page, None, or a Custom Link

Style

Content 

  1. Text Color: Choose the color of the quotation text
  2. Typography: Set the typography options for the quotation text
  3. Gap: Set the amount of spacing between the quotation text and the author

Author 

  1. Text Color: Choose the color of the author’s name
  2. Typography: Set the typography options for the author’s name

Button 

  1. Size: Adjust the size of the button
  2. Border Radius: Set the border radius to control corner roundness
  3. Color: Select the Official Twitter colors or set your own custom button colors
  4. Typography: Set the typography options for the button text

If Custom Color option is chosen, the following options become available:

  1. Background Color: Choose the background color of the button
  2. Text Color: Choose the color of the button’s text
  3. Typography: Set the typography options for the button text

Border (available only for the Border skin)

  1. Color: Choose the color of the border
  2. Width: Set the border’s width
  3. Gap: Set the space between the left border and the quote text
  4. Vertical Padding: Set the top and bottom padding around the content

Quote (only available for Quotation skin)

  1. Color: Choose the color of the quotation mark
  2. Size: Set the size of the quotation mark
  3. Gap: Set the spacing between the quotation mark and the quote text

Box (only available for Boxed skin)

  1. Padding: Set the padding around the quote text
  2. Background Color: Choose the background color of the box
  3. Border Type: Select the border type from Solid, Double, Dotted, Dashed, or Groove
  4. Border Radius: Set the border radius to control corner roundness
  5. Box Shadow: Adjust box shadow options

Advanced

Set the Advanced options that are applicable to this widget

The Flip Box Widget helps you create animated boxes that flip to the other side, once the visitor hovers over them. 


Content 

Front

Content

This tab controls the content of the front side of the flip box. 

  1. Graphic Element: Choose between None, Image or Icon to display a graphical Element in the front of the flip box
  2. If 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
  3. 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
    Shape:  If Stacked or Framed is chosen, choose Circle or Square
  4. Title & Description: Choose the title and description that appears in the front of the flip box

Background

This tab controls the background of the front side of the flip box.

Background Type: Choose Color, Image or Gradient as the background of the front of the flip box.

If you choose an Image Background, the following options become available:

  1. Position: Select the position of the image, such as Top Center, Top Right, Center Center, etc.
  2. Attachment: Select from Default, Scroll, or Fixed
  3. Repeat: Choose from Default, No-repeat, Repeat, Repeat-x, or Repeat-y
  4. Size: Select from Default, Auto, Cover, or Contain
  5. Background Overlay: Choose a color for the overlay

If you choose Gradient Background, the following options become available:

  1. Color: Select the primary color of the gradient
  2. Location: Select the location of the primary color
  3. Second Color: Select the second color of the gradient
  4. Location: Select the location of the second color
  5. Type: Choose Linear or Radial
  6. Angle: Set the angle of the gradient

Back

The back side of the flip box has the same elements as the front side listed above, except for the graphic element that only appears on the front. The back side also includes a button.

  1. Button Text: Choose the text that appears inside the button
  2. Link: Choose where the button points to. The link needs to include the entire URL (including http / https)
  3. Apply Link On: Choose to apply the clickable link to the Button Only, or to the Whole Box

Settings

  1. Height: Control the height of the flip box
  2. Border Radius: Set the border radius of the flip box, and make its corners round
  3. Flip Effect: Choose between flip effects, including flip, slide, push, zoom in, zoom out or fade
  4. Flip Direction: If you choose the flip or slide effects, you can have the flip box flip right, left, up or down
  5. 3D Depth: Slide to On to give the flip box a 3D animation effect

Note: The Safari browser is partially incompatible with the 3D Depth effect on mobile. If 3D Depth is used, portions of the flip box may show through the Nav Menu dropdown. It is not possible to use the 3D Flip Box widget and the Nav Menu widget with IOS due to issues with Safari being unable to support this option. We advise modifying the content for mobile in this case with the “hide section” option in the section’s Advanced tab in Responsive > Visibliity.


Style

Front Side

  1. Padding: Add padding to the content area of the front of the flip box
  2. Alignment: Choose to align the flip box content to the left, right or center of the flip box
  3. Vertical Position: Align the flip box content to the top, center or bottom of the flip box
  4. Border Type: Set a border to the entire flip box
  5. Width: If a border type is chosen, set a width for the border
  6. Color: If a border type is chosen, select a color for the border

Icon

  1. Spacing: Control the space between the icon and the title
  2. Primary Color: Choose the primary color of the icon
  3. Secondary Color: Choose the secondary color of the icon
  4. Icon Size: Choose the size of the icon
  5. Icon Padding: Set the amount of padding around the icon
  6. Icon Rotate: Rotate the icon to any angle
  7. Border Width: Set the width of the icon border
  8. Border Radius: Set the radius of the icon border to control corner roundness

Image

  1. Spacing: Control the space between the image and the title
  2. Opacity: Choose the opacity of the image
  3. Border Type: Choose a border for the image: None, Solid, Double, Dotted, Dashed, or Groove
  4. Border Radius: Control the border radius of the image border

Title 

  1. Spacing: Control the space between the title and description
  2. Text Color: Choose the color of the title
  3. Typography: Set the typography settings of the title

Description

  1. Text Color: Choose the color of the description
  2. Typography: Set the typography settings of the description

Back Side

For the back side of the flip box, you get all the options listed previously for the front side, minus the graphical element settings. You also get control over the button settings.

Button

  1. Size: Choose a size for the button (extra small, small, medium large and extra large)
  2. Typography: Customize the typography of the button text
  3. Text Color: Choose the text color of the button
  4. Background Color: Choose the color of the button background
  5. Border Color: Control the color of the button border
  6. Border Width: Control the width of the button border
  7. Border Radius: Control the border radius of the button

Advanced

Set the Advanced options that are applicable to this widget

The Price List widget lets you create fully styled catalogs and menus that include pricing.


Content

List Items

Shows a list of all the items in the widget. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

By clicking on each item you can customize their content and settings, which are:

  1. Price: Add the price of the item
  2. Title & Description: Set the title and description of the item
  3. Image: Choose an image from the media library
  4. Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window

Style

List Style

Title & Price

  1. Color: Choose a color for the title and price
  2. Typography: Set the typography options for the title and price

Description

  1. Color: Choose a color for the description
  2. Typography: Set the typography options for the description

Separator

  1. Style: Choose the style of the separator between the title and the price, selecting from solid, dotted, dashed, double or none
  2. Weight: Set the weight of the separator
  3. Color: Choose a color for the separator
  4. Spacing: Increase or decrease the space to the left and right of the separator

Image Style

  1. Image Size: Choose the size of the image, from thumbnail to full, or set a custom size
  2. Border Radius: Set the border radius of the image, to control corner roundness
  3. Spacing: Set the spacing between the image and the content

Item Style

  1. Rows Gap: Set the spacing between each item
  2. Vertical Align: Choose either top, bottom or center alignment for the content, in relation to the image

Advanced

Set the Advanced options that are applicable to this widget

Have a question about this?