---

Thank you for purchasing my theme.
If you have any questions that are beyond the scope of this help file, please feel free to email via the contact form on my profile page, or get support through this theme's comments board on ThemeForest.

Installation

To install the TransVision theme you must have a working version of WordPress already installed.

This theme is installed just like any other WordPress theme, either by uploading the main theme folder via FTP (unzipped) or the zipped file via the Wordpress theme upload section.

Uploading The Theme - Sec 1

There are two ways you can install the theme.

a. WordPress Method

• Log in to your WordPress admin area and browse to Appearance > Themes
• Click Add New
• Click Upload Theme
• Navigate to find the transvision.zip file on your computer and click Install Now button
• Once WordPress has unpacked and installed the theme, just click the Activate link

b. FTP Method

• Log in to your site via FTP and browse to your folder located at wp-content/themes
• Unzip the transvision.zip file and upload only the extracted transvision folder to your server
• Log in to your WordPress admin area and browse to Appearance > Themes
• Find the TransVision and click the Activate button

If you are new to WordPress and have problems installing the theme, you might want to check out these links:

• Common WordPress Installation Issues
• Adding New Themes

Required Plugins - Sec 1

After you have finished installing the theme you will get a notification to install the required plugins. Please install all required and recommended plugins before using the theme.

• Click Begin installing plugins.
• Check boxes to select all the plugins you want to install, select the Install bulk action from the dropdown list and then click the Apply button.
• Installation can take a while depending on your host. You should see a success confirmation for each plugin as it is installed. After you have installed all the plugins, click Return to Required Plugins Installer.
• Select the plugins you installed, and apply the Activate bulk action.
• You should then see a confirmation notice that you plugins were activated successfully.

The information on plugins required/recommended for TransVision WordPress theme can be found here. This page also provides download links that you can use to download and install the plugins manually.

---

Sample Data - top

For some people importing the sample data can be helpful to see how the theme works as well as speed up the development of their own or their client's website by simply replacing the content and images with their own. It will allow you to quickly edit everything instead of creating content from scratch.

TransVision provides demo content that works with the native WordPress import/export function. You will get much the same content as the demo site has. NOTE: All images in the demo content, except those that are in public domain, are replaced with placeholders.

Predefined Demo Import - Sec 2

1. Please check that you have an active Internet connection.
2. Make sure to install and activate all required plugins before importing sample data.
3. Make sure to install and activate the required One Click Demo Import plugin using the link in the notification you get on theme activation (see the Required Plugins section above).
4. Browse to Appearance > Import Demo Data to begin the import process.
5. Click on the Import button only once and wait, it can take a couple of minutes.

Manual Demo Import - Sec 2

Alternatively you can import the sample data manually – browse to Appearance > Import Demo Data and click on the Switch to manual import link.

The following 3 types of import files are used for setting up the demo in the TransVision WordPress theme:

• Content import – a normal WordPress content export file (XML format)
• Widgets import – created using the Widget Importer & Exporter plugin (WIE format)
• Options import – created in the built-in Redux Framework (JSON format)

The sample data files are located in the sample-data folder:

• transvision-wp-1.0-demo-content.xml
• transvision-wp-1.0-demo-widgets.wie
• transvision-wp-1.0-demo-options.json

These are the files that are included in the Predefined Demo Import.

Importing the Demo Options

On the screenshot below, you can see how to upload custom options data.
NOTE: This will overwrite all existing option values.

Re-importing the Demo Widgets

If you switch from TransVision (after you have the demo widgets imported) to a different theme and then switch back to TransVision, some widgets are moved to "Inactive Widgets" area or even can be lost. Unfortunately, this is normal behavior for Wordpress. In this case, you can easily place all demo widgets back to their sidebar areas by re-importing the demo widgets:

1. Under "Choose a WIE or JSON file for widget import", find and choose the transvision-wp-1.0-demo-widgets.wie file in the sample-data folder.
2. Click Import Demo Data.
3. Then you can click the Clear Inactive Widgets button at the bottom of "Inactive Widgets" area.

Post-Import Steps - Sec 2

Just make sure all necessary settings are configured.

A. Appearance > Menus > Manage Locations – the following menus should be set:

• "Main Menu" for Header Navigation
• "Header Quick Links" for Header Top Links
• "Bottom Links" for Footer Bottom Links

B. Settings > Reading – the following settings should be applied.

Also on this screen, you can optionally set Blog pages show at most to "6" (it is preferable for the "Grid" blog style).

C. Settings > Permalinks – one of the "common" structures should be selected – Day and name or Post name, for example.

How to reinstall the demo

In some cases, you may need to reinstall (re-import) the demo. This will require making your WordPress installation fresh (empty) with no custom content.

Using the Advanced WordPress Reset plugin can be a solution. It will reset your WordPress Database back to its first original status in order to make a fresh installation without going through WordPress traditional installation.

Please do the following steps to reinstall the demo:

1. Go to Media > Library and delete all images from the Media Library.
2. Install and activate the Advanced WordPress Reset plugin:
   • Go to Plugins > Add New
   • Under Search plugins…, type in the name of the WordPress Plugin – Advanced WordPress Reset
   • Find the plugin and click Install Now
   • Activate it by clicking the Activate button
3. Go to Tools > Advanced WP Reset, type "reset" in the confirmation field and click the Reset database button. After the process is completed, scroll to the end of page and repeat the action – type "reset" and click Reset database. You will be redirected to the login page.
4. Log in with your username and password.
5. Activate the TransVision theme, then click Begin activating plugins to acivate all required and recommended plugins.
6. Repeat the Predefined Demo Import process.
7. Go to Settings > Permalinks and set one of the "common" structures – Day and name or Post name, for example.

---

General Settings - top

In this section you can find the information on the following general settings:

1. Navigation
2. Homepage Setup
3. Blog Page Setup

Navigation - Sec 3

The TransVision theme supports three menu locations:

• Header Navigation – is used for the main menu in the header.
• Header Top Links – is used for the "quick links" at the top of the header (available on pages with Page Header Layout set to "Extended Header").
• Footer Bottom Links – is used for the secondary links in the footer bottom bar (small size letters).

NOTE: For a custom menu assigned to the Header Top Links or Footer Bottom Links locations, only the first level of the hierarchy is included.

Create a Menu

1. Go to Appearance > Menus.
2. Click the create a new menu link, give the menu a name, and click Save Menu button.
3. Choose items like Pages, Posts, Custom Links, or Categories, from the left column, and Add to Menu.
   • By default, WordPress only shows the basic items for usage with menus. However, you can enable more sections like Services, Works, Work Categories, Staff Profiles – look under the Screen Options panel to make sure they are checked to be Show on screen.
   • You can easily create a non-clickable menu item in your custom menu by adding a custom link with "URL" parameter set to #.
4. After items have been added to a menu, drag and drop to put them in the order you want. To create a dropdown menu, drag a menu item below and slightly to the right of another menu item – it will lock into place and create a dropdown section.
5. Scroll down to the bottom of the page to assign the menu to one of the 3 locations in the Display location box. Only one menu can be assigned to each location.
6. When you have finished building your custom menu, make sure you click the Save Menu button.

Contact Button

Add the "button-item" class name in the CSS Classes box for the top level item you want to use as the contact button.

NOTE: If you don't see CSS Classes, then under Screen Options make sure the corresponding box is checked.

The following links might be useful if you need more detailed information on the subject:

• WordPress Menu User Guide
• Appearance Menus Screen

Mega Menu

You can easily create a simple mega menu with multiple columns by adding necessary classes to your parent menu item and menu section items:

1. Add the "sf-mega-parent" class name in the CSS Classes box for the parent item you want to have a mega menu dropdown on.
2. Add the "sf-mega-section" class name in the CSS Classes box for each item you want to use as the heading for its nested items (submenu section). By default, the width of section in mega menu is set to 120 pixels (layout.css). You can change the width of a particular section by adding a certain class from the range of available classes: "width-50px", "width-60px"… "width-700px".

By adding the "title-merged" extra class to a "sf-mega-section" menu item you can merge its heading underline with the heading underline of the previous item.

Subheader Secondary Navigation

You can set up a secondary menu which is to be displayed in the subheader bar – under the page header image (if "Hero Image" is selected) or under the page title (if "Gradient Background" is selected).

The demo examples of subheader secondary menu:

• Leadership Development – Hero Image in the page header
• Team member profile – Gradient Background in the page header

To set up custom subheader menu on a specific page do the following:

• Create a one-level menu using the guide above, but don't assign this menu to any location.
• Open a page for which you want to set the custom menu you have created.
• In the Page Header Content meta box, select "Secondary Menu" for the Type of Content parameter (Subheader Bar section).
• Select the menu from the dropdown list for the Secondary Menu parameter.
• Click the Update button to save the page.

Custom subheader menu is available for Pages, Services, Works, and Staff Profiles.

Homepage Setup - Sec 3

The Front page displays setting allows you to choose what content appears on your site's front page. You can choose to have your latest blog posts or a static page that you have created in the Pages section of your site.

Once you have created a page that you would like to use as your homepage, follow these steps:

• Go to Settings > Reading
• Choose A static page option for Front page displays
• Next to Front Page, select the page you created to be used as the homepage
• Click Save Changes

The homepage in TransVision is supposed to be created by using the homepage template.

Blog Page Setup - Sec 3

There are three cases of how your blog posts can be displayed depending on the Front page displays configuration in Settings > Reading.

Case 1

Your latest posts option is chosen for Front page displays.

In this case the blog posts are displayed on your site's front page (homepage) according to blog options in Theme Options > Blog.

Case 2 (recommended)

A static page option is chosen for Front page displays. The Posts Page parameter is set to the page you would like to use as your blog page.

In this case your Posts Page with blog posts is displayed according to blog options in Theme Options > Blog.

The page layout (full-width or with sidebar) of your blog page is defined by Page Layout parameter in the Page Settings meta box.

Case 3

A static page option is chosen for Front page displays. The Posts Page parameter is set to the page you would like to use as your blog page. The Blog Posts widget (element) is added via Page Builder on the page for which the blog page is parent.

In this case your blog page is displayed:

• according to parameters you set in the Blog Posts widget,
• according to blog options in Theme Options > Blog.

The page layout of your blog page is defined by Page Layout parameter in the Page Settings meta box.

---

Theme Options - top

TransVision comes with plenty of customizing and styling options. When you need to set up or customize some part of the theme (background, header, portfolio, typography, etc.), just go to Theme Options in your Wordpress admin menu. These options are global and affect either all pages or certain sections of your site.

1. General
2. Styling
3. Typography
4. Header
5. Footer
6. Forms

7. Social Sharing

General - Sec 4

• Default Page Layout.
• Options to show the primary menu on mobile devices.
• Options to show the secondary menu on mobile devices.
• The default slogan text for the "Bottom Stripe" section.
• Google Maps API Key.
• Google Maps Configuration: up to 3 different maps that can be used in the Google Maps element.

Page Layout

There are 2 types of page content layout you can use in the TransVision theme:

See the examples on the following pages:

• About Me – full-width
• FAQs – with sidebar

Slogan text in the "Bottom Stripe" section

Here you can specify the default slogan text to be displayed in the "Bottom Stripe" section.

Authentication for Google Maps

Usage of the Google Maps APIs now requires a key. Starting on June 11, 2018, you'll need a valid API key and a billing account to access the Google Maps. Once billing is enabled, all users will get access to $200/month of free monthly usage in credits to use for Maps, Routes and Places products (and you can set usage limits to protect against unexpected increases). For JavaScript Dynamic Maps API and Geocoding API which are used in the theme, the free monthly limits are 28,000 loads and 40,000 calls respectively.

Getting an API key is really fast and simple:

1. Visit Google Maps APIs.
2. Click Get a Key and sign in using your Google Account username and password.
3. Create or select a project.
4. Click Continue to enable the API and any related services.
5. On the Credentials page, get a Browser key (and set the API Credentials).

In the Google API Console, you can also look up an existing key or view a list of enabled APIs.

If you run a local web server on your desktop, such as WampServer, XAMPP, or IIS and you want to test Google Maps on your local web server, you will need to get a separate key for your localhost with localhost/* HTTP referrer added.

Now all you need to do is to set the parameter in Google Maps API Key.

Styling - Sec 4

The theme's color scheme consists of 3 components:

1. Primary color – 8 predefined colors:
   • Sky Blue
   • Sea Green
   • Red
   • Green Yellow
   • Blue Grey
   • Violet Red
   • Green
   • Blue
2. Secondary color – 3 predefined colors:
   • Orange
   • Yellow
   • Light Blue
3. Extra color – 2 predefined colors:
   • Red
   • Yellow

You can either use one of 9 picked color schemes or pick your own color scheme. The default one is Sky Blue + Orange + Red.

Also, this section of the Options allows you to:

• customize default colors in the selected/picked color scheme,
• apply custom CSS to the theme for some quick CSS changes,
• change the image that is used as background in "Default Background Image" stripe section.

Typography - Sec 4

The following theme fonts can be configured:

• Main body font
  (Nunito, font-size 21px is default).
• The font for the page title
  (Oswald, font-weight 500, font-size 56px is default).
• The font for H2 heading
  (Oswald, font-weight 400, font-size 45px is default).
• The font for H3-H5 headings
  (Oswald, font-weight 500 is default).
• The font for H6 heading
  (Nunito, font-weight 700, font-size 19px is default).

About Character Sets

The basic font typeface imported from the Google Fonts repository is "Latin". If the language (or languages) you expect to be used on your website has the symbols that are not included in default "Latin" character set, you need to extend it by setting an additional character set. This can be done be choosing the required character set from the list of sets the selected font supports.

The default fonts used in TransVision support the following character sets:

"Nunito"

• Latin
• Latin Extended
• Vietnamese

"Oswald"

• Latin
• Latin Extended
• Cyrillic
• Vietnamese

Header - Sec 4

• Image for your site logo.
• Optional high-DPI image for your site logo.
• Default page Header Layout.
• Default page Header Style.
• Page Header Height.
• Fixed Header Menu – option to stick the main menu to the top of your browser window as you scroll down a page.

Header Layout

There are 2 types of page header layout you can use in the theme:

• Extended – see Home Page 3 or Services, for example.
• Standard – see About Me, for example.

Additional elements that can be displayed in the header on pages with Header Layout set to "Extended Header":

• Extra info (phone number)
• Header top links (secondary menu)

Header Style

You can choose either Dark or Light for the page header style.

• Dark – theme's default style for page header.
• Light – see 3 Key Factors to Increase Your Coaching Rates or 5 Easy, Practical Tools to Get Your Clients Unstuck, as examples.

Footer - Sec 4

• Default page Footer Layout.
• Contact details.
• Social icons – configure up to 6 social icons to be displayed in the footer.
• Elements to display in the footer bottom bar.
• Your custom copyright text.
• "Scroll to Top" link: show or not.

There are 2 types of footer layout available in the theme – with Contact Details at the right or left side.

Footer Style 1

The default style. Contact Details at the right side + 3-column (or 2-column) Footer Menu. For example:

• Home Page 1
• Work With Me

Footer Style 2

Contact Details at the left side + one-column Footer Menu + recent posts or text. See the demo examples:

• Home Page 2
• Home Page 3
• FAQs
• Blog

Each footer column has its corresponding widget area. For example, widgets added to "Footer – Column 2" widget area are displayed in the second column. You can add widgets to footer widget areas via Appearance > Widgets.

Forms - Sec 4

Subscription Form

In the TransVision theme, the email subscription form can be displayed in 4 different page areas:

1. Homepage Popup Form

On the homepage created by using the homepage template, you can optionally set up a subscription form to be opened in a popup window on button click.

How to set up the subscription form in the Homepage Header Content meta box:

2. Form in the bottom stripe

How to set up the subscription form in the Bottom Stripe meta box:

3. Sidebar widget form

Adding the Subscription Form widget to Blog Sidebar, Pages Sidebar, Services Sidebar, Works Sidebar, or Staff Sidebar widget areas:

4. Form in the subheader bar

How to set up the subscription form in the Page Header Content meta box:

See the examples on the following pages:

• Home Page 1 – popup form + form in the bottom stripe
• Home Page 2 – subheader form + form in the bottom stripe
• Blog: Grid Layout + Sidebar – sidebar widget + form in the bottom stripe

MailChimp Subscription Form

Besides the built-in subscription form, you can use a 3rd party plugin – MailChimp for WordPress. This plugin helps you add more subscribers to your MailChimp lists.

• Install the plugin and set your MailChimp API key in the plugin settings.
• Go to MailChimp for WP > Form > Fields. If you want your subscription form to look like the theme's built-in form, enter the following HTML in the editor:

				
<fieldset class="subscription-fields-wrapper clearfix">
	<div class="field-subscriber-name">
		<input type="text" name="NAME" placeholder="Name *" required>
	</div>
	<div class="field-subscriber-email">
		<input type="email" name="EMAIL" placeholder="Email *" required>
	</div>
  	<div class="field-submit">
		<input type="submit" value="Sign Up" class="button-std">
	</div>
</fieldset>
				
			

• You can optionally enable double opt-in – a method where your subscriber will receive a confirmation email for your list. Most bots will not be able to get through to your list when this option is set to "yes".
• Click the Save Changes button.

Go to Theme Options > Forms to choose which of the built-in subscription forms you want to integrate with your MailChimp lists:

Contact Form

The built-in contact form can be added to a page using the Page Builder – see Contact Form widget (element).

See the demo examples:

• Contact Page 1
• Contact Page 2

Contact Form 7

Besides the built-in contact form, you can use a 3rd party plugin. The TransVision theme includes the CSS styles for popular Contact Form 7 plugin.

• After the plugin is installed and activated, open the default form to edit its content.
• If you want your contact form to look like the theme's built-in contact form, enter the following HTML in the editor:

				
<label>Name <span class="required">*</span>
	[text* author-name maxlength:200]</label>

<label>Email <span class="required">*</span>
	[email* author-email maxlength:100]</label>

<label>Phone number <span class="required">*</span>
	[text* author-phone maxlength:100]</label>

<label>What are you interested in?
	[select subject include_blank "General Enquiry" "Complimentary Session" "Individual Coaching"]</label>

<label>Message <span class="required">*</span>
	[textarea* message maxlength:5000 x4]</label>

[submit "Send"]
				
			

You may wish to allow users to submit your contact form only if they accept certain terms. In such cases, a form tag acceptance will be useful. Just insert an acceptance tag into your form like this:

				
...

<label>Message <span class="required">*</span>
	[textarea* message maxlength:5000 x4]</label>

[acceptance agree] <label class="acceptance">I agree with the <a href="#" target="_blank"><em>data protection policy</em></a> of this site. <span class="required">*</span></label>

[submit "Send"]
				
			

To display a Contact Form 7 on a page, add the Text Block widget (element) via the Page Builder with the shortcode looking something like this:
[contact-form-7 id="347" title="Contact form 1"] (you can find your shortcode above the form editor).

Services - Sec 4

Here you can set up options for Services:

• Main Services Page.
• Options for "service" category archives.
• Options for single "service" post.

Works - Sec 4

Here you can set up options for Works:

• Main Works Page.
• Options for "work" category archives.
• Options for single "work" post.

Blog - Sec 4

Here you can set up options for blog posts:

• Default Blog Style.
• Other options for blog posts (previews).
• Options for single post page.

Staff - Sec 4

Here you can set up options for Staff:

• Main Staff Page.
• Options for "staff" category archives.
• Options for single staff profile.

Social Sharing - Sec 4

• Share Buttons in Blog Posts: show or not.
• Social networks you want to include in the social sharing action.

Twitter API Details

The Twitter Feed widget uses the API v1.1 authentication required by Twitter for all Twitter feed requests. Follow the instructions below to set up your authentication:

1. Visit Twitter Apps and sign in using your Twitter username and password. This doesn't have to be the username or password of the stream you need access to, just a Twitter account you control.
2. Click Create New App and enter the Application Details:
   • The name and description can be anything you like really, but you can’t use "Twitter" in the name.
   • The website field can be your main website and doesn’t have to be the site where your Twitter feed or feeds are located.
   • Callback URL can be left blank.
3. Click Create your Twitter application button.
4. After creating your Twitter Application click on the tab that says Keys and Access Tokens, then you have to give access to your Twitter Account to use this Application. To do this, click the Create my access token button.
5. Make a note of the Consumer Key, Consumer Secret, Access Token and Access Token Secret.

Once you have an app setup within Twitter, this can be used for multiple user timelines on multiple websites – you do not need to set up one app per Twitter account or user timeline.

Now all you need to do is to set the parameters in Twitter API Details.

NOTE: Remember to set the permissions of the wp-content/plugins/twitter-feed-oauth/cache folder to 755 so that the Twitter Feed cache files can be saved, otherwise your Twitter Feeds won't work.

---

Custom Styles in the Visual Editor - top

The theme has some additional styles enabled in post editor:

1. List Types
2. Styles
3. Dividers

This allows you to easily insert specific elements and apply the theme's custom styles directly in a WordPress editor via toolbar in Visual view – either in Post Editing Area or in the Page Builder (using the Text Block and Info Box elements).

List Types - Sec 5

The styles in the List Types dropdown menu should be applied to a standard unordered (bulleted) list (created beforehand).

• Check, Check small, Arrow, Dot – unordered lists with custom item markers.
• Disc (default bulleted list) – standard unordered list with "disc" item markers.
• Unstyled default list – extra class that removes item markers in standard unordered (bulleted) list.

• Custom counter (numbered list) – should be applied to a standard numbered list.

How to apply a List Type

• Create a standard unordered list.
• Place the cursor somewhere within the list.
• Click the List Types button and select the desired type in the dropdown menu.

You can view the examples of custom styled lists on Typography page.

Styles - Sec 5

The styles in the Styles dropdown menu are mostly the names of custom CSS classes used in the theme.

a. Applied to block

These styles can be applied to the following blocks:

• lead-text-extra-large – p, div
• lead-text-large – p, div, h2, h3
• lead-text-medium – p, div
• text-small – p, div, ul, ol, table
• text-extra-small – p, div
• width-60%-centered, width-70%-centered, width-80%-centered – p, div, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, pre
• underline-small – h2, h3, h4, h5, h6
• "margin-bottom" styles – p, div, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, pre
• indent-small, indent-medium, indent-large – p, div, ul, ol, h1, h2, h3, h4, h5, h6
• text-blockquote – p, div
• Read-more-link, Read-more-link-small, pdf-file, word-file, excel-file – a
• "link style" – .read-more-link (Read-more-link)
• "link style" – .read-more-link-small (Read-more-link-small)
• Button, phone-number – a
• "button size", "button style" – .button-std (Button)

How to apply a style to block

• Place the cursor somewhere within a block.
• Click the Styles button and select the desired style in the dropdown menu.

How to create a button

1. First create a link and place the cursor inside a link.
   
   
2. Open the Styles dropdown menu and click Button.
   
   
3. Optionally, you can set different:
   • button size
   • button style
   
   
   
   • If you want to make the button label uppercase, select the text of label and set TEXT-UPPERCASE in the Styles dropdown menu
   

b. Applied to selected text

These styles can be applied to selected text within the following elements:

• color styles: text-black... text-secondary-color-light – p, div, ul, ol, h1, h2, h3, h4, h5, h6, a, strong
• text-underline – p, div, ul, ol, a, strong
• text-uppercase – p, div, ul, ol, h1, h2, h3, h4, h5, h6, a, strong
• font-weight-normal, font-weight-semibold, font-weight-light – p, div, ul, ol, h1, h2, h3, h4, h5, h6, a
• cite (in blockquote) – blockquote
• highlight – p, div, ul, ol
• highlight-dashline – p, div, ul, ol

How to apply a style to selected text

• Select a text inside a block.
• Click the Styles button and select the desired style in the dropdown menu.

You can view the examples of the custom styles and elements described above on Typography page.

Dividers - Sec 5

Dividers help users understand how content is organized by establishing a rhythm and hierarchy on a page. TransVision includes a wide range of horizontal divider lines – see the examples on Typography page.

Using the Dividers dropdown menu you can insert a new divider or edit an existing one.

How to insert a new divider

• Place the cursor in the position where you want to insert a divider line.
• Click the Divider button and select the desired type of divider in the dropdown menu.
• The divider will be then added to your post content in the Visual Editor.

How to edit divider

• Click on the divider you want to edit so that the Divider button is active.
• Click the Divider button to open the dropdown menu – you should then see the highlighted menu item (like on the picture above).
• Select another type of divider from the list.
• The style of divider will be then changed in the Visual Editor.
• NOTE: If you click on the highlighted menu item, then the divider will be removed from your post content in the Visual Editor.

You can also add one of margin-bottom... classes to a divider:

• Click on the divider line so that the Divider button is active.
• Apply a certain "margin-bottom..." class from the Styles dropdown menu.

Creating Posts - top

The TransVision theme, of course, also includes support for a blog via the blog posts. All you need to do is add your posts and set up your blog page. However, there are extra options that might need explanation.

1. Featured Image
2. Post Formats
3. Single Blog Post Settings
4. Post Excerpt

There are 2 ways you can create a post content:

• Using the standard WordPress editor.
• Using Page Builder.

Featured Image - Sec 6

While the theme can function without featured images, it is recommended to add a featured image to each post.

For setting the featured image, use standard WordPress method.

   

A post's featured image is not only displayed on a single post page, but is used as preview image on blog page, archive pages (category, tag, date, author), and also on search results pages and in the Featured Article widget.

Post Formats - Sec 6

Post Formats is a theme feature introduced with WordPress version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. You can change how each post looks by choosing a Post Format from a radio-button list.

The theme supports the following post formats:

Standard

This format functions just as you would expect from any other typical post. An image set in the "Featured Image" meta box can be optionally displayed in the post header as preview picture.

Image

The first <img> tag found in the post content is considered the image to be displayed in the post header. This can be an image not only from the media library but also from an external source.

The Image Post Format can be useful in the case if you want to display:

• 1) an image (in the post header or post preview) with the size different from the preview image size set in the Blog Posts element for all posts,
• 2) different images in the post header and post preview – see the demo example: 5 Easy, Practical Tools to Get Your Clients Unstuck.

If no <img> tag found, the featured image can be optionally displayed in the post header as preview picture.

Video

The first video file URL (mp4, webm, ogv), video shortcode, or video embed (oEmbed) found in the post content is considered the video and displayed in the post header.

If no video found, the featured image can be optionally displayed in the post header as preview picture.

See the demo example: 10 Tips for Effective Listening.

Audio

The first audio file URL, audio shortcode, or audio embed found in the post content is considered the audio and displayed in the post header.

If no audio found, the featured image can be optionally displayed in the post header as preview picture.

Single Blog Post Settings - Sec 6

The TransVision theme includes a number of parameters grouped in meta boxes that allows you to tweak multiple aspects of the current post.

Page Header Content

For each blog post you can set one of 2 types of Page Header Graphics:

1. Gradient Background – see How Is Coaching Different from Therapy?
2. Hero Image:
   • Full-width – see Paul Smart's 2018 Event Calendar
   • Right-aligned – see How to Be a Better Decision Maker

The screenshot below displays the Page Header Content meta box for a blog post with Hero Image in the header:

To set a header "hero image" for a specific blog post, click + Add Media button and select the image.

Post Settings

The screenshot below displays the Post Settings meta box with all the post settings for a specific blog post:

If you check the Disable "Auto" Excerpt option, then the full content of this particular blog post is displayed in the post preview.

By selecting the Hide Featured Image checkbox in the Post Page section, you tell the theme to never display the featured image on the single page of this particular blog post.

Bottom Stripe

For each blog post you can set one of the following types of Bottom Stripe:

1. Related Posts (Default)
2. Related Posts and Slogan
3. Related Posts and Subscription Form
4. Slogan
5. Subscription Form

For some general information, also see the Page Settings section.

Post Excerpt - Sec 6

The WordPress Excerpt is an optional summary or description of a post; in short, a post summary.

The Excerpt has two main uses:

1. It replaces the full content in RSS feeds when the option to display summaries is selected in Settings > Reading.
2. It is displayed in places where quick summaries are preferable to full content:
   • Search results
   • Tag archives
   • Category archives
   • Monthly archives
   • Author archives

A post excerpt can be also displayed in a post's preview on your blog page.

The following diagram describes how the excerpt mechanism works for a specific post in a list of blog posts.

To add an excerpt to a post, simply write one in the Excerpt field under a post's meta boxes. The Excerpt field is hidden by default if it has not been used before. Look under the Screen Options panel to make sure Excerpt is checked to be Show on screen.

In TransVision, if the Blog Style parameter is set to "Grid", post excerpt is not displayed.

---

Building Pages - top

You can use Pages to organize and manage any content – such as "About", "Services", "Contact", etc.

There are 2 ways you can create a page content:

• Using Page Builder.
• Using the standard WordPress editor.

Page Builder - Sec 7

The TransVision theme includes support for the Page Builder plugin. It is fully adjusted to the theme, and perfectly suits its needs.

1. Getting Started
2. Building a Page
3. Styling a Page ("stripes")
4. Prebuilt Layouts

This plugin is not bundled with TransVision so it must be installed and activated as mentioned in the Required Plugins section.

Page Builder is enabled for Pages, Posts, and also for Work, Service, and Section custom post types.

The plugin is very easy and doesn't really need much explanation, have a look at the screenshots below for a quick guide.

1. Getting Started

---

Page Builder Interface

First, let's take a look at the interface. Page Builder adds an extra tab to the standard WordPress editor.

Clicking on this tab brings up the Page Builder interface.

Toolbar

You can use the toolbar to add a widget, add a new row of columns or to load prebuilt layouts.

Row Actions

Use these buttons to edit, dublicate, delete, and move a row. The up/down icon acts as a handle to pick up and drag the row up or down.

---

Please note the following important things before you start:

1. Page Builder works with standard WordPress widgets. So a widget in Page Builder means the same as an element.
2. Any content you create with Page Builder will overwrite the existing content for that page.
3. The content you can see in the editor window after clicking "Revert to Editor" button, is needed for the following:
   • This is a copy of all text and image data created by you on that page and saved by Page Builder in post_content field. So, you can be sure the content of your website pages will be available if you shift from the TransVision theme to some other WordPress theme.
   • It is used by the Search function in the theme.
   • It can be used by SEO plugins.
4. The following screen width breakpoints are used in row/column/widget responsive options:
   • large screen size (≥1200px) – Desktops,
   • medium screen size (992-1199px) – Tablets in landscape mode,
   • small screen size (768-991px) – Tablets in portrait mode,
   • extra small screen size (<768px) – Phones.

---

Creating a New Page Using Page Builder

Open a new page by navigating to Pages > Add New. Click on the Page Builder tab to start creating your content. This tab is connected to your visual editor. Now, we're ready to start creating a page with Page Builder.

Edit an Existing Page Using Page Builder

If you have not used Page Builder on a certain page before, it will open in the default visual editor. Click on the Page Builder tab.

Page Builder copies all of your content to a Text Block widget in a single column row. This setup gives you an accurate representation of how your content looked before. Open the Text Block widget if you need to access this content.

2. Building a Page

---

Adding a Row

Rows form the overall structure of your page layout. These are the first things you will add to your page.

To add a row, click on the Add Row button. The "New Row" dialog will appear. You can set the row layout by selecting:

• the number of cells (columns) in the row,
• the cell ratio,
• the direction to apply that ratio – left or right (auxiliary).

Page Builder will update the layout as you change these values.

Deleting a Row

To delete a row, hover over the spanner icon in the top right corner above that row. A drop down menu will appear with options to Edit, Duplicate or Delete. Click on Delete Row, and then confirm this action by clicking on Are you sure?.

   

Editing a Row

To edit an existing row, click on the spanner icon in the top right corner above that row.

Adding a Widget

To add a widget, first activate the row cell to which you wish to add a widget.

Once you have selected a row cell, click on the Add Widget button – it will open the "Add New Widget" dialog with a table of all available widgets.

To select a widget, simply click on it. The widget will now appear in the selected row cell.

You can also add a widget using the right-click contextual menu – either by choosing from the list of featured widgets or through the search function.

To move the widget, click, hold and drag it to a new cell or a new position within the current cell.

Hovering over the widget will display the widget options, namely Edit, Duplicate or Delete.

Using the Layout Builder

The Layout Builder widget gives you the full functionality of Page Builder in a simple widget. This allows you to create complex and nested layouts.

The example below illustrates the complex layout possibilities. It is taken from the demo content – see the "Featured Content" section (under the Homepage Intro & Hero) on Homepage.

In edit mode, you will see the dialog shown below:

As you can see on the images above, using the Layout Builder in this particular case allowed us to add 2 rows in one stripe section – one-column row and two-column row.

3. Styling a Page ("stripes")

---

Styling a Row

In the "Edit Row" dialog, you'll find the row styling tabs in the Row Styles sidebar. By default, there are three groups:

1. Attributes
2. Layout
3. Design

Click on each tab to display the settings in that group.

1. Under the Attributes tab, you can specify the Row Class.

2. Under the Layout tab, you'll find settings for Row Layout, and Column Ordering.

    

Row Layout

The Row Layout setting has three options:

• Default – with default (responsive) container.
• Full Width Stretched – with full-width (fluid) container.
• Full Width Stretched + no padding – with full-width (fluid) container and stripe's top/bottom padding set to zero.

For example, Homepage, About Me, Services – these pages are fully built of stripe sections with default layout.

There are only a few stripe sections (rows) in the demo content with Full width stretched + no padding layout:

• Work With Me (stripe with a full-width image),
• Career Coaching (stripe with Full-width Tabs element),
• Other Elements (stripe with Image Grid element).

Column Ordering

This feature allows you easily change the order of row columns on specific screen width. The pictures below with examples from the demo illustrate how it works:

a. Default

b. First column moves right on small screens and larger

See Work With Me – "Are We a Good Fit?" stripe section.

c. First column moves right on medium screens and larger

See Gallery – the stripe section with the 2nd example of "Simple Metro Style" gallery.

3. Under the Design tab, you'll find settings for Stripe Background.

"Stripe" is a row added via Page Builder and wrapped in a full-width background.

Stripe Background

The TransVision theme has various types of stripe sections with different types of background you can choose from when setting the parameters for a row design in Page Builder.

    

See the examples on Stripe Sections page.

1. Transparent background.
2. Solid backgrounds:
   • White
   • Whitish (white with a little grey)
   • Light Grey (can be also used on page with sidebar)
   • Primary Pale Theme Color
   • Primary Light Theme Color
   • Primary Theme Color (dark)
   • Secondary Theme Color
   • Pale (can be also used on page with sidebar)
3. Primary Gradient Theme Color (dark)
4. Gradient backgrounds used only on pages with sidebar:
   • Pale Gradient
   • Light Grey Gradient
5. Backgrounds with image:
   • Default Background Image
   • Custom Background Image
6. Upper background layer:
   • Solid Transparent – primary color
   • Solid Transparent – black color
   • Gradient Transparent – primary color
   • Gradient Transparent – mixed colors
7. Full-width Grey Background in stripe's:
   • Left column
   • Right column

White is the default stripe background.

There are also optional elements that can be added to the chosen type of stripe background. The list of these additional elements is individual for each type of background – see the screenshots below.

    

    

By checking Narrow Stripe you reduce the stripe's top and bottom paddings.

Styling a Cell

In the "Edit Row" dialog, click on a cell – this will open the cell styling tabs (under the Row Styles tabs).

By default, there are two groups:

1. Attributes
2. Responsive Options

Click on each tab to display the settings in that group.

1. Under the Attributes tab, you can specify the Cell Class.

2. Under the Responsive Options tab, you'll find settings for Width.

    

Column Width

a. Cell width on medium and large screen size – Desktops (≥992px)

This is the default value we set when selecting a ratio for columns:

b. Cell width on small screen size – Tablets in portrait mode (768-991px)

c. Cell width on extra small screen size – Phones (<768px)

Styling a Widget

Click on any widget to open its edit dialog where you'll find the widget styling tabs in the Widget Styles sidebar. By default, there are five groups:

1. Attributes
2. Offset (Margin)
3. Alignment
4. Show/Hide
5. Width

Click on each tab to display the settings in that group.

1. Under the Attributes tab, you can specify the Widget Class.

2. Under the Offset (Margin) tab, you will find responsive settings for Left Offset and Right Offset.

         

3. Under the Alignment tab, you will find responsive settings for Alignment / Float.

    

4. Under the Show/Hide tab, you will find responsive settings for Visibility.

    

5. Under the Width tab, you will find responsive settings for Width and Adaptive Width.

    

For illustrating how the Adaptive Width works, see the image in the "Coaching Qualifications" section on About Me page. The Adaptive Width for this Single Image widget is set to "80% – centered block". Test how the image's relative width changes on different screen sizes.

4. Prebuilt Layouts

---

Prebuilt Layouts

Prebuilt layouts allows you to seamlessly create page or post layouts by selecting from any prebuilt layouts included in your theme or by cloning existing page or post layouts.

Click on the Layouts button to access the prebuilt layouts interface – you will see a list of pages and posts (blog posts and posts of "custom post type") you've created using Page Builder.

Import/Export

To export a page, select Import/Export on the left and click Download Layout.

To import a page, simply go to the same area, click Select Import File and select the previously exported layout. Then click Insert at the bottom right and select the appropriate option from the popup menu.

Cloning Pages

To clone a page/post simply click on it, then click the Insert button, and select the appropriate option from the popup menu.

Widgets (elements) - Sec 7

As it was mentioned above, Page Builder works with standard WordPress widgets and use them as elements for building page content. The TransVision theme includes a wide set of custom widgets specially created for Page Builder.

Let's take a quick overview of the widgets.

Text Block

This widget allows you to create HTML formatted content using the native WordPress TinyMCE (Visual) editor.

Info Box

Displays text, image, button etc. in a separated area with different options of background and shadow style. The widget allows you to create a box's content using the standard WordPress editor.

See the demo examples.

Divider / Blank Space

Inserts a divider line (separator) or blank space. This is the same element as you can add using the Dividers dropdown menu in the Visual editor, but it has a few additional parameters.

See the demo examples.

Picture Boxes

Allows to display a list of features arranged in content boxes with images.

See the demo examples.

Icon Boxes

Allows to display a list of features arranged in content boxes with icons.

See the demo examples.

Stages

Can be used as a method of graphically representing milestones in timeline (by year) and stages (phases) of process.

See the demo examples.

Feature Lists

Allows to display a list of features arranged as numbered or unnumbered content boxes.

See the demo examples.

Fancy Image

Allows you to add a fancy graphic (with image) to some text.

See the demo examples.

Fancy Icon

Allows you to add a fancy graphic (with icon) to some text.

See the demo examples.

Round Thumbnails

Displays round thumbnail images inline, partly overlapping each other.

See the demo example: Other Elements, Life Coaching.

Video

Allows you to insert online hosted video (like YouTube, Vimeo, TED, or any other compatible with WordPress's built-in oEmbed feature) or self-hosted video (mp4, webm, ogv, or HTML5 video).

See the demo examples.

Image

Provides you with a simple way to display a single image. You can also enable an option to display the full-size version of the image or online hosted video (YouTube or Vimeo) in a lightbox overlay.

See the demo examples: About Me, Services, LightBox.

Image Slider

Displays a simple image slideshow. The theme includes Owl Carousel 2 – touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. You can also enable an option to display the full-size version of each slide in a lightbox overlay.

See the demo examples: Case Study 1, LightBox.

Image Carousel

Displays a carousel slider with images. Uses Owl Carousel 2 plugin.

See the demo examples.

Icon Carousel

Displays a carousel slider with icon boxes. Uses Owl Carousel 2 plugin.

See the demo examples.

Gallery

Displays a simple image gallery (allows to display full-size photos and videos in a lightbox overlay). You can choose between Standard and Simple Metro Style gallery.

See the demo examples.

Image Grid

Displays a list of thumbnail images (as gallery grid) linked to custom URLs.

See the demo example: Other Elements.

Testimonials

Testimonials are the perfect way to show your potential clients the kind of work you can provide. The TransVision theme comes with plenty options and styles for displaying testimonials:

• Testimonial boxes
• Main style 1 – single item or multiple items in slider
• Main style 2 – single item or multiple items in slider
• Testimonials sidebar widget – single item or multiple items in slideshow

This widget uses the Testimonial custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section.

See the demo examples.

Pullquote

Displays a pullquote – an excerpted line or phrase, in a larger typeface, optionally with stats. The theme comes with plenty options and styles for displaying pullquotes.

See the demo examples.

Blog Posts

Adds a list of blog posts. Choose your blog style and other parameters that define how the content should be displayed.

See the demo example: Blog: Grid Layout + Sidebar and Blog: List Layout.

News

Allows to display a list or carousel with blog posts in one of the following selections: most recent, most popular, featured, or random.

See the demo examples: Home Page 2, Picture Boxes – Recent Posts, Carousel.

Works / Client Stories

Adds a list of works, client stories, case studies, projects etc.

This widget uses the Work custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section.

See the demo examples: Client Stories, Picture Boxes – Works / Client Stories.

Services

Adds a list of services. Choose the type and other parameters that define how the content should be displayed.

This widget uses the Service custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section.

See the demo example.

Staff List

Adds a list of staff members. Choose the number of columns and other parameters that define how the content should be displayed.

You can use 2 ways of displaying a single staff member profile:

1. In popup window (default) – see Our Team.
2. On a single page (each member's preview links to its single profile page) – see Team Page 2 and Team Member Profile.

This widget uses the Staff custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section.

Tabs / Full-width Tabs

Allows to display a bunch of organized information in a small area (as tabbed content).

This widget uses the Section custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section. Also you need to create some Section items (one section per one tab) and add them to a certain section group.

See the demo examples: Tabs & Toggles, Career Coaching (full-width).

Accordion

Allows to display a bunch of organized information in a small area (as toggled content). You can choose between "accordion" and "toggle" modes:

• "Accordion" Mode – only one panel can be opened at a time
• "Toggle" Mode – multiple panels can be opened at a time

This widget uses the Section custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section. Also you need to create some Section items (one section per one panel) and add them to a certain section group.

See the demo examples: Tabs & Toggles, FAQs.

Stat Data

Visual representation of data in website design is not only a tool of showing off – it's also a great way of winning customers over. The theme comes with a few options/styles for displaying statistics.

See the demo examples: Stats Data, Work With Me, Leadership Development.

Subscription Form

Adds an email subscription form. Helps you add more subscribers to your mailing lists. Available both in Page Builder and as sidebar widget. The Forms section provides you with more information on using the forms in the TransVision theme.

Contact Form

Adds a customizable contact form, allowing your website visitors to easily send you messages.

You can configure the following fields:

• "Name" (text input)
• "E-mail" (text input)
• "Phone" (text input)
• "Website" (text input)
• "Subject" (select element or text input)
• "Message" (text area)
• "Agree to Terms" (checkbox)
• 3 custom fields (text input)

See the demo example: Contact Page 1, Contact Page 2.

Google Maps

Embeds interactive map within your page layout via Google Maps API. You can either select a map from the list of available maps (previously configured in Options > General), or set custom map parameters.

Also please read the Authentication for Google Maps subsection to set up the required parameter.

See the demo example: Contact Page 1, Contact Page 2.

Pricing Table

Allows to display pricing plans or price comparison. The possible number of columns in a table is from 2 to 5. Tooltip option is also available.

See the demo examples: Pricing Plans, Fees.

Standard Table

Allows to display tabular data in a standard HTML table on screens with different sizes, including small-screen mobile devices. The possible number of columns: from 2 to 6.

See the demo examples: Standard Tables, How Is Coaching Different from Therapy?.

Dot Leaders

This widget adds a list with dot leaders.

See the demo example: Other Elements.

Flickr Photostream

Embeds an image feed from a Flickr account. To display photos you will need to specify Flickr ID which you can find using idGettr online service. NOTE: The embed feature is only available for publicly shared photos.

See the demo example: Other Elements, Blog: List Layout.

Twitter Feed

Allows to add a public Twitter timeline.

This widget uses the API v1.1 authentication required by Twitter for all Twitter feed requests, so the Twitter Feed OAuth plugin must be installed and activated as mentioned in the Required Plugins section.

The Twitter Feed widget also needs the parameters in Options > Social Sharing > Twitter API Details to be set. Please read the Twitter API Details subsection to set up the required parameters.

See the demo example: Other Elements, About Me, Blog: List Layout.

Social Profiles

This widget adds social media icons linked to your social accounts. Available both in Page Builder and as sidebar widget.

See the demo example: Blog: List Layout (in sidebar).

Layout Builder

More information on this widget can be found in Using the Layout Builder section.

Page Settings - Sec 7

The TransVision theme includes a number of parameters grouped in meta boxes that are common for standard pages, blog posts, service items, work items and staff profiles. These meta boxes are:

1. Page Settings
2. Page Header Content
3. Bottom Stripe

The screenshot below displays the Page Settings meta box with general settings for a standard page:

Page Header Content

For pages, blog posts, services, works and staff profiles there are 2 types of Page Header Graphics you can choose from:

1. Hero Image:
   • Full-width
   • Right-aligned
2. Gradient Background

The screenshot below displays the Page Header Content meta box for a standard page:

To set the header "hero image" for a specific page, set the featured image using standard WordPress method.

   

Subheader Bar

The subheader bar section under the page header image (or page title) can be one of 4 types:

1. Breadcrumb Navigation – default
2. Secondary Menu
3. Subscription Form – see Home Page 2
4. Call-to-Action Box – see Home Page 3 and Case Study 1

Bottom Stripe

For a page, service or work you can set one of the following types of Bottom Stripe:

1. Slogan (Default)
2. Subscription Form
3. Testimonial
4. Statistical Data
5. Pullquote
6. Use the last stripe section (in page builder) as the "bottom stripe"

The screenshot below displays the Bottom Stripe meta box for a standard page. For each type of bottom stripe there is a specific set of parameters – see the screenshots in lightbox:

See the examples of different bottom stripes:

• FAQs – slogan
• About Me – subscription form
• Team Page 2 – testimonial
• Work With Me (Coaching) – statistical data
• Services – pullquote
• Fees – the last stripe section as the "bottom stripe"

Page Templates - Sec 7

Page templates are a specific type of template file that can be applied to a specific page or groups of pages.

When creating a new page, one of the first things you might want to do is to assign an appropriate template for it. The list of available page templates can be found in the Page Attributes meta box on Edit Page or Add New Page screen.

TransVision comes with the following page templates:

• Default Template
• Homepage
• Page with Header Slider
• Contact Page – Layout 1
• Contact Page – Layout 2

Default Template

The default page template should be used for creating any page except Homepage, Contact Page, or Page with Header Slider.

Homepage

This is the template that is supposed to be assigned to your site front page like Home or Main.

The screenshot below displays the Homepage Header Content meta box with the settings for the homepage page:

A "Call-to-Action" button can be optionally displayed in the homepage intro section. If needed, you can set up so that a subscription form to be opened in a popup window on button click.

The Homepage Header includes:

1. Hero Content = Homepage Hero + Homepage Intro
2. Featured Content

For the homepage template, it is supposed that the page content is created using the Page Builder. The first row in the Page Builder is used as the Featured Content – the stripe section under the homepage intro.

See the demo example with the Homepage template applied:

• Home Page 1

Page with Header Slider

Choose this template if you wish to create a page with image slider in the header – either Right-aligned or Full-width.

The screenshot below displays the Page Header Slider meta box:

The header slider uses the Slide custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section. Also you need to create some Slide items and add them to a certain slide group.

See the following pages from the demo content with the header slider:

• Home Page 2
• Home Page 3

Contact Page – Layout 1

This is one of 2 templates you should assign to your site Contact page.

This page template divides your content into three parts:

1. Left Column – all the page content (Page Builder widgets),
2. Right Column – text data from the Contact Info meta box,
3. Bottom Stripe Section – Google map.

The screenshot below displays the Contact Info meta box:

See the demo example: Contact Page 1.

Contact Page – Layout 2

This is one of 2 templates you should assign to your site Contact page.

The page template divides your content into five parts:

1. Intro – large lead text at the top of page content,
2. Stripe with Contact Details – main contact data and image from the Contact Info meta box,
3. Left Column – all the page content (Page Builder widgets),
4. Right Column – detailed contact information from the Contact Info meta box,
5. Bottom Stripe Section – Google map.

This template allows multi-location on Google Maps – choosing another office location (among predefined) updates current location and info on the map. You can configure multiple (up to 3) maps that can be then switched by clicking menu items.

The screenshot below displays the Contact Info meta box:

See the demo example: Contact Page 2.

---

Works / Client Stories - top

The TransVision theme includes support for the Work custom post type. This allows you easily create your works / client stories and add "work" items. If you know how to use standard posts and pages you can also create a work! Have a look below for further instructions.

Work Categories - Sec 8

Work items (works, case studies, etc.) are supposed to be grouped into Work Categories. So it is a good idea to add some work categories before you start creating works.

Creating Works - Sec 8

There are 2 ways you can create a work item content:

• Using Page Builder.
• Using the standard WordPress editor.

Featured Image

For setting the featured image, use standard WordPress method. You should add a featured image to each work post.

   

A work item's featured image is used as preview image on works page (a page with "Works" element), archive pages (work category), and search results pages. The dimensions of image you need to upload and set as featured image for a work item depends on parameters (type, number of columns, image size) you specify for Works / Client Stories widget (element).

Page Header Content

For each work post you can set one of 2 types of Page Header Graphics:

1. Hero Image:
   • Full-width
   • Right-aligned
2. Gradient Background – see The Psychology of a Winner, as an example

The screenshot below displays the Page Header Content meta box for a work post with Hero Image in the header:

To set a header "hero image" for a specific work post, click + Add Media button and select the image.

Bottom Stripe

For each work post you can set one of the following types of Bottom Stripe:

1. Slogan (Default)
2. Subscription Form
3. Testimonial
4. Statistical Data
5. Pullquote
6. Related Works and Slogan
7. Related Works and Subscription Form

For some general information, also see the Page Settings section.

Excerpt

Optionally, you can use the Excerpt field to set the description text to be displayed below the preview image and title of a work item – in case if you selected "Title and Excerpt" in the Works / Client Stories element.

NOTE: If you don't see the Excerpt meta box, then under Screen Options make sure the corresponding box is checked.

Displaying Works - Sec 8

Use Page Builder to add the Works / Client Stories widget (element) to a specific page or anywhere within your page layout.

See the demo example: Client Stories.

---

Services - top

The TransVision theme includes support for the Service custom post type. This allows you easily create your services and add "service" items. If you know how to use standard posts and pages you can also create a service! Have a look below for further instructions.

Service Categories - Sec 9

You can optionally group your services into Service Categories.

Creating Services - Sec 9

There are 2 ways you can create a service item content:

• Using Page Builder.
• Using the standard WordPress editor.

Featured Image

For setting the featured image, use standard WordPress method. You should add a featured image to each service post.

   

A service item's featured image is used as preview image on services page (a page with "Services" element), archive pages (service category), and search results pages. The dimensions of image you need to upload and set as featured image for a service item depends on parameters (type, number of columns, image size) you specify for Services widget (element).

Page Header Content

For each service post you can set one of 2 types of Page Header Graphics:

1. Hero Image:
   • Full-width
   • Right-aligned
2. Gradient Background

The screenshot below displays the Page Header Content meta box for a service post with Hero Image in the header:

To set a header "hero image" for a specific service post, click + Add Media button and select the image.

Bottom Stripe

For each service post you can set one of the following types of Bottom Stripe:

1. Slogan (Default)
2. Subscription Form
3. Testimonial
4. Statistical Data
5. Pullquote
6. Use the last stripe section (in page builder) as the "bottom stripe"

For some general information, also see the Page Settings section.

Excerpt

Optionally, you can use the Excerpt field to set the description text to be displayed below the preview image and title of a service item – in case if you selected "Title and Excerpt" in the Services element.

NOTE: If you don't see the Excerpt meta box, then under Screen Options make sure the corresponding box is checked.

Displaying Services - Sec 9

Use Page Builder to add the Services widget (element) to a specific page or anywhere within your page layout.

See the demo example: Services Page 2.

---

Staff - top

The TransVision theme includes support for the Staff custom post type. This allows you easily create your staff and add staff profiles. If you know how to use standard posts and pages you can also create a staff profile! Have a look below for further instructions.

Staff Categories - Sec 10

You can optionally group your staff profiles into Staff Categories.

Creating Staff Profiles - Sec 10

You can create a staff profile content using the standard WordPress editor.

Featured Image

For setting the featured image, use standard WordPress method. You should add a featured image to each staff post.

   

A staff profile's featured image is used as preview image on staff page (a page with "Staff List" element), archive pages (staff category), and also on search results pages. The dimensions of image you need to upload and set as featured image for a staff profile depends on parameters (type, number of columns, image size, and how to open staff member profile) you specify for Staff List widget (element).

Page Header Content

For each staff post you can set one of 3 types of Page Header Graphics:

1. Gradient Background (Default)
2. Hero Image:
   • Full-width
   • Right-aligned
3. The same settings as for the "Staff Page"

The screenshot below displays the Page Header Content meta box for a staff post with Gradient Background in the header:

Profile Settings

The screenshot below displays the Profile Settings meta box with all the profile settings for a specific staff profile:

Bottom Stripe

For each staff post you can set one of the following types of Bottom Stripe:

1. Slogan (Default)
2. Testimonial
3. Pullquote

For some general information, also see the Page Settings section.

Excerpt

Use the Excerpt field to set the description text to be displayed below the preview image and title of a staff profile – in case if you selected "Title and Excerpt" or "Title, Position, and Excerpt" in the Staff List element.

NOTE: If you don't see the Excerpt meta box, then under Screen Options make sure the corresponding box is checked.

Displaying Staff Profiles - Sec 10

Use Page Builder to add the Staff List widget (element) to a specific page or anywhere within your page layout.

You can choose between 2 modes of displaying a single staff member profile:

1. In popup window (default) – see Our Team.
2. On a single page (each member's preview links to its single profile page) – see Team Page 2.

---

Testimonials - top

The TransVision theme includes support for the Testimonial custom post type. This allows you easily create and use testimonials.

Testimonial Categories - Sec 11

You can optionally group your testimonials into Testimonial Categories.

Creating Testimonials - Sec 11

You can create a testimonial content using the standard WordPress editor.
NOTE: Add plain text, not HTML-formatted.

Featured Image

For setting the featured image, use standard WordPress method. You should add a featured image to each testimonial post.

   

Options

The screenshot below displays the Options meta box with all the settings for a specific testimonial:

These are optional parameters.

Displaying Testimonials - Sec 11

Use Page Builder to add the Testimonials widget (element) anywhere within your page layout.

The theme comes with plenty options and styles for displaying testimonials:

• Testimonial boxes
• Main style 1 – single item or multiple items in slider
• Main style 2 – single item or multiple items in slider
• Testimonials sidebar widget – single item or multiple items in slideshow

See the following pages from the demo content with the Testimonials:

• Testimonials (all examples)
• Home Page 1
• Home Page 2
• Home Page 3
• Career Coaching
• Client Feedback (Testimonials)

---

Sections - top

The TransVision theme includes support for the Section custom post type. This allows you to create sections with HTML-formatted content. These sections are used in Tabs, Full-width Tabs, and Accordion elements (widgets) as tabbed or toggled content. Each section refers to a certain tab (in Tabs) or panel (in Accordion).

Section Groups - Sec 12

Sections are supposed to be grouped into Section Groups.

Creating Sections - Sec 12

There are 2 ways you can create a section content:

• Using the standard WordPress editor.
• Using Page Builder.

Displaying Sections - Sec 12

Use Page Builder to add the Tabs, Full-width Tabs, or Accordion widget (element) anywhere within your page layout.

See the following pages from the demo content with the Tabs, Full-width Tabs, and Accordion:

• Tabs & Toggles
• Frequently Asked Questions
• Career Coaching (Full-width Tabs)

---

Slides - top

The TransVision theme includes support for the Slide custom post type. This allows you to create slides with HTML-formatted content. These slides are used in the Header Slider on pages with Page with Header Slider template assigned.

Slide Groups - Sec 13

Slides are supposed to be grouped into a Slide Group. So it is a good idea to add a slide group before you start creating slide items.

Creating Slides - Sec 13

You can create a slide content using the standard WordPress editor.

Below are the examples of slide "captions" from the demo – see Home Page 2 and Home Page 3:

Slide 1

				
<p class="lead-text-extra-large text-uppercase">Turn your dreams into reality</p>
<h1>Life & Career Coaching</h1>
				
			

Slide 4

				
<p class="lead-text-extra-large text-uppercase">Achieve what you want</p>
<h1>Career. Life. Business.</h1>
				
			

Also please read the Custom Styles in the Visual Editor section to get detailed information on how to apply custom styles to a heading, paragraph, link...

Slide Options

The screenshot below displays the Slide Options meta box with all the settings for a specific slide:

To specify an image for a slide, set the featured image using standard WordPress method. You should add a featured image to each slide.

   

Displaying Slides - Sec 13

• Create a page using the Page with Header Slider template.
• In the Page Header Slider meta box find the Slide Group parameter and select the group of slides you want to use in this slider.

Also set other parameters that determine the slider behaviour and appearance.

---

Sidebars & Widgets - top

Widgets are easy to manage and can be incredibly useful to have on your site.

In the TransVision theme widgets can be displayed in the sidebar (right aligned) and footer.

The theme has by default the following widget areas for use:

• Blog Sidebar – appears on blog posts, page for posts, and archive pages
• Pages Sidebar – appears on all single pages
• Services Sidebar – appears on single service posts and service archive pages
• Works Sidebar – appears on single work posts and work archive page
• Staff Sidebar – appears on staff profile pages and staff archive pages
• Footer – Column 1, Footer – Column 2, and Footer – Column 3 – used for the footer columns

NOTE: Each widget area in the footer refers to corresponding column's number. For example, widgets added to "Footer – Column 2" widget area are displayed in the second column.

---

TransVision has a built-in feature to show/hide widgets on a specific page.

Change your sidebar content for different pages, posts, categories, custom taxonomies, etc.

The theme appends checkboxes to each widget you add to a sidebar area on Widgets admin page to either show or hide it on every site page. Look at the screenshot on the right for example.

NOTE: The content of the checklist is different for each of 6 sidebar areas on Widgets admin page. The example on the right shows how the checklist looks in Pages Sidebar.

By default, "Hide on checked pages" is selected with no boxes checked, so all current widgets will continue to display on all pages.

Also you can specify whether to show a certain widget on a small-screen mobile device, or hide it.

---

All of WordPress's default widgets are styled and displayed properly in all widgetized areas.

Default WordPress Widgets - Sec 14

The following default WordPress widgets can be perfectly used with TransVision to extend your site's functionality.

Search

This widget adds a search box to your sidebar, allowing readers to easily search your site for blog posts that have been written in the past. The results are displayed on Search Results page.

Recent Posts

Displays your most recent posts, making it easy for your readers to see what's new on your blog.

Tag Cloud

Displays a list of your most used tags in a tag cloud or as tag blocks. You can choose one of the following taxonomies: blog tags, blog categories, work categories, service categories, or staff categories.

Archives

The widget organizes your previously published blog posts by month or year and displays archive links for each period that has posts.

Text

Allows you to add text or HTML to your sidebar. You can use a text widget to display text, links, images, HTML, or a combination of these.

Custom Menu

Displays a custom menu.

This widget can be perfectly used in the footer.

RSS

The RSS Widget displays the most recently published content from any source with an active feed. This is an ideal way of integrating outside content into your site.

Custom Sidebar Widgets - Sec 14

TransVision comes equipped with several custom sidebar widgets.

Text Block

This widget allows you to create HTML formatted content using the native WordPress TinyMCE (Visual) editor.

Featured Article

Displays your most recent, most popular, featured, related, or random post.

Info Box

Displays text, image, button etc. in a separated area with background. The widget allows you to create a box's content using the standard WordPress editor. You can also enable an option to display a YouTube or Vimeo video in a lightbox overlay.

Testimonials

Displays a testimonials slider.

This widget uses the Testimonial custom post type, so the TransVision Custom Post Types plugin must be installed and activated as mentioned in the Required Plugins section.

Banner

Displays a preformatted text placed on custom image background.

Video

Allows you to insert a video – online hosted (YouTube, Vimeo, TED, etc.) or self-hosted (mp4, webm, ogv, or HTML5 video) – by entering a video URL compatible with WordPress's built-in oEmbed or video shortcode feature.

Subscription Form

Displays a built-in email subscription form. It is supposed to be used in the right sidebar.

A message containing new subscriber's email address is delivered to the Recipient Email Address you need to configure (as well as other parameters) in Options > Forms. The Forms section provides you with more information on using the forms in the TransVision theme.

Social Profiles

This widget adds social media icons linked to your social accounts.

Flickr Photostream

Embeds an image feed from a Flickr account. To display photos you will need to specify Flickr ID which you can find using idGettr online service. NOTE: The embed feature is only available for publicly shared photos.

Twitter Feed

Allows to add a public Twitter timeline.

This widget uses the API v1.1 authentication required by Twitter for all Twitter feed requests, so the Twitter Feed OAuth plugin must be installed and activated as mentioned in the Required Plugins section.

The Twitter Feed widget also needs the parameters in Options > Social Sharing > Twitter API Details to be set. Please read the Twitter API Details subsection to set up the required parameters.

---

Updating - top

Updating The Theme - Sec 15

You can update the TransVision theme using one of the 2 traditional methods.

We recommend using a child theme if you are going to customize your theme files, as this will make it easier to update your parent theme. By using a child theme you will ensure that your modifications are preserved.

First you need to manually download the new theme package from your Themeforest account.

• Log into your Themeforest account and navigate to your "Downloads" tab. Find the "TransVision" theme purchase.
• 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.

a. WordPress Method – by replacing the existing version with uploaded .zip file

Case 1

• Log in to your WordPress admin area.
• Install and activate the Easy Theme and Plugin Upgrades plugin.
• Go to Appearance > Themes.
• Click the Add New button at the top of the page, and then click Upload Theme.
• Select the zip file with the new theme version to install – new transvision.zip file.
• Click the Install Now button.

Case 2

• Log in to your WordPress admin area.
• Go to Appearance > Themes.
• Click the Add New button at the top of the page, and then click Upload Theme.
• Select the zip file with the new theme version to install – new transvision.zip file. WordPress will automatically detect the existing theme and will give you the option to "Replace current with uploaded" version.
• Click Replace current with uploaded.

b. FTP Method

• Log in to your site via FTP and browse to your folder located at wp-content/themes. Delete the transvision folder.
• Unzip your new transvision.zip file and upload only the extracted transvision folder to wp-content/themes on your server.

c. WordPress Method – with deleting an old version (not recommended)

• Log in to your WordPress admin area and browse to Appearance > Themes.
• You need to deactivate the current "TransVision" theme by simply activating a different theme. Once you activate a different theme, you can delete the TransVision theme. Don't worry, your content will not be lost.
• Click on the theme screenshot to view "Theme Details". Then click Delete in the lower-right corner of the window.
• Then simply upload the new transvision.zip file and click Install Now button.
• Once WordPress has unpacked and installed the theme, just click the Activate link.

Updating the Required & Recommended Plugins - Sec 15

After updating the theme, you may get a notification message like the one below letting you know the plugin have a new version and need to be updated.

Or like this:

• Click Begin updating plugins or Update Required, and on the next screen click the Update button.

---

Translating the Theme - top

TransVision is developed with compliance to theme internationalization requirements – so it can be easily translated into other languages. Any translator can successfully localize this theme without needing to modify the source code itself.

There are several methods to create a translation, most of which are outlined in WordPress Codex – see Localization guide. However, we find the easiest method is to use Poedit. It is available for all platforms and it is freeware.

There are three types of translation files that we use:

• .pot (Portable Object Template) – This is the template file that contains a reference to each text string in your theme that needs translating. This file does not contain any translation. It is a plaintext file.
• .po (Portable Object) – Made from the .pot file, the .po contains all your string references as well as their translations to one specific language. This is also a plaintext file that can be edited.
• .mo (Machine Object) – A binary version of the .po file. By using machine code, the file can be used much faster than its plaintext alternative.

TransVision comes with the transvision.pot file located in the languages folder. The only thing you have to do is to create a .po file from transvision.pot, translate all text strings, then save the .po file with your language code. The next subsection will explain this in detail.

Creating a .po file using PoEdit

• Download and install Poedit if you haven't done it already.
• Open Poedit and click the Create New Translation button.
• Navigate to find the transvision.pot file on your computer and open it.
• Choose the language of your translation (the language code).
• Go to File > Save.
• Translate all strings into chosen language and save changes. This will save all translated data to the .po file and automatically generate the binary .mo file in the same location as the .po file.

Updating a .po file after a theme update

If you want to retain your language file, and new strings have been added to a new version of the theme, then you can choose to update from the .pot file to include the new strings to your current language file.

• Copy your previously saved custom language .po file to the languages folder of your updated TransVision theme.
• Open your .po file in Poedit and go to Catalogue > Update from POT file.
• Navigate to find the transvision.pot file on your computer and open it. The catalogue will then be auto updated with all the new text strings, and your custom ones will be preserved.
• Don't forget to Save the file once you are done updating and adding translations.

Set up WordPress

WordPress needs to be told which language it should run under.

As of WordPress 4.0 you can change the language in the "General Settings":

• Go to Settings > General and select your language in "Site Language" dropdown.

Adding translation files to your Child Theme

The best solution would be to place them in your child theme which is very easy to do and is also explained in WordPress Codex – see Child Themes > Internationalization.

---

Sources and Credits - top

There are a number of the open source scripts, files and other assets used in the TransVision theme. Here is the list of resources and people whom I'd like to thank for their great work:

1. CSS files:
   • Font Awesome – by Dave Gandy
   • Ionicons – by Ben Sperry
   • Animate.css – by Daniel Eden
2. JavaScript Plugins and Scripts:
   • jQuery – by John Resig
   • jQuery Easing Plugin – by George McGinley Smith
   • FitVids – by Chris Coyier and Dave Rupert
   • Magnific Popup – by Dmitry Semenov
   • Cycle2 – by Mike Alsup
   • Owl Carousel 2 – by David Deutsch
   • Superfish – by Joel Birch
   • Sidr – by Alberto Varela
3. PHP files:
   • Redux Options Framework – by Redux Framework Team
   • TGM Plugin Activation – by Thomas Griffin
4. Images downloaded while importing the demo content (only a few):
   • Free assets mostly from morgueFile (Morguefile Free license), Pexels (Creative Commons Zero), Pixabay (Creative Commons Zero), and FLATICON (CC BY 3.0)

---

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

emerald

Go To Table of Contents

---