Author 诗语

Portfolio Widget (Pro)

The Portfolio Widget allows you to display your posts, pages, and custom post types in an attractive, filterable grid.

Note: The Portfolio widget ONLY works with posts, pages, and custom post types. The Portfolio widget does NOT work with Galleries.

Content

Layout

Columns: Set the number of columns displayed in the widgetPosts count: Set the exact amount of posts to be displayed in the widgetImage size: Set the size of the imagesItem ratio: Set the ratio of the itemsShow title: Choose whether to show or hide the title. The title will display while hovering over the imagesTitle HTML tag: Wrap the title with a tag, either H1…H6, span, div or paragraph

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, current query, and related. Depending upon which source you』ve chosen for the query, you』ll be given options which allow you to filter the results.

Include

Include By: Term or Author, then use Search and Select to choose which ones to useDate: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or NoQuery ID: Give your Query a custom unique ID to allow server side filtering

Exclude

Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choicesAvoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.Offset: Use this setting to skip over posts (e.g. 「2」 to skip over 2 posts)Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)Order By: Date, Title, Menu Order, or RandomOrder: DESC (descending) or ASC (ascending)Ignore Sticky Posts: Yes or NoQuery ID: Give your Query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Filter Bar

Show: Set whether to show or hide the filter bar above the portfolioTaxonomy: Choose the taxonomy from which to display the posts. Options include: Categories, Tags, and any custom post type taxonomies

Style

Items

Item Gap: Set the exact gap between the itemsRows Gap: Set the exact gap between rows of itemsBorder Radius: Set the border radius for the images to control corner roundness

Item overlay

Background Color: Set the background color of the overlay when you hover over the imageColor: Set the post』s Title color. The title appears within the overlay when you hover over the imageTypography: Customize the typography of the Title

Filter bar

Color: Set the color of the Filter Bar textActive Color: Set the color for the Filter Bar』s active textTypography: Customize the typography of the Filter Bar textSpace Between Items: Set the space between the items in the Filter BarFilter Spacing: Set the spacing between the Filter Bar and the images

Advanced

Set the Advanced options that are applicable to this widget

Note: Featured images must be used in your posts for any images to show up in the Portfolio 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

Additional Options – Forms

Form ID – Set a form ID.Custom Messages – Slide the Custom Messages button to customize messages in the form (e.g Success Message, Error Message etc.). 

Note: The Custom Messages are not the standard messages that the server provides. The standard server messages cannot be controlled or customized. These custom messages will rarely ever be seen by the user. The custom messages may occasionally be generated when there is a server conflict that prevents the form from being sent. Please note also that the Custom Messages are fallback messages when the browser does not display its own error.

More Form Options

This page outlines the Form Addtional Options. For other Form options, click one of the links below:

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages

Posts Widget (Pro) vs Archive Posts Widget (Pro)

How do you know when to use the Posts widget and when to use the Archive Posts widget?

Although similar in that both widgets produce a list or grid layout of posts, the Archive Posts Widget (Pro) and the Posts Widget (Pro) are not interchangeable.

When and Where To Use Each Widget

The Archive Posts widget should only be used on Archive templates, which are created in Templates > Theme Builder > Archive. If you attempt to use it on a normal page or post, it will only display the current post.The Posts Widget  is meant to be used on any Single page or post where you would like to display a group of posts.

Which Posts Will Be Displayed?

The Archive Posts widget does not include a query control function, so you have no control over which posts are shown within the widget itself. All posts that satisfy the Display Conditions of the Archive Template will be shown in this widget.The Posts widget includes a robust method of controlling which posts to show in the grid display, using its query control function.

Why Doesn』t The Excerpt Length Work Consistently in Archive Posts widgets or Posts widgets?

When Elementor displays a post, if it has no excerpt, Elementor automatically generates an excerpt from the post』s content. Both the Archive Posts widget and the Posts widget includes an Excerpt Length option to allow you to control the length of this auto-generated excerpt. In both, however, the excerpt length only applies to posts in which no manual excerpt has been entered. The length specified in the Elementor widget is ignored if a manually-generated excerpt exists for a post.

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.

How to Fix 404 Page or Page Not Found Error Messages

If you are getting a 404 page when you try to navigate to a certain page, or get a 『Page Not Found』 error, this may be caused by a memory issue, an issue with the permalinks or a conflict with another plugin.

Follow these steps:

Check if you can solve this by changing the permalinks in 「Settings > Permalinks」 on your WordPress Dashboard. You should set it to 「Plain」 to troubleshoot.If it does not work, check your memory limit in your system info in 「Elementor > System Info」 and ask your hosting company to raise it to, at least, 128MB by using this guide: https://wordpress.org/support/article/editing-wp-config-php/#increasing-memory-allocated-to-phpSwitch the front-end editor loader method located in the settings of Elementor on your Dashboard via 「Elementor」 > 「Settings」 >」Advanced」.Ask also your hosting company to deactivate ModSecurity temporarily to rule out an issue with a rule set via this firewall. If it is the issue, checking the ModSecurity logs will help your hosting company to solve this.Your host may need to enable zlib.output_compression module which can compress the data and may help with the loading of the editor when servers have limited resources.Finally, you can also deactivate all your plugins besides Elementor and Elementor Pro, and switch to a default WordPress theme such as Twenty Nineteen to troubleshoot. 

If you receive this error message when you try to save a page, please consult this guide.

If you get this error message after activating Elementor Pro, please read this article.

If you still experience this issue after trying the potential solutions mentioned above, please open a support ticket.

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

Share Buttons Widget (Pro)

The Share Buttons Widget adds share buttons to any WordPress page or post. Share Buttons Widget gives you full control over your Share Buttons design & style.

Content

Share Buttons

Click Add Item to add a social networkUnder the Network dropdown > Choose a social networkView: Choose between Icon & text, Icon only, and Text onlyLabel: Show or Hide the LabelSkin: Choose your Social Buttons SkinShape: Choose your Social Buttons ShapeColumns: Choose the number of ColumnsAlignment: Set the Social Buttons AlignmentTarget URL: Sets the Social Buttons URL

Style

Share Buttons

Columns Gap: Set the space between each button』s columnRows Gap: Set the space between each row of buttonsButton Size: Set the size of the buttonsIcon Size: Set the size of the iconsButton Height:Set the height of the buttonsColor: Choose either the Official button color combination or specify a custom color combination, with Primary Color for the background color of the buttons, and Secondary Color for the button text. Custom Colors can be set for both the Normal and Hover states.Typography: Set the typography options for the buttons』 text.

Advanced

Set the Advanced options that are applicable to this widget

Note: If a custom excerpt exists for a post, the Twitter share button will use the custom excerpt as the tweet』s content, followed by the post』s link.

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.

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