When you edit a Section, you will see that under the Advanced Tab the right and left margins are not editable, and set to auto.
This is because, in , a section is always a complete row. If you want to restrict the content inside the section you need to go to Section > Layout and adjust the content width.
Elementor』s Dark Mode saves your laptops』 battery life (while helping the environment), eases eye strain, particularly at night, and provides contrast improvement in the editor panel for better accessibility.
Select Mode
Go to Elementor Widget Panel > Hamburger Menu > Preferences > UI ThemeChoose Auto Detect, Light, or Dark
Note: Most modern browsers allow websites and web apps to automatically display Dark Mode based on the user』s preference which they have assigned via their operating system. If Auto Detect is chosen for Elementor』s UI Theme, your preferences as defined by your Operating System (OS) and controlled by your browser will be used.
With Document Settings, you control some basic and useful WordPress settings.
Click on the gear icon located at the bottom left of the panel.
Settings tab
General Settings
Title – Change the titleStatus – change the status (Draft, Pending, Private, Publish)Featured image – add a featured imageHide Title – Slide the switch to hide the titlePage layout – Choose between the different layouts (Default, Elementor Canvas, Elementor Full Width, etc.)
Style tab
Body Style
Body style – choose between color, gradient, or image backgroundPadding – add padding to the document
Custom CSS
Placeholder for your document』s custom CSS
Elementor integrates with WP-CLI, enabling you to run certain Elementor tasks via the command line. Currently, the following Elementor commands that are integrated with WP-CLI are:
flush_css – Flush the Elementor Website Builder CSS Cacheimport_library – Import template files to the libraryreplace_urls – Replace old URLs with new URLs in all Elementor pagessync_library – Sync Elementor Librarylicense activate or license deactivate – Activate or Deactivate Elementor Pro license
To view a list of all available Elementor WP-CLI tools via the command line, enter:
wp help elementor
wp help elementor
wp help elementor-pro
wp help elementor-pro
To get help for an individual command, use the format:
wp help elementor
or
wp help elementor-pro
flush_css
wp help elementor flush_css
Successful Response:
import_library
wp help elementor import_library
Note: For the wp elementor import_library command, the name of the admin user has to be added for security reasons. Without the inclusion of the admin』s username, it will trigger an 「access denied」 error.
For example:
Do Use This: wp elementor import_library import-test.zip --user=admin
Don』t Use This: wp elementor import_library import-test.zip
replace_urls
wp help elementor replace_urls
sync_library
wp help elementor sync_library
Successful Response:
license activate
Note that this differs from the rest, as it uses elementor-pro rather than elementor.
wp elementor-pro license activate
Successful Response:
license deactivate
Note that this differs from the rest, as it uses elementor-pro rather than elementor.
wp elementor-pro license deactivate
Successful Response:
Tip: Type 「q」 to quit / leave help and return to the command line.
The Dynamic Shortcode feature provides the ability to use a shortcode, dynamically, for anything that Elementor doesn』t already provide a dynamic tag for. While the possibilities are limitless, here are a few examples:
Using any custom field plugin shortcodes that aren』t natively supported by ElementorInserting an Elementor template via its shortcodeUsing an external plugin』s shortcodeUse self-coded shortcodes, for example, conditionally displaying different messages on the page based on a custom shortcode created by a developer
If a widget』s field has a dynamic option, click on the Dynamic icon Select Shortcode from the Site selections. This will add Shortcode in the dynamic field.Enter your shortcode into the Settings > Shortcode field.
Important: By default, for security reasons, the generated HTML while using shortcodes is being escaped. If you wish to disable the escaping add the following line to your theme』s function.php file:
add_filter( 'elementor_pro/dynamic_tags/shortcode/should_escape', '__return_false' );
Follow these steps to create a gradient background visually, without relying on CSS.
Add a Section
Click Add SectionDrag in a WidgetClick the Section Settings handle to enter the Section SettingsGo to Style > BackgroundUnder Background type click the icon to enter the Gradient Settings
Gradient Background Settings
Color: set the first gradient colorLocation: set the location of the first color. This will affect the spreadSecond color: set the second gradient colorLocation: set the location of the second color. This will affect the spreadType: Choose between a linear or radial gradientAngle: Set the gradient angle
The Vertical Scroll scrolling effect is a classic parallax effect. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.
Advanced or Style > Background
Motion Effects
Scrolling Effects: Slide to ONVertical Scroll: Click pencil edit iconDirection: Choose Up or DownSpeed: Set motion speed of vertical scroll from 0 to 10Viewport: Determine when to begin the movement, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the movement starts only after you scroll half the viewport height.Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devicesEffects Relative To: Choose from Default, Viewport, or Entire Page
Note: The viewport value is calculated according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position. See image below:
Set an element to move in relation to the visitor』s mouse movement.
Advanced or Style > Background
Motion Effects
Mouse Effects: Slide to ONMouse Track: Click pencil edit iconDirection: Choose from Opposite or Direct. Opposite will move the element in the opposite direction of the mouse movement. Direct will move the element in the same direction as the mouse movement.Speed: Set the speed from 0 to 10Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.Effects Relative To: Choose from Default, Viewport, or Entire Page
Note: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references 「maximum call stack size exceeded」. To resolve the issue, either remove entrance animations from widgets with motion effects and/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated.
The Elementor Lightbox opens images, galleries, carousels, and videos in a 100% mobile responsive lightbox popup window
The lightbox feature is turned on by default. You can switch it off by going to its settings, and uncheck the checkbox. From any Elementor page or post, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Lightbox.
You can also turn the lightbox on or off globally and customize the lightbox design in the following way:
Click the hamburger icon located in the upper left corner of the panel, and choose Global Settings.Choose the Lightbox tab.
The Global Lightbox tab enables you to adjust the following settings:
Image Lightbox: Slide the switch to enable or disable the lightbox globally.Counter: For multi-image galleries only. If set to Yes, adds an image count to the upper left corner of the lightbox. For example, if the gallery contains 6 images, the counter will display 1/6, 2/6, etc. to indicate 「First of 6 images」, 「Second of 6 images」, etc.Fullscreen: If set to Yes, adds a clickable icon to allow user to open the image in a full screen lightbox.Zoom: If set to Yes, adds a clickable icon to allow user to zoom in on the image in the lightbox. Once you zoom into an image, you』ll be able to pan the view and scroll across the different areas of the image.Share: If set to Yes, Share capabilities are added to the lightbox, allowing the user to share the image on Twitter, Facebook, and Pinterest, or download it to their computer.Title: Optionally display a title under the image in the lightbox. Select from None, Title, Caption, Alt, or DescriptionDescription: Optionally display a description under the image in the lightbox. Select from None, Title, Caption, Alt, or DescriptionBackground Color: Choose the background color and opacity of the lightbox.UI Color: Choose the UI Color. This affects the lightbox arrow and dot navigations, the Close button, etc.UI Hover Color: Choose the UI Hover Color. This affects the lightbox arrow and dot navigations, the Close button, etc. when the user hovers over each.
Note: All of the above functionality is mobile responsive. Visitors can zoom, open images and videos in full screen, and share the images from their mobile phones.
Image Lightbox
The Image Lightbox opens all image links in a lightbox popup window. The lightbox will automatically work on any link that leads to an image file, as long as the 『Link to』 setting for the image is set to 『Media File』.
Once 『 Media File』 is chosen, an additional option called 『Lightbox』 appears. Here, you』ll notice the lightbox feature for this image is set to Default, which reflects the status set in the Elementor > Settings > Style section. You can optionally change the setting for this image from 『Default』 to 『Yes』 or 『No』.
Inside the editor, drag and drop the Image widget onto the page, and choose an image.Change the Link to option to 『Media file』 (This has to be done for the lightbox to work.)Set the Lightbox drop down to YesPreview the lightbox changes by clicking on the image
Many Elementor Widgets offer the ability to edit text color and typography settings. These design options are located in the widgets』 Style tab.
Style
Text Color: Choose the color of your text
Under the Widget Setting > Style, click the icon to access the typography settings.
Typography
Family – Choose your font familySize – Choose a size for your font (learn more about px, em, etc.)Weight – Choose the weight of the fontTransform – Choose the Transform properties for the fontStyle – Choose between Normal, Italic, and ObliqueDecoration – Choose the text DecorationLine-Height – Use the slider to set your line-heightLetter Spacing – Use the slider to set your letter spacing
