Select Page

Webly Pro Elementor Documentation

Support

Any questions? Send an email to info@markhendriksen.com

Installing Webly Pro Child Theme

Requirements

You need to have a good understanding of WordPress and Elementor in order to work with this design.

When building the website I recommend not to use any caching plugins. When finished building the website you can install them.

The Elementor pro is not included in this package.

Important

All images have been replaced with image place holders.

The image place holders are loaded from my demo website and you need to replace them.

Step 1 Download package

Download and unzip the ‘Webly-Pro-Child-Theme-Elementor-UNPACKME.zip’ file to your computer.

Step 2 Install Elementor and Elementor Pro

Install and activate Elementor and Elementor Pro plugin.

Step 3 Install hello theme and Webly pro theme

Go to https://elementor.com/hello-theme/ and download the free Hello theme.

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the hello-elementor.2.2.1.zip file on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the Hello Theme as the active theme in your theme panel.

Install Webly pro child theme

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the webly-elementor-child theme.zip file in the Webly-Pro-Child-Theme-Elementor-UNPACKME folder on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see the Webly Pro Child Theme as the active theme in your theme panel.

Step 4 Elementor settings

Go to Elementor > Settings and go to the style tab

Content width: 1280

Space between widgets: 0

Step 5 import templates

Go to Tools > Import

Under WordPress click on Install Now

After the installation click on Run Importer

Click on choose file and Locate the webly-pro-templates.xml file in the Webly-Pro-Child-Theme-Elementor-UNPACKME folder on your computer.

Then click Upload file and import.

Check Download and import file attachments.

Click on the submit button.

Step 6 create the home page

Go to Pages > Add New

Give your page a name and publish it

Click on Edit with Elementor

Click on add template

Go to the My Templates tab

Here you will find all the templates click on Insert button for the template you want to use.

Import document settings click Yes

Setting up the fonts

Go to the upper left corner with the 3 bars

Click on default fonts and use these settings:

After this is done click on Apply and on the green update button.

Step 7 Create a menu and WordPress settings

Go to Appearance > Menus and create a menu and add your page(s) to it.

Check primary

Go to Settings > Reading. Check A static page
Set Homepage: to your home page
Leave the post page unset

Faq

I don’t see the header and footer?

If you don’t see the header and footer you can do the following:

Clear browser cache

Go to Templates > Theme Builder and go to the Header/footer tab.

Open the Webly pro header or Webly pro footer and click on the blue button Edit with Elementor.

Make a small change so the update button lights up and click on the update button.

There is a big image holder on the logo place.

You can change the logo in Appearance > Customize > Site Identity > Logo

I have used a logo with a height of 75px

Change logo

You can change the logo in Appearance > Customize > Site Identity > Logo

I have used a logo with a height of 75px

Edit single post page

Go to Templates > Theme Builder

And open the Single post template

Edit category page

Go to Templates > Theme Builder

And open the Category page

Edit archive page

Go to Templates > Theme Builder

And open the Archive page

Edit 404 page

Go to Templates > Theme Builder

And open the 404 page

Edit popup

Go to Templates > Popups

And the Webly pro popup

How to open the top section of each page

If you try to open the top section (1) the options disappear when you try to hover over them.

This happens because the top margin of this section is -60px. I did this because the menu is transparent and it looks nice if the image is under it.

To open the options open the navigator (2) and then click on the top section to highlight it (3) and now you can open the top section (1)