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.

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

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.

Post Excerpt Widget

Post Excerpt Widget

The Post Excerpt 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 excerpt.

Content

Post Excerpt is the only option.

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

Style

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

Read the tutorial showing how to Create a Single Post Template

Zapier & Elementor Integration

Zapier & Elementor Integration

Zapier is an automation service similar to IFTTT (IF This Then That). Zapier regularly checks for a trigger on the apps you』ve chosen, if the trigger occurred Zapier will perform an action or even multiple actions.

What does Zapier have to do with Elementor?

One of the most powerful features of Elementor is its Form widget. With this widget, you can create forms and start collecting leads on your site. This is a crucial step for any growing business.

The collected leads can be automatically adding to email marketing automation and CRM services that have already been integrated to Elementor. These include MailChimp, MailPoet, ActiveCampaign, Campaign Monitor, GetResponse, Drip, and Hubspot.

You can also set the forms to integrate with Zapier, thus connecting them to the over 1000+ services that are hooked to Zapier.

The process of connecting Elementor forms to Zapier is a bit longer than the usual integrations. It includes creating a trigger in Zapier from Elementor. Once an Elementor form is sent the Zapier trigger is fired. After this, the action or actions are made, causing the form submission to enter the integrated service.

This two-step process of creating the trigger and action is all done with Zapier, and in the following steps, you will learn just how to set this up.

Creating the Elementor trigger inside Zapier

Your first step is to create a 『Zap』 in Zapier. A Zap is a blueprint for a task you want to do over and over. In words, a Zap looks like this: 「When I get a new thing in A, do this other thing in B.」

Inside Zapier

1. Click on 『Make a Zap』

2. Choose app – On the left, you will see all the steps needed to complete the Zap. Choose 『Webhooks』 under 『Built in apps』

3. Choose trigger – On the 『Select webhooks by Zapier trigger』 screen, choose 『Catch hook』 and press 『Save + Continue』

4. Set up options – In the 『Set up Webhooks by Zapier Hook』, no additional actions are needed (choose 『Continue』)

5. Test this step – Copy the Zapier webhook to your clipboard

Inside Your Own Website

1. Go to your website, and inside Elementor, edit the form you want to get integrated to Zapier. Under Actions after submit, add Webhook.

2. Open the Webhook toggle, and enter the hook you copied from Zapier

3. Save the page, and go to the live version of the page. Now, submit the form. This sends the Webhook to Zapier, to confirm the hook we created.

4. Back in Zapier, click continue. You should get a 『Test successful』 notice.

Create the Action That Zapier Performs

In this part, we create the action that follows our trigger. As a reminder, the trigger is the Elementor form submission.

Let』s choose one of the 1,000+ apps to show how to add the action to Zapier. I』ll go ahead and choose MailerLite.

Inside Zapier

1. MailerLite – In the search bar, enter MailerLite

2. Create / update subscriber – Choose 『Create / update subscriber』 and click 『Continue』

Inside MailerLite

1. Go to MailerLite website – Let』s get the API from MailerLite by going to your profile image > Integrations > Developer API and click 『Use』

2. Copy the API key

Back in Zapier

1. Back in Zapier, let』s connect our account

2. Paste our API key

3. Continue to the next step

4. Edit template – Match the subscriber group and list fields

5. Test this step – Run a test to MailerLite

6. Test this step – Get the approval for the test

7. Rename step – Switch your Zap on and name it

DONE!

Now go to the Elementor page on your website, send a test form submission, and go to MailerLite to make sure that the new submission was added correctly.

Create a Complete Website Using Elementor Kits and Theme Builder

Create a Complete Website Using Elementor Kits and Theme Builder

The Goal: Create a full website which uses an Elementor Digital Agency Template Kit and the Hello Theme

The website will have the following page structure:

Home About UsServicesSocial MediaClientsArchive with Single PostsContact UsHeader and Footer404 page

STEP ONE: Choose A Theme

Go to Appearance > ThemesClick Add NewSearch for Hello ElementorClick InstallClick Activate

STEP TWO: Create Pages

Go to Pages > All PagesHover over the Sample Page title and click the Trash link to delete the Sample Page that comes with the default WordPress installationClick Add NewGive the new page a name – in this case, 「Home」Click the Edit with Elementor buttonClick the Page Settings cog in the lower left corner of the Widgets PanelChange the Page Layout to 「Elementor Full Width」. Notice that the header is incomplete. You will work on this in a later step.Click the Add Template folder icon to open the Template Library.From the Template Library』s search box, search for 「Digital Agency Home」.Click Insert to load the template into the page.Click the Publish button.Click 「Have a Look」 to view the published page.

Repeat these steps for each new page, being sure to add About, Services, Social Media, Clients, and Contact Us pages. 

Tip: Create new pages by pressing CMD-E on a Mac or CTRL-E on Windows to open Finder, then type 「Add」 and choose 「New Page」 from the search results. This way you can continue to create new pages right from Elementor』s Editor, without having to return to the dashboard.

Note: Notice that you haven』t yet created the News Page yet. This is because it isn』t a static page like the others. It is an Archive Page with Dynamic Content, and you』ll create this page soon.

STEP THREE: Tell WordPress Which Page To Use As The Home Page

From the WordPress dashboard, go to Settings > Reading and change the option 「Your homepage displays:」 to 「A static page」, and then select the Home page you created in the steps above from the Homepage dropdown list.Click the Save Changes button.Go to Pages > All Pages and verify that the Home page you created now says 「Front Page」 next to it.

STEP FOUR: Insert A Header Using Elementor』s Theme Builder

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Header」 from the Template Type dropdownGive your template a name, such as Site HeaderWhen the library opens the header templates, search for 「Digital Agency」Hover over the Digital Agency header and click the Insert link.

Note: Since this is a new site, we haven』t created a menu yet. This is why you will see an empty menu widget in the header template you just inserted. We』ll create our WordPress menu next.

STEP FIVE: Create The Menu

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Menus」 to quickly navigate to the WordPress menus section.Under Menu Structure, type a name for your menu, such as 「Main Menu」Click the Create Menu buttonUnder Add Menu Items > Pages, place checkmarks next to each of the pages you created, and click the Add to Menu button.Reorder them as desired by dragging them up or down. Nest any items as child pages under parent pages by dragging the child slightly to the right, and just under a parent page. Do this for Social Media, by dragging it just under Services, and slightly to the right.Click the Save Menu button.Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」 to edit your header with ElementorClick Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button.Notice that the menu is now displayed in the Header.

STEP SIX: Insert A Footer Using Elementor』s Theme Builder

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Footer」 from the Template Type dropdownGive your template a name, such as Site FooterWhen the library opens the footer templates, search for 「Digital Agency」Hover over the Digital Agency footer and click the Insert link.Notice that although you』ll see the header in the editor, only the footer will actually be editable here.Click the Publish button.Click the Add Condition buttonChoose Include > Entire Site as the condition and click the Save & Close button

STEP SEVEN: Create The News Archive Page Template

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Archive」 from the Template Type dropdownGive your template a name, such as News ArchiveWhen the library opens the archive templates, search for 「Digital Agency」Hover over the Digital Agency archive template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose Include > All Archives as the condition and click the Save & Close button

Note: Since this is a new site, we only have the default 「Hello World」 post. You』ll need to create new posts, in a category called 「News」 (for this example – use your own categories as needed), and set them to use this template. We』ll do that next.

STEP EIGHT: Create New Posts In A News Category

Go to Posts > All PostsHover over the Hello World title and click the Trash link to delete the Hello World post that comes with the default WordPress installationClick Add NewGive it a name and create your post as you normally would.Add a Featured Image and an excerpt if you』d like.Under Category, click Add New Category, and give it a name, such as NewsClick the Publish buttonRepeat steps 3 through 7 for each post you need to add to the News category.Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for 「News」 (or whatever you called your category). Click the category that appears in the search results to view the Category Page. Verify that your new posts are displayed nicely on the News Archive page.Click on the title of any post from the News Archive page.Notice that the styling is not ideal. This is because you need to create a Single Post Template, which you』ll do next.

STEP NINE: Create Single Post Template

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「Post」 from the Post Type dropdownGive your template a name, such as Single PostsWhen the library opens the single post templates, search for 「Digital Agency」Hover over the Digital Agency single post template and click the Insert link.Click the Publish buttonClick the Add Condition buttonChoose Include > in Category > News (or whatever the name of your category is) as the condition and click the Save & Close buttonClick Have a Look to see the post using the Single Post Template design.

STEP TEN: Add News Archive Page To The Menu

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for 「Menus」 to go back to your Menu to edit it.Under 「Add Menu Items > Categories」, place a checkmark next to the News category (or whichever category you created), and click Add to MenuDrag the new menu item to wherever you want.Click Save Menu

STEP ELEVEN: Create 404 Page

Press CMD-E (Mac) or CTRL-E (Windows) to open the Finder and search for and select 「Theme Builder」Click the Add New buttonSelect 「Single」 from the Template Type dropdownSelect 「404 Page」 from the Post Type dropdownGive your template a name, such as 404When the library opens the 404 templates, search for 「Digital Agency」Hover over the Digital Agency 404 template and click the Insert linkClick the Publish buttonClick the Add Condition buttonChoose Include > 404 Page as the condition and click the Save & Close buttonType the URL of a page that doesn』t exist on your site into your browser to see the new 404 page in action.

STEP TWELVE: Edit Content To Suit Your Needs

That』s it! You』ve created an entirely new website using Elementor』s Digital Agency theme kit. Now that you have a complete website structure, you are ready to edit the content on the pages to include all your own information.

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.

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.

Site Title Widget (Pro)

Site Title Widget (Pro)

The Site Title widget is a dynamic widget that displays the Site Title that was assigned in the WordPress Customizer. Although the site』s title can only be replaced or deleted in the WordPress Customizer, the Site Title widget gives you the ability to change some design aspects of the title.

Content

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

Style

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