Author 诗语

Image Widget

Images play a vital role in web design, so you will most likely use the Image Widget a lot while designing your website. Let』s go over all of the settings you can control for this widget.

Content

Image – Upload an image or choose Dynamic to dynamically use Posts featured image, Site Logo, and Author Profile Picture.Image Size – Choose the size of the imageAlignment – Set the image AlignmentCaption – Optionally, add a caption to the bottom of the image. Choose to either create a new custom caption or use the current Attachment Caption from the image』s location in the WordPress Media Library.Link To – Set a link to a custom URL, media file, or no link. Choose 「media file」 to link directly to the location of the image within your media library. Choose 「custom URL」 to link to any page on any site. Choose 「none」 if you don』t want to add a link to the image at all.

Style

Width – Set the Image WidthMax Width – Set the Max Width for the ImageHover Animation – Click the dropdown to choose a Hover AnimationCSS Filters – Set CSS Filters: Blur, Brightness, Contrast and SaturationOpacity – Set the OpacityTransition Duration – Set the Hover Animation durationBorder Type – Set a Border TypeBorder Radius – Set a Border RadiusBox Shadow – Set Box Shadow: Horizontal, Vertical, Blur, and SpreadCaption – Set the Alignment, Text color, Text Shadow, and Typography of the caption.

Note: Blend Modes/CSS Filters do not work with Internet Explorer.

Advanced

Set the Advanced options that are applicable to this widget

Image Box Widget

The Image Box Widget lets you add an image box that combines an image with a headline and text, which is often used in Features sections, as an alternative to using the Icon Box widget.

Content

Choose Image: Select an image from the media library, or upload a new imageImage Size: Select the size of the image, from thumbnail to full, or enter a custom sizeTitle & Description: Add the title and description that will appear in the image boxLink to: 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.Image Position: Set the position of the image to left, top or right, relative to the title and description (on Mobile view it will stay centered).Title HTML Tag: Set the HTML tag of the title as H1…H6, div, span or paragraph

Style

Image

Spacing: Set the exact space between the image and the titleWidth: Scale the image width from 0 to 100%Hover Animation: Add Hover Animation to the imageCSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings in Normal and Hover statesOpacity: Control the opacity of the image in Normal and Hover statesTransition Duration: Set the time it takes for each slide to appear. This time is in milliseconds, so 1000 ms is equal to 1 second

Content

Alignment: Align the content to the left, right, center or justifiedVertical Alignment: Align the content to the top, middle or bottom of the box

Title

Spacing: Set the space between the title and descriptionColor: Set the color of the titleTypography: Set the typography options for the title

Description

Color: Set the color of the description textTypography: Set the typography options for the description

Advanced

Set the Advanced options that are applicable to this widget

Accordion Widget

The Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.

With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.

A similar widget is the Toggle widget, but there are two main differences between the Accordion widget and the Toggle widget.

When a page is loaded, the first item of the Accordion widget is expanded, while all other items remain collapsed. With the Toggle widget, however, all items are collapsed when a page is first loaded.Only one item of an Accordion can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion. With the Toggle widget, however, as many items as desired can be expanded at the same time.

Content

Accordion

Accordion Items Title & Content: Enter the title and description for each itemIcon: Select the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the expanding concept. Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept.Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIVAdd Item: Use the 『Add Item』 button to add more accordion items to the list.

Style

Accordion

Border Width: Set the thickness of the border around the accordion and between each itemBorder Color: Choose the color of the border around the accordion and between each item

Title

Background: Choose the color of the title』s backgroundColor: Choose the color of the non-active titles』 textActive Color: Choose the color of the active title』s textTypography: Set the typography options for the titlesPadding: Set the padding for the titles

Icon

Alignment: Align the icon to the left or right of the titleColor: Choose the color of the iconsActive Color: Choose the color of the active iconSpacing: Control the spacing between the icon and the title

Content

Background: Choose the background color of the contentColor: Choose the text color of the contentTypography: Set the typography options for the contentPadding: Set the padding for the content

Advanced

Set the Advanced options that are applicable to this widget

Testimonial Widget

With Elementor, you can add and style testimonials easily and without the need for any 3rd party plugins.

Content

Testimonial

Content – Enter the text of the testimonialChoose Image – Upload the testimonial author』s imageName – Enter the testimonial author』s nameJob – Enter the testimonial author』s job titleLink to – Set a link to a URL, media file or no linkImage Position – Set the image position, relative to the testimonial content. Options include: Aside or TopAlignment – Align the testimonial to the left, right, or center

Style

Content

Text Color – Choose the color of the content.Typography – Change the typography of the content.

Image

Image Size – Scale the image size up or downBorder Type – Select the type of border. Options include none, solid, double, dotted, dashed, or groovedBorder Radius – Set the border radius to control corner roundness

Name

Text Color – Choose the color of the nameTypography – Change the typography of the name

Job

Text Color – Choose the color of the jobTypography – Change the typography of the job

Advanced

Set the Advanced options that are applicable to this widget

Toggle Widget

The Toggle Widget lets you create text boxes that are collapsed, so the visitor only sees the titles of each text box item. This lets you show your content in a condensed form, so visitors don』t have to scroll through a long page and can sift through the titles easily.A similar widget is the Accordion widget, but there are two main differences between the Toggle widget and the Accordion widget.

When a page is loaded, all Toggle widget items are collapsed. With the Accordion widget, however, the first item is expanded, while all other items remain collapsed.With the Toggle widget, as many items as desired can be expanded at the same time. With the Accordion widget, however, only one item can be expanded at one time. As you expand another Accordion item, the previously opened item automatically collapses, looking similar to an accordion

Content

Toggle 

Toggle ItemsTitle & Content: Enter the title and description for each itemIcon: Select the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the expanding concept.Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept.Title HTML Tag: Set the HTML tag used for the title to H1- H6 or DIVAdd Item: Use the 『Add Item』 button to add more toggle items to the list.

Style

Toggle

Border Width: Set the thickness of the border around the toggle widget and between each itemBorder Color: Choose the color of the border around the toggle widget and between each itemSpace Between: Set the amount of space between each itemBox Shadow: Set the box shadow around the toggle widget, or around each item if there is space between each. You can adjust the box shadow』s Color, Horizontal position, Vertical position, Blur, and Spread as well as the shadow』s Position, which can be either Inset or Outline

Title

Background: Choose the color of the title』s backgroundColor: Choose the color of the non-active titles』 textActive Color: Choose the color of the active title』s textTypography: Set the typography options for the titlesPadding: Set the padding for the titles

Icon

Alignment: Align the icon to the left or right of the titleColor: Choose the color of the iconsActive Color: Choose the color of the active iconSpacing: Control the spacing between the icon and the title

Content

Background: Choose the background color of the contentColor: Choose the text color of the contentTypography: Set the typography options for the contentPadding: Set the padding for the content

Advanced

Set the Advanced options that are applicable to this widget

Sidebar Widget

The Sidebar widget allows you to add any of your theme』s sidebars into the page.

Go to Content > Sidebar > Choose Sidebar, and select a sidebar to display on the page.

Tip: Elementor』s Hello theme does not come with a widgets menu section or sidebar by default. If you are using the Hello theme, see instructions here to add the widgets menu option, which will then enable you to use the Sidebar widget.

Advanced

Set the Advanced options that are applicable to this widget

Icon Box Widget

Icon boxes come in very handy when building websites. The most common usage is for sections that list features of products or services. In this video tutorial, you will see the various options you get to customize every element of this widget: the icon, the headline, and the description. The icons are derived from the Font Awesome Icons, and you are able to search through them and pick the right one.

Content Tab

In the content tab, you have full control over the widget』s content. 

View – Set the view of the icon as 『Default』, 『Stacked』 or 『Framed』. Stacked is with a background and framed is with a frame surrounding the icon.Choose Icon – Here you have a list of the entire collection of Font Awesome icons.Title & Description – Insert the title and description of your Icon Box widget.Link to – Insert a link, and choose if it will opens on a new window.Icon Position – Set the position of the icon on the left, top or right side of the box (on Mobile view it will stay centered).Title HTML Tag – Choose the title tag, from H1..H6, Div, Span or P. 

Style Tab

1. Icon

Primary Color – note that if you choose stacked or framed icon box, you will also have a secondary color.Icon spacing – The space between the icon and the heading.Icon size – Scale up and down the size of the icon.Icon Rotate – Rotate the icon.

2. Icon Hover

Choose the primary and secondary color for the icon hover. 

Animation – Choose from a long list of animations for the hover.

3. Content

a. Title

Alignment – Left, centers, right or justified.Vertical Align – Top, middle and button.Title Spacing – Set the spacing between the title and the description.Title color – Change the color of the title.Typography – Here I can customize the typography of the title.

b. Description

Description color – Change the color of the description.Typography – Choose custom to change the typography, just like with the title.

Advanced

Set the Advanced options that are applicable to this widget

Alert Widget

The Alert widget enables you to display a colored alert box to draw attention to an important message.

Content

Alert

Type: Select the type of pre-styled alert box, choosing from Info, Success, Warning, and DangerTitle & Description: Enter the alert box Title and DescriptionDismiss Button: Show or Hide the Dismiss Button (X)

Style

Alert

Background Color: Choose the background color of the Alert boxBorder Color: Choose the color of the left borderLeft Border Width: Set the width of the left border

Title

Text Color: Choose the color of the Title textTypography: Set the typography options for the Title text

Description

Text Color: Choose the color of the Description textTypography: Set the typography options for the Description text

Tip: You can show or hide the Dismiss button (the X in the upper right corner of the Alert box), by choosing Show or Hide in the Dismiss Button option. If the Dismiss button is hidden, the user cannot dismiss (close) the box.

SoundCloud Widget

The SoundCloud widget embeds audio clips from SoundCloud.

Content

SoundCloud

Link – Enter the SoundCloud URL you wish to add to the page.Visual player – Choose whether the visual player is displayed, or just the audio player.Autoplay – Choose if the audio is automatically played when the user loads the page.Buy button – Show or hide the button to buy the track.Like button – Show or hide the like button.Download button – Show or hide the download button.Share button – Show or hide the share button.Comments – Show or hide comments.Play counts – Show or hide the number of play counts.Username – Show or hide the username that uploaded the track.Controls color – Customize the color of the controls.

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

Advanced

Set the Advanced options that are applicable to this widget.

Read More Widget

Elementor supports the native WordPress 『』 tag, which helps determine the preview text that is shown for blog posts in archive pages. Alternatively, Add the Read More widget to your Elementor-designed posts to set the cutoff point for blog posts on standard WordPress archive pages.

Content

Read More

Read More Text: Enter the link text such as Read more…, Continue reading, etc.

Advanced

Set the Advanced options that are applicable to this widget

Note: This widget only affects themes that use 『the_content』 in standard WordPress archive pages. It has no effect on Elementor-designed archive templates. In these templates, you have to use the tag itself.