Author 诗语

Lightbox

Lightbox

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

Document Settings

Document Settings

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

Hover Effects

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website』s engagement and design interaction.

Hover effects can be applied at the Widget, Column, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.

WooCommerce Single: Additional Information (Pro)

WooCommerce Single: Additional Information (Pro)

Add Additional Information to your product display on WooCommerce Single template

Style

General

Heading: Show or HideColor: Choose the color of the HeadingTypography: Change the typography options for the Heading

Color: Choose the color of the Additional Information textTypography: Change the typography options for the Additional Information text

How to Change Font Size, Color, Family & Style in Elementor Website Builder

How to Change Font Size, Color, Family & Style in Elementor Website Builder

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

Form Background

Form Background

You can style the Normal and Hover state of the form background.

Background Type – Choose between Classic and GradientColor – Set the colorImage – Upload a background imagePosition – Position options for the background imageAttachment – Choose between scroll or fixedRepeat – Set the image repeat propertySize – Set the size of the image background

Learn more about the Form Widget (Pro)

WP-CLI

WP-CLI

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.

Help Button

Help Button

A Help Button is located near the bottom of each widget panel. Clicking on the Help Button will open a new browser tab and will display the Elementor documentation for the current widget being used.

For example, clicking on the Help Button on the Heading widget』s editor panel will open a new tab that loads the Heading widget』s documentation.