WooCommerce Single: Product Rating (Pro)

WooCommerce Single: Product Rating (Pro)

Set the style and position of the Product Rating within the Single Product template

Style

Star Color: Choose the color of the filled starsEmpty Star Color: Choose the color of the empty starsLink Color: Choose the color of the link to customer reviewsTypography: Set the typography options for the customer reviews linkStar Size: Set the exact size of the starsSpace Between: Control the amount of space between the stars and the linkAlignment: Align the Product Rating widget to the left, right, center, or justified

Post Comments Widget

Post Comments Widget

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

Content

Comments

Skin: Select an available skin. Currently one skin is available, the Theme Comments skin. The Theme Comments skin uses the currently active theme comments design and layout to display the comment form and commentsSource: Select the source of the user comments, either those from the Current Post or Custom. If Custom is chosen, the following option becomes available: Search & Select: When you start typing a specific name of a post, you will get the autocomplete full name of the post, which you can then select. The comments from the selected post will be displayed.

Note: The Post Comments widget will only work if comments are allowed. This setting is controlled via WordPress Discussion settings.

Read the tutorial showing how to Create a Single Post Template

How to Create a Landing Page With Elementor

How to Create a Landing Page With Elementor

In this step-by-step tutorial, I』ll show you the easy process of building landing pages with Elementor, while creating a live example of a stylishly crafted landing page.

Note! Some features mentioned in this tutorial, like the Forms widget, are only available in Elementor Pro. If you still haven』t, we strongly recommend upgrading to Pro.

You will learn why professional designers choose Elementor as their preferred solution for building landing pages and complete websites.

What you need before you start

An active WordPress installationInstall ElementorInstall Elementor Pro

Setting Up Your Landing Page

First, in the WordPress dashboard, click Pages > Add NewClick Edit With Elementor

Go to the bottom left gear iconSwitch Page Layout to Elementor Canvas, in order to work on a blank landing page

Adding the Elements of Your Landing Page

1. Click on the folder icon to add a template

2. Click on the Blocks tab

3. Using the select dropdown, start adding the different blocks that will make up your landing page. A possible landing page structure you can follow is:

Header – For landing pages, we usually minimize the header. In this example, we will only show the site logo, centered to the middle.

Hero – This is, without a doubt, the most important part of your landing page. It is sometimes called the 『Above the Fold』 section, as it is the first thing your visitor sees before scrolling the page. For this reason, we will place the most important elements here. Title, sub-title and subscribe form.

Services – Here, we go into more details, depicting the main services or features our business provides.

Testimonial – The testimonial section shows social proof that your current clientele are satisfied with the service they received from you.

Portfolio – Show the visitor examples of your work, so they know if you match what they are looking for.

Footer – Because your visitors have already scrolled down the page, you want to offer them another call to action, to encourage them to do what you want them to do.

Closing the page, we end with the footer, which usually includes your Privacy Policy and Terms of Use.

Customizing Each Block – Challenge Yourself!

Go over each block and make the changes needed to make it personal.

Here are some example changes:

Change title content – Try to change the text to fit your own business descriptionChange images – Try to change the images in the Portfolio section for your ownChange colors – Choose 3 colors you want to work with and apply them across the pageChange backgrounds – Change the background image in the hero section for your own

Customizing it For Mobile

All blocks come pre-designed as 100% mobile responsive. Even so, you can switch to mobile view and start customizing margins, paddings and other settings for mobile and tablet devices.

See this tutorial to learn how.

Previewing Result & Publishing Your Landing Page

Before you hit publish, a good rule of thumb is to preview the result and make sure everything looks in order.

To do so, click on the eye icon at the bottom left panel.

Then, publish the article. You will notice that the green publish button changes to grey Update.

WooCommerce Pages (Pro)

WooCommerce Pages (Pro)

Display a WooCommerce Page (Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page) anywhere on your site.

Content

Element

Page: Select a WooCommerce page to display, choosing from Cart Page, Single Product Page, Checkout Page, Order Tracking Form, or My Account Page. If 「Single Product Page」 is selected, an additional field becomes available to allow you to search and select a particular page to display.

Elementor Integration With PODS

Elementor Integration With PODS

Why use Elementor with PODS

PODS brings limitless possibilities for adding extra data to WordPress content by creating custom fields. Elementor allows you to dynamically insert the PODS custom field data directly into your Elementor designs with all the styling options you』ve come to expect from Elementor.

Note: 「Enable Archive Page」 should be checked in the Pods custom post type settings as shown below.

How To Add PODS Custom Fields To A Single Post Template

Go to Templates > Theme Builder > Single > Add NewChoose Template Type > Single. Name your template and click Create TemplateClick on the Document Settings gear icon located at the bottom left of the panelClick the Preview Settings tabUnder Preview Dynamic Content select the post type you wish to previewDrag a widget that makes use of dynamic content (e.g. Text widget)Click on the Dynamic icon Choose PODS FieldOnce selected, click again on PODS FieldIn Settings > Key, select the custom field you want to displayThe options in the Advanced tab are optional. Options include:Before: Text to automatically appear before the custom field dataFallback: Text to display if custom field has no dataAfter: Text to automatically appear after the custom field dataStyle the custom field widget as you would normally, using the widget』s Style tab.

Custom PODS fields we support:

Note: Any PODS fields not included in this list are not supported at this time

Text:

『text』, 『phone』, 『paragraph』, 『relationship (select)』, 『pick』, 』email』,』oembed』, 『google_address』, 『wysiwyg』

date:

『datetime』, 『date』

URL:

email』, 『file』, 『website』, 『phone』

Image: file:type-images

Image: File:type-images:multiple:true

Example of use

Pet Rescue Listings

A pet rescue website needs to list all pets available for adoption. Custom fields such as Breed, Age, and Size might be needed to accurately describe each animal. PODS makes it easy to create the custom fields, while Elementor brings the magic needed to beautifully display the data on the front end.

What Makes Elementor Pro Better Than the Other Page Builders?

What Makes Elementor Pro Better Than the Other Page Builders?

Speed, intuitive UI, advanced design option, full control over your website.  In fact, Elementor isn』t merely a page builder any longer. Elementor is a website builder.

We have put all our efforts, trying to excel in these fields. 

The result is the best website builder choice for designers, developers and newbies alike.

Changelog of Elementor

Changelog of Elementor

You can check the changelog of Elementor in the WordPress repository:https://wordpress.org/plugins/elementor/#developers

You can check the changelog of Elementor Pro: https://elementor.com/pro/changelog/

Form Messages Style

Form Messages Style

You can style the messages shown to the user after a form is submitted.

Typography: Set the typography of the message text.Success Message Color: Choose the color of the success messageError Message Color: Choose the color of the error message.Inline Message Color: Choose the color of the inline message.

More Form Options

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

CONTENT

Form FieldsSubmit ButtonActions after submitAdditional Options

STYLE

FormFieldButtonMessages