WordPress Template kit - Passion

User Guide

Install and Import

Edit it and make it your own

Install and Import

Hosting

If you don’t have a hosting provider yet, make sure you choose a reliable one. Because this template requires Elementor Pro, the best hosting provider in this case is Elementor WordPress Hosting. Within the Basic Plan ↗, you’ll get all you need:

Managed WordPress hosting
Elementor Pro builder
1-click WordPress installation
Hello theme
Premium support
SSL

Install WordPress

If you have a hosting provider already but don’t have a fresh WordPress installation yet, make sure you install one. Most hosting providers offer a one-click WordPress installation. Check this out before you start.

Get Elementor Pro

Before we move on, you’ll first need an Elementor Pro license. Go to Elementor Pro↗ and choose the Essential Plan. Buy your license. I’ll tell you how to install Elementor Pro ↓, but first there are some other steps to take.

Note: If you want to use the header effect within this theme, where the header disappears on scrolling down and appears on scrolling up, you’ll need the option Custom Code, which is included in the Advanced plan.

Install the Hello Elementor theme

Once you’ve installed WordPress, access your WordPress dashboard (yourdomein.com/wp-admin) and go to: Appearance → Themes → Add New Theme. Then choose the free theme Hello Elementor and click on Install and then click on Activate.

Install the Elementor plugin

Before you can install Elementor Pro, you’ll first need to install the free Elementor plugin. Once you’ve installed the Hello Elementor theme, on your dashboard you’ll see the message: Thanks for installing the Hello Theme! Now click on Install Elementor.

Note: If you don’t see this message, go to Plugins → Add New Plugin. Now search for Elementor. Then click on Install Now and when that’s done, click on Active.

Install the Elementor Pro plugin

Access your Elementor Pro dashboard and download the Elementor Pro plugin. You’ll find the download button on the right-top corner, next to your account name. Recognizable by this icon:

Once downloaded, go to your WordPress dashboard and navigate to Plugins → Add New Plugin → Upload Plugin, and pick the Elementor Pro .zip file you just downloaded. Then click Activate Plugin.

Note: Don’t unzip it before uploading.

Import the Passion template

Almost there. The last step is to import the template. On the WordPress dashboard, navigate to Elementor → Tools → Import / Export Kit → Start Import. Select the Elementor Kit and import the kit.

When you see the message Warning: JSON or ZIP files may be unsafe, click on Continue. It’s completely safe 🙂

Then click on Next and Import. Once that’s done, you’ll see the message First, enable unfiltered file uploads. This is necessary to import SVG files. So, you can click on Enable. Then, when finished, click Done in the right lower corner.

On the left top corner, hover over the home icon and click on Visit Site to check out your new website.

Note: When the images are missing, check the server settings. You can read more about it at Images are missing in the Template Library ↗.

Now, let’s move on editing the template to make it your own

Edit it and make it your own

Permalinks

WordPress uses several types of permalinks for the URLs on your website. To set the most friendly permalinks for SEO as well as for your visitors, go to Settings → Permalinks and choose Post name. Then click on Save changes.

Internal links

The page URLs are updated automatically, but the internal links and buttons on the pages aren’t. There are two ways to update those links.

1. For the easiest way, navigate on your dashboard to Elementor → Tools → Replace URL. On the first line, enter the old URL, in this case: https://passion.websitewordpressthemes.com. On the second line, enter your own URL: https://yourdomain.com. Then click on Replace URL. Now, all the internal links are modified.

2. The other way to update these links, go to Pages → All Pages. Choose the page you want to edit, hover over it and click on Edit with Elementor. Once you’ve reached the editable page, click on the button. On the left-hand side, add the page link. Just type the first letters of the page you want to link it to. It will appear automatically. Then click on it and Update the page. Make sure you will update all buttons on every page.

Note: the buttons that link to this template on Etsy can simply be removed. Or you could change the button text to something you wish for and update change the internal link like mentioned above.

Add your logo and favicon

To add your own logo and favicon, go to your WordPress dashboard to Appearance → Customize. Click on Site Identity.

Select logo and Select site icon and click on Publish.

Then visit your website by hovering over the home icon of the left-top corner on your WordPress dashboard. Now, on the top bar, hover over Edit with Elementor and click on header.

Click on Your Logo. On the left-hand side, on the Image field, click on Dynamic Tags and choose Site Logo. Make sure to update your page.

Change colors and fonts

With Elementor Pro, you can easily change fonts and colors at once. Choose the colors and fonts you like for your template. In order to do that, go to Pages → All Pages. Hover over a page, for example Home, and click on Edit with Elementor. Once done, click in the left-top corner of the menu bar, and click on Site Setting.

To change the used colors, click on Global Colors and make sure the Style Guide Preview is switched on. Click on a color you want to change, pick your color and click on Update in the left bottom corner. In this way, you can change all the colors. Also, you can add your own colors.

Note: To make sure the used color will change on the entire website, don’t change the color preset name. Only change the color itself.

Changing fonts works the same way as changing colors. Go to Site Settings and click on Global Fonts. Change the font family of each preset font.

For example, you would like to use another font for the plain text. Click on Text and choose your font. Also, you can change the size shown on desktop, laptop, tablet and mobile. Therefore, click on the device icon and navigate to the preset devices.

Once you’re finished, update the page.

Edit page

In order to edit titles, text and images on the page, go to Pages → All Pages. Hover over the page and click on Edit with Elementor.

Choose the page you want to edit, hover over it and click on Edit with Elementor.

Once you’ve reached the editable page, you can change titles, text and images by clicking on the element you want to change. Once you’re done, click on Update and your changes have been saved.

To check the changes you’ve made, click on the eye icon next to the Update button.

Have you changed something and want to undo the changes? In that area, you also find Actions and Revisions. You can easily undo the changes you’ve made by clicking on the previous action on the revision and then updating the page.

Note: Want to change the 404-page? Navigate on your WordPress dashboard to Templates → Saved Templates → All. Hover over the 404 template and click on Edit with Elementor. Now you can edit the page like explained.

Add page

To add a new page, go on your dashboard to Pages → Add New Page. Add a title and then on the left-top bar, click on Edit with Elementor.

Now, the easiest way to design a new page that fits the others and is responsive and mobile-friendly too, is to copy the content from one or more other pages and paste it into your new page. Therefor, open the page you want to copy the content from in another tab and click on Edit with Elementor, like mentioned here ↑. Scroll down until you reach the part where you can add a new section. Click on your right mouse button and Copy All Content.

Now, go to the page you just created, click in the new section area on your right mouse button and click on Paste.

Change the text and images, rearrange the section and on the left-bottom corner, click on Publish.

Delete page

If there are pages you won’t use, you can remove them. Go to your WordPress dashboard → Pages → All Pages.

Choose the page you want to remove. Hover over it and click on Quick Edit. Change the status to Draft and click on Update. Or delete the page by hovering over it and click on Trash.

Now, go to Appearance → Menus. Expand the page you deleted from the menu and click on Remove. Read more about the menu settings ↓.

Change order of elements

Maybe you would like to change the order of the elements on the page. For example, on the homepage you would like to start with Benefits instead of Services. Go to the editable page like mentioned here ↑.

Click and hold an element on the six dots and drag it up or down to the right order. Once it’s in its place, let go of the dots and click Update.

Delete or add elements

To delete an element, you simply click on the X next to the six dots ↑. To add an element, there are two ways to do this.

One: scroll all the way down and add a new section.

Two: copy an existing element by right-clicking the six dots and selecting Duplicate. Move it to the right position and place your own text and images.

Add background images

Maybe you’ll prefer an image to be used as a background image or an overlay background image. To add a background image, go to the editable page and then to the element that you want to a add a background image. Click on the six dots in the element. Then go to Style → Background or Style → Background Overlay. At background Type, Select the brush icon. Then select an image by Upload files or selecting one from the Media Library. Play with the settings below to position your image or choose the Display Size.

If you want to add an image as the background image of a nested container (a container within the container section), then select the small gray square in the top left-corner and follow the steps mentioned above.

Note: Make sure the images you upload are optimized for the web, so they won’t be too large and slow down your website.

Set up the contact form

This template comes with a pre-made contact form completely in style. Now, you have to connect your email address in order to receive emails. Therefore, on the editable page, click op the contact form. Then expand the Email tab. Fill in your email address, your subject, the From Email, the From Name en choose the Reply-To email address. Update the page.

Note: Connecting a contact form comes with some technical knowledge. Please contact your IT specialist to set this up properly. Read more about it ↗.

Note: Because you can expect a lot of spam in your inbox, the best thing you can do is implement reCAPTCHA ↗ from Google.

Once you get the reCAPTCHA keys, you connect them with your website. Go on your WordPress dashboard to Elementor → Setting → Integrations and paste your keys here. After that, go to your contact form on the editable page. Click on the contact form. On the left-hand side, click on Add Item. Choose Type → reCAPTCHA /reCAPTCHA v3 and Update the page.

Active blog page

On your WordPress dashboard, go to Setting → Reading and select the Posts Page from the drop-down, in this case Posts.

Set up post categories

This template has four predefined categories: nutrition, meditations, breathing and sleeping. The WordPress installation also comes with a default category: Uncategorized. Normally, this category can’t be deleted. Because this default category is in this case renamed to Meditations, you can delete the uncategorized one, if it’s present.

You can change the names of the predefined categories or add your own, rename the default one (in this case Meditations) and delete the ones you don’t use.

To change the text you’ll find at the top of a category page, for example Breathing, on your dasboard go to Posts → Categories → Breathing and click on Edit.

Change the Description and click on Update.

Change category images

On the home page, you’ll find images use as category images. To change them, select the first image widget and on the left, click on the image.

Click on Add to gallery, choose the image you want to use by selecting it from the Media Gallery or upload a new one. Then click on Add to gallery in the right bottom corner.

Delete the images you don’t want to use anymore. Write down the caption and click on Insert gallery. Then Update the page.

Activate posts search results

To be able to use the posts search results page, go on your dashboard to Templates → Saved Templates and select All. Search for the template Post category, hover over it and click on Edit with Elementor.

Click on the small arrow next to Update in the left bottom corner and click on Display Conditions

Select Add Condition. Choose Include → Search Results and click on Save & Close

Create a new post

For creating a post, navigate on your WordPress dashboard to Posts → Add New Post. Add a title, choose the Categorie and click on Publish. Then click on Edit with Elementor.

Drag a text element onto the page and type your text.

For adding a featured image, go to Settings by clicking the left most icon next to Update on the left-bottom corner. There, you can add your own featured image. When you’re done, click on Publish.

Note: You can delete the example posts and simply create your own ones.

Activate the Insta feed

to activate the Insta feed, on your dashboard go to Instagram Feed you’ll find on the left. Then click on Launch the Setup Wizard and follow the steps in order to connect you Instagram feed.

Modify the menu

This template comes with one menu. If you want to change this and add your own pages, go on your dashboard to Appearance → Menus.

Simply drag and drop tot reorder the pages in the menu. If the menu page is indented slightly to the right, it means it is a subpage. In the menu, it looks like this:

You can add pages by selecting them on the right side and clicking on Add to menu. Then drag it to the right position.

For adding a post category, select the one you want to add on the right and click on Add to menu. Then drag under to the posts page and make sure it is indented to the right to become a sub post page. If there are categories presented you don’t use, open the tab of the menu item by clicking on the small arrow and then click on Remove.

Note: Prevent putting too many pages in the menu. This is not clear for visitors and the pages may not fit next to each other on a narrower screen, such as a laptop.

Header appearance

This header comes with the functionality that it will disappear on scrolling down and appear on scrolling back up. If you want to disable this, go on your dashboard to Templates → Saved Template and select All. Hover over the header template and click on Edit with Elementor. Right-click on the gray code icon and click on Delete. Save your setting, click on Update. Now your header will be visible all the time.

If you don’t want your header to be visible all the time, select the six dots of the header section. On the right, go to the Advanced tab → Motion Effects → Sticky and select None. Save your settings.

Create menu anchor

To add menu items that scroll to a section on the page when clicked, a few steps are required.

First, you need to define a section by assigning an anchor to it. You do this as follows: When logged in, go to the page you want to add an anchor link, in this example the Home page, and click on Edit with Elementor. Scroll down and add a new container by clicking on the plus icon. Select your structure by choosing the most left-top one.

On the left, go to Elements, search for Menu Anchor and drag it into your new section.

Drag ↑ this section to the right position, above the section you want to link it to. Now, select the Menu Anchor widget and give it a simple name, like scroll-to which refers to the section below. Then Update the page.

Note: use a short, simple name for the Menu Anchor. If you use more than one word, make sure they are connected: scroll-to.

Copy the URL of the page you just add the Menu Anchor, in this case: https://passion.websitewordpressthemes.com.
On your dashboard, go to Appearance → Menus.
Go to the Custom Links tab on the left and in the URL field, paste the URL you just copied. Complete this link with # followed by the name you just filled in for the Menu Anchor: testimonials. In this case, it looks as follows: https://passion.websitewordpressthemes.com/#scroll-to. Fill in the Link Text – this is the text you will see in the menu – and click on Add to Menu.

Drag the custom link you just added to the menu to the right position, below the main page, in this case: Home. Shift the page slightly to the right to make it a sub-item.

Find out more

There is much more to discover with Elementor Pro, for example, adding sections with AI.

At least now you have your own website. You can expand it with cool features. Discover more on Elementor Pro ↗.

Have fun and enjoy your brand-new website.