Author 诗语

Post Title Widget

Post Title Widget

The Post Title widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s title.

Content

Title

Title: Post Title is the only optionLink:  Enter a URL, or more appropriately, select the Dynamic icon to choose a dynamic URL such as the Post URLSize: Select the title size, choosing from Default, S, M, L, XL, or XXL. Additional sizing is available on the Style tab in the Typography optionsHTML Tag: Set the heading』s HTML tag to H1- H6, Div, Span or ParagraphAlignment: Align the post title to the left, right, center, or justified

Note: If you click 「Post Title」, a window will popup to allow you to choose a Fallback Title in the event that a Post Title does not exist. This popup also allows you to place static content Before and/or After the Post Title

Style

Title

Text Color: Choose the color of the Title』s textTypography: Set the typography options for the TitleText Shadow: Add a shadow and blur to the Post TitleBlend Mode: Set a blend mode for the title

Read the tutorial showing how to Create a Single Post Template

Page Title Widget (Pro)

Page Title Widget (Pro)

The Page Title widget is a dynamic widget that displays the Page Title that was assigned in the WordPress page editor.

Content

Title: The title is automatically, dynamically retrieved for youLink: The link is automatically, dynamically retrieved for youSize: Select the size of the Page Title, from Small to XXLHTML Tag: Set the Page Title』s tag to H1-H6, Div, Span or ParagraphAlignment: Align the Page Title to the left, right, center, or justified

Style

Text Color: Choose the color of the Page Title』s textTypography: Change the typography options for the Page Title』s textText Shadow: Add a shadow and blur to the Page Title』s textBlend Mode: Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc.

Using the Author Box Widget

Using the Author Box Widget

The Author Box widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post』s author box.

Content

Drag an Author Box into the editing screen Source: Choose between Current Author or Custom Author * Profile Picture: Show or Hide the Profile Picture. When using Custom – upload an imageName: Show or Hide the Author Name. When using Custom – type the Author NameHTML Tag: Choose an HTML Tag for your AuthorLink To: Link the Author Name and Image to your website or your post archive. When using Custom – enter your own linkBiography: Show or Hide your Author Biography. When using Custom – enter your Author BiographyArchive Button: Show or Hide an Archive Button. This will direct your users to your post archive. When using Custom – enter your own linkArchive Text: Type the Archive Button textLayout: Set the layout for your Author BoxAlignment: Set the Alignment for your Author Box

* Note: Current Author takes the WordPress user』s dynamic info to display the Post Author. Custom Author is static info.

Style

Image

Vertical Align:  align your Author image to the top or to the middle.Image Size: Set the image sizeGap: Adjust the gap between the image and the textBorder: Slide for a borderBorder Color: Set the border colorBorder Width: Set the border widthBorder Radius: Set the border radiusBox Shadow: Add Box Shadow to your Image

Text

Under Name:

Color: Set the Author name text colorTypography: Set the typography designGap: Set the gap between the Author Name and the Biography

Under Biography:

Color: Set the Biography text colorTypography: Set the typography designGap: Set the gap between the Biography and the Button

Button

Text Color: Set the Button Text ColorBackground Color: Set the button Background ColorTypography: Set the Typography designBorder Width: Set the border widthBorder Radius: Set the border radiusPadding: Set the button padding

Countdown Widget (Pro)

Countdown Widget (Pro)

The Countdown widget enables you to add countdowns to your page without the use of 3rd party plugins.

Content

Type: Choose either Due Date or Evergreen TimerDue Date: If Due Date is the type chosen, this option will appear. Set the destination date and time for your countdownHours / Minutes: If Evergreen Timer is the type chosen, these options will appear. Set the hours and minutes of the countdown * View: Choose between Block or InlineDays: Show or Hide the Days displayHours: Show or Hide the Hours displayMinutes: Show or Hide the Minutes displaySeconds: Show or Hide the Seconds displayShow Labels: Show or Hide the LabelsCustom Labels: Edit the Labels』 textActions After Expire: Choose from Redirect, Hide, or Show Message. If Redirect is chosen, enter the Redirect URL. If Hide is chosen, the countdown will be hidden when the target』s time reached. If Show Message is chosen, enter the message to be shown after the time expires.

* Note: Evergreen Timer means every single visitor gets the same countdown time frame you set

Style

Boxes

Container Width: Set the width of the Countdown』s containerBackground Color: Choose the background color of the boxesBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessSpace Between: Control the space between boxesPadding: Set the padding within the boxes

Content

Digits 

Color: Choose the color of the numerical digitsTypography: Change the typography options for the numerical digits

Label

Color: Choose the color of the Labels』 textTypography: Change the typography options for the Labels』 text

Expire Message

Alignment: Align the Expire Message to the left, right, center, or justifiedText Color: Choose the color of the Expire Message』s textTypography: Change the typography options for the Expire Message

Note: Expire message will be displayed only when selecting the After Expire Action > Show Message.

Advanced

Set the Advanced options that are applicable to this widget

Reviews Widget (Pro)

Reviews Widget (Pro)

The Reviews widget displays a sliding carousel of user reviews.

Content

Slides

Items

Shows a list of all the items in the slide. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Image: Upload or choose the reviewer』s imageName: Enter the reviewer』s nameTitle: Enter the reviewer』s job titleRating: Assign a numerical rating, from 0.0 to 5.0Icon: Choose the type of icon to use, either Font Awesome or UnicodeLink: Link the review to a URLReview: Enter the text of the review

Tip: Quickly duplicate or delete items by clicking an item』s Duplicate or Delete icon 

Slides Per View: Select the number of slides to show at one time, from 1 to 10Slides to Scroll: Select how many slides to scroll per swipe, from 1 to 10Width: Set the width of the carousel, in percentage or pixels

Additional Options:

Arrows: Show or hide the navigation arrowsPagination: Select the carousel pagination style, either None, Dots, Fraction, or ProgressTransition Duration: Set the time between slide movement, in millisecondsAutoplay: Slide to YES to have the carousel slide automaticallyAutoplay Speed: Set the speed at which the carousel will slide, in millisecondsInfinite Loop: Set to YES to have the carousel continue sliding, infinitelyPause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clickedImage Size: Set the size of the image, from thumbnail to full, or enter a custom size

Style

Slides

Space Between: Control the space between review itemsBackground Color: Choose the background color of the review cardBorder Size: Set the thickness of the border around the review cardBorder Radius: Set the border radius to control corner roundnessBorder Color: Choose a color for the borderPadding: Set the padding within the border of the review card』s box

Header

Background Color: Choose the background color of the review card』s headerGap: Control the space between the Header and the Review textSeparator: Choose to show or hide the separator line between the header and the review textColor: Choose the color of the separator lineSize: Set the height of the separator line

Text

Name / Title / Review

Color: Choose the color of the Name/Title/ReviewTypography: Change the typography options for the Name/Title/Review

Image

Image Size: Adjust the size of the reviewer』s imageImage Gap: Control the space between the image and the reviewer』s profile informationBorder Radius: Set the border radius to control corner roundness

Icon

Color: Set the color of the social icon. Choose either the Official Color of the social network, or set a custom color of your choiceSize: Adjust the size of the social icon

Rating

Icon: Choose the type of icon to use, either Font Awesome or UnicodeUnmarked Style: Choose Solid or Outline for unmarked iconsSize: Set the size of the rating starsSpacing: Adjust the amount of space between each starColor: Choose the color of the rating starsUnmarked Color: Choose the color of the unmarked portion of the stars

Navigation

Arrows / Pagination

Size: Adjust the size of the navigation arrowsColor: Choose the color of the navigation arrows

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

WooCommerce Products (Pro)

WooCommerce Products (Pro)

Display products on any page of your site, setting their content and style with the WooCommerce Products widget

Content

Products

Columns: Set the exact number of columns to display, from 1 to 12Rows: Set the maximum number of rows to displayPagination: Select Yes to show Pagination or No to hide itAllow Order: Select Yes to give users the option to sort the products by Default, Popularity, Rating, Latest, Price: Low to High, or Price: High to LowShow Result Count: Select Yes to show number of results for this archive, or No to hide it

Query

Source: Select source of results, choosing from Current Query, Latest Products, Sale, Featured, or Manual Selection. 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, then use Search and Select to choose which ones to useOrder By: Set the order in which the products will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.Order: DESC (descending) or ASC (ascending)

Note: Choosing Related as the  Source and Category as the Include By term will display posts related to the category assigned to the current post being displayed. So if the user is viewing a post in the Travel category, for example, the page will show Related posts which are also in the Travel category. If the post currently displayed has multiple categories assigned to it, the Related posts will pull posts from the FIRST category (alphabetically) assigned to the post.

Exclude

Exclude By: Current Post, Manual Selection, Term, then use Search and Select for Manual, or Term choicesOrder By: Set the order in which the posts will be displayed. Options include: Title, Price, Popularity, Rating, Random, and Menu Order.Order: DESC (descending) or ASC (ascending)

Style

Products

Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the products data to the left, right, or center

Image

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data

Title

Color: Choose the product Title colorTypography: Set the typography options for the Title textSpacing: Adjust the amount of space after the Title

Rating

Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars

Price

Color: Choose the color of the product PriceTypography: Set the typography options for the product Price

Regular price

Color: Choose the color of the product』s Regular PriceTypography: Set the typography options for the product』s Regular Price

Button

Normal | Hover

The following options can be set independently for both the normal and hover states.

Text Color: Choose the color of the product』s Button TextBackground Color: Choose the background color of the product』s ButtonBorder Color: Choose the border color of the product』s Button

Typography: Set the typography options for the product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons

View Cart

Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text

Box

Border Width: Control the thickness of the border around the product』s boxBorder Radius: Control corner roundness of the products boxPadding: Change the padding within the products box

Normal | Hover

The following options can be set independently for both the normal and hover states.

Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the products boxBorder Color: Choose the border color of the products box

Sale Flash

Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the products boxDistance: Set the distance of the Sale Flash from the top of the products box

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

How To Create A Subscribe Form Popup

How To Create A Subscribe Form Popup

Create a subscribe form popup, that will pop up after a visitor has viewed three pages.

You』ll learn how to:

Launch the popup after a user visits a certain number of pagesOnly show the form onceAutomatically close the popup when the user submits the form

Design The Popup And Its Content

Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ve designed our own, but any of our subscribe form templates will work just as well.

Tip: While in the Popup Template library, type subscribe in the Search field to filter and view only the subscribe form templates. As you can see below, we have many styles to choose from.

Set Form To Close Once Submit Button Is Clicked

Form > Content

Actions After Submit: Choose Popup, which will create a new tab called Popup.

Popup > Action: Choose Close Popup and slide Don』t Show Again slider to Yes

Publish The Popup

Click the Publish button to set the Conditions, Triggers, and Advanced Rules.

Conditions

Click on Add Condition and choose Entire Site. Now click Next.

Triggers

On Page Load: Set to Yes and type in 2 (seconds), then click Next.

Advanced Rules

Show After X Page Views: Set to Yes and type in 3, then click Save and Close.

All done. Go to your site, visit 3 pages, wait a couple of seconds, and see your popup in action.

FAQ: Running Both Elementor Free and Elementor Pro Plugins

FAQ: Running Both Elementor Free and Elementor Pro Plugins

Q: If I purchase Elementor Pro, should I delete the Free plugin after I install the Pro plugin?

A: You should not delete the Free plugin. Elementor Pro is an addon to the Free version. The Elementor Pro plugin cannot function without the Free plugin.

Q: I had a problem, and support advised me to deactivate or delete the Elementor plugin(s) and reactivate or reinstall them. Will that destroy all the hard work I did?

A: The work you did with Elementor will not be deleted when the plugin is deleted. When you reactivate or reinstall the Elementor plugin, all your designs will still be available just as they were before you deleted the plugin. Of course, we do recommend always having a recent backup of your site, in case anything ever goes wrong. This is best practice for any situation.

Q: What happens if I delete the Pro version but keep the Free version? Will my site lose any of the advanced designs I made using Pro features?

A: If you deactivate or delete Elementor Pro, your site will be unable to display the advanced designs you created with Elementor Pro. Any designs created with the standard free version of Elementor will still work. If you reactivate or reinstall Elementor Pro, however, your designs created with Pro will show up once again.

Note: There is a difference between deactivating the plugin and deactivating the license. As mentioned, deactivating the plugin will mean your site will no longer display the designs you created with the Pro plugin. So what happens if you deactivate or fail to renew just the Pro license, but keep the Pro plugin activated? See the next question for the answer.

Q: What happens if I don』t renew my license after one year? Will Elementor Pro still work?

Your existing project will remain intact, as is, for now, but you will no longer receive support, updates and access to premium templates which require renewal. 

Note: Keep in mind, however, that your project will remain intact, as is, only as long as the versions of plugins stay the same. Naturally, if you update the free version of Elementor on an ongoing basis, but are no longer updating the Pro version, eventually the two versions may become incompatible with one another. You may also eventually see conflicts if you update other plugins or WordPress core, but don』t also keep up to date with updating Elementor Pro.