Author 诗语

Gallery Widget (Pro)

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

Content

Settings

Type: Select type of gallery, choosing from Single or Multiple. Multiple allows you to have a filterable portfolio-style gallery of images. Add Images: Choose multiple images from the media library to insert into your gallery and type a Title for the gallery.Order By: Choose Default or Random orderLazy-Load: Set to Yes to use Lazy Load to improve loading speed.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.Columns: Set how many columns will be displayed per row, from 1 to 24. Not available if Justified Layout is chosen.Row Height: Set the height of each row, in pixels. Only available if Justified Layout is chosen.Spacing: Control the amount of space between each image in a row.Link: Set the link for the images to None, Media File, or Custom URLAspect 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. 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)

「All」 Filter: Select Yes to include the 「All」 filter, or No to exclude it.「All」 Filter Label: If set to Yes, enter the desired label. 「All」 is default.Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.Animation: Set the Pointer』s animation style. Choose from Fade, Slide, Grow, Drop In, Drop Out, or None.

Overlay

Background: Select Yes to have an overlay appear upon hovering over each image, or No for no overlay.Title: Choose which meta attribute to display as the overlay』s Title. Select from the image』s Title, Caption, Alt, Description, or None.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

Border Color: Choose the color of the image border, for Normal and Hover statesBorder Width: Choose the thickness of the border for Normal state only.Border Radius: Control the corner roundness of the image border, for Normal and Hover states.CSS Filters: Set CSS Filters, selecting from Blur, Brightness, Contrast and Saturation for Normal and Hover states.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.Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Overlay

Overlay: Select the type of Overlay (Classic or Gradient) for the images』 Normal and Hover states.Color: Set the Overlay color or gradient colors for the images』 Normal and Hover states.Blend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demoHover 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.Animation Duration (ms): Set the amount of time the animation takes, in milliseconds.

Content

Alignment: Align the content to the left, right, or centerVertical Position: Align the content to the top, middle, or bottomPadding: Adjust the content』s padding

Title

Color: Choose the Title』s colorTypography: Set the typography options for the TitleSpacing: Set the amount of space between the Title and the Description

Description

Color: Choose the Description』s colorTypography: Set the typography options for the Description

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.Animation Duration: Set the amount of time the animation takes, in milliseconds.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.

Text Color: Choose the color of the Filter bar text for Normal, Hover, and Active states.Typography: Set the typography options for the Filter bar text.Pointer Color: Choose the color of the Filter bar pointer. Only available in Hover or Active states.Pointer Width: Select the thickness of the pointer.Space Between: Control the amount of space between Filter text items.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

Will Elementor Work if I Change the Domain of My Website?

Yes. If you replaced the domain of your website, you can go to:

Elementor > Tools > Replace URL in your WordPress dashboard to replace all references to your old domain with the new domain, allowing you to continue working with Elementor from your new domain.

How to Download and Use the Elementor Beta (Developer Edition) Plugin

The Elementor Beta (Developer Edition) is a WordPress plugin that gives you first access to Elementor』s newest proposed features and improvements, and provides you a glimpse into the development process of Elementor.

Each Developer Edition release will contain experimental functionalities that developers will be able to use to get familiar with the next features before they are published. Beta versions of Elementor will not contain these experimental features, but beta versions will be much more stable due to the work accomplished in the Developer Edition. 

Feedback, including bug reports, feature suggestions and suggestions for improvement, will be used to evaluate and validate new features before they are released.

Important: Use with caution. Please do not use Developer Edition on production sites. Developer Edition releases, just like beta releases, may not be stable. Use it on staging environments only, and back up your entire website before updating.

Download Instructions

The plugin can either be downloaded and installed from the WordPress repository or from your WordPress dashboard.

Via WordPress.org:

Go to https://wordpress.org/plugins/ and in the search field, enter Elementor Developer Edition. Click the plugin』s title and then click the Download button.From your WordPress dashboard, click Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activate

Via WordPress Dashboard:

From the dashboard, click Plugins > Add New.In the Search field, enter Elementor Developer Edition and choose the plugin to install.After installation, click Activate.

Note: The plugin requires Elementor to properly activate, so both plugins must be running and active at the same time. The Developer Edition is an addon that brings you updates from our ongoing and updating development channel

Instructions for Use

Once the plugin is installed and activated, it functions just like the production version of Elementor. You』ll find the plugin』s available options in the Elementor sidebar menu. Here, you can:

Update to the latest version, if available.Activate auto-updates if you』d like.Opt in to participate in non-sensitive data usage sharing, which allows you to help us extend our ability to perfect our product and produce experimental and groundbreaking features.Re-install the latest stable version. Just go to Elementor [Dev] > Developer Edition and click the Re-install now button to automatically revert to the stable version of Elementor. You will still need to deactivate and delete the Developer Edition plugin.

Note: If you delete the Developer Edition plugin before you』ve clicked the Re-install now button, you won』t revert to a stable Elementor version automatically. In that case, you would need to install the stable version of Elementor manually using the rollback feature found in Elementor > Tools > Version Control. 

Once you』ve configured the options, you are ready to begin using Elementor. You will use the Development Edition in the same way you would use the stable version, however you』ll notice that there may be new features or changes in the user interface that are not present in the stable, production version. You will also notice a few visual aids to remind you that you are using the Development version, including the following:

There』s a 「Dev Badge」 in the WP sidebar as well as in the editor』s top barSource code: in the elementor body tag, added the 「elementor-dev」class In the WordPress dashboard admin top bar, next to your user avatar, you』ll find a link to 「Report an issue」 which will enable you to report a problem on github.

WordPress sidebar badge

Elementor Editor top bar badge

WordPress dashboard top bar badge

Important to repeat: Use with caution. Please do not use Developer Edition on production sites. Developer Edition releases, just like beta releases, may not be stable. Use it on staging environments only, and back up your entire website before updating.

Developer Edition FAQs:

Why am I not seeing the update notification?There are some instances where the notification takes a while to appear. Try to refresh it by going to Dashboard > Updates, and click on 「Check again」. In addition, you can try clearing your site』s cache and see if the update appears.Where can I report bugs or contribute to Elementor? On the top admin bar, you will see a button with the text 『Report an issue』. Once you click on the link you will be redirected to the issue template form.Where do updates come from?Elementor Developer Edition versions are downloaded from the WordPress.org SVN repository. These versions will only be available to your site if you use the Elementor Developer Edition plugin. Can I rollback to an earlier version?Yes! You can always take advantage of Elementor』s rollback option and revert to an earlier more stable version, or alternatively click 「Re-install Now」 on the Developer Edition page.Is it safe to use Developer Edition?The Developer edition is an unstable version and should be used for staging sites only. We advise you to backup your website before trying the version.Which features will roll out to the next version of Elementor?The features that roll out to stable versions will do so gradually. This means not all features presented in the Elementor Developer Edition will be incorporated into the upcoming version. We might even remove features from this version from time to time based on the experiment status.I』m already a beta tester, isn』t it the same?Beta versions are the designated version for release. Developer Edition versions may include extra features or experiments that are not available in either the Stable or Beta versions. These experiments may be rolled out gradually.

What Is The Difference Between Conditions, Triggers, and Advanced Rules?

You have precise control over when and where popups are displayed through the use of Conditions, Triggers, and Advanced Rules.

Conditions –> Where to popupTriggers –> When to popup based on user-specific actionsAdvanced Rules –> When to popup based on non-user-specific actions

Conditions control where (on which pages) popups occur. Typical conditions might be to only popup on the front page, or to popup on every page of the entire site, or to only popup on a specific category or tag, etc.

Triggers define specific actions users take that will automatically generate a popup. Typical triggers include when a user scrolls, when a user clicks, when a user intends to exit the page, or when a user』s interaction with the page is inactive for a period of time.

Advanced Rules specify other requirements that must be met to generate a popup. Typical advanced rules include popping up after a certain number of visits, when arriving from a particular URL, or only on specific devices.

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

From the editing screen, Click the  icon as shown in the screenshot above. When the library of templates pops up, click the magnifying glass icon  to preview a template.Click INSERT to select the template of your choice.You can even give your favorite templates a heart and save them to My Favorites.Have a template you downloaded elsewhere that you want to use? Just click the arrow in the top right corner to upload its .json or .zip file.

Next step – Preview & Publish your page

Using Elementor Pro with an LMS such as LearnDash or LifterLMS

Elementor can be used together with many 3rd party WordPress applications, including some Learning Management Systems (LMS). Two popular WordPress LMS plugins, LearnDash and LifterLMS, both offer integrations with Elementor to help you style your courses the Elementor way.

Note: Each LMS may offer different levels of customization, and you may only be able to edit certain pages or portions of the LMS layout.

LearnDash: Elementor and LearnDash worked together to create an integration that results in an optimized, more accessible learning experience for your students. LearnDash has specific Elementor widgets and templates to make it easy for you to customize and style your LMS layout. For more information:

See our blog post for a full guide to setting up LearnDash with Elementor See a guide that LearnDash created here Watch a video tutorial here.

The integration is contained within an additional free Compatibility Add-On Elementor Integration plugin that you』ll have available to you within your active LearnDash account.

LifterLMS: Special widgets designed for Elementor enables LifterLMS users to have more control over the style and layout of their course materials. These widgets are contained within an additional premium plugin called Lifter Elements. If you choose to purchase the Creator edition, you』ll also receive additional functionality such as conditional logic, as well as all available specially designed templates. If you prefer, you can purchase templates individually if you only purchase the Standard edition. Watch an intro video to see how LifterLMS works with Elementor.

Elementor Integration With Toolset

Why use Elementor with Toolset

Toolset brings limitless possibilities for adding extra data to WordPress content by creating custom fields. Elementor allows you to dynamically insert the Toolset custom field data directly into your Elementor designs with all the styling options you』ve come to expect from Elementor.

How To Add Toolset Custom Fields To A Single Post Template

Go to Templates > Theme Builder > Single > Add NewChoose Template Type > Single. Name your template and click Create TemplateClick on the Document Settings gear icon located at the bottom left of the panelClick the Preview Settings tabUnder Preview Dynamic Content select the post type you wish to previewDrag a widget that makes use of dynamic content (e.g. Text widget)Click on the Dynamic icon Choose Toolset FieldOnce selected, click again on Toolset FieldIn Settings > Key, select the custom field you want to display.The options in the Advanced tab are optional. Options include:Before: Text to automatically appear before the custom field dataFallback: Text to display if custom field has no dataAfter: Text to automatically appear after the custom field dataStyle the custom field widget as you would normally, using the widget』s Style tab.

Custom Toolset fields we support:

Note: Any Toolset fields not included in this list are not supported at this time

Text:

『textfield』,『phone』,『textarea』,『checkbox』,『select』,『numeric』,』email』,』embed』,『google_address』,『wysiwyg』,『radio』

URL:

』email』,『image』,『file』,『audio』,『url』

Date: date

image: image:single

gallery: image:multiple

Example of use

Team Members

A corporate website may want to display a list of team members. Toolset could be used to set up several custom fields, including Job Title, Email Address, and Telephone Number. Toolset makes it easy to add this data to each team member』s listing, while Elementor brings the magic needed to beautifully display the data on the front end.

Real Estate Listings

Real estate websites commonly need to use custom fields to allow them to display real estate listings, which must display data such as Number of Bedrooms, Number of Baths, Size of Home, and Price. With Elementor』s integration with Toolset, this data can be stylishly displayed on each listing, with no coding required.

How to Change a Background Image

How To Change A Section』s Background Image

Click on the Section Settings handle to enter the Section SettingsGo to Style > Background > Background Type > ClassicUnder Image click the + sign and choose your image.

How To Change An Entire Page』s Background Image

Click the cog icon in the lower left of the editor Panel.Click the Style tab.Click the pencil icon next to Background Type.Under Image, click the + sign and choose your image.

Site Logo Widget (Pro)

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

Content

Choose Image: The image is dynamically retrieved for you from the Elementor Site Settings or the WordPress Customizer. You can edit or change your logo in either of those places.Image Size: Set the size of the image, from thumbnail to full, or enter a custom sizeAlignment: Align the site logo to the left, right, or centerCaption: Add a caption to the bottom of the image. Select from None, Attachment Caption, or Custom CaptionLink 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

Width: Set the width of the image in either percentage (%), pixels (px), or viewport width (vw).Max Width: Set the maximum width of the image as a percentage.Opacity: Set the opacity levelCSS Filters: Set CSS Filters: Blur, Brightness, Contrast and SaturationBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessTransition Duration (only on Hover): Set the hover animation durationHover 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. If it isn』t displayed, instead of using the site logo widget, you can simply use the Image widget to obtain the same result.

Elementor Integration With ACF

Why use Elementor with ACF

Advanced Custom Fields (ACF) brings limitless possibilities for adding extra data to WordPress content by creating custom fields. Elementor allows you to dynamically insert the ACF custom field data directly into your Elementor designs with all the styling options you』ve come to expect from Elementor.

Note: Elementor officially supports ACF 5 and up.

How To Add ACF To a Single Post Template

Go to Elementor > My Templates > Add NewChoose Template Type > Single. Name your template and click Create TemplateClick on the Document Settings gear icon located at the bottom left of the panelClick the Preview Settings tabUnder Preview Dynamic Content select the post type you wish to previewDrag a widget that makes use of dynamic content (e.g. Text widget)Click on the Dynamic icon Choose ACF FieldOnce selected, click again on ACF FieldIn Settings > Key, select the custom field you want to display.The options in the Advanced tab are optional. Options include:Before: Text to automatically appear before the custom field dataFallback: Text to display if custom field has no dataAfter: Text to automatically appear after the custom field dataStyle the custom field widget as you would normally, using the widget』s Style tab.

Custom ACF fields we support:

Note: Any ACF fields not included in this list, such as repeater fields, are not supported at this time.

Text:

『text』, 『textarea』, 『number』, 『email』, 『password』, 『wysiwyg』, 『select』, 『checkbox』, 『radio』, 『true_false』,

Pro『oembed』, 『google_map』, 『date_picker』, 『time_picker』, 『color_picker』 『date』 『date_time_picker』

URL:

『email』, 『image』, 『text, 『file』, 『page_link』, 『post_object』, 『relationship』, 『taxonomy』, 『Url』

Image:

『image』 『gallery』

Examples of use

Movie Review Website

A movie review website might use ACF to set up several custom fields, including Director, Year, Genre, Rating, etc. ACF makes it easy to add this data to each movie review, while Elementor brings the magic needed to beautifully display the data on the front end.

Watch a video tutorial showing an example of creating a movie review website with ACF and Elementor.

Real Estate Listings

Real estate websites commonly need to use custom fields to allow them to display real estate listings, which must display data such as Number of Bedrooms, Number of Baths, Size of Home, and Price. With Elementor』s integration with ACF, this data can be stylishly displayed on each listing, with no coding required.

Watch a step-by-step tutorial to learn how to create a dynamic real estate site using ACF and Elementor.