Thank you for purchasing our product! We are very pleased that you have chosen our theme for your website, you will not be disappointed! Before you get started, please be sure to always search our knowledgebase and also watch our video tutorials. The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation, if there are some other issues you want to discuss then do not hesitate to contact us on our support desk.

Note: this documentation contains general information about our themes and some screenshots or text might not necessarily apply to this product. Themes suffer modifications and not all options and elements could be available.Also the theme has specific settings that may conflict with your current setup of categories, plugins, javascript use and more.

WordPress Information

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links for WordPress information.

Requirements for Touchsize themes

To use our heme, please make sure you are running:

  • Wordpress 4.0 or higher
  • PHP 5.6 or higher
  • MySQL 5 or higher
  • Memory Limit 128M or higher

Below is a list of items you should ensure your host can comply with:

  • Check to ensure that your web host has the minimum requirements to run WordPress.
  • Always make sure they are running the latest version of WordPress.
  • You can download the latest release of WordPress from official WordPress website.
  • Always create secure passwords for FTP and Database.

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content with Fusion Builder and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 90
  • memory_limit 128M
  • upload_max_filesize 32M

Theme Installation

You can install the theme in two ways: through WordPress, or via FTP. The theme_name.zip file is the Installable WordPress Theme and what you need to use to get the theme installed. Please see the following sections for each method. But first, you need to download the theme files from your Themeforest account. Navigate to your downloads tab on Themeforest and find the theme that you want to download. Click the download button to see the two options. The Main Files and the Installable WordPress Theme. See below.


Follow the steps below to install via WordPress:

  1. Navigate to Appearance > Themes.

  2. Click Install Themes and hit the upload button.

  3. Navigate to find the “Theme_name.zip” file on your computer and click “Install Now”

  4. Wait while the theme is uploaded and installed.

  5. Activate the newly installed theme. Go to Appearance > Themes and activate it.

Follow the steps below to install via FTP:

  1. Log into your hosting space via an FTP software

  2. Unzip the Theme_name.zip file and ONLY use the extracted Theme folder

  3. Navigate to find the “Theme_name.zip” file on your computer and click “Install Now”

  4. Activate the newly installed theme. Go to Appearance -> Themes and activate it.

Dummy Content Import:

One of the most frequently asked questions "how i can make my webpage as on demo?". The solution is simple - just import the Dummy Content! Dummy content provides you the same pages, settings and arrangement as you can see in our demo version of site. To install the demo content follow the next steps:

1. Download the dummy content:

First, you need to download the theme files from your Themeforest account. Navigate to your downloads tab on Themeforest and find the theme. Click the download button to see the two options. The Main Files and the Installable WordPress Theme. Download the Main Files.See below (Nr.1).

2. Import the content:

  1. Log into your site as an administrator

  2. Make sure you activated your theme before proceeding.

  3. Go to Tools → Import

  4. Upload the demo content .xml using the form provided on that page.

  5. You will be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.

  6. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.

  7. Please be patient while WordPress imports all the content. Posts, Pages, Projects, and Menus are imported. You will need assign the menu a theme location & you’ll need to configure widgets. This is a limitation of WordPress’ import system.

2.1 Import the content from theme options:

  1. Log into your site as an administrator

  2. Make sure you activated your theme before proceeding.

  3. Go to Appearance -> Theme Options -> Import Options

  4. Choose the demo you want to import:

  5. Click Import Demo Data

3. Set everything up:

Firstly you have to check what is missing from your dummy content, in most of cases when you take a look at your page after import you see nothing. It's because of the category selection. You have to enter each page and change categories from uncategorized to other existing ones. It's because of the Category id, if you preventive had any category, the current category id's will not match. The same thing can happen with images from carousel. Also you should not forget to set the imported menu as "Primary Menu" and set up the homepage.

  1. Go to Appearence => Menus, take a look at the menu, if import did his job not quite good, arrange the menu elements as on the Demo. After what scroll down till end and set current menu as "Primary Menu" (see below).

  2. Go to Settings => Reading and set your front page one of existing, or build your own one.

  1. In case your content is not displayed on home page or any other page, Go to Pages => "Page you need Name" and edit every list post or carousel. Change their categoryes/photos and enjoy the look of that page. You can select all categories or to choose categories one by one by clicking on the category name then click again in the input then you will be able to select more categories.

How to update the theme:

There are two ways to update your theme. The first method is to use our Auto Update feature which requires you to get ThemeForest API key. The second is the upload the theme manually, either via FTP or WordPress. This is the traditional method and this method requires you to download the theme files from ThemeForest first.Please see the information below for how to update the Touchsize themes.

Auto Update Method

First of all - log into your ThemeForest account and click your username in the top right corner to access the dropdown. Select the “Settings” link, and the “My Account” page will load. Click the “API Keys” tab on the left side.


Enter a name in the Label field, and click the Generate API Key button. Your new API Key will now appear above.

Then in the fields of Theme Options you have to put:
1) Your Themeforest User Name
2) Your Themeforest API Key


Manual Update Method

With the Manual Update Method, you can either choose to upload the theme files manually via FTP or WordPress. Before you can update manually, you have to download the theme files from ThemeForest. Continue reading below for instructions on how to download the theme files and how to upload them.

How to download new theme files from ThemeForest

  1. Log into your Themeforest account and navigate to your downloads tab. Find the theme purchase.

  2. Click the “download” button next to it and choose to download the “Installable WordPress Theme” which is just the WordPress file, or choose the “Main Files” which is the entire package that contains everything.

  3. Then you need to decide if you want to install the update via FTP or via WordPress. Directions for both methods are below.

How to update your theme via WordPress.

  1. You need to deactivate the current theme in the “appearance > themes” section by simply activating a different theme. Once you activate a different theme, you can delete the theme. Dont worry, your content will not be lost.

  2. Retrieve the “theme_name.zip” file from your new Themeforest download. If you downloaded the “Main Files” from Themeforest, then you need to unzip the archive file you received, the theme_name.zip will be inside of it

  3. Then simply upload the “theme_name.zip” file in the “appearance > themes” section. Click on the “Install Themes” tab at the top and choose to upload the zip file.

  4. Once it uploads, choose to activate the theme.

  5. Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

How to update your theme via FTP.

  1. Go to “wp-content > themes” location and backup your theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

  2. Retrieve the “theme_name.zip” file from your new Themeforest download and extract the file to get the theme folder.

  3. Then simply drag and drop the new theme folder into “wp-content > themes” location. Choose to “Replace” the current one if you did not delete it.

  4. Lastly, update the included plugins. You will see a notification message letting you know the plugins have a new version and need to be updated. Follow the on screen steps.

Theme options

Touchsize themes comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. Go to Appearance > Theme Options on admin sidebar to access the setting options.

General

Below are the general options that this theme offers. You can enable/disable options and sections of your website.
  1. Enable preloader for website?

    This option can add to your website a fancy preloader that will wait till all the page will be loaded and then will display it. You can use it only for homepage, or for the entire website.

  2. Enable show lightbox

    Enable this if you want your featured images on single pages to have lightbox (open full size images when you click on the button in a modal window) available.

  3. Enable Image Lazy Loading

    If enabled, it will load images only when you scroll to the image position making the website load faster.

  4. Comment system

    Choose what commenting system you want to use, WordPress default comments or Facebook comments. If you use a plugin to replace the comments, set this option to Default WordPress.

  5. Enable sticky menu option

    In case you need only the menu to be sticky when you scroll below it, enable this option. Keep in mind that this will not make other elements to be included, only the menu will become like this. Please make sure you do not use other sticky elements/rows on page, conflicts might happen.

  6. Enable likes system

    If enabled, it will show likes counter and icon in different parts of the website. If you click on the icon, +1 will be added to it. This system uses cookies, not 100% accurate.

  7. Choose an icon for your likes

    Here you can choose the icon that you want to show for like element.

  8. Generate random likes

    This option will generate a random number of likes for post.
    CAUTION! This is an irreversible process, all your previous likes and views data will be removed and replaced. Proceed with caution.

  9. Reset likes to zero

    This option will reset all likes of posts to 0
    CAUTION! This is an irreversible process, all your previous likes and views data will be set to 0. Proceed with caution.

  10. Enable facebook like modal

    If enabled, this will show a modal window on page load asking the user to like your Facebook page.

  11. Custom JavaScript code

    Insert your custom JavaScript code you have, including the script tag. Eg: Google Analytics

  12. Excerpt size for post types of views

    The WordPress Excerpt is an optional summary or description of a post; in short, a post summary. With this option you can change the number of characters (text) shown in:
    12. grid view
    13. list view
    14. bigpost view
    15. timeline view
    16. feature area

  1. Disable right click

    Enable this option if you wish to disable the option to right click on your website. Note: Not very user friendly, so proceed with caution

  2. Change custom post video slug

    The post slug is the user friendly and URL valid name of a post. Most common usage of this feature is to create a permalink for each post.
    WordPress automatically generates post slugs from a post’s title. However, it is not used in the URL until custom permalinks are enabled for use ” %postname%” in the URL structure. With this options you can change slug for each custom post:
    18. Slug for video custom post
    19. Slug for video texonomy
    20. Slug for portfolio taxonomy
    21. Slug for portfolio custom post
    22. Slug for event custom post
    23. Slug for event taxonomy
    24. Slug for gallery custom post
    25. Slug for gallery taxonomy

Styles

Settings for your website styling. Here you can change colors, effects, logo type, custom favicon, background.
  1. Logo type

    Here you can change your logo with a image or simple text. If you choose image logo,will be set the uploaded image in Appearance -> Customize -> Site Idendity.
    If you wish to have a text logo, a typography options will appear. Just select text logo and choose the font you like. Fonts are included from Google fonts library. Also you can set the
    font weight, font-size, font-style, text-decoration, text-transform and so on.

  2. Enable retina logo

    If enabled this will make the image logo you upload 2 times smaller on the website so that it looks good on high DPI devices. If logo is added in smaller container that it's size, it will be contained in it.

  3. Boxed Layout

    If enabled it will add white background to content and limit the boundaries of the site that is set in general settings. Expanded rows and content will work only inside the white box.

  4. Header position

    Choose theme header position.

  5. Theme background

    Choose your colors, background image or patterns available or none.

  6. Social media sharing image

    When your website is shared on social media (Eg: Facebook), the base URL of your website will have the image you set here. Anyway, we strongly recommend using a SEO plugin instead. (Eg: Yoast SEO)

  7. Hover effect style

    Choose style for hover effect in views.

  8. Enable overlay subtle overlay effect for images

    If enabled, it will add subtle effect over images in archive pages and single featured images.

  9. Grayscale images in views

    If this option is set to Yes, images in views will be converted to grayscale mode.

  10. Enable scroll to top button

    If enabled, it will add a button in the bottom right corner of your website. When users click on it, they are automatically sent to the top of your website.

  11. Choose a website default width

    This option affects only big screens. Choose any base content width of your website, depending on your content style. You can make your website wider or more narrow using this option.

Colors

Settings for your website color settings. Here you can change colors that are shown on your website.
  1. General color for the text on the website

    Change this to any color you want and that fits the background of the website.

  2. Links color

    Change this color if you want the links on your website to have a different color.

  3. Links color on hover

    Change this color if you want the links on hover to have a different color.

  4. Color for titles of articles in views

    Change this color if you want article titles inside views to have a different color.

  5. Color for titles of articles in views on hover

    Change this color if you want article titles inside views on hover to have a different color on hover.

  6. Meta text color

    This affects dates, author information, different stats on the website.

  7. Primary color

    Main color of the website. It is used for backgrounds, borders of elements, etc. This defines your main brand/website color.

  8. Primary color on hover

    Main color of the website. It is used for backgrounds, borders of elements, etc. This defines your main brand/website color on hover.

  9. Secondary color

    Secondary color of the website. It is used for backgrounds, borders of elements, etc. This defines your secondary or contrast brand/website color.

  10. Secondary color on hover

    Secondary color of the website. It is used for backgrounds, borders of elements, etc. This defines your secondary or contrast brand/website color on hover.

  11. Primary text color

    The color of the text that has a primary color background. Primary color reffers to the color setting above.

  12. Primary text color on hover

    The color of the text that has a primary color background on hover. Primary color reffers to the color setting above.

  13. Secondary text color

    The color of the text that has a secondary color background.

  14. Excerpt color

    The colors of the text in the menus and submenus on hover.


Default menu colors

In this section you can change colors for default menu of the website.
  1. Menu text color

    The colors of the text in the menus and submenus.

  2. Menu background color

    The color of the menu backgroud.

  3. Menu text color on hover

    The colors of the text in the menus and submenus.

  4. Menu background color on hover

    The color of the menu backgroud on hover.

  5. Submenu text color

    The colors of the textin submenus .

  6. Submenu background color

    This is used for menus that have background colors. Not all menu styles can have backgrounds. Even so, this option will apply for submenu backgrounds as well, even for those that do not have a background by default.

  7. Submenu text color on hover

    The colors of the text in submenus on hover.

  8. Submenu background color on hover

    Same thing as the option above, only for the hover state.

Image sizes

In this tab you can choose the dimensions for the images that are used on your website. Caution - these are not the sizes that will be shown on the website as the website is adaptive, but it is the size of the images that will be used. We strongly recommend to use given settings and not to fiddle with any as long as you are not sure what you are doing.

Archive pages

This is the default layouts settings area. Here you can set the defaults for your website. Default sidebar settings and the way articles are going to be shown on archive pages,single post, pages, shop page and products (if you have WooCommerce installed).

Typography

Settings below are used to change typography for the whole webpage.
You can either use the default fonts that are set in the theme or you can use any from the Google fonts directory.
Also, you can upload you own custom font. Use the tool here to create a custom web font.

Single Post

Single posts settings options. In this section you can enable/disable related posts, social sharing, tags.

  1. Enable the "Now reading" section on top of single

    If set to yes, this option will show a sticky section with post title and navigation at the top of your website.

  2. Enable related posts

    If enabled, it will add a section of posts that are related to the that is opened. Other options will appear if you enable them.

  3. Number of related posts to show
  4. Number of columns for related posts
  5. Related posts view style
  6. Title position

    Select your title position for related posts. Title can be displayed above the image or above the excerpt. Note that sometimes title may change the position of the meta: date, categories, author as well.

  7. Related posts query criteria

Single boxes and pagination

These are the default meta settings for the posts on your website.
  1. Display pagination in single post

    Show or hide pagination in single posts.

  2. Display author box

    You can globally author box on your single posts.

  3. Display breadcrumbs

    Activate or disable breadcrumbs on your website.

  4. Sticky sidebar

    This option makes your existing sidebars sticky and permanently visible, regardless of their position and how much the user has scrolled down.

  5. Show progress bar

    A progress bar can be used to show a user how far along he/she is in a process.

  6. Limit content width

    This option allows you to limit content width on no-sidebar single pages .

Meta option

These are the default meta settings for the posts on your website.
  1. Show title on single page

    If set to yes, this option will show the title of the posts.

  2. Show featured image in post

    Use this to hide or show the featured image in posts.

  3. Show date

    If set to yes, this option will show the date.

  4. Show author

    If set to yes, this option will show the author.

  5. Show views

    If set to yes, this option will show the views.

  6. Display post tags

    Show or hide tags in single posts.

  7. Show social sharing.

    If set to yes, this option will show the social sharing buttons.

  8. Post sharing style

    If you choose Fixed option, on Post page sharing will always be visible on the bottom of the screen, otherwise it will be placed below post content.

Social

Here you can insert your link to the social pages below. These are used for social icons. The email set here is going to be used for contact forms.

Sidebars

To create new sidebars just use this tab. Add a sidebar name and press the add button. This will create a new sidebar area that you can use anywhere on the website.

Import options

Importing demo data : post, pages, images, theme settings is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch.These will overwrite theme default styles. Please, check twice before adding something here because we are not responsible for your actions.
There is a option to choose the demo you want to import: Magazine, Business/Agency, Food
Also you can reset theme settings to defaults.

Custom CSS

If you need to add your custom CSS, we recommend to add it in this section. These will overwrite theme default styles. Please, check twice before adding something here because we are not responsible for your actions.

Advertising

Ad-based revenue model is utilized by millions of websites online. Most blogs that we know including our own use display advertisement, banner ads, to generate a good portion of the site’s income. As a content publisher, you want an easy to implement solution that allows you to maximize your site earning without taking up too much of your time.
In this sections you can add the code of your ads that will be shown:
- above the video on the video single post ( used only for custom video posts )
- above the comments on the single post ( used only for any theme posts types )

Theme Update

This option refers to Auto Update Method . In order to be able to do updates directly from the WP Dashboard, you will need to add your ThemeForest details in the form. If you do not know where to get your API key from, here is a link: Click for API Key Tutorial

User Frontend

Foodbook theme offers a powerful Front-end Submission function allowing front-end users to contribute with their recipes to your site. This is a new feature which allows the user to create a custom form to adding a recipes or a registration form.


Frontend forms


This option allows the user to create a custom form for adding recipes. You can arrange the items using drag&drop and the addition or deletion is done via a single click. How to do this you can see in our section with video tutorials.



The user is free to make the frontend form by their own needs. Can choose if the recipes will be posted automatically or will be accepted by administrator, can choose the redirect page after adding, can add a message to unregistered users, can choose when and where to receive notifications and many other possibilities.You can see the options below:


Registration forms


This option allows the user to create a custom form for registration page. You can arrange the items using drag&drop and the addition or deletion is done via a single click. You can see the options below:


WooCommerce

WooCommerce is available for customers who need to sell products. If you are interested in using this theme and also have WooCommerce installed on your website the theme is compatible and even has some additional features availalbe. Once you install our theme, you can activate the plugin. We have included it in the TGM (Recommended plugins section), so you can use it on need.


In order to get everything done, once you activate the theme and the plugin, you should get a WooCommerce notification that you need to install the pages for the plugin to work.


What options do I get with the theme?

Our theme comes with a drag and drop layout builder that offers a lot of layout option and post listing views. You can also list products using it. Products can only be listed in grids by 1,2,3,4 or 6 columns per row.

Keep in mind that WooCommerce comes as a separate plugin, all the theme does is use it's functionality and add on top of that.


How to set the shop page layout (add sidebar to it)?

to add, remove or change the sidebar options for the shop page you should get to the Layout tab from the Theme -> Layout options. There you can fiddle with the options and get the things done.


Taxonomies

Categories and tags work in much the same way as any other post type categories and tags. They can be applied before or during the creation of a product.
Attributes, on the other hand, are different – they can be added per product, or you can set up global attributes for the entire store to use (for example, in layered navigation).


Product Types

With attributes and categories set up and stock management configured, we can begin adding products. When adding your product, the first thing to decide is what type of product it is.


  • The Simple product type covers the vast majority of any products you may sell. Simple products are shipped and have no options. For example, a can of drink.
  • A Grouped product is a collection of related products which can be purchased individually and can only consist of simple products. For example, a PS3 could be a grouped product as there are 80GB, 120GB and 200GB variations of that same parent product.
  • An External or Affiliate product is one that you list and describe on your website, but is sold elsewhere.
  • A Variable product is a product that has different variations, each of which may have a different SKU, price, stock options etc. For example, a t-shirt available in several different colours and/or sizes.

How to add a product

Adding a simple product is a straightforward process and similar to authoring a standard WordPress post. In the Products menu, click Add Product. You will be presented with a familiar interface and should immediately see where to type the product title and full description.


Product data

Next is the Product Data tab set. This is where the majority of the product data is input. General tab SKU – stock keep unit, used to track products. Must be unique, and should be named so it does not clash with post IDs. Price: Regular Price – Item’s main price. Sale Price – Item’s sale price.


Inventory tab

The inventory tab allows you to manage stock for the product individually and define whether to allow back orders. If stock management is disabled from the settings page, only the ‘stock status’ option will be visible.


Product images
You can add both a main image and a gallery of images.

A grouped product is created in much the same way as a simple product. The only difference is you will select Grouped from the Product Type dropdown in the General product tab details, as shown below:


Upon setting the parent product as Grouped, the price and several other fields will disappear. This is fine because you’ll be adding this information to individual child products. Once you’re finished with the parent product, publish it and come back to the Add New Product page.



If you need additional help with the WooCommerce plugin we recommend to read the WooCommerce documentation files or if there is something unclear - submit a support ticket.

Layout Builder

Ok, you know the theme options, but let's check this theme's party piece: the Touch Layout Builder.
The Touch Layout Builder is a built-in drag and drop layout composer that let's you create different layouts. Below you have the builder elements explained.

Layout builder

This theme includes a very powerful layout builder. You can edit/delete/move your elements how you like via drag-and-drop. Our builder containes a lot of elements and options. Below, it's a description of the most common and general settings and options.

First of all, the layout builder schematics: its built on 12 columns layout. All your content can have 2-12/12 columns. There are rows, columns and elements. Rows - horizontal container blocks. They contain the columns. Rows have options, are draggable (sortable) between them. You can add as many as you can. Every row has the following options:



These settings are individual on each row.

General

Layout builder row settings Layout builder row settings Layout builder row settings

Syles

Layout builder row settings Layout builder row settings Layout builder row settings Layout builder row settings

Please, be carefull when applying these effects. All of them are CSS3 so you'll need a browser that understands CSS3 and HTML5. Plus, if used in excess - they will make your website feel slower as all these animations use a good amount of computer resources. We recommend to use 2-3 per page. Also, it's strongly recommended that you don't use row effects where you already have set effects on elements inside that speficic row.

Layout builder Layout builder

Columns - containers for elements. Their role is to divide your content. You can either add or remove column width with the columns' control buttons. Layout builder


Notice: Below for some elements will be presented an example with how it should look. This is just a variant,for more details on how elements looks please visit our DEMO.

This element shows your logo on the website. You can change the logo that is shown by going to the theme options panel to the "Styles" tab. You can add anywhere in your layout builder the logo you have set in Theme options => Styles => Logo type.

User element

This element add on your website a user icon and in addiction of theme you have different options. You can see the options below:

You have an example below:

Social buttons

This element adds to your page social network buttons, such as: Facebook "Like it!", Google plus on "+1", Twitter share and Pinterest and so on. After you set up the links to your social pages in Theme options the non-empty fields will show with this element.


This option add a simple search bar in the location you chose, so users can use to browse your webpage easier

Menu element

This option gives you pisibility to add your main menu wherever in the page layout and change his text and background color.

You can choose which menu to be displayed with general options:

and you can do a customization for your menu style:

Sidebar

This option allow you to show sidebars on the page. You can select from the default or create your own dynamically.

Also you can see where to add the sidebar by clicking going to sidebar tab in theme options.

Article accordion

With this option you can display selected content with accordion effect.The element allows you to display articles from by categories.You can see the options below:

Grid articles

With this option you can display selected content with a hover efect, the title, meta data of the post. Also, with grid view you can select your title position.You can see the options below:

You have an example below:

List articles

With this option you can shows posts listed one above the other. This view an have only 1 item per row. You can choose to show/hide meta, how many posts to extract, and how to split the content. You can split it 3 ways: 1/3, 1/2, 3/4. This shows how much space will the first part of content have.You can see the options below:

You have an example below:

Thumbnail articles

With this option you can shows posts with the title over and also with meta information.Thumbnail view is best for showcase of portfolio. You can choose to have either 1/2/3/4/6 items per row. You can see the options below:

You have an example below:

Mosaic articles

Mosaic View is quite similar to what is offered by Masonry View. The main difference here is that the image thumbnails are being resized in a way to fill in the content area.You can see the options below:

You have an example below:

Timeline articles

You have an example below:

Big articles

With this option you can shows posts listed one above the other just like list view. Many name it the blog view style. This view an have only 1 item per row. You can choose to show/hide meta, how many posts to extract, and how to split the content. You can split it 3 ways: 1/3, 1/2, 3/4. This shows how much space will the image part of content have. You can see the options below:

You have an example below:

Super posts articles

With this option you can shows posts shows posts with max 2 per line. You can choose how many posts to extract.You can see the options below:

You have an example below:

Category view articles

With this option you can shows different post types by category. You can choose how many posts to extract.You can see the options below:

You have an example below:

Small articles

You have an example below:

List events articles

The purpose of this element is to show a list of events with date, time, description, etc.You can see the options below:

You have an example below:

Team members

These are shown by category. First of all, you add them as a custom post. Do not forget to add each team to a certain category. In the layout builder you list all team members by category. Also, you have the team members per row options and how many of them to show at all. You can see the options below:

You have an example below:

Pricing tables

You can add pricing tables into 1/2/3/4/6 per row, with or without gutter. You can see the options below:


You have an example below:

Slider

With this option you can build different types of sliders using different sources.You can see the options below:


Bellow you see all slider types:

  • Corana

  • Stream Slider

  • bxSlider

  • Slicebox

  • Vertical thumbs

  • Flex

  • Klein

  • Parallax

With this option you can build image galleries with different number of elements per line.You can see the options below:


You have an example below:

Testimonials

If you’re hoping to use your site to share testimonials separate from your blog posts and pages, the Testimonial content type will let you easily manage all your testimonial in one place. It also gives you a number of different ways to display them on your site.You can add them dynamically in your layout builder.You can see the options below:
Please use square images for author image, to get the rounded effect.


You have an example below:

Call to action

A call-to-action (usually abbreviated as CTA) is an image or line of text that prompts your visitors, leads, and customers to take action. It is, quite literally, a "call" to take an "action". Element contains 3 things: a text field, a button link and a button text. If you don't need a button, leave the fields blank.You can see the options below:


You have an example below:

Advertising

Advertising is a visual form of marketing communication that employs an openly sponsored, nonpersonal message to promote or sell a product, service or idea. This element has a textarea where you add your code. Be careful what scripts you include, as we are not responsible for this. You can see the options below:

You have an example below:

Delimiter

This block creates a visual delimiter in the place you selected in layout builder with width equal to number of columns used. You can see the options below:

You have an example below:

Title

With this option you can give name to your content blocks/elements. There are 5 styles of titles available. There is also a posibility that we'll add more later. Choose the style you want. Also, you can choose the size of the title. You have option to use H1-H5. A title description (subtitle) is also available. If left blank, it not show anything. You can see the options below:

You have an example below:

Video

With this element's help you can add a video from youtube or vimeo that will take the width equal to your block columns size and will calculate an auto height.You can see the options below:

Image

This element element gives you the opportunity to upload or to use an image from your media library. If you set a link, it will show an image with link on your website. If you leave the field blank, the image will not have a link. You can see the options below:

Spacer

This element element gives you the opportunity to create an empty block with equal to the columns size you select, and height equal to your choice (in pixels). Used to make spaces between element. You can see the options below:

Button

With this option you can add button on your website. You can select the size, target, link and colors for text and background.You can see the options below:

Contact form

This element adds a contact form on your website. You will recieve the emails sent through it on the mail set in social tab in theme options.

Below you will find some demos of the contact form

This element is mostly used for news/magazine websites. It includes 4 posts (1 big post as you main article and 3 smaller). You can select the layout. You can see the options below:

You have an example below:


Shortcodes

This element element let's you use shortcodes from other plugins. Not all plugins might be compatible so we are not responsible for that. You can see the options below:

You can see a little example in the image below:

Text

This element lets you to add any text in your layout builder. You should get a WordPress editor where you can add any text you want. You can see the options below:

This element is used to add a custom image gallery anywhere in your layout builder. Carousel takes an automatic height and width depending on the number of columns you use. You can see the options below:

You have an example below:

Icon

This element is used to add a icon in your layout builder with color and size that you want. You can see the options below:

Listed features

For this element you can have them with border or without. Also, you can select the align of the icons (left or right).You can see the options below:

You have an example below:

Icon box

These are usually used for showcasing the services or features that you offer/have. Adding one is simple, just like another custom post. You can see the options below:

You have an example below:

Counter

With this element you can add counters on the website. You need to enter the title and the percentage.You can see the options below:

You have an example below:

List Products

If you have the WooCommerce plugin installed on your website, you can showcase products on the website. Here are the options that you have for listing products:


On your website, depending on the options that you have set they should look like this:

Shopping cart

If you have the WooCommerce plugin installed on your website, with this element you can show the shopping cart icon.You can see the options below:

You have an example below:

Clients

With this element you can add clients on the website with 2/3/4/6 columns on the website. You need to enter the titles that will appear on hover or make add a carousel.You can see the options below:

You have an example below:

Facebook like box

This element will show on your page inside a box your facebook page and the people that likes this.You can see the options below:

You have an example below:

Map

This element gives you the option to insert google maps inside you page, here you need to insert the coordinates that you have to show the map. You can see the options below:

You have an example below:

Banner

With this element you can add banner boxed, select the align of the content that they have.,the image and text that you want.You can see the options below:

You have an example below:

Toggle

With this element you can easy to create all different kinds of Toggles for your WordPress site. You can add toggles with a opened/closed state. They have titles and content.
You can see the options below:

You have an example below:

Tabs

With this element you can create different layout of tabs. You can see the options below:

You have an example below:

Breadcrumbs

With this options you can indicate the current page’s location within a navigational hierarchy.You can see the options below:

Ribbon

With this element you can show a ribbon element on your website, you can customize the appearance of the element.You can see the options below:

You have an example below:

Timeline features

With this element you can create a timeline with your features.You can see the options below:

You have an example below:

This element allows to view the list of selected post types in a carousel.You can see the options below:


You have an example below:

Counter down

This element gives you the option to get your visitors attention by direction them to upcoming releases, openings or events. Just add your data, time or both, select one of the available styles and you are ready to go. You can see the options below:


You have an example below:

This element gives you the option to add an powerlink on your page.For this element you can add the title,link and image. You can see the options below:


You have an example below:

Calendar

This element gives you the option to add calendar on your page.Just select one of the available styles and you are ready to go. You can see the options below:


You have an example below:

Alert

With this element you can add an alert section with text and icon. You can see the options below:

Skills

With this element you can add a skill bar or more to your page.You can see the options below:


You have an example below:

Chart line

With this element you can add a chart line. Is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.You can see the options below:


You have an example below:

Chart pie

With this element you can add a chart pie. Is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.You can see the options below:


You have an example below:

Boca slider posts

With this element you can add boca slider posts on your page. You can see the options below:


You have an example below:

Nona slider posts

With this element you can add nona slider posts on your page. You can see the options below:


You have an example below:

Instance

You can see the options below:


You have an example below:

Mosaic images

This element gives you the option to add images in mosaic layout. You can see the options below:


You have an example below:

Import

This element gives you the option to import a element to your page. You can see the options below:

Recipe Slider

This element gives you the option to present the recipes in a great looking slider. You can see the options below:


You have an example below:

Hero Header 1

This element gives you the option to add a block with multiple elements. Block Hero Header 1 is formed from Logo, Menu, Title, Subtitle, Search icon and WooCommerce cart. You can see the options below:


You have an example below:

Hero Header 2

This element gives you the option to add a block with multiple elements. Block Hero Header 2 is formed from Logo, Menu, Title, Search icon, WooCommerce cart and search field in the center. You can see the options below:


You have an example below:

Hero Header 3

This element gives you the option to add a block with multiple elements. Block Hero Header 3 is formed from Logo, Menu, Title, Search icon, WooCommerce cart and search field in the center. You can see the options below:


You have an example below:

Block Header Style 1

This element gives you the option to add a block with multiple elements. Block Header Style 1 is formed from Logo, Socials icons and Right Menu. Social elements are selected in Theme options -> Social. You can see the options below:


You have an example below:

Block Header Style 2

This element gives you the option to add a block with multiple elements. Block Header Style 2 is formed from Logo, Menu and User element. You can see the options below:


You have an example below:

Block Header Sticky

This element gives you the option to add a sticky block with multiple elements. Stinky means that when you scroll down the block is fixed at the top of the page. Block Header Sicky is formed from Logo, Menu and Search icon. You can see the options below:

Latest posts half grey

This element gives you the option to add a block with latest posts. You can see the options below:


You have an example below:


Layout builder demo videos

How to create a homepage

On first install, you will get the blog page only. If you want to use the drag and drop builder and create custom layouts - after creating a new page you'll need to add it to reading options so that WordPress knows what page to show as frontpage. Then set it up in Settings -> Reading as your frontpage like this:

Widgets

A WordPress Widget is a small block that performs a unique function. Widgets can then be added to widget-ready areas of the theme called widget sections. Touchsize themes has some pre-made widget sections and also allows you to create an unlimited amount of custom widget sections. Widgets are a great way to further customize your site. Please see below for different articles that detail widgets in our themes.

  • Comments widget


    The Comments widget is a sidebar tool that displays the most recent comments readers have left on your blog.

    You can see the options below:

    Here’s an example of what it looks like:

  • FACEBOOK LIKE & FEED


    This widget adds a Simple Facebook page Like Widget into your WordPress website Sidebar or Footer area.

    You can see the options below:

    Here’s an example of what it looks like:

  • Flickr Photos


    The Flickr widget allows you to show thumbnails of your latest Flickr photos in your sidebar. Your photos must be viewable by the public for the widget to work on your blog. Be sure to check your Flickr privacy settings before activating this widget.

    You can see the options below:

    Here’s an example of what it looks like:

  • Latest custom posts


    This widget allows you to show the most recent posts. Allows you to display a list of the most recent custom posts with thumbnail, likes,views,post date and number of comments, also you can display it from all or specific or multiple taxonomy, post category and much more.

    You can see the options below:

    Here’s an example of what it looks like:

  • List events


    The purpose of this widget is to to show a list of events with date, time, description, etc. WordPress website Sidebar or Footer area

    You can see the options below:

    Here’s an example of what it looks like:

  • Most liked posts


    This is a customizable widget that displays the most popular posts on your blog, based on the number of likes.

    You can see the options below:

    Here’s an example of what it looks like:

  • Most viewed posts


    This is a customizable widget that displays the most popular posts on your blog, based on the number of views.

    You can see the options below:

    Here’s an example of what it looks like:

  • Instagram widget


    The purpose of this widget is to showcase your latest Instagram pics. It does not require you to provide your login details or sign in via oAuth. You need only your user id and token access code.

    You can see the options below:

    Here’s an example of what it looks like:

  • Latest posts


    This widget allows you to show the most recent posts. Allows you to display a list of the most recent posts with thumbnail, likes,views,post date and number of comments, also you can display it from all or specific or multiple taxonomy, post category and much more.

    You can see the options below:

    Here’s an example of what it looks like:

  • Most popular posts
  • Tabber widget


    This is a customizable widget that displays the most popular,latest or most liked posts on your blog,and you can display it from all or specific or multiple taxonomy, post category and much more.

    You can see the options below:

    Here’s an example of what it looks like:

  • Tags widget


    You canb use the Tags widget to display tags on your page. The tags are then used to filter content. By clicking different tags from the list of tags displayed on the webpage, the user can filter the content on the page.

    You can see the options below:

    Here’s an example of what it looks like:

Recipes

To ease addition of recipes we have created a new custom post that is called . The process is similar as creating standard posts but there are some specific features. You have an example below:

Categories, sidebar and featured image are standard things so we describe below only specific fields:

1. Nutrition data, Cooking time, Recipe difficulty, Number of servings

Here you can add general information about food. Calories are indicated in Nutrition date field and have the numerical value. Cooking time is indicated in minutes and you can choose one of three difficulty levels (Low, Intermediate, Hight). Also you can indicate for how many servings is the recipe.


2. Ingredients

The ingredients are added using the Enter key. Write ingredient and hit Enter.


A nice feature is that, with a click, you can choose your ingredients that you already have and that need to be procured.

3. Directions

To add steps preparation we created two new shortcodes: start direction and end directions.
Firstly in post content you must specify the start direction. For this add Start direction shortcode:


The preparation steps will be add in a numbered list. The procedure is simple, open the list and add each step through the Enter key.Then when you're done, close the list.


And now we have to close the direction. For this you must add End direction shorcode:


Like for ingredients you can select the steps that you've already made.


4. Gallery&Video files

For the convenience of the visitors can add images and video.

The process of adding is standard, just select the files needed and for viewing click on the icons.

Voila ! Nothing easier.


All fields for adding form that we talked about above, can be manipulated by the user. Find more details in section Frontend forms . Also if something was not understood, you can find a video on how to add a recipe in video tutorials section.

Shortcodes

Shortcodes are a very effective way to add styled content to your site with little effort. To use shortcodes in WordPress, just put your content between the tags of the specific shortcode, that you want to use. Our shortcodes is a part of plugin "TouchCodes" that you get together with the theme.

Shortcodes are the same elements from layout builder which you can use in post content.For more details about features and functionality please visit elements section.

Keep in mind that all these shortcodes are built-in with our themes. So in case you change your WordPress theme to another theme, the shortcodes won’t work any longer and you might have to modify your content to get rid of the shortcode tags.

FAQ

I have imported the dummy data, but it does not look 100% the same

The dummy data import option from the Import/Export tab of the theme options is not an exact copy of the theme demo mostly because the ID's of the categories, images that were selected demos might not be the same with the ones that will be created on your demo. Also, some of the images and videos are not allowed to be redistributed or haven't been imported at all by the importer.

Every time we do an update and include new features or new elements we'll include the new import data in the theme so you can see it. Any pages, elements, or other data that was not imported can be re-created. Please write on our help desk if you need help with that.

The theme does not install

Usually this issue appears when you are not uploading the right archive to your server. From your downloads on ThemeForest select the "Installable WordPress file only" link which is the zip that you need to upload.

If you need help with that, we have described this in the documentation above, you can find some information by clicking in the menus. If that does not help, please submit a ticket on our help desk.

The theme does not install, stylesheet missing error

Usually this issue appears when you are not uploading the right archive to your server. From your downloads on ThemeForest select the "Installable WordPress file only" link which is the zip that you need to upload.

If you need help with that, we have described this in the documentation above, you can find some information by clicking in the menus. If that does not help, please submit a ticket on our help desk.

How do I edit my header and footer?

The global header and footer can be changed by going to their respective tabs in the theme options panel. You can see a screenshot of that below:

The header and footer elements you set here will be used everywhere on the website. If you decide that you need a custom header for one of your pages like let's say, for your homepage you can just disable it from the page settings. You have a screenshot attached below:

Can't find the import data

If you are looking for the import data (or the XML import file), you'll need to make sure you downloaded all the files from ThemeForest.
So, when you go to the Downloads area of your ThemeForest account, make sure you click the all files button. Check the screenshot below:

After you download all files, unzip the archive and you'll find the Import data folder there. You can import the data from there.

Thank you!

Once again, thank you so much for purchasing this theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do my best to assist. Please, use the support desk to ask for assistance because you'll get a quicker response. Don't forget to check the knowledgebase first!