Basic Gallery widget

Basic Gallery widget

The Basic Gallery Widget allows you to easily add and style beautiful image galleries on your page.

Content

Image Gallery

Click Add Image button to select images to display. Once selected, click Create a New Gallery button and then click the Insert Gallery button.Image Size: Choose the size of the image, from thumbnail to fullColumns: Set the number of columns to display, from 1 to 10Link to: Link images to their respective Media Files, Attachment Pages, or None (Media File must be selected if Lightbox is enabled)Lightbox: Choose to display images in a lightbox. If Yes or No is chosen, that selection will override the Global Default Lightbox setting. Images will only appear in lightbox if Media File is selected as the Link to: option.Ordering: Choose Default or Random ordering of images within the gallery

Note: The default order of a gallery is WP: 『menu_order』. For more information, click the following link.

Style

Images

Spacing: Set the spacing between slides. Choose Default (20px) or Custom (The Spacing option is only available if more than 1 is chosen for Slides to Show on Content tab)Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Set the border radius, to control corner roundness

Caption

Display: Hide or Show Captions (If captions are shown, the following additional options are available)Alignment: Align caption left, right, center, or justifiedText Color: Select the color of the caption textTypography: Set the typography settings of the caption text

Advanced

Set the Advanced options that are applicable to this widget

Creating A Download Link With Elementor

Creating A Download Link With Elementor

You may use the link custom attributes on your Elementor Buttons, Call To Action, and many more widgets to allow users to download PDF documents, Zip files, and other allowed files from your media library.

Add A File To Your Media Library

Upload your files: Upload your files to the WordPress Media LIbrary. You may filter your media files by type in the dropdown for easier location. Click the Add New button, to add a PDF, ZIP, MP3, MP4, Image formats and other allowed types to your library.Copy the permalink of your file: Click on the media file you wish users to be able to download. On the popup modal, click the copy to clipboard button.

Add The Download Link To An Elementor Widget

You may now add this media file link to your Elementor widget links.

In the Media library, select the file you wish to add a download link to. Use the copy URL to clipboard optionPaste the URL of the file into any link field in an Elementor widgetFrom the gear icon, select to show the link options panelTick the checkbox for the option to open in a new window. You may also add the nofollow option if desired.In order for the file to be downloaded rather than displayed in the new window, add a custom attribute separated with piping. (example: download | filename.pdf)

Video Playlist Widget (Pro)

Video Playlist Widget (Pro)

By using the Elementor Video Playlist Widget, you can create amazing video content for your site visitors. It is useful for anyone who wants to showcase unique video content on their website.

Controls

Playlist

Playlist Name – Name your playlist by entering the desired text

Playlist Items

Type – Select between YouTube, Vimeo, Self-Hosted, or SectionLink – Enter The URL of the video you want to useGet Video Data – When clicked, the title and video thumbnail will be retrieved from the sourceTitle – Enter your title to be displayed in the playlistDuration – Enter the duration of the videoContents Tab Toggle – If you wish to provide additional content below the playlist enable this by selecting Show / HideTab Content (if enabled) – Enter the tabs content in the text editor or use the dynamic options

Tip: Sections can be used to separate video categories or courses. You may use HTML to format the text or create links if needed.

Tabs

Tab One Name – Enter the desired text or use the dynamic functionsTab Two Name – Enter the desired text or use the dynamic functions

Image Overlay

Image Overlay Toggle – Select to Show / Hide the image overlay optionsChoose Image – (if enabled) Select a image from your media library or upload from your computerImage Size – Set the image size propertiesPlay Icon – Choose a custom play icon from the library or upload in SVG format

Additional Options

Layout – Choose left or right alignment of the playlistAutoplay – Chose the autoplay options by selecting to show / hide on the toggles below:On Load – Playlist will begin on page loadNext Up – Additional videos will play in succession Indicate Watched – Display a icon over the video thumbnail to indicate that a video has been watchedVideo Count – Show / Hide the number of videos in your playlistDuration – Show / Hide the time duration of your video in the playlistThumbnails – Show / Hide the video thumbnail in the playlistPlay Icon – Select the play icon to be displayed over the video thumbnailWatched Icon – (if enabled) Select the watched icon to be displayed over the video thumbnailLazy Load – Toggle to enable Lazy Loading of the videos

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

Style

Layout

Height – Use the slider to set the desired height of the playlist in PX, VH, or VW

Top Bar

Playlist Name

Background – Chose the desired color of the top bar background Color – Choose the color of the playlist name headingTypography – Set the font properties of the playlist name heading

Videos Amount

Color – Chose the color of the amount textTypography – Set the font properties of the amount text

Videos

Item

Background – Select the background color of the list itemColor – Select the color of the text of the list itemTypography – Set the font properties of the video title

Duration

Color – Select the color of the duration timeTypography – Set the font properties of the duration time

Icon

Color – Select the color of the play or watched iconShadow – Use the shadow options to display a shadow on your iconSize – Use the slider to increase or decrease the size of the iconSeparator – Select the border properties between the list items

Sections

Background – Choose the color of the section backgroundColor – Choose the color of the text in the section displayTypography – Set the font properties of the section textBorder Type – Choose the border properties of the section Width – Set the padding width of the section Color – Choose the color of the border

Tabs

Tabs

Border Width – Use the slider to control the slider widthBorder Color – Choose the color of the borderBackground Color – Choose the background color of the tab

Title

Color – Choose the color of the tab titleActive Color – Choose the active color of the tab titleTypography – Set the font properties of the tab title

Content

Color – Choose the color of the font in tab contentTypography – Set the font properties of the tab contentPadding – Adjust the padding of the tab content

Show More

Color – Choose the color of the 「Show More」 headingTypography – Set the font properties of the 「Show More」 heading

Advanced

There are no additional settings specific to this widget, but it is compatible with the standard Advanced Tab options.

Elementor Widget Panel Not Loading

Elementor Widget Panel Not Loading

If your Elementor Widget Panel does not load and has the continuously spinning 「Loading」 icon, as shown in the image below, this is generally due to a resource issue, a conflict with another plugin, or a setting on your server that needs to be adjusted.

Please follow the steps below to troubleshoot and resolve this issue:

Ensure you meet the system requirements. You can check if your system meets these requirements by going to Elementor > System Info. Two of the main things to check are the PHP version and memory limit, but also take note of any other items that might indicate a problem.Increase your memory limit to 512M if using additional resource heavy plugins such as WooCommerce. This is the most common cause of loading issues. See below for a quick guide to increasing these or contact your hosting provider. Make sure you are using the most updated versions of Elementor, Elementor Pro (if you are using that), WordPress and your theme. Sometimes it isn』t obvious that there is an update available. Go to Dashboard > Updates and click the Check Again button to be sure.Deactivate all of your plugins except Elementor and Elementor Pro. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin』s developers for help, or use a different plugin.Switch your theme (temporarily) to a default WordPress theme such as Twenty Seventeen to see if your theme is causing an issue. If so, contact the theme』s developers for help, or use a different theme.If the problem persists, ask your hosting company to provide you with ModSecurity error logs and resolve any problems from it. Also, ask your hosting company to make sure the PHP Zlib extension is enabled on your server.In some cases, you may need to increase the value of max_input_vars. Please ask your host to help with this.

If your entire Elementor screen will not load, rather than just the Widgets Panel not loading, please see the Can』t Edit With Elementor guide instead.

Increasing your PHP Memory

If you have access to cPanel, you may use the MultiPHP INI Editor for all your settings.

If you do not have access to cPanel, the following methods are also used to increase your memory. If you do not feel comfortable in trying these methods on your own, or they fail to resolve your issue, you should contact your hosting to have them increase your memory limit.

Edit your wp-config.php file

Add this to the top, before the line that says, 「Happy Blogging」:

define('WP_MEMORY_LIMIT', '512M');

Note: WordPress memory can be different from the server – you need to set this regardless of server memory settings.

Edit your PHP.ini file

If you have access to your PHP.ini file, change the line in PHP.iniIf your line shows 64M try 256M:

memory_limit = 256M ; Maximum amount of memory a script may consume (64MB)

Edit your .htaccess file

If you don』t have access to PHP.ini try adding this to an .htaccess file:

php_value memory_limit 256M

Maintenance Mode

Maintenance Mode

With Elementor』s Maintenance Mode, you can display a custom maintenance mode page to visitors, and send the right HTTP response to search engines.

Create a 『Maintenance』 Page Template from scratch, or use one of our pre-designed templates and publish it. Note: The template hierarchy needs to be set to Page and not Section or other options. Go to Elementor > Tools > Maintenance ModeChoose Maintenance in the mode selectorSelect the User Roles that are able to access the websiteSelect the template you created in the dropdown selectorSave your changes and view the website from another browser or incognito mode to test your page.

Maintenance Mode Response Code

When you set Elementor』s Maintenance Mode on, it will make your site tell search engines that your site is temporarily down for maintenance. It does so by sending the temporary maintenance response (HTTP 503). This way, search engines know to come back a short time later to check again if the site is already online.

Note: The following 3rd party cache plugins are automatically cleared on every change in Maintenance Mode: 

WP Rocket (premium)W3 Total Cache (free)WP Super Cache (free)WP Fastest Cache (free + premium)

(Read the complete Maintenance Mode post here)

Note: You will see a red button on your top WordPress bar with the text: 」 Maintenance Mode ON「.

Tip: You can use the same process described here for 『Coming Soon』

How to Add & Edit a Background Video in Elementor

How to Add & Edit a Background Video in Elementor

You can set a video as the background of a Section, enabling you to create interesting hero headers and other engaging areas on your page. The background video options can be found within the section』s Style tab.

Style

Background

Background Type: Click the video icon Video Link: Enter a YouTube, Vimeo or .mp4 link to the videoStart Time: Specify start time in secondsEnd Time: Specify end time in secondsPlay Once: Slide to Yes to only play the background video once, with no repetition.Play on Mobile: Slide to Yes to play background video on mobile devices, if the device supports it.Background Fallback: Upload a cover image, to replace the background video on mobile and tablet devices, as background videos are disabled on mobile devices to avoid browser restrictions and bandwidth draining.

Tip: Use Background Overlay to darken your video or to add your own personal color overlay.

Note: Youtube changed their API in September, 2018 and does not allow the possibility to disable related videos any longer. The parameter 「rel=0」 is no longer a working parameter. In addition, background videos now briefly show the title of the video. Elementor cannot disable this as it is controlled solely by Youtube.

Note: Only Vimeo premium accounts can remove Vimeo background video controls and titles.

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

Create Footers Using Elementor』s Theme Builder

Create Footers Using Elementor』s Theme Builder

The  Footer Template lets you easily design and edit custom footers.

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

Tip: Did you know? You can create more than one Footer, and assign it to different areas on your site!   Click to learn more

Note: You will not be able to see your Footer if you』re using the Canvas Template

How to Speed Up a Slow Site With Elementor

How to Speed Up a Slow Site With Elementor

Table Of Contents

Common Causes of a Slow Site / ElementorTests You Can RunSpeed Optimizations You Can RunHow Are We Improving

Elementor is the fastest website builder for WordPress, written with the strictest code standards. Some websites, however, might have a configuration that causes slow loading.

Here are the most common ways to deal with a slow Elementor site:

Common Causes of a Slow Site / Elementor

There are several possible causes for a site or editor to show slow performance, each one should be examined:

Servers – Factors like memory, bandwidth, the location of the server in relation to the user and so on have a major impact on site speed. Free or shared hosting services are often the cause of a slow site. 

Media (images, videos and so on) – Any image you place inside your site slows it down, especially if the image is placed in areas that are always loaded like the header and footer. Always make sure you upload images that are not too big (Under 1 MB is a good rule of thumb). Use tools like TinyPNG to reduce the size of your images. 

External scripts – Any use of external scripts, i.e. Google Maps, Facebook share count, Avatar images, all considerably slow down a page load. You can deactivate Google Fonts, Font Awesome, and Eicons for example, by adding the following lines of code to your functions.php file in your child theme.

For Google Fonts:add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

For Font Awesome:

add_action('elementor/frontend/after_register_styles',function() {
foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
wp_deregister_style( 'elementor-icons-fa-' . $style );
}
}, 20 );

Note: By default, Font Awesome icons will only load on the pages where you』ve used them, so FA won』t load on pages that aren』t using any Font Awesome icons. This brings faster performance and faster page speed to your site, which can benefit your SEO and your users』 experience.Only the CSS and fonts of the icon family you actually use are loaded. So only dequeue Font Awesome if you truly plan to not use any Font Awesome icons at all.If you dequeue Font Awesome, the icons will no longer show on any of your pages.

For Eicons: 

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
function remove_default_stylesheet() {
wp_deregister_style( 'elementor-icons' );
}

Plugins – Plugins make WordPress slower. If you are not using a certain plugin – switch it off and delete it.

Theme – A good theme shouldn』t slow down a site, but unfortunately a lot of themes do. A well-coded theme uses scripts and methods to reduce its file sizes. Switching between themes and seeing the effect might give you a good indicator if the theme is the culprit.

Tests You Can Run

Check why your website is slow on page speed analyzers such as Google Page Speed Insights and GTmetrix.Deactivate all plugins besides Elementor and Elementor pro and verify if it betters the page speed.Switch toTwentySixteen (one of the default themes of WordPress).Create a page with the Canvas template and test it for speed again.After following these steps run a speed test and check for improvements.

Speed Optimizations You Can Run

1. Use a caching plugin like  WP Rocket and Autoptimize or any other cache plugin that will meet your needs.

2. Use a CDN service like  CloudFlare.

2. Check with your hosting provider regarding possible causes of the site being slow on the server side.

3. Switch editor loader method.

4. Reduce image sizes.

5. If you have developer know-how, we recommend to check the ping speed of your servers and analyze the various elements』 loading time to pinpoint to cause of the slowness.

How Are We Improving?

The Elementor Developers are working very hard and listening to the needs of our users. We are improving our performance from the foundations up and empowering third party developers to do the same. Learn more here.

How Elementor Improved Asset Loading and Made Your Website Run Faster

Mobile Responsive Editing

Mobile Responsive Editing

Important: Some of the information in this document has been altered by the recent addition of Custom Breakpoints. Please also refer to the documentation located here.

How To Adjust Settings For Mobile, Tablet, and Desktop

Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

Look for the Viewport Icon next to the individual element you wish to control. Click the specific device icon for which you want to edit its settings.

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show / Hide a Section according to the device.

Go to Section Setting > Advanced > ResponsiveSet your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it』s hidden on, you will see that this element is 「muted」. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tabletSave your changesGo to > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview

Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.

Help! I Changed Something While In Mobile Preview, And It Changed On Desktop Too! Why?

You can』t delete an element (widget, column, or section) while previewing one mode (mobile, for example), and expect it to only be deleted from that type of device. Deleting elements will delete them across all devices. You can, however, use the element』s Responsive Visibility feature by going to the element』s Advanced > Responsive tab and enabling any of its visibility options (Hide on Desktop, Hide on Tablet, or Hide on Mobile). While the element won』t be deleted on those devices, it will be hidden.You can』t move elements around while previewing one mode, and expect them to only be moved for that type of device. Moving elements around in any preview mode will move them across all devices. One exception to this is the Section > Advanced > Responsive > Reverse Columns feature, which does move columns to their reverse position.If an element doesn』t have a Viewport Icon next to it, changing that element in one preview mode will change it across all devices.

Video Widget

Video Widget

Use the Video Widget to easily embed videos on your page.

Video

Source: Select the source of the video. Choose between Youtube, Vimeo, Dailymotion, or Self Hosted (which includes hosting on external servers)URL: Enter the URL of the videoStart / End Time: Set Start and End time for your video. Leave blank for full length video

 

Video Options

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

Youtube

Autoplay: Slide to YES to automatically play the video on page loadPlay on Mobile: This option only appears if Autoplay is set to Yes. Useful to allow iOS to autoplay the video.Mute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Modest Branding: When Player Controls is set to YES, you can Hide the YouTube logo by sliding Modest Branding slider to YESSuggested Videos: Choose from 「Current Video Channel」 or 「Any Video」Privacy Mode: Slide ON or OFF. When ON, Youtube won』t store information about visitors on your website unless they play the video

Vimeo

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoControls Color: Choose the color of the Player Controls, such as Play/Pause, etc.Intro Title: Show or Hide the Intro TitleIntro Portrait: Show or Hide the Intro PortraitIntro Byline: Show or Hide the Intro Byline

Dailymotion

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Video Info: Show or Hide the Video Info, such as the video』s titleLogo: Show or Hide the Video LogoControls Color: Choose the color of the Player Controls, such as Play/Pause, etc.

Self Hosted

Autoplay: Slide to YES to automatically play the video on page loadMute: Slide to YES to Mute the videoLoop: Slide to YES to Loop the videoPlayer Controls: Show or Hide the Player Controls, such as Play/Pause, Volume, etc.Download Button: Show or Hide the Download Button (applicable for Chrome only)

Image Overlay

Image Overlay: Show or Hide an Image Overlay

Note: Using Image Overlay overrides Autoplay. Videos will not autoplay if an Image Overlay is set.

If Image Overlay is set to Yes, the following options become available:

Image: Set your ImageLazy Load: Defer loading of the video resources until the user clicks the Play button *Image Size: Set your Image SizePlay Icon: Slide to YES to show a Play IconLightbox: Slide ON to view the video in a Lightbox. Once ON, you will have to set an image

* Lazy Load replaces the video embed code with a static image of your choice, and optionally, a play icon on top of the static image. The video is only loaded when the user clicks on the image.This greatly helps speed up the initial page load time because the user』s browser doesn』t download the many extra resources Youtube and other video services embed, all before a user even needs them. If you want faster load times on pages that embed videos, Lazy Load is a good option to enable.

Style

Aspect Ratio: Change the videos aspect ratio. Choices include: 1:1, 3:2, 4:3, 16:9, 21:9, and 9:16CSS Filters: Set up a blur, brightness, contrast, saturation, and hue

Advanced

Set the Advanced options that are applicable to this widget