Thank you for purchasing the theme! If you have any questions that goes beyond the scope of the theme documentation, feel free to contact support.
1. Install the theme
1.1. Upload the theme
Please make sure you have downloaded the "Installable Files only" from ThemeForest.
- Admin Dashboard
- Go to Appearance -> Themes
- Click on Add New, then on Upload
- Upload the
thelandscaper.zipwhich you downloaded from Themeforest
- Click the Install Now button
- FTP Client
- Unzip the file you've downloaded from ThemeForest and upload the folder name
/wp-content/themes/on your server by using a FTP client.
After uploading the theme, hover the thumbnail image and click 'Activate'.
1.2 Install Plugins
- Go to Appearance -> Install Plugins
- Check all checkboxes, click the select field at the top and select Install click on the Apply button
- Check all checkboxes again, click the select field and click Activate then click Apply again.
- Go back to the dashboard
- The WooCommerce install wizard will popup. Choose to Skip it or configure the settings.
1.3. Import Demo ContentPlease install and activate all required plugins before you import the demo content !
- Go to Appearance > Install Demo Data
- Click the blue Import button, and Wait till you see the finished notice.
1.4. Import Essential Grids
The Essential Grid from our theme demo need to be imported seperately. You can find the skin file inside the installable theme folder. Click the demo-files folder, there you will find the "ess_grid.json" file.
The path to locate the file is:
- Go to Ess. Grid -> Import/Export
- Click the Import panel
- Upload the ess_grid.json file
- Click on the small Read File (see screenshot below)
- The file will load then click on Import Selected Data
The theme is fully installed and configured and ready to be edited. Enjoy the theme!
You can change the logo and favicon through Appearance -> Customize -> Theme Options -> Logo
Please do not add the default logo to the retina option. Leave it empty if you don't have a logo that is exactly twice the size of the default logo. The recommend height for the default logo is 90 pixels.
You can upload the favicon via Appearance -> Customize -> Site Identity
Please navigate to Settings > General > Tagline to change the tagline.
Topbar contact details
Navigate to Appearance > Widgets and click on the 'Topbar' panel on the right side of the screen. In this panel you will find the QT: Icon Box and QT: Social Icons widgets.
The header main navigation can be edited via Appearance -> Menu's. Choose "Primary Navigation" from the select field and the navigation structure will load.
Also the page sidebar navigation and footer navigation can be edited on this way. Just select the right menu from the select field and edit the links.
3. Theme Customizer
In the theme customizer you can change the colors and settings of the theme. You can find the customizer options via Appearance > Customize > Theme Options.
In this panel there are sections where you can change:
- Page Header
- Layout & Colors
- Single Gallery
4.1. Page Templates
If you want to create a regular page always use this template.
Front Page Slider
This template will add the option to add a slider to your page, like the theme demo homepage. After selecting this template you will find the slider below the page builder grid in the "Page slider" metabox.
Front Page Alternative Slider
If you rather use Revolution Slider or Layer Slider for WordPress use this template. Enter the slider ID in the metabox at the top of the page and your done.
4.2. Page Builder
The page builder allows you to create pages the way you want. Within the columns of the page builder you can add the widgets you want to show on the page. If the page builder plugin is activated you will see a new tab, next to the default tabs of the WordPress texteditor, called 'Page Builder'.
Enable page builder
1. Install and activate the SiteOrigin Page Builder plugin
2. Click the "Page Builder" tab to use the page builder on your page:
3. Click "Add Row" to add your first page builder row to the grid
4. Click "Add Widget" to add your first widget to the gridIf you have used the page builder please don't switch between the tabs. It will break the page builder grid !
1. Add Row
First you need to add a row. When you click the Add Row button a modal will pop up where you can set the columns in that row. (You can drag the columns to set the width)
2. Add Widget
When you add a row, then it's time to add a widget. Click on a column and then on the Add Widget button. A modal will pop up with all the available widgets.
If you want to add some text or a image use the Visual Editor Widget or the default Text Widget
3. Edit Row
There are some row styles: Attributes, Layout and Design which you can edit.
Here you can add a row class, cell class and CSS styles
Set margins and paddings to the row and choose between standard, fullwidth and fullwidth stretched row layouts
Set a row background color or image
If you're looking for more information about the page builder please visit the plugin website:Go to page builder documentation
In the Gallery tab you can upload your gallery / projects per post. With the Essential Grid we display the featured image of each post. Each thumbnail will lead you to the post itself. You can upload your images, as many as you want with a couple of clicks.
4.3.1. Create a Gallery Post
- Go to the Gallery tab in the WordPress admin area and click on Add New Gallery
- Enter a title, add some text if you want, set the featured image and select a category for the post
- If you scroll a bit down you will notice the 'Gallery Image' optionbox.
- Set the layout to Split or Full width, and set the image columns
- And as last, drag and drop your images into the gallery images field
- Publish your gallery
4.3.2. Display the Gallery Posts
If you imported the demo content the summary will automatically show your newest gallery post. If dont used the demo content you need to create a new grid. Follow these steps below:
- Go to Ess. Grid in the WordPress admin area
- Click the blue 'Create New Ess. Grid' button
- Fill in a Name and Alias for your grid
- Then click the Source Tab on the top
- Set Post Type to Gallery
- Select the gallery Categoriesyou want to show
- If you would like to set some custom grid options click the Grid Settings tab.
- When you're done click the green floppy disk button on the right top of your screen (Save Grid)
- Now you can use the Essential Grid Widget on a page and select your grid.
Setup the blog page:
- Navigate to Settings -> Reading
- Select "A static page"
- Set the "Post Page" option to your blog page
- Save the settings
Change blog layout:
- Navigate to Pages
- Edit your blog page
- Choose blog layout at "Blog Layout" settings
- Publish page
When you choose the Front Page Slider template there will be a new box below the page builder grid where you can add your image slides.
The Slides tab is where you can add your image slides. Hover the place holders and click the 'X' icon to remove the default images. The "Add Media" button will appear to add your own image.
In the Settings tab you can edit some settings of the slider, like captions, auto cycle and slide animation.
1. Click Add Row to add a new image slide
- 2. Add your image (1920 x 730 pixel)
- 3. Add a small top heading
- 4. Add the main heading
- 5. Add a text paragraph (optional)
- 6. Click "Add Slide Button" to add a button
- 7. Enter the button details
- 8. Repeat step 1 till 7 for a new slide
6.1.Visual Editor Widget
With the Visual Editor you can easily write some content, set some basic typography styles to it, or just add some images.
6.2. Featured Page
This is a great widget to feature a page, we used it for displaying the service pages.
Change the image and text
The image of the 'featured page' is just the normal Featured Image of that specific page.
To change the image please edit the specific featured page, at the "Featured Image" metabox on the right side of the screen.
6.3. Clients / Partners
This is a little bit of HTML code, change the
src="image.jpg" to your image URL.
<div class="client-logos"> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client1.jpg" /> </div> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client2.jpg" /> </div> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client3.jpg" /> </div> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client4.jpg" /> </div> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client5.jpg" /> </div> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client6.jpg" /> </div> </div>
If you want to add the tooltips you can use data-toggle attribute:
<div class="client-logos"> <div class="logo"> <img src="http://tf-images.qreativethemes.com/thelandscaper/client2.jpg" data-toggle="tooltip" data-original-title="Award Nr. 2" /> </div> </div>
6.4. Google Maps
Google changed the requirements for the Google Maps usage on your website. You need to enter your credit card details at Google and create an API key. You get $200 free usage a month (≈ 28.500 map connections) and if you exceed this they start billing you. Unfortunately these changes are made by Google and not by us, we can't do anything about this. On this link you can read more about these changes.
1. The free Google Maps
The HTML iframe embedded map remain free (no billing account and API key needed). To add this map to your website follow these steps:
- Navigate to Google Maps
- Search for your location
- Press the menu icon inside the search field
- Navigate to Share or embed map
- Click on the embed tab
- Copy the html code
- Add a "Custom HTML" widget to the page builder in the theme
- Paste the html code
2. The billed Google Maps
Make sure you have setup your billing account at Google. After you have setup this account you need to create an API key for Google Maps.
Please follow this guide to create your API key.
6.5. Call to Action Banner
With this widget you can create a Call to Action banner with text and buttons. To create a call to action banner like in the theme demo follow these simple steps:
- Add a page builder row with one column
- Go to Edit Row -> Layout and set row layout to Full Width Stretched
- Then go to Design panel and upload the background image for the banner
- Set background size to Cover
- Now edit the widget and enter the text and buttons (see buttons shortcode)
6.6. Icon Boxes
There are 2 type of icon boxes; Big Icon and Smaller Icon. You can easily choose them by a select option
6.7. Widget Styles
Some content elements (used in theme demo) require a extra class inside the widgets attribute field.
Text Box left from services (homepage)
Use the class:
Project Galleries title (homepage)
Use the classes:
text-center no-border white
Request A Free Quote box (homepage)
Use the class:
Landscaping Awards title (homepage)
Use the class:
See the screenshots below where to enter these classes
The Landscaper comes with some plugins. Here we describe some who (maby) needs some explanation.
7.1. Advanced Custom Fields Pro
Advanced Custom Fields PRO is bundled with the theme. However, the ACF PRO files are not to be used or distributed outside of the theme.
7.2. Essential Grid
The Essential Grid plugin is used for displaying the gallery posts in a grid. Essential Grid is an all-purpose grid building solution for WordPress that allows you to display various content formats in a highly customizable grid. For a deeper look into Essential Grid please take a look in to the official documentation.
7.3. Contact Form 7
As the name of this plugin says. The Contact Form 7 plugin is used for the contact forms in the theme. If you create your own form you can display it on your website by adding the form shortcode (that is visible on the Contact tab) in the Visual Editor widget.
If you deleted the default forms here are the snippets you can copy/paste to recreate them:Contact Page form:
<div class="row"> <div class="col-xs-12 col-md-6"> <span>Your Name * [text* your-name placeholder "Full Name"]</span> </div> <div class="col-xs-12 col-md-6"> <span>Your Email address * [email* your-email placeholder "E-mail Address"]</span> </div> <div class="col-xs-12 col-md-6"> <span>The Subject [text your-subject placeholder "Subject"]</span> </div> <div class="col-xs-12 col-md-6"> <span>Your Phone number * [tel phone-number placeholder "Phone Number"]</span> </div> <div class="col-xs-12"> <span>Message * [textarea* your-message placeholder "Type your message..."]</span> </div> <div class="col-xs-12"> [submit class:btn class:btn-primary placeholder "Send Message"] <span class="info-text">Fields marked with a * are required</span> </div> </div>
Request A Free Estimate form:
<div class="request-quote-form"> <div class="row"> <div class="col-xs-12 col-md-6">[text* your-name placeholder "Your Name"][email* your-email placeholder "Your Email"][select menu-490 "Landscape Maintenance" "Enhancements Services" "Irrigation Service" "Snow Removal" "Other Services"]</div> <div class="col-xs-12 col-md-6">[textarea your-message placeholder "Your Message"]</div> </div> <div class="row"> <div class="col-xs-12">[submit "Request Quote"]</div> </div> </div>
Make an Appointment form:
<div class="row"> <div class="col-xs-12 col-md-6">[text* first-name placeholder "First Name"]</div> <div class="col-xs-12 col-md-6">[text* last-name placeholder "Last Name"]</div> <div class="col-xs-12 col-md-6">[text* your-address placeholder "Address"]</div> <div class="col-xs-12 col-md-6">[tel* your-phone placeholder "Phone Number"]</div> <div class="col-xs-12 col-md-6"><p>Date of Appointment * [text* the-date placeholder "MM-DD-YY"]</p> </div> <div class="col-xs-12 col-md-6"> <p>Time of Appointment * [select* the-time "08:00 AM" "09:00 AM" "10:00 AM" "11:00 AM" "12:00 AM" "01:00 PM" "02:00 PM" "03:00 PM" "04:00 PM" "05:00 PM" "06:00 PM"]</p> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6"> <p>I am interested in:<p> <p>[checkbox services use_label_element "Lawn & Garden Care" "Planting & Removal" "Irrigation & Drainage" "Snow & Ice Removal" "Spring & Fall Cleanup" "Stone & Hardscaping"]</p> </div> <div class="col-xs-12 col-md-6"> <p>Additional Message<p>[textarea extra-message placeholder "Write your message"][submit class:btn class:btn-primary placeholder "Make Appointment"] </div> </div>
Ask a Question form:
<div class="ask-a-question-form"> <div class="row"> <div class="col-xs-12 col-md-6">[text* your-name placeholder "Full Name"]</div> <div class="col-xs-12 col-md-6">[email* your-email placeholder "E-mail Address"]</div> <div class="col-xs-12">[textarea* your-message placeholder "Message"]</div> <div class="col-xs-12">[submit class:btn class:btn-primary class:center-block placeholder "Send Us Your Question"]</div> </div> </div>
7.3.1 Configure sender email address
If you want to edit the email body message of the email go to Contact -> 'Edit form' -> Click the Mail tab. Here you can edit the fields which will show in your mail:
7.3.2 The forms are not working, they're not sending the message
This is a common issue with contact forms and WordPress. To fix this issue please install the WP Mail SMTP plugin and enter all details under Settings -> Mail
7.4. Simple Page Sidebars
With this plugin you can create as many as page sidebars as you want. While editing a page you see a metabox on the right side of the screen:
Open the Reading settings screenlink in a new browser tab, set the default page sidebar and save. Close the window and click on Add New. Fill in the name of the sidebar and click Update
When you go to Appearance -> Widgets you will notice your new sidebar.
The Landscaper supports WooCommerce. If the WooCommerce plugin is installed and activated on a fresh WordPress installation you will see the WooCommerce installer. Go through it if you want to use WooCommerce else skip all the steps or go back to the Admin Area through the browsers address bar
If you want to configurate the WooCommerce pages go toWooCommerce -> Settings -> Products -> Display and set the Shop Page to Shop, and save the changes.
On the Checkout and Account tabs you can set the Cart, Checkout and Account pages.
7.6. Breadcrumbs NavXT
If you want to change the breadcrumbs of the projects or the shop page go to Settings -> Breadcrumbs NavXT -> Post Types there you can set the root page.
How do I remove the angles between the breadcrumb links?
Go to the admin dashboard -> Settings -> Breadcrumbs NavXT. If you see the message 'Your settings are out of date' click on Migare now. Then in the first input field (Breadcrumb Seperator) you see > remove this, scroll to the bottom and save changes.
This plugin is used for the before and after image slider. Add the visual editor widget (or use it in the default editor from WordPress) and type the following shortcode:
[twentytwenty] images here [/twentytwenty]
Place your cursor between the shortcode and upload 2 images with both the same size.
To add a button with the shortcode add:
[button href="your-link-here"] Text [/button]
The shortcode has 7 more parameters you can use:
Change the look of the button; use primary or outline
Add a FontAwesome icon to the button
Link the button to a new window, or not. To link in the same use _self or new _blank window
Makes the edges of the buttons rounded
Makes the button fullwidth
Change the background color:
Change the text color:
See the above attributes working on the shortcode page of the theme demo:
8.2. Font Awesome Icons
The Font Awesome icon shortcode has 3 options:
Choose the icon
Add a URL to the icon
Link the button to a new window, or not. To link in the same use _self or new _blank window
See the full list of available icons at the FontAwesome library:
Their are 4 dropcap styles.
[dropcap style="style1"]T[/dropcap]his will make the letter T a dropcap.
[dropcap style="style2"]T[/dropcap]his will make the letter T a dropcap.
[dropcap style="style3"]T[/dropcap]his will make the letter T a dropcap.
[dropcap style="style1" titlte="This is the title next to the dropcap"]T[/dropcap]his will make the letter T a dropcap.
Just edit the
title="" attributes and 'content' to your own. If you want to set panel open use the attribute
state="active" after the title.
[collapsibles] [collapse title="Title 1" state="active"] content [/collapse] [collapse title="Title 2"] content [/collapse] [collapse title="Title 3"] content [/collapse] [/collapsibles]
There are 2 styles of tables, which you can use for example a price list
Table Style Default
[table cols="Service,Price Per Hour, Project Based Hour Price" data=" Design & Build, $60, $50, Plastering, $45, $40, Electrical, $55, $50, Plumbing, $45, $40"]
Table Style Boxed
[table style="boxed" cols="Service,Price Per Hour, Project Based Hour Price" data=" Design & Build, $60, $50, Plastering, $45, $40, Electrical, $55, $50, Plumbing, $45, $40"]
These table shortcodes can only contain plain text. If you want to use icons or links in it you'll need to use the regular HTML tables, see the snippet below:
<table class="qt-table default"> <thead> <tr> <td> Subdivision/Town</td> <td> Zip Code</td> </tr> </thead> <tbody> <tr> <td> Abbott Glen</td> <td> 40014</td> </tr> <tr> <td> Academy Ridge</td> <td> 40245</td> </tr> <tr> <td> Aikenshire</td> <td> 40245</td> </tr> </tbody> </table>
8.6. Embed Videos
To embed a YouTube or Vimeo video into your website please use:
9.1. Footer Widgets
The Top Footer contains a widget area. Go to Apearance -> Widgets to edit the Footer Widgets.
If you go to Appearance -> Customize -> Theme Options -> Footer you can select how many widgets you want to display.
So for example if you set Number of Columns in the Live Customizer to 4 you can place 4 widgets in the Footer area. If you want to hide this section select 0.
9.2. Bottom Footer
In the bottom footer you can place some text or copyrights. You can edit this text through Appearance -> Customize -> Theme Options -> Footer
With WPML you can make create a website for multiple languages. If you purchased the WPML plugin please install the following WPML Add-on plugins:
- WPML Multilingual CMS
- WPML String Translation
- WPML Translation Management
After you've activated WPML the plugin will guide you through the installation wizard.
10.2. Loco Translate
With the Loco Translate plugin you can translate the theme inside your WordPress installation.
Please install and activate the Loco Translate plugin, and follow the steps below:
- Please navigate to Loco Translate -> Themes (to translate a plugin go to Loco Translate -> Plugins)
- Click on the correct theme name in the list (or plugin name if the texts is coming from a plugin)
- Click on the "New Language" link
- Set your language from the dropdown field
- Set "Choose a location" to Custom and press the Start Translating button
- Type the word you want to translate in the search box and click on it when it appear in the list below
- Write your translation in the most bottom textarea (do not change the default text)
- Save the settings
- Navigate to Settings -> General and set the "Site Language" option to the translation language.
10.3. Manual Translation
You can translate the theme by editing the included .pot language file with a program like PoEdit. After translating please export the .po and .mo files which you need to upload in the language folder of the theme (theme-folder/language/).
For more information please see this link
11.1. Demo Images
The images on the theme demo are not included in the download package because of copyrights. All the images are replaced with placeholders.
We created a collection where you can easily find all the used images here.
11.2. Child Theme
A child theme is included with the parent theme. A WordPress child theme is a WordPress theme that inherits its functionality from the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme.
If you want to use the child theme upload it through the WordPress dashboard or FTP.
The changelog of the theme is available on the bottom of the item page on Themeforest.
If you have questions that are beyond the scope of this documentation, please contact support.
11.5. Rate the Theme
If you like this theme please rate it on Themeforest. It means alot for us!
How to rate The Landscaper?
- Login into your Themeforest account
- When logged in, move your mouse over your username (in the top)
- Navigate to Downloads
- Search for The Landscaper theme, move your mouse over the stars and click.