You don’t always need to have your own product to start a business. There are a bunch of affiliate programs on the internet you can join with Amazon Affiliate being the most popular one. You can even create an online store to run your affiliate business using WooCommerce. In addition to selling your own products, WooCommerce also allows you to sell affiliate products. This is great if you want to start — for instance — an online store business but don’t want to be bothered taking care of the product inventory.
How to Sell Affiliate Products with WooCommerce
You can use WooCommerce whether to sell tangible products or intangible products such as templates, plugins, graphics, and other digital product types. You just need to add your affiliate products just like when adding regular products. On your WordPress dashboard, go to Products -> Add New to add a new product (make sure you have installed and activated the WooCommerce plugin). Add required info such as product name, product description, product image, and so on.
On the Product data section, set the product type to External/Affiliate product and paste the affiliate URL or the product you want to sell on the Product URL field. Also set the button text, regular price, and sale price (if any).
Publish your product once you are done adding the required information.
Customize Your WooCommerse Site with Elementor
To make your WooCommerce site stand out, you can customize it with Elementor. The pro version of Elementor (read the differences between Elementor Free vs Elementor Pro) comes with a WooCommerce builder that allows you to customize every part of your WooCommerce part. From the single product page, product category page, archive product page, check out page, checkout page, and so on. No coding skill is required. You can create a custom part of your WooCommerce site using Elementor’s drag-and-drop visual interface.
We have just released a new free Elementor template kit. This time, the template kit is designed specifically for mobile apps. So, if you are a mobile app developer and are looking to create a WordPress-based site for the app you are developing, the template kit is a good fit. We use all native Elementor widgets to create this template kit so you don’t need to install an add-on.
The App 1 Elementor template kit is a one-page website template so you will only get a single page template, along with a header template and a footer template, respectively. You can see the demo of the template kit by clicking the button below.
As usual, you can download the ZIP file of the template kit via the form on the end section of this post. After extracting the ZIP file, you will get three JSON files. Simply import each JSON file to import the templates. Read this post to learn more about how to import a template in Elementor. One thing. We use a transparent header for the template kit (with a scrolling effect). So, when importing the header template, you might see all-white on the header section. You can use the Navigator feature to jump between widgets in the header.
We use the Icon List widget to display menu items. You can replace it with the Nav Menu widget if you want it. Just don’t forget to tailor the link on each menu item. You can read this post to learn more about a one-page navigation menu in Elementor.
With Elementor Pro, you can create a custom header on your WordPress site. In most cases, Elementor users add a navigation menu on the custom header they create. The problem is, the header often looks cluttered on the mobile device in some cases. The position of the mobile menu (the hamburger icon) and other elements on the header look asymmetric.
To make your header look tidier on the mobile device, you can set a custom position for the mobile menu and other elements on the header. How to do so?
How to Set Custom Position for Mobile Menu in Elementor
First off, edit your header template with Elementor and set the preview mode to Mobile.
Select one of the widgets on the header template (you can use Navigator to ease your job). In this example, we will fix the position of the Nav Menu widget (as you can see on the screenshot below).
With the Nav Menu widget selected, go to the Advanced tab on the left panel and open the Positioning block. Set the Width to Inline (auto) and Position to Absolute. You can then set the offset of the horizontal orientation and the vertical orientation. Set the offset until you get an appropriate position.
You can try different combinations of the horizontal offset and the vertical offset until you get an appropriate position. This is a bit challenging job and it takes a bit of patience to get the appropriate position. You can also go to the Content tab to try to enable/disable the Full Width option on the mobile Mobile Dropdown section.
Once you are done setting the position of the Nav Menu widget, you can repeat the step above on other widgets on the header. If you still not getting the position you want, try to set the Width to Custom and try different width values. Good luck!
Do you want to create a full-screen menu in Elementor? If yes, this article will show you how. It takes no add-on to create a full-screen menu in Elementor. All you need is Elementor Pro. The pro version of Elementor comes with a popup builder feature that allows you to create beautiful popups. You can make use of this feature to create a full-screen menu in Elementor.
How to create a full-screen menu in Elementor
Before getting started, make sure you have upgraded your Elementor to the pro version. Once you are ready, go to Templates -> Popups. Create a new popup template by clicking the Add New button.
Give your popup template a name and click the CREATE TEMPLATE button.
Elementor offers tens of premade popup templates you can choose from. In this example, we will create the template from scratch so simply close the template library to open the Elementor editor.
Before start creating the popup template, set the layout first. To do so, open the popup settings by clicking the gear icon on the bottom-left corner. On the Layout block under the Settings tab, set the width to 100 VW and height to Fit To Screen. You can also set the entrance as well as exit animation effects.
Once done setting the layout, start creating the template by adding a new section. You can add any element you want to the template. To add the menu items, you can use the Nav Menu widget or Icon List widget. In this example, we use the Icon List widget.
Edit each list item. You can add the label of the menu item on the Text field and add the link on the Link field.
Go to the Style tab to style up the lists. You can set the space between list items and the alignment on the List block. To set the icon size and color (if you use icons), you can open the Icon block. To set the typography (font size, font family, font style) and the text color of the list items, you can open the Text block.
If you want, you can change the background of the section. To customize the close button of the popup, open the popup settings once again and go to the Style tab. Open the Close Button block and you will see some options to customize the close button such as the background color, size, and position.
Once you are done creating the popup templates, click the arrow icon next to the PUBLISH button and select Display Conditions.
Set where you want the popup to appear by clicking the ADD CONDITION button and click the NEXT button to set the trigger.
Enable the On Click option and click SAVE & CLOSE.
Calling the popup template
Once the popup template is ready, you can call it. Since you want to create a full-screen menu, you can create a header with Elementor or edit an existing one. Read this post to learn more about how to create a custom header with Elementor.
You can call the popup template you have just created with any Elementor widget that has an option to add a link such as Button, Icon, Icox Box, Text, Image, and so on. In this example, we use the Icon Box widget. Select the widget to turn into an editing mode. Under the Content tab on the left panel, seek for the field to add the link. Set the link to dynamic and select Popup.
Select the popup template you have just created by clicking the wrench icon.
There are some websites that consist only of one page (the homepage). Even when you click an item on the navigation menu, you will be taken to another section on the same page instead of another page. The purpose of this sort of website is to make visitors get focused on your content. In addition to the content, another key component of a one-page website is the navigation menu. In Elementor, creating a one-page navigation menu is really easy to do. This post will show you how.
To give you an overview, here is the example of a one-page navigation menu.
As mentioned, it’s not a hard job to create one-page navigation like the one above in Elementor. While there are some add-ons such as Essential Addons and PowerPack that come with a widget to create one-page navigation, you can also create one without installing an add-on. The main idea is to point a menu item to a certain section of the page. To do so, you can add a CSS ID to a section you want to point to.
Let’s take an example.
Say you have a menu item called “Features” and you want your visitors to be directed to the Features section within your one-page website every time they click the “Features” menu item. First off, edit the page with Elementor and select the Features section (use Navigator to ease your job).
With the Features section selected, go to the Advanced tab on the left panel and open the Advanced block. Type the CSS ID of the section on the CSS ID field.
Repeat the steps above on other sections you want to point to with menu items.
Calling the CSS IDs
You can use any Elementor widget that has an option to add a link to call each CSS ID you have added to the sections. Simply paste the CSS ID to the link field. Add the “#” as the prefix.
If you want to use the Nav Menu widget, you can edit the menu you use. On the URL field of each menu item, type the CSS ID with the “#” as the prefix.
Want to add image accordion to an Elementor page? That’s great as image accordion allows you to display images in a more creative way. Unfortunately, Elementor has no default widget that allows you to add an image accordion element to a page or template. If you really want to add an image accordion, you can install an add-on that comes with an image accordion widget. One of the add-ons you can install is JetTabs.
Before getting started, make sure you have installed and activated the JetTabs add-on. You can get this add-on for only $23 per year. Alternatively, you can also get JetTabs with a one-time purchase option via the theme bundle of Jupiter X or Monstroid2.
Once you are ready, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor. Of course, you can also edit an existing page or post. On the Elementor editor, drag the Image Accordion widget from the widget panel to the canvas area.
Once the Image Accordion widget is added, go to the left panel to customize it. By default, the accordion consists of three items. To add an image to each item, simply open an item under the Items block and click the image selector. You can also set the title of the item, description as well as button link.
Repeat the steps above on the other items. To add a new item to the accordion, you can simply click the ADD ITEM button.
Open the Settings block under the Content tab to set the orientation (vertical or horizontal), the size of the active item, animation duration, and the easing effect style.
Styling up the accordion
To style up your accordion, you can go to the Style tab on the left panel. There are 7 blocks you can open the style up the accordion. On the first block (Container block) you can set the height of the accordion, background color, border radius, and bock shadow.
On the Item block, you can set the gap between items, background color of the item, border radius of the item, and box shadow of the item.
You can play around with 5 other blocks to make other styling options. Once you are done, click the PUBLISH/UPDATE button to publish/update your page.
Do you have an Italian restaurant business? If yes, creating a website would a great idea to reach more potential customers. You can create a website yourself with Elementor using the template kit we created. The template kit is designed specifically for Italian Restaurants but you can also use for other types of restaurants by tailoring the default content. The Italian Restaurant template kit consists of 8 main templates and 3 extra templates.
The main templates:
The 3 additional widgets (section widgets) are used to add the content on the vertical tab element on the homepage. You can see the demo of the Italian Restaurant template kit by clicking the following button.
To use the template kit, you can download the ZIP file we provide via the form on the end section of this article. Unzip the ZIP file to get the template files. You will get 11 template files in total (in a JSON format). Simply import the JSON files one by one. Elementor also allows you to import multiple templates at once by simply uploading the ZIP file. Visit this post to learn more about how to import an Elementor file.
Setting the vertical tab element
On the homepage of the Italian Restaurant template kit, you will see a vertical tab element. We use JetTabs to add this element. You can find the widget of the element — the Tabs widget — on the third section of the homepage template.
You need to set this widget to display the content from the template. To do so, make sure you have imported the templates of the content of the tabs. You can find the templates under the tabs folder under the main Italian Restaurant template kit folder.
With the Tabs widget selected, go to the left panel. Under the Content tab, open the Items block. Open one of the tab items and set the content type to Template and select a section template you have imported.
We use a popup to create a full-screen menu on the template kit. To use the menu, make sure you have imported both the popup template and the header template. We use the Icon Box widget to display the popup. Make sure that the popup template is set to the popup template of the Italian Restaurant template kit. You can edit the header template to do so.
We have just created a new Elementor template kit designed for shared workspaces. You can see its demo here and download the template kit here. We use a transparent header for the template kit. The transparent header will turn into a solid color as you scroll down your mouse.
In this article, we will show you how to create the header style the like one above. You need to use the pro version of Elementor to create a header like the one above as you need to add a custom CSS.
The main idea of creating an Elementor page with a transparent header is technically pretty simple. You just need to make the top section of your page to overlap the header. To do so, you can set the top margin to a negative value, i.e. -90. Follow the steps below to create an Elementor page with a transparent header.
Step 1: Create the page
First, create a new page (Pages -> Add New) and edit it with Elementor. Or you can also edit an existing page. Before you start editing the page, set the page layout first. Click the gear icon on the bottom-left corner on the left panel. Set the page layout from the dropdown menu on the Page Layout option. Select Elementor Full Width. Make sure to not select Elementor Canvas as this option will disable the header and footer.
Add a new section by clicking the plus button on the canvas area. Once the section is added, go to the Advanced tab. On the Advanced block, click the chain icon to unlink the margin setting and set the top margin to about -90. You can tailor the top margin value until it fully overlaps the header.
Continue your work. Once you are done, publish/update the page.
Step 2: Create the header
On your WordPress dashboard, Go to Templates -> Theme Builder. Click the Header tab and followed by the Add New button to create a new header template.
Give your header template a name and click the CREATE TEMPLATE button to start creating the template. You will be taken to the Elementor editor.
Elementor offers several premade header templates you can choose from. Simply select a header template you like and click the INSERT button to use it. If you want to create the header from scratch, you can simply close the template library. In this example, we use one of the premade templates offered by Elementor.
Edit the section of your header. On the left panel, go to the Style tab and set the background color on the Background block. Set the background opacity all the way down.
Go to the Advanced tab and open the Motion Effects block. Set the Sticky Option to Top. On the Effects Offset option, set to 200. This is the value (in pixels) for the sticky effect to appear after mouse scrolling. You can use a different value to your liking.
Still on the Advanced tab, open the Custom CSS block and paste the following code.
To change the color of the background, you can replace the hex code on the background-color line.
Once you are done editing the header, click the arrow button next to the PUBLISH/UPDATE button and select Display Conditions.
On the appearing dialog, set where you want to apply the header. If you want to apply the header to the entire website, simply click the ADD CONDITION button followed by SAVE & CLOSE. To apply the header to a specific page (i.e the page you created on step 1 above), click the ADD CONDITION button and select your preferred page. Click the SAVE & CLOSE button to close the dialog.
That’s it. You have successfully created your transparent header with Elementor.
Shared workspace is a crucial enough component of the startup ecosystem. It is an ideal place for startups and freelancers to work. In the urban areas in many countries, the existence of a shared workspace or coworking space is something common.
In case you have a shared workspace business and want to create a new website for it or want to redesign your existing website, we have just created an Elementor template kit designed specifically for shared workspaces which you can download for free!. This template kit consists of 8 templates:
You can download the ZIP file of the template kit on the form we provided on the end section of this article. After downloading the ZIP file, extract it and you should get a new folder consisting of 8 JSON files. You can import each JSON file to import each template. Read this article to learn more about how to import an Elementor template. Elementor also allows you to import multiple templates at once via a ZIP file in case you want to import all templates at once.
We use JetTabs add-on to add the image accordion element to the homepage and the about page. If you already have an Elementor add-on that has a widget to add image accordion, you can replace the image accordion element on the homepage and the about page yourself using your add-on.
Another plugin you need to install is Yoast. You need to install Yoast in order to make the breadcrumbs element to appear on some pages on the template kit. If you don’t need the breadcrumbs element, you can ignore installing Yoast.
In August 2019, Elementor introduced its first edition of template kit. The purpose of a template is to streamline your workflow in creating a website with Elementor. An Elementor template kit is a set of templates designed specifically for a website type. Typically, a template kit consists of a homepage template, about page template, contact page template, header template, footer template, 404 page, and other templates according to the website type the template kit is designed for.
We want to join the party by releasing our first edition of template kit. In this first edition, we release a template kit designed specifically for copywriters, but you can also use it on any type of website, including a personal blog. To make it easy for the identifying, we will call this first template edition “Copywriter Template Kit”. Our Copywriter Template Kit consists of the following templates:
You can view the demo by clicking the button below.
We provide a ZIP file for this template kit. After extracting the ZIP file, you will find 9 template files in a JSON format. You can simply import each JSON files one by one or import all templates at once by uploading the ZIP file. Visit this post to learn more about how to import an Elementor template.
We use JetElements to add a vertical timeline element on the homepage and the about page respectively since Elementor has no widget to add a vertical timeline element.
The Copywriter Template Kit uses a full-screen menu. We use Elementor’s popup builder to create this menu. If this menu doesn’t work, make sure to point the menu button to the Copywriter Template Kit’s popup template. By the way, we use the Icon widget for the menu button.
You download the Copywriter Template Kit from the form below. Before downloading the template kit, make sure you use Elementor Pro.
Many WordPress users love to use Elementor because it has a very intuitive visual editor, making web creation getting way more enjoyable. If you use the pro version, you can add a beautiful form to the page or template you area creating since the pro version comes with a Form widget. What if you use the free version of Elementor? You can also create a beautiful form with the free version of Elementor, but you need to install an extra plugin. One of the plugins you can use is Caldera Forms.
Caldera Forms is a popular enough form builder plugin for WordPress. You can use it to create any type of form. From a very simple contact form to a complex application form. There are two ways to add the forms you created with Caldera Forms to an Elementor page or template.
How to add a Caldera Forms form in Elementor
Before adding a Caldera Forms form to an Elementor page or template, make sure that you have created the form you want to add. Once the form is ready, you can use one of the following ways to add it to your Elementor page or template.
1. Adding a Caldera Forms form in Elementor using the Shortcode widget
Elementor has a Shortcode widget that allows you to integrate all WordPress plugins that use shortcode, including Caldera Forms. To add a Caldera Forms form to Elementor using this widget, first, go to Caldera Forms -> Forms. Select a form you want to add and click it to get its shortcode. Copy the shortcode.
Create a new page or post and edit it with Elementor (you can also edit an existing page, of course). On the Elementor editor, add the Shortcode widget to the canvas area. Paste the form shortcode you have just copied to the Shortcode field on the left panel.
2. Adding a Caldera Forms form in Elementor using an add-on
When adding a Caldera Forms form using the Shortcode widget, you have no option to customize the form. If you want to customize your form to make it match the color scheme of your page or template, you can use an add-on. Essential Addons and Happy Addons are two of Elementor add-ons that have a widget to add a Caldera Forms form. In this example, we will show you to add a Caldera Forms form in Elementor using Happy Addons.
Happy Addons itself is a freemium add-on. The widget to add a Caldera Forms form is available on the free version. You can download the free version of Happy Addons on the official plugin directory of WordPress. While for the pro version, you can download it from the Happy Addons website.
Once Happy Addons is installed and activated, create a new page or a new post and edit it with Elementor. Add the Caldera Forms widget to the canvas area and select the form you want to add via the dropdown menu on the Caldera Forms block under the Content tab.
To style up your form, you can go to the Style tab. To style up the form fields, you can open the Form Fields block. From this block, you can set the field spacing, border radius, typography (font size, font style, font family), field text color, placeholder color, and background color.
To style up the label of the form fields, you can open the Form Fields Label block. From this block, you can set the margin of the form fields label, the padding, label typography, description typography, label text color, required label color, and description text color.
To style up the submit button, you can open the Submit Button block. From this block, you can set the button width, margin, padding, the typography of the button text, border radius, text color, and background color (normal and hover).
Once you are done editing the page/template, you can click the PUBLISH/UPDATE button on the left panel to publish/update your page.
New to Elementor? In this post, we will show you how to use it. Just like the title suggests, this article is dedicated to beginners, those who completely new to Elementor. If you have been using Elementor for a quite while you can visit this page to find some intermediate to advanced Elementor tutorials.
We will assume that you have installed and activated Elementor on your WordPress site. If you haven’t done so, you can download Elementor from the official plugin directory of WordPress (the free version). Or, if you want to use the pro version, you can download it from the Elementor website.
How to use Elementor: Getting Started
Elementor is a page builder plugin that allows you to create a beautiful page on your WordPress site without having to deal with CSS or HTML. Elementor comes with a drag-and-drop visual editor. To create a page, you just need to add the design elements (called widgets) from the widget panel to the canvas area. Elementor works on both post and page.
Three elements you need to know before you start creating your first page with Elementor:
Widget: The actual design element you will use to create your page.
Column: A smaller container to place the widgets.
Section: The largest container to host columns and widgets.
To start using Elementor, simply create a page (Pages -> Add New) or a new post (Posts -> Add New). Give your page/post a title just like usual and click the Edit with Elementor button. This will open the Elementor editor.
Before you start to create the page, you can set the page layout first. To do so, click the gear icon on the bottom-left corner on the widget panel (panel on the left side). Set the page layout on the Page Layout option under the General Settings block.
You can select a layout according to the design concept you want to create. For instance, if you want to create a full-width page, you can select the Elementor Full Width option. Once done setting the page layout, add a new section by clicking the plus button on the canvas area. When adding a new section, you can select a column structure. There are twelve column structures offered by Elementor.
Once the section and columns are ready, you can start adding the widgets. There are over ninety widgets offered by Elementor which you can find on the widget panel. To add one, drag it from the widget panel to a column on the canvas area.
Editing a Section, Column, and Widget
After adding a section, column, or widget, you can edit it via the widget panel.
Editing a Section
To edit section, you need to turn the section you want to edit into an editing mode by clicking the section handle.
Once the section is turned into an editing mode, you can go to the widget panel to edit the section. There are three tabs you can work with (Layout, Style, and Advanced). Each tab consists of several blocks and each block contains several setting options.
Let’s take an example. Say you want to add a shape divider. To do so, go to the Style tab and open the Shape Divider block. Set the shape divider location (top or button) and select a shape divider you like. After selecting a shape divider, you can set the color, width, and height.
If you want to set the paddings and margins, you can open the Advanced block under the Advanced tab.
Editing a Column
Same as section, you need also to turn a column into an editing mode before being able to edit it. Click the column handle to turn a column into an editing mode.
There are also three tabs you can work with — Layout, Style, and Advanced. To set the column width, you can set the value on the Column Width option under the Layout block on the Layout tab. Or you can drag the separator on the canvas area.
To change the background color, you can Background block on the Style tab.
Editing a Widget
Turn a widget into an editing mode first before you start editing it. Click the widget handle to turn a widget into an editing mode.
The setting options available on a widget panel can be vary depending on the widget you edit. For instance, the Form widget has the following blocks on the Content tab.
While the Button widget has only a single block on the Content tab.
To style up a widget, you can go to the Style tab. Again, the blocks and styling options available on the Style tab are varied depending on the widget you are editing. The more components a widget has, the more blocks and styling options it offers.
Let’s take an example. Say you want to change the text color and the typography of the Button widget. Click the widget handle of the Button widget and go the Style tab on the widget panel. To change the typography (font size, font style, and family) click the pencil icon on the Typography option. While to set the text color, click the color selector on the Text Color option.
To make it easier to jump between sections, columns, and widgets, you can use the Navigator feature. From the Navigator, you can also turn a section, column or widget into an editing mode by simply clicking it. The Navigator feature is pretty handy if you are creating a complex page that consists of several sections and tens of widgets. You can enable Navigator by clicking the sandwich icon on the bottom side on the widget panel.
Once you are done editing the page, you can publish it by clicking the PUBLISH button on the bottom side on the widget panel. You can also preview your page first by clicking the eye icon.
Elementor allows you to preview your page in three different device types (desktop, tablet, and smartphone). You can select a device type you want to preview your page on by clicking the device icon next to the eye icon.
To save your page as a draft, click the arrow icon next to the PUBLISH button and select Save Draft.
To return to the WordPress dashboard, you can click the three-line icon on the top-left corner on the widget panel and click the EXIT TO DASHBOARD button.
Working with Templates
In addition to creating a page from scratch, you can also create a page from a template. Elementor offers a bunch of premade templates you can use. There are nine template types offered by Elementor:
Single product template
Product archive template
How to Use an Elementor Template
On the canvas area of Elementor, you will see two buttons: The plus button and a button with a folder icon in it. Click the button with the folder icon to open the template library of Elementor. Search a template you want to use. Once found it, hover your mouse the template and click the INSERT button. The template will be loaded to the Elementor canvas.
In addition to using templates offered by Elementor, you can also use a template from a third-party source. Elementor allows its users to export a template into an external file in a JSON format.
How to Import an Elementor Template from a JSON File
There are two ways to import an Elementor from a JSON file.
1. Via Template Library
Open the template library by clicking the folder icon on the canvas area. Once opens, click the arrow icon followed by the SELECT FILE button to select the JSON file you want to import.
You can find the template you have just imported on My Templates tab on the template library. Reload the template by clicking the reload icon if the template you have just imported doesn’t appear. Hover your mouse over a template and click the Insert button to load it the Elementor canvas
2. Via Template Manager
From the WordPress dashboard, go to Templates -> Saved Templates. Click the Import Templates button followed by Choose File button to select the JSON file and click the Import Now button to import it.
How to create an Elementor template
There are also two ways to create an Elementor template.
1. Via Template Editor
Once you are done creating a page, click the arrow icon next to the PUBLISH button on the bottom side on the widget panel and select Save as Template.
Give your template a name and click the SAVE button.
After clicking the SAVE button above, you will be directed to the My Templates tab on the template library. Click the three-dot icon on a template and select Export to export it into a JSON file.
2. Via Template Manager
On the WordPress dashboard, go to Templates -> Saved Templates. Click the Add New button on the top side to create a new template. On the appearing dialog window, select the template type you want to create, give your template a name and click the CREATE TEMPLATE button. You will be directed to the Elementor editor to create the template.
Once you are done creating the template, click the PUBLISH button on the bottom side on the widget panel. To access the template you have just created, you can go to Templates -> Saved Templates. Hover your mouse over a template and click the Export Template link to export it into a JSON file.
The Bottom Line
The tutorial above is the very basic use of Elementor. You can use Elementor other than merely creating a web page. You can also use Elementor to create a custom header, custom footer, custom single post template, custom single product page (if you use WooCommerce), and so on. You can even use Elementor to create popups. We have some separate articles you can refer to.