Contents

1. Landkit update 1.10 turns code editor into Chinese characters

2. Getting started - Read this first

3. Increase number of tabs (Tab Element)

4. Hybrid Composer error on activation

5. Translate the theme using Loco Translate

6. Hybrid Composer columns

7. Create portfolio items & portfolio page

8. Full height sections

9. Hybrid Composer sections

10. Theme options panel

11. Hybrid Composer full page

12. Hide menu & footer on a page

13. Use Typekit fonts

14. Error: Downloading installation package from /public_html/wp-content/themes/landkit/inc/hybrid-composer.zip…

15. Update the theme

16. Error: Are you sure you want to do this? Please try again.

17. WP 5.0 Gutenberg breaks page builder

18. Animations render bad on Safari 12+

19. Google Maps

20. Hybrid Composer vulnerability

21. Different logo on specific page

22. Shop (WooCommerce)

23. Change theme fonts

24. Install theme from WordPress

25. Full width sections

26. Import demo content

27. Install theme using FTP

28. Copy / paste sections between pages

29. Error file_put_contents

30. Section two-blocks - mute or unmute background video

31. One page website

32. Mega menu

33. Anchor links

34. Menu

35. Hybrid Composer overview

36. Custom CSS classes

37. Enable debug mode

38. Import multiple demos

39. Contact Form 7 use case examples

40. Hybrid Composer templates

41. Two blocks sections

42. Blog

43. Page builder not showing up

44. Demo import not working

45. Import multiple demos in one install

46. Page title

47. Parallax sections

1. Landkit update 1.10 turns code editor into Chinese characters

This update added a new encoding to Code Block element, therefore the content is rendered to Chinese characters. To recover your original Code Block content, follow these steps:

1. Go to your page editor and switch to Classic View (right panel):

2. Look for Code Block content inside the page json. Copy the hex string:

3. Use this tool to decode: https://cryptii.com/pipes/hex-decoder

4. Copy the decoded text.

5. Switch back to Composer view and paste the decoded text into Code Block:

2. Getting started - Read this first

Hi, thanks for purchasing this theme. We're all part of a great community and we really appreciate your support. We'll also do our best to build great products and offer you the best customer experience.

If you're an experienced WordPress user, you can skip this part and use the search function to find answers to your questions. We covered a lot of instructions on our articles so please take a few minutes to look for solutions here before submitting a ticket. And if a topic isn't covered yet, we'll turn your ticket into an article, so on the other hand, if you can't find a solution to your problem here, please ask for help, we'll be glad to assist you and personally thank you for your trust and support.

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 article.
  4. Import the demo content. It's the best way to play around with the theme and learn to use it.
  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, move components around. We've created a page with all the elements, so you can get a glance on the potential of Hybrid Composer.
  8. 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 Team.

3. Increase number of tabs (Tab Element)

1. Go to wp-content/plugins/hybrid-composer/components/containers.php and edit line 213 and 220 (same code on both):

for ($i = 1; $i < 13; $i++) {

Code above changes to 12 tabs.

2. Go to wp-content/plugins/hybrid-composer/admin/components/containers.php line 669:

Duplicate this block of code for each extra tab you added, changing the number id (name_8, icon_8, icon_style_8, icon_image_8, content_8, main_content_8). You need a block for each tab (9 - 12).

<div class="panel">
<div class="flex-box">
<div class="input-row full-input" data-dependence-show="link_type_media">
<p><?php _e("Tab name","hc") ?></p>
<input data-hc-setting="name_8" class="input-link" type="text" value="" />
</div>
<i class="input-row button-icons-list-all button-icon icon-plus-add-2" data-hc-setting="icon_8" data-hc-component="value" data-value="">
<input type="hidden" data-hc-setting="icon_style_8" class="icon-style" value="">
<input type="hidden" data-hc-setting="icon_image_8" class="icon-image" value="">
</i>
</div>
<div data-hc-setting="content_8" data-hc-id="main_content_8" data-hc-container="repeater" class="row">
<div class="clear"></div>
<div class="hc-add-component"><i class="icon-plus-add-2"></i></div>
</div>
</div>

3. Add the corresponding lines on the code right below the panels:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
</ul>


4. Hybrid Composer error on activation

If you're getting this error when activating Hybrid Composer:

Parse error: syntax error, unexpected '[' in /home/content/73/8287873/html/420offices/wp-content/plugins/hybrid-composer/index.php on line 362

it means you're using an older PHP version. Minimum required is 5.6

To update your PHP version using cPanel, follow the steps here: https://www.siteground.com/tutorials/cpanel/php-version-change/

5. Translate the theme using Loco Translate

All themes by SoCanny are fully translatable. We'll use Loco Translate plugin for this example but other plugins will work as well.

That's it.

6. Hybrid Composer columns

Composer Items

Usage

The 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%).

7. Create portfolio items & portfolio page

To create a portfolio, you need a custom post called "portfolio" or "work" or whatever you like. The advantage of using this theme is that you can create your own custom posts with customisable templates.

To create a custom post, go to Lists - Add New. Here you can set the name and icon for your custom post. The template can be built as a regular page, using Hybrid Composer.

Next, you'll see your newly created post in the left pane. Use it to add your portfolio items. Please note that the template is locked and you'll only be able to add content to your items. To make changes to the layout too, just click the unlock icon on the upper right panel:

Lastly, you'll create a page to showcase all your portfolio items. Create a regular page and use the Grid List or Masonry List element to display your items.

Below is a video showing the full process:

8. Full height sections

You can either add full height sections by uploading an image as background and checking the full screen option:

or by selecting full screen size from custom options:


9. Hybrid Composer sections

What are sections?

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

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.

10. Theme options panel

Go to WordPress menu > Appearance > Theme options. The theme settings are global settings for different parts of your website.

Main Settings

Layout

Menu

Footer

Lists

WooCommerce

Page titles

Customizations

Social and API

Insert the links of your social channels, these links will be used on menu and footer.

You must insert the Google API KEY before using the maps, you can get your key here: developers.google.com/maps/documentation/javascript/, click on top right button GET KEY.

Demo Import

Here you can import the included demos.

11. Hybrid Composer 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:

Options

12. Hide menu & footer on a page

On your page editor, look for page settings (left panel):

Use "Hide menu" and "Hide footer" to disable menu header and footer on that page.

13. Use Typekit fonts

Typekit is a great source of free and paid, high quality fonts. All fonts used in this theme are free, you only need to create a free account on Typekit. Here's what you need to do:

h1, h2, h3, h4, h5, h6, p, .btn, body, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p, .list-blog p {
  font-family: "museo-sans" !important;}

14. Error: Downloading installation package from /public_html/wp-content/themes/landkit/inc/hybrid-composer.zip…

Update 1.6 came with a filename error on our end. This prevents Hybrid Composer from installing when activating the theme.

We already updated the correct files on Themeforest, so just re-download the package and install the theme again.

15. Update the theme

IMPORTANT: Before proceeding with the update, please make a backup copy of the current version (better be safe than sorry):

NOTICE: This theme uses Hybrid Composer plugin for it's core functionalities. It's important that you also update this plugin, as instructed below.

To update the theme:

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

If you encounter any errors, use the backup to revert to the previous version, then open a support ticket and we'll assist with the update.

16. Error: Are you sure you want to do this? Please try again.

Sometimes, when installing the theme from WordPress dashboard, the following error occurs:

This is one of the most unhelpful error because it doesn't say anything and there can be a lot of factors that lead to this. However, in most of the cases, this error is fixed by uploading the theme using FTP instead of WordPress dashboard.

Here's a full tutorial on how to install the theme via FTP: https://socanny.ticksy.com/article/11332

17. WP 5.0 Gutenberg breaks page builder

This issue was fixed in Landkit v.1.9. and Sole v.1.2.

18. Animations render bad on Safari 12+

Update 11 Oct 2018:

Issue was fixed in Landkit v.1.8 and Sole v.1.1

19. Google Maps

To use Google Maps, you need to set an API key:

20. Hybrid Composer vulnerability

Important: Landkit v.1.11 and Sole v.1.4 include the patched version of Hybrid Composer. Make sure you're using the latest version!

If your website got hacked, follow these steps to fix the redirect:

1. Login to your cPanel account.

2. Go to phpMyAdmin, open your database and look for wp_options table.

3. Edit siteurl and home fields by double clicking on the input.

4. Changes are saved automatically after editing.

That's it. There are no other files affected.

21. Different logo on specific page

The logo you set on Theme Options - Main Settings will be used throughout your site.

To use a different logo on a specific page, follow these steps:

1. Go to Media - Add New and upload your logo files (both normal and retina)

2. Click on each of them and copy the full link (right pane)

3. Go to your page (live preview), open browser inspector and look for page-id, inside the body tag:

For homepage, you'll use "home" instead of "page-id-number". In this case, page id is "page-id-6".

4. Add the following code to Theme Options - Customizations - Javascript Global:

(function($){
$(document).ready(function(){
    $('.page-id-6 .logo-default').attr('src', 'default-logo-link');
    $('.page-id-6 .logo-retina').attr('src', 'retina-logo-link');
});
})(jQuery);

5. Replace page id number with your id and default-logo-link with your logo link (same for retina).


22. Shop (WooCommerce)

To use the shop functionality, you first need to install and activate WooCommerce plugin: https://wordpress.org/plugins/woocommerce/


Case 1: Importing the Shop Demo


Case 2: Creating your own shop

23. Change theme fonts

This theme uses Google fonts, which can be changed easily from theme options panel.

Go to Appearance - Theme Options - Main Settings. Scroll to font family and select your font from the drop-down. Make sure to check the needed font weights. Font family 2 is used in some skins, but unless you really need it, it's recommended you use the same font family as the default one.

Additionally, you can add Typekit fonts. Read the typekit fonts article for more info.

24. Install theme from WordPress

25. Full width sections

Both type of sections (base or two blocks) can be set to cover the full width of your browser window. Simply select full width instead of contained from the section drop down panel:

26. 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.


All demo content should import properly, however, sometimes the import process can fail due to server file permission. On the same page in Theme Options, you'll find instructions of how to manually install the demo data.

27. Install theme using FTP

28. Copy / paste sections between pages

Sometimes, you'll need to combine elements from two or more different imported pages and there's a simple way of doing this using the copy / paste feature:


When this feature stops working, just go to Appearance - Theme Options - Customizations and click on Clear LocalStorage.

If this doesn't solve the problem either, before clicking the paste button, try adding a new empty section and deleting it. Then click on paste and it should work.

29. Error file_put_contents

If you're getting “error file_put_contents” when installing demo data, it means your server doesn't have writing permission. The demo install needs to upload and unzip files on your server, so you need to make sure wp-content folder is writable. 

Follow this guide to set the correct permission to your wp-content folder: http://www.wpbeginner.com/beginners-guide/how-to-fix-file-and-folder-permissions-error-in-wordpress/

30. Section two-blocks - mute or unmute background video

By default, when you upload a mp4 video to the two-blocks section, the video autoplays muted.

This is because the video size is set as cover and play controls might not be visible on certain resolutions.

You can, however, mute or unmute the video, by following these steps:

<video autoplay loop poster="<?php echo hc_get_img($Y_NOW["video_poster"],"ultra-large"); ?>">

31. One page website

Creating a one page website is a simple as creating a regular one. The only difference is the menu, that instead of using pages as items, uses page sections. Menu will scroll to the corresponding section when clicked.

To create a one page menu, check this guide: https://socanny.ticksy.com/article/11697/

32. 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.

33. Anchor links

To create an anchor link (a link that automatically scrolls to a specific section), you need to identify the section id. You can also edit the id to your own to make things easier:

Then, on your element, set #section-id as link:

That's it. To find out how to add anchor links to your menu, follow the guide here: https://socanny.ticksy.com/article/11697/

34. Menu

Standard Menu:

One Page Menu (anchor menu):

Footer and Top Mini Menu:


35. Hybrid Composer overview

Introduction

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:


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

36. Custom CSS classes

Hybrid Composer page builder uses CSS classes instead of customisable options for it's sections and elements. The advantage is you can see all options at once and you can combine any of them, without dealing with complex menus and interdependencies.

You can also add your own CSS classes and styles, using the two forms on the bottom of custom options:

There are already a few custom CSS classes you can use and more will be added with each update:


37. Enable debug mode

Sometimes, certain theme functionalities might not work properly (demo import, theme options not saving, etc.) without any error or warning in WordPress dashboard or browser console. To investigate this, you need to enable debugging:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

A common approach to fixing those errors is by copy/pasting the error (only the error, not the file path) to Google and looking for solutions. Most of the time, you'll see that someone already has a fix on stockexchange or similar websites.

38. Import multiple demos

One Click import process adds a page called "Home" and automatically sets it as Front Page. If you're looking to import multiple homepages, follow these steps to avoid overwriting existing content:

If you're just starting with your website, there is no need to make a backup of Theme Options settings, but if you already made changes, keep in mind that One Click Import will overwrite those settings so it's important to have the backup.

39. Contact Form 7 use case examples

Contents:

  1. Install and configure CF7
    1. Default form
    2. Inline Form
  2. Save form data in WP and export to CSV
  3. Redirect form to thank you page
  4. Conditional fields
  5. Check to agree before submit
  6. Pre-populate other forms with CF7 data
  7. Multi step forms

1. Install and configure CF7

download and install: https://wordpress.org/plugins/contact-form-7/

after activation, you will see this in your WP dashboard:

you'll have one pre-installed contact form; form editor looks like this:

first, you wand to edit the form code, in the editor field; there are many form field types to choose from; for more info read this: https://contactform7.com/text-fields/ and this: https://contactform7.com/checkboxes-radio-buttons-and-menus/

a. Default form

A standard form that looks like this on front end:

will have the following code:

<label> Your Name (required)
    [text* your-name placeholder "Name"] </label>
<label> Your Email (required)
    [email* your-email placeholder "Email"] </label>
<label> Subject
    [text your-subject placeholder "Subject"] </label>
<label> Your Message
    [textarea your-message placeholder "Message"] </label>
[submit "Send"]

To break it down, a field works like this:

- This is the form label. You can remove it and have the code like this:

[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Message"]
[submit "Send"]

Which will output this form:

text* - This is the field type. * means the field is required.

your-name - The field ID. This will be used to store the data and send it to your email.

placeholder "Name" - Placeholder text. Remove this to get a form with no placeholders.

b. Inline Form

Inline forms usually look like this:

This layout is more suited for forms with fewer fields and without labels. Code looks like this:

<div class="row form-inline">
  <div class="col-md-12">
    [text* your-name placeholder "Name"]
  </div>
  <div class="col-md-12">
    [email* your-email placeholder "Email"]
  </div>
  [submit "Send"]
</div>

To configure the message you receive after the form has been submitted, go to mail tab:

To - enter your email here

From - [your-name] is the name user fills out in the form; note that IDs here need to be the same as in the form code; is the sending email, this can be set to any email@your-domain.com and the email address doesn't have to exist.

Other fields are self explanatory. See how field IDs are used here. Feel free to edit Message Body to your own, but make sure to include all IDs.

The Messages tab allows you to edit all success / error / validation messages.

To add the form on a page, just create a text block element and paste the form shortcode there:

Form will fill out its container width, so adding the text block element in a larger column will result in a wider form.


2. Save form data in WP and export to CSV

Install this plugin: https://wordpress.org/plugins/contact-form-cfdb7/

After each form submission, data will be saved as custom posts:


3. Redirect form to thank you page

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

You will see a new tab on your form editor:

Use that for your thank you page info.


4. Conditional fields

Install this plugin: https://wordpress.org/plugins/cf7-conditional-fields/

Plugin documentation is actually very well made so please read that before using it.


5. Check to agree before submit

Add this to your form code, right above the submit button:

[acceptance your-consent] I consent to the conditions. [/acceptance]

For more info, read the documentation here: https://contactform7.com/acceptance-checkbox/


6. Pre-populate other forms with CF7 data

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

Check "Pass fields as URL query parameters" and send the redirect page to your next form. Use the query parameters to pre-populate your next form.

7. Multi step forms

Install this plugin: https://wordpress.org/plugins/contact-form-7-multi-step-module/

  1. Create one page or post for each step in your multi-step form process. If you have 3 steps, create 3 pages/posts. You will need the urls to these when creating your forms.
  2. Create a Contact Form 7 form.
  3. Place your cursor at the end of the form.
  4. On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”.
  5. In the popup, type in the current step and total steps in your multi-step process. For example, if this is the first form in a total of 3 forms, type in “1” for Current Step and “3” in Total Steps. If this is the last form in your process, type in “3” for current Step and “3” in Total Steps.
  6. The Next Page URL is the url that contains your next form. If this form is the last step, you can leave the URL field blank or fill it in to redirect the user to some other page.
  7. Click “Insert Tag”
  8. Save your completed form and place the form’s shortcode into the appropriate Page/Post you created in step 1.
  9. Repeat for each form in your multi-step form process.
  10. Only the final step will send an email. To include fields from your other forms simply enter the mail-tags from the other forms. For example if your first form has the field your-email you can include [your-email] in the Mail tab on the last form.

40. Hybrid Composer 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. 


41. Two blocks sections

Split sections, also called two blocks (one side image, the other side content) can be easily added using a two blocks section:

All you need to do next is add content just like in a regular section, but also upload an image for the other block. You can also switch the sides by checking Inverse on the settings panel.


42. Blog

Create your blog posts as you would create a regular page using Hybrid Composer to add content.

Notice that besides the regular options, posts in Landkit theme have some extra custom fields. Those extra fields are used in some skins:

To create a blog page that will show all your posts:


43. Page builder not showing up

If the page editor is blank, meaning there's nothing showing up after the permalink, just go to Screen Options (top right) and make sure "Page Editor" is checked.

44. Demo import not working

If demo import process runs successfully but nothing happens, there could be a few causes:

1. Incorrect folder permissions. Follow this guide to fix it: https://www.wpbeginner.com/beginners-guide/how-to-fix-file-and-folder-permissions-error-in-wordpress/

2. Incorrect filesystem method set to WordPress. You can check this by uploading a plugin and see if WordPress requires a FTP connection to upload. If that's the case, add this to wp-config.php:

define('FS_METHOD', 'direct');

3. Other issues. Enable debug, run demo import and check for errors in debug.log: https://socanny.ticksy.com/article/12718/

45. Import multiple demos in one install

The OneClick import process is fully automated, meaning it imports all the content, theme options, names the imported page as "home" and sets it as front page in Settings - Reading. All this so you can get started right away.

However, when importing multiple demos, each new demo will overwrite the old one. Luckily, there is an easy walk-around for this:



46. Page title

Whenever you create a new page, a page title box appear on top of your content:

You can select between Image / Slider / Video / Animation / Base / Empty.

Image

Upload a background image for page title. Other options like parallax, ken burns or overlays are available.

Slider

Display an image slider as page title background. Slider options are customisable via the advanced options icon (double cog icon).

Video

Choose between a youtube or self hosted MP4 video as page title background. Make sure you also upload a poster image for devices that don't support video playback.

Animation

Build the page title background using two images that overlap and add an extra layer of animated clouds or fog.

Base

A simple image / solid color background.

Empty

The page title is hidden.

47. Parallax sections

You can add parallax backgrounds to any page section:

Just check parallax after uploading your image. Bleed controls how much of the image bleeds to the next section (set it to 0 for no bleed).