# Utouch WordPress theme

- created: 09/15/2017
- by: Crumina
- crumina.net/
- email: info@crumina.net

This is a basic documentation that includes tutorials on installation and main theme options of the Utouch WordPress theme. A details online documentation is located by this link.

### Theme installation and demo data import

Once you purchased the theme, begin installation process:

- download theme package;
- unzip it;
- open THEME IN THAT FOLDER! directory and find installable utouch.zip archive in it.
- Log in your site with freshly installed WordPress and:

1. go to Appearance>Themes;
2. On the next page, click the Add New button and then Upload Theme;
3. Choose utouch.zip and press the Install Now button;
4. Activate the theme.

Upon theme installation and activation you are redirected to the Auto Setup page. You are offered three options:

It is recommended to choose between 'Plugins & Demo Content' or 'Plugins Only' options.

Let's review complete demo setup. Click on the 'Plugins & Demo Content' button below it and wait a few moments until installation process is finished.

When installation process is finished, you're automatically redirected to the 'Demo Content Install' section. Click on the 'Install' button and wait a few moments.

By the end of the demo import process, you're automatically redirected to the home page.

### Theme options panel location

Theme options panel lets you control general settings across the site. You can reach it via Appearance>Customize menu in the backend editor or by clicking on the 'Customize' link on the top black admin bar in the frontend. Options are divided by meaning and are represented by several tabs. Let's take a closer look at them.

- Site Identity
- Menus
- Widgets
- Static Front Page
- Typography
- Header Options
- Design Customize
- Stunning Header
- Footer options
- Blog options
- Event options
- Additional JS
- Additional CSS

### Static front page

If you need to set/change home page on your site, go to Customize > 'Static front page' tab. There are two options:

1. Your latest posts - if you choose this option there will be displayed an automatically generated page with the list of your posts.
2. A static page - this option lets you set any of the existing pages as a homepage. Simply activate 'A static page' option and select any page from the 'Front page' dropdown list.

Once you have activated 'A static page' option you can see another dropdown list called 'Posts page'. This option is required to enable posts page in default WordPress themes. In Utouch it is not required. So you can leave this field empty.

Once you are ready, hit the 'Save & Publish' button.

### Favicon and site title

In order to set favicon and site title go to Customize > 'Site Identity' tab. Fill in Site title and Tagline fields and upload favicon by clicking on the 'Select Image' button.

Once you are ready, hit the 'Save & Publish' button.

### Header options

Under Header options tab you can adjust the settings for:

- Top Bar
- Design
- Sticky Header
- Logotype
- Search

## Top Bar

Top bar is activated by switching toggle to ' Show'. Below will appear all options available for the top bar:

- Color scheme - select Dark or White color of your top bar background
- Languages selector - you can display language switcher in the top bar. NOTE: this options works only if you have installed some multilingual plugin like WPML or Polylang
- Text fields - add your contact info like phone number, address or other info. Relevant icons will appear automatically.
- Social networks - set up the icons of social networks with links to profile. The icons can be the color of the text or colored.

##
Design

- Top decorative line - colored line on the top of the header
- Background Color - select needed background color for your header
- Text Color - set the font color for your site menu and title
- Menu decoration style - select one of three decoration styles for your menu

##

##

## Sticky Header

You can show/hide sticky header on scroll:

When sticky header is activated you can also set the animation when it appears/hides on scroll or turn it off.

## Logotype

Logotype options are as follows:

- Logotype image
- Logo in Retina? - if enabled, your logo will display twice smaller than the original size.
- Logotype text
- Logotype description.

## Search

Search options are as follows:

- Show search icon? - enable or disable search in header of your site.
- Select search style - select style of the search window when expanded.
- Color scheme - select white or dark color scheme for search window

### Stunning header

Stunning header is an area between page header and content. It contains page title, subtitle, breadcrumbs.

### Stunning header customization

There are three tabs under Stunning Header section.

## General

- Show stunning header? - By default stunning header is turned on. If you want to hide it switch the toggle to 'Hide'.
- Custom stunning header height (in px) - here you set the stunning header height.
- Select section style - choose one of 6 predefined stunning header layout

## Design

- Text Color
- Category color

### Design customize

You can control primary and secondary colors of the theme in Customize>Design Customize section.

The elements that Main accent color and Secondary accent color are buttons, icons, hover elements, title delimiter and some other KC shortcodes.

NOTE: KC shortcodes won't apply settings from 'Design customize' section, if they have colors other than primary or secondary. In this case, you should edit the shortcode and choose custom color from its 'Styling' tab.

### Menus

To create a menu follow the next steps:

- Click on the 'Add a Menu' button, type name of your menu and hit the 'Create Menu' button.
- Begin adding menu items by clicking on the 'Add items' button.
- Choose items among available page types from the popped out right panel.
- Once the items are added, you can reorder them and create submenus with simple drag-ad-drop function.
- When your menu is ready, hit the 'Save & Publish' button.

### You can learn about extended Menu options by this link.

### Widgets

Under Widgets tab you can organize footer and sidebar area using given widgets.

1. For this select the area (sidebar) you want to customize
   NOTE: Sidebars are added under Dashboard Appearance>Widgets
2. Here you can add new or customize already added widgets.
3. Click Add a widget button, select needed widget from the appeared panel:
4. Fill in required options inside a widget
5. Hit Save&Publish button

### Typography

Under Customize>Typography you can set up the styles for

- Body font
- H1 - H6 headings
- Menu font

Select what type of content you want to customize and set up:

- Font face
- Style
- Weight
- Size
- Spacing
- Color

### Event options

Under Customize>Event options you will find global settings for single event items.

They are as follows:

1. Tab labels - you can change default tabs labels to your custom ones.
2. Show share? - lets you show social share buttons at the bottom of the event item page.
3. Navigation - you can choose between Previous/Next buttons or Related Events block, or disable navigation at all.
4. Primary event page - you can choose a page, that will be linked to the middle button if you choose navigation type Previous/Next buttons.

### Footer options

Footer options are located under Customize > 'Footer options' tab.

They control look and feel of the footer section of the theme and are divided into 4 subtabs:

1. Design
2. Widget section
3. Copyright field
4. Scroll Top button

### Design

Design tab provides styling options of the footer section. Here you can configure:

- Text color
- Titles and Links Color - color of widgets titles and links
- Background image - you can choose one of the predefined patterns or upload a custom image.
- Expand background - this option lets you stretch the image across the whole footer section. It is required if the uploaded image is smaller than the footer section, but you don't want it to get repeated.
- Fixed footer effect - makes the footer fixed.
- Background color - if you disable background image, background color will be displayed instead.

### Widgets section

Under 'Widgets section' tab you can adjust settings of the text block, that is displayed on the image below.

The provided options are as follows:

- Show text block - you can enable or disable text block.
- Edit text block content - click on this button to open Text Block editor. Here you can enter title and text, that will be displayed in the text block.
- Text block width - you can control the width of the text block. The width is measured in grid columns.

### Copyright field

Copyright field options let you control style of the copyright section. You can adjust:

- Copyright text - enter custom text to the copyright section
- Background color
- Text color.

###
Scroll Top Button

The scroll-to-top button can be customized under Customize > Footer options > 'Scroll Top Button' tab.

There are only 2 options:

- enable/disable the scroll-to-top button;
- make the button fixed.

When you are ready, hit the 'Save & Publish' button.

### Adding widgets to footer section

Beside all above mentioned features, you can add other widgets to the footer area. Widgets can be added via Appearance>Widgets>Footer widget area section.

### Blog options

Blog options control the look of your archive blog pages and single posts.

## Archive / Category options

- Show featured media? - select show or hide post cover image on the blog page
- Show author? - show or hide author name and avatar from a post info
- Show post meta? - show or hide post date, tags, category, comments number
- Show share post buttons? - show the sharing icon that opens share buttons on hover

##
Single Post options

- Show featured media? - select show or hide post cover image on the top of the post before content
- Show author? - show or hide author name and avatar from a post info
- Show post meta? - show or hide post date, tags, category, comments number
- Show share post buttons?

### Additional JS

Put additional JavaSript codes into the field.

NOTE: scripts are added without tag <script>

### Additional CSS

Add your custom CSS codes below the field description or just remove the text:

NOTE, if one of the codes is not correct, the other following codes will not apply.

If you make a mistake in a code you will see the notice on the top, like this: