Getting Started

If you're just getting started with WordPress, you might find this theme a bit difficult to use, as it's the case with other themes on themeforest.net. As WordPress becomes more popular, more complex features and options are added to themes each day, so creating a website should be easy, but dealing with lots of options can get overwhelming for a new user. Here's how we recommend you start:

  1. Read this article by wpbeginner. It a good source of information for beginners.
  2. When you're familiar with WordPress, go ahead and download the theme from themeforest.net. Please note that there are two types of packages you can download: the complete package, that contains the theme, documentation, demo data, etc. (do not upload this zip file on theme install) and the installable theme zip (this is the file you should upload on install).
  3. Install the theme. You can either install from WordPress or using FTP, so make sure you read the appropriate section.
  4. Import the demo content. It's the best way to learn the theme by playing around with the settings.
  5. Read Hybrid Composer overview. Our themes use Hybrid Composer page builder. It's fairly easy to use but the guide will help you learn a lot about it.
  6. Read the article about Theme Options. The Theme Options panel is the theme's "command center"; all major settings like branding, fonts, colors, header settings, footer, etc. are adjusted there so make sure you read the guide.
  7. Go ahead and play around with the content you imported. Change some settings, add new elements, more components around. We've created a page with all the elements, so you can get a glance on the potential of Hybrid Composer.
  8. While experimenting with components, read the dedicated section to learn more about the settings and features. Each component is well described so we really encourage you read it.
  9. Now you can start building your website either from scratch or by starting with a pre-made demo.

We know there's a bit of learning needed before using the theme, but you'll master it and you'll understand it's true potential. Hopefully this short guide was helpful but feel free to ask for help whenever needed. Good luck!

SoCanny

Install the Theme

Install from WordPress

After you’ve downloaded the main theme archive from ThemeForest you’ll see the following items inside:

  • Theme
    • landkit The theme folder. Upload this to wp-content/themes using FTP.
    • landkit-child Child theme folder. Learn more about it here.
    • landkit-child.zip Child theme folder. Learn more about it here.
    • landkit.zip The theme archive. Upload this to WordPress.
  • Documentation Documentation files.
  • Demo Content (manual install) Individual zip files for manual demo data install. More details here.

To install the theme from WordPress dashboard, follow these steps:

  • Login into your admin section in WordPress (http://your-site.com/wp-admin)
  • Go to Appearance - Themes.
  • Click Add New and hit the Upload button.
  • Browse to find "landkit.zip" (you can find the zip in the extracted package folder) file on your computer and click Install Now.
  • The theme will be uploaded and installed.
  • Activate the installed theme.
  • Our themes use Hybrid Composer plugin to run so make sure you install and activate it. Go to Plugins and Install / Activate Hybrid Composer. Don't worry, it's a plugin developed by us and it's completely integrated with the theme.

Install Using FTP

  • Log into your hosting space via a FTP software (eg. FileZilla).
  • Upload Landkit theme folder (the unzipped one) into wp-content/themes in your WordPress installation.
  • Login into your admin section in WordPress (http://your-site.com/wp-admin)
  • Go to Appearance - Themes
  • Activate the installed theme.
  • Our themes use Hybrid Composer plugin to run so make sure you install and activate it. Go to Plugins and activate Hybrid Composer. Don't worry, it's a plugin developed by us and it's completely integrated with the theme.

Use the Child Theme

If you need to modify core files or just need a better way to manage custom CSS, we recommend you use child theme.

Child theme is installed and activated exactly as the theme, so make sure to follow the guide above.

Now that you have the child theme active, you can begin to add your custom css into the child theme style.css file via Appearance > Editor.

Import Demo Content

We highly recommend you start by importing the demo content, it's the best way to learn the theme and use the ready made pages.

  • Go to Appearance - Theme Options - Demo Import
  • Select the preferred demo and click Import.

Sometimes the demo import won't work (usually due to server permissions). In that case, use manual install (look for One Click Install not working? on the bottom of the page).

Hybrid Composer Page Builder

Overview

Hybrid composer is a back-end page builder with advanced features. It's completely integrated with the theme so you don't need to worry about compatibility issues.

Before start using it you should understand these concepts:

  • All components are composed of two parts: settings and content. Content is directly editable and consists of text, icons or images. Settings are accessible by gears icons.
  • Spaces are always needed. You should use the space component for every vertical space.
  • Texts content should always use text block component. All the demos has been created using the text block component, this ensure easier content management and a better design. Text editor is not recommended but there are some situations where you might need to use
  • Some settings and components have info tooltips, so make sure to hover the mouse over the settings name to get more information.
  • Content is based on 3 components: sectionscolumns and components. You'll always start with a blank section, then add the columns, then the components.


Composer page options:

Editor mode
Composer or classic mode. The classic mode is the default WordPress editor, you can set classic mode to copy the composer array and paste it in other pages.

Locked mode 
The locked mode blocks the page editing and hides some features. With locked mode activated you can only edit the content. Is not possible to add any new content, the layout is more compact and user friendly. The locked mode prevents accidental damage and simplifies the page administration. Locked mode is auto activated on lists - post type single items.

Composer content 
Show the page content formatted as array, this feature allow you to view all the values of every component of the page and it's useful for advanced customisations.

CSS 
Use it to insert your custom CSS classes for the current page.

Templates 
Templates allow you to save the current page and use it in other pages. To save the current page add the template name and click on save template. A success message will prompt and the template will be available after page reload. To use your saved templates select the template you want and wait a few seconds. There are also built-in templates, use them to add new pages in seconds. Please note that adding templates will delete your current content!

Clear the cache and reload 
Hybrid composer uses a cache system to improve the performance. If you content is not updated, use this feature to clear the cache of the current page and reload the page with the latest content.


Custom page settings:

Allows you to overwrite some options that has been set on Appearance > Theme Pptions. The custom settings will only be applied to the current page.

Move

Use it to move sections, columns and components by clicking and dragging on the move icon.

Duplicate

You can duplicate sections, columns and components. To duplicate click on top right icon . The duplicated object will be placed on right of original object and will contain all the settings and contents of the original object.

Animations

Every column can be animated and can animate it's child columns with the timeline feature. To set a animation click on animation button and select your animation. The animation will be showed on page scroll, when the column is visible.

Timeline

The timeline animates multiple columns and components sequentially, one after the other. You must apply the timeline animation to the parent column and all the child columns will be animated.

Custom codes and CSS

You can add custom CSS values and more to sections, columns and components by clicking on the top right icon  . 

ID
On top right you can see the ID of the object, you will need it for one page and full page menus, for lightbox containers and also for advanced customisation, the ID is unique and never changes. You can edit change it with any string you want, but only use letters and numbers.

Default classes
The default classes are built-in classes useful for many scopes:

General
White Converts all colors of inner components to white; use this for sections with dark background images or videos
Col center centers a column; use it in combination with text-center class
Section bg color Sets the default background color (usually a light grey, eg. #f7f7f7)
Bg color Sets the main color (set in theme options) as background color
No paddings Removes all paddings; use it in combination with No margins for fullscreen content like sliders
No padding bottom Removes only the bottom paddings
No paddings y Removes only top and bottom paddings
No paddings x Removes only left and right paddings
No margins Removes all margins; use it use it in combination with No paddings for fullscreen content like sliders
Pull right Moves the object to right
Bg cover Default background image classes; use in combination with custom CSS style background-image:url()
Bg transparent Removes all backgrounds
Boxed Sets a boxed design with the main color as background; use it in combination with class white
Boxed inverse Sets a boxed design with white background
Circle Sets the object to as a circle shape
Clear Use it to fix floating problems

Text
Text color Sets Main color to current text
Text center Aligns text to center
Text right Aligns text to right
Text left Aligns text to left
Text justify Justifies the text
Text bold Sets bold font weight, font-weight: 600
Text black Sets ultra bold font weight, font-weight: 900
Text light Sets light font weight, font-weight: 300
Text xxl Sets extra extra large font-size, default font-size: 90px
Text xl Sets extra large font-size, default font-size: 60px
Text l Sets large font-size, default font-size: 36px
Text m Sets medium font-size, default font-size: 16px
Text s Sets small font-size, default font-size: 13px
Text xs Sets extra small font-size, default font-size: 12px
Font 2 Set the secondary font (set in theme options)

Mobile
Hidden xs Hides the object only on smartphone devices
Hidden sm Hides the object only on tablets and smartphone devices
Hidden md Hides the object only on tablets, smartphone and small desktop devices
Hidden lg Hides the object everywhere
Visible xs Shows the object only on smartphone devices
Visible sm Shows the object only on tablets and smartphone devices
Visible md Shows the object only on tablets and small desktop devices
Visible lg Shows the object on tablets, smartphone and small desktops devices
Col sm 12 Forces a column 12 on tablets and smartphones
Text center smAligns center only on tablets and smartphones
Text center xs Aligns center only on smartphones
Text right xs Aligns right only on smartphones
Text right sm Aligns right only on tablets and smartphones
Text left xs Aligns left only on smartphones
Text left sm Aligns left only on tablets and smartphones
Pull none xs Removes the floating (pull-right) on smartphones
No bg xs Removes the background image on smartphones
Height full xs Sets a 100% height only on mobile devices

Functions
Scroll hide Hides the object on page scroll
Scroll show Shows the object on page scroll and adds class showed, this class is removed on scroll top
Scroll change Adds class scroll-change to the object and add class scroll-css on page scroll, this class is removed on scroll top
Full screen size Sets the height to full screen size
Vertical row Centers the elements horizontally into the object, supported only by columns and sections
Proporzional row All the children columns and components will have the same height. Use class "clear-proporzional" to remove the proporzional height.
Middle content The content inside the component with this class is centred on middle. Use it with the columns

Custom css classes
Here you can insert multiple custom classes separated by space. Ex. my-class-1 my-class-2 my-class-3

Custom css style
Here you can insert multiple custom css styles. Ex. color:red; text-transform:uppercase

Sections

What are sections?

Sections are the base containers for all the content of your pages. There are different section types that support different media and layouts.

Two Blocks

Two blocks sections contain an image background on one side and content on the other side.

Map Section

Map section features a Google Map as background. You can add regular content on top of it.

Full width or container?

From top right select you can choose between full width or container layouts. The full width layout enlarges your contents to all the screen's width. The container layout puts your content in a fixed width container, default width is 1170px.

Columns

Usage

Columns are containers with different widths, responsive and based on the 12-grid system of Bootstrap. You can change the column width by clicking the top right icon  .
The columns are the main containers of every content and are grouped into rows. You must add the correct number of column to reach the full width of a row, a row is full when the sum of inner columns reach 12 (100%). For example if you insert 3 columns of with 4 (33.3%) you fill one row: 4 + 4 + 4 = 12, this is another way to write: 33.3 % + 33.3 % + 33.3% = 100%. 

Responsive
The columns are responsive, and his width change for different screen sizes. 

Phone (width < 768px): All the columns from 1 to 12 become column 12 (100% width).
Tablets (992px > width > 768px): Columns 6 - 3 - 9 become column 6 (50% width), columns 4 - 2 become column 4 (33.3%), column 8 become column 9 (66.6%), the other columns become column 12 (100%).

Templates

Usage

Page templates allow you to create awesome pages with different layouts and functionalities. You can select the template on right box of every page, after you selected it, you must update the page to activate it. Once activated you will find a template options box on bottom right of the page and for some templates a second box on top right.

Widgets

Sidebars are contents that never change and are always the same for every page. On bottom right box you can select the sidebar. The sidebar content can be edited from WordPress menu > Appearance > Widgets

Base

The base template is a blank page without any element. Base and Default Template are both the same template. Sidebars are supported.

Background image

The background image template is like base template but with a fixed and full screen background image. To use it activate the template by updating the page and selecting the background image on bottom right box. Sidebars are supported.

Background slider

The background slider template is like background image template but it shows multiple images that change within an interval, images are showed as fixed and full screen background image. To use it activate the template by updating the page and selecting the images on bottom right box. Sidebars are supported. Options button contain all the slider options, for more details go to slider documentation, note that not all slider options are supported for the slider template.

Background video

The background video template shows a fixed and full screen background video with autoplay and muted. To use it activate the template by updating the page and selecting the video on bottom right box, poster image is showed on mobile, while video is loading, or if video play is not possible. Sidebars are supported.

Full page

The FullPage template is a complete full page framework and there is a dedicated documentation.

Two sides

A full page variant that splits the page in two sides and show the contents centred. This template is perfect for cinematic effects and high impact designs. To use it activate the template by updating the page. Sidebars are not supported. On mobile the two sides page is converted to a static page and all contents are placed one below the other.

Background
The page can be with background image, slider or video. You can set it from top box.

Sections
Create a new section for every menu item, the menu is on top right, the first section is for the left main content, the content that appears on left when you close the two sides. Use Scroll box container component to insert scrollable content, you can insert into the scroll box height the text fullscreen to set a full height. Some content like maps and sliders require to set the trigger setting to manual.

Menu
On top right you can see the two sides menu, the menu items number must be the same of the sections number + the first section. 

Full Page

Overview

The FullPage template is a complete full page engine that allows you to create awesome pages and websites. To use it activate the template and update the page. Sidebars are not supported. FullPage template shows full screen areas with a horizontal or vertical scroll. On mobile the FullPage is converted into a static page and all components are placed one below the other.

Create a new section for every menu item, the menu is on top right. Every section can be empty, with background image, slider or video.

Sections

Every page section is a full page area, the sections are automatically centered in both directions, if you have problems with the layout insert all the section's content into a parent column 12. The background image should be at least HD (1920x1080px). Animations are supported. For background video section use MP4 videos, Youtube is not supported. The ID of every section is the anchor link name.

Slides

To add horizontal slides insert the component SLIDES into a new section. If you use this component you must insert all the contents into the slides only. This component is not compatible with the horizontal FullPage mode.

Top and bottom area

Use the component Top bottom area to insert a content on top or on bottom of the screen. This component will place the content on top or bottom without margins or paddings so make sure you add the space component if you need to fix that.

Menu

On top right you can see the full page menu, the menu items number must be the same as the sections number. Every menu item has an icon, used only for some menu types, and a text, the menu item name. On bottom box you can set the menu type and set other options. The top menu must not be one page, you can uncheck it from Appearance > Theme options > Menu. To change the anchor link name click the top right button of each section and update the ID.

Top header menu

If you want use the main top menu, the header, follow these instructions:

  • On bottom box select menu style to none
  • Go to WordPress menu > Appearance > Theme options and on menu tab select one page menu, save the settings
  • Go to WordPress menu > Appearance > menus, select you menu, add a the menu item Custom Link, and on URL insert #section-0 for first full page section, #section-1 for second full page section ....
  • For combined menus, full page + classic links to other pages, disable one page menu from Appearance > Theme options and add the full URL to the menu items URL, replace #section-1 with http://www.yoursite.com/#section-1....

Options

  • Menu style Menu styles; set to none for top header menu
  • Menu position Set the menu position
  • Arrows Show top and bottom arrows for vertical direction; you can show only next, or both arrows.
  • Arrow text 1 Arrows text top or left, supported only for arrows style 1
  • Arrow text 2 Arrows text bottom or right, supported only for default arrows style
  • Arrows position Top and bottom arrows position
  • Arrows style Arrow styles
  • Single bg If activated all the page have one fixed background, you can set it from top box
  • Direction Full page direction: horizontal or vertical
  • Center offset Adjust the vertical height to perfectly center the content to the screen
  • Menu logo Show the website logo on the menu
  • Hide header Hide the top header
  • Footer Show the footer
  • Advanced options Advanced plugin options

Create Galleries

Image Galleries

To create an image gallery, use either Grid List or Masonry List element from the Containers section. They're similar in terms of options, the only difference is the gallery layout (grid or masonry).

Use the first set of settings to configure the layout and the second set to configure pagination (it's only available when pagination is checked).

Content Galleries

You can also create galleries (either grid or masonry) using regular content instead of images. Use the same elements as for image galleries, but select the advanced list tab instead.

Create Sliders

Hybrid Composer offers basic slider elements: Image Slider, Slider and Advanced Slider.

Image Slider

This is the most basic slider and it only shows images in a slide / carousel style. Use the settings to configure the layout and functionality.

Selecting Slider / Carousel from the dropdown will change the layout:

Slider

It's very similar to Image Slider but it uses regular content instead. You can add any elements and display them in a slider / carousel.

Advanced Slider

This is a combination of Image Slider and Slider. You can add any element and have a background image at the same time. Settings are similar to Slider.

Contact Form

The included contact form is pretty basic; it collects the form data and sends it to the configured email address. For more complex features like redirect to a thank you page, form data save/export, form tracking, etc. we recommend using Contact Form 7. Theme is compatible with it and the styling is the same as for the default form.

Contact Form backend looks like this:

As you can see in the example above, there are a few options for each field:

  • Type: This affects the layout and validation. Ex: email type will only work if you enter a valid email
  • Size: Sets the field size based on a 12 column grid. In the example, the first two fields share half of a row, putting them on the same line, while the other two fields cover a full row each. See the front end form below.
  • Required: By checking the box next to the size dropdown, you enable validation for that field.
  • Label / Placeholder: This is the field name. Depending on what you set, it will show on label, placeholder or both.

The settings panel looks like this:

Recipient's email and Subject are required for the form to work. Leaving these options blank will trigger an error on form submit. Using this configuration, the form looks like this:

Changing the button position to inline will display the form on a single line. You might need to adjust the column size to accommodate all the fields. We also removed Subject and Message fields in this example:

Theme Options Panel

Theme Options panel can be found on Appearance - Theme Options. Theme's global settings can be accessed here. Each setting has a description and most of them are pretty straight forward. Here are the most common settings you might be looking for and their location:

  • Logo - Main Settings. After uploading your logo, go to Theme Options - Menu, scroll down to logo height and enter the exact height of your logo. Then go back to Main Settings and set Logo Margin Top to properly center it on the menu bar.
  • Color Schemes - Main Settings. Colors are applies to all elements throughout the theme.
  • Spacing between sections - Section Padding - Layout. Adjust the values on both desktop and mobile.
  • Blog Page - Lists
  • Custom Code - Customizations - CSS Global
  • Social Media Icons - Social and API
  • Google Maps API key - Social and API
  • Settings Backup - Customizations

Pages

Create a page from scratch

Go to Pages - Add New. This first things you'll see are Page Title and New Section.

Page Title

This will show your page title and subtitle (only if set) on the top part of your page. It usually looks like this:

There are a few options for the page title background:

Image - Uses an image background as show above.

Slider - Uses an image slider:

Video - Uses a video (duh)

Animation - Uses background image, a main image (the city in the example) and animations (effects) for each image.

Base - A compacted version of Image Title. You can leave the background blank as well.

Empty - It hides the page title completely.

Add Content

Content on pages (and posts as well) is grouped using sections and columns. Each section / column can have it's own settings (read more about this in Hybrid Composer section).

Page Settings

On the bottom right panel you'll find the page settings and lightbox / popover buttons. Settings will only apply to the current page.

Blog

Blog Posts

You'll notice blog posts on Landkit theme are a bit different from a standard WordPress post. We recommend you use Hybrid Composer to build your posts, otherwise you might encounter issues when displaying them on the blog page.

When creating a new post, you'll find a WordPress Editor element already placed inside a new section. Use that to add your content if you're more confortable using the default WordPress editor, or delete it and add content as you would in a regular page. Either way it will work fine.

The other inportant thing you need to look for is the Item Main Content panel (top right). Use that to set your featured image, excerpt and extra content (Extra 1, Extra 2 and Icon will only show on certain skins on blog page).

Other post features like page title, settings, sidebars, etc are the same as for pages.

Blog Page

To create the blog page, just add a new page and name it as you want. On this page add a Grid List or Masonry List element. These two elements are very similar, first will create a regular grid and the second also allows masonry grid. Select Posts for post type.

Next, you will need to configure the setttings for your blog page. You'll do this by accessing Masonry List settings. Some settings are self-explanatory, but here are the most important ones:

  • Columns, Row Height and Margins: this will set the layout of your grid.
  • Pagination: you can choose between classic pagination, lazy loading or no pagination.
  • Show Menu: this will show the filters menu; use the other settings to configure it's layout.
  • Auto Masonry: this will turn your grid into a masonry list; you don't need to set different heights for featured images, the element will create the masonry look automatically.
  • Box: this is the blog page skin; we recommend using Blog Side, Blog Full Width and Blog Full Width 2.

Last thing you need to do is to set your blog page in Theme Options - Lists - Blog Page. That's it, you now have your blog ready.

Portfolio

Setting the portfolio is very similar to setting the blog, the only difference is that it uses a different post type and a different skin on the portfolio page.

Portfolio Posts

If you imported a demo that uses porfolio, you already have the Portfolio post type created. Otherwise, read the Custom Posts guide to create your own.

Go to Portfolio - Add New. You'll see the post template. Add your content as you would on a regular page. Similar to blog posts, details like featured image, excerpt and extra content are set on Item Main Content panel (top right):

Portfolio Page

Just like on the blog page, just add a new page and name it as you want. On this page add a Grid List or Masonry List element. These two elements are very similar, first will create a regular grid and the second also allows masonry grids. Select Portfolio for post type.

Next, you will need to configure the setttings for your portfolio page. You'll do this by accessing Masonry List settings. Some settings are self-explanatory, but here are the most important ones:

  • Columns, Row Height and Margins: this will set the layout of your grid.
  • Pagination: you can choose between classic pagination, lazy loading or no pagination.
  • Show Menu: this will show the filters menu; use the other settings to configure it's layout.
  • Auto Masonry: this will turn your grid into a masonry list; you don't need to set different heights for featured images, the element will create the masonry look automatically.
  • Box: this is the portfolio page skin; we recommend using Top Image or Image Full Content.

Custom Posts

Create a new custom post

This theme allows you to create and manage as many custom posts as needed using the Lists feature.

  • Go to Lists - Add New. Set an icon (this will be visible on the left panel in WordPress dashboard), choose a name and unique ID:
  • On Single item template, build the template for your custom posts. Whenever you'll create a new post, this template will load up and all you'll need to do is add content, so focus more on layout for now (use dummy content). Page title will also load up in the template so if you want to use Image title, upload an image and it will be loaded in all posts.
  • Hit Publish and you'll see the custom post has appeared on the left panel:

Use custom posts

Go to Portfolio (the newly created custom post) and Add New. The template you previously created will load up, but only the content editors will be active. To make changes on the layout, hit the unlock button on the top right panel. Sometimes you might need to click it twice to take effect.

Menu

Standard Menu

  • Go to Appearance - Menus
  • Create a new menu and name it Main Menu
  • Add pages to your menu from the Pages Panel on the left
  • Select Header Menu on the bottom and Save the menu

One Page Menu

  • Go to Appearance - Menus
  • Create a new menu and name it Main Menu
  • Add items to your menu using the Custom Links panel on the left
  • Add #section-id for the link, where section-id is the unique section id
  • Select Header Menu on the bottom and Save the menu
  • Go to Appearance - Theme Options - Menu and check One Page option

Mega Menu

Mega menus in Landkit use the same functionality as the default WordPress menu. To create a mega menu, simply add items from the left panel, making sure to nest them correctly.

In the following example, the mega menu uses tabs and columns to separate the content. You don't have to use tabs, but you need to place your content inside columns.

Update the Theme

  • Log into your hosting space via a FTP software (eg. FileZilla).
  • Go to wp-content/plugins and make a backup hybrid-composer folder
  • Go to wp-content/themes and make a backup of landkit folder
  • Go to Tools - Export - All
  • Go to Appearance - Theme Options - Customizations and click on Export Settings; save the page as export.json
  • Keep all the files somewhere safe.

Perform the Update:

  • Go to Plugins, disable and delete Hybrid Composer plugin
  • Go to Appearance - Themes and activate a different theme
  • On Landkit, click on theme details then delete (bottom right)
  • Click on Add New, install and activate the updated theme (landkit.zip)
  • Install and activate Hybrid Composer (as prompted)

To check if the theme was successfully updated, go to Theme Options and check the version on the top right.