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 Berry Blend 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.
Add your logo and favicon
To add your own logo and favicon, go on 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 on the left-top corner on your WordPress dashboard. Now, on the topbar 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. Since this is a one-page website, you’ll find only one page. Hover over the page and click on Edit with Elementor. Once done, click in the left-top corner on 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 pages
In order to edit titles and images on the page, go to Pages → All Pages. Hover over the page 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.
Change order elements
Maybe you would like to change the order of the elements on the page. For example, you would like to start with About 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.
Now that you’ve changed the order of the page, don’t forget to also change the order of the menu. On your WordPress dashboard, go to Appearance → Menus. Grab the section you just re-ordered on the page and drag it to the right position. Then Save Menu.
Delete or add elements
To delete an element, you simply click on the X next to the six dots ↑. Make sure you also delete this item from the menu ↑, since this is a one-page template.
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.
Change background images
Sometimes, an image is added as a background image. This can also be an overlay background image. To change this image, go to the editable page and then to the element that contains an image. Click on the six dots in the element. Then go to Style → Background or Style → Background Overlay. Click on the images and choose a new image by Upload files, or select one from the Media Library.
Note: Make sure the images you upload are optimized for the web, so they won’t be too large and make your website slow.
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.
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 you 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.
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.