wp_blog/wp-content/themes/New folder/World Wide v1.01/Document/index.html
2020-01-02 23:15:16 +07:00

938 lines
44 KiB
HTML

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link media="screen" rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/highlighter/shCore.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/highlighter/shThemeDefault.css" type="text/css" media="screen" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='js/highlighter.js'></script>
<script type="text/javascript">
//Pretty photo setting
jQuery(document).ready(function(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});
//Syntax Highlighter
SyntaxHighlighter.all();
</script>
</head>
<body>
<div id="header">
<div class="theme-header">
World Wide Documentation by Goodlayers
</div>
<div class="theme-title">
World Wide
</div>
<div class="template-detail">
Created by: Goodlayers<br>
Website: http://goodlayers.com
</div>
<div class="thanks">
<h3>Please Rate 5 Stars For This Theme</h3>
Thank you very much for choosing our theme. <br/>
We're truly appreciated! :D<br/>
If you like this theme, Please support us. (<a href="image/how-to-rate.png" rel="prettyPhoto" >How to rate?</a>)
</div>
</div>
<div id="container">
<div class="nevigator">
<a name="top" id="topic"><h3>Contents</h3></a>
<ul>
<li><a href="#a1">A.) Installation / Layout</a>
<ul>
<li><a href="#a1">1.) Installation</a></li>
<li><a href="#a2">2.) Load Demo Admin Setting</a></li>
</ul>
</li>
<li><a href="#b1">B.) Header</a>
<ul>
<li><a href="#b1">1.) Logo</a></li>
<li><a href="#b2">2.) Navigation</a>
<li><a href="#b3">3.) Social Links</a>
</li>
</ul>
</li>
<li><a href="#c1">C.) Sidebars</a>
<ul>
<li><a href="#c1">1.) Create Sidebar</a></li>
<li><a href="#c2">2.) Sidebar Widgets</a></li>
<li><a href="#c3">3.) Default Post Sidebar</a></li>
</ul>
</li>
<li><a href="#d1">D.) Footer</a>
<ul>
<li><a href="#d1">1.) Footer</a></li>
<li><a href="#d2">2.) Footer Top Twitter</a></li>
<li><a href="#d3">3.) Copyright</a></li>
</ul>
</li>
<li><a href="#e1">E.) Create Pages</a>
<ul>
<li><a href="#e1">1.) Create Home Page</a></li>
<li><a href="#e2">2.) Page Title and Content</a></li>
<li><a href="#e3">3.) Page Sidebar</a></li>
<li><a href="#e4">4.) Page Top Slider</a></li>
<li><a href="#e5">5.) Page Item</a></li>
<li><a href="#e6">6.) Create Blog</a></li>
<li><a href="#e7">7.) Create Portfolio</a></li>
</ul>
</li>
<li><a href="#f1">F.) Page Item</a>
<ul>
<li><a href="#f1">1.) Accordion</a></li>
<li><a href="#f2">2.) Blog</a></li>
<li><a href="#f3">3.) Contact Form</a></li>
<li><a href="#f4">4.) Column</a></li>
<li><a href="#f5">5.) Post Slider</a></li>
<li><a href="#f6">6.) Divider</a></li>
<li><a href="#f7">7.) Message Box</a></li>
<li><a href="#f8">8.) Portfolio</a></li>
<li><a href="#f9">9.) Slider</a></li>
<li><a href="#f10">10.) Stunning Text</a></li>
<li><a href="#f11">11.) Tab</a></li>
<li><a href="#f12">12.) Testimonial</a></li>
<li><a href="#f13">13.) Toggle Box</a></li>
<li><a href="#f14">14.) Multi-level Page</a></li>
<li><a href="#f15">15.) Price Item</a></li>
<li><a href="#f16">16.) Gallery Item</a></li>
<li><a href="#f17">17.) Content Item</a></li>
<li><a href="#f18">19.) Personnal Item</a></li>
</ul>
</li>
<li><a href="#g1">G.) Post Type</a>
<ul>
<li><a href="#g1">1.) Post(Blog)</a></li>
<li><a href="#g2">2.) Portfolio</a></li>
<li><a href="#g3">3.) Testimonial</a></li>
<li><a href="#g4">4.) Price Table</a></li>
<li><a href="#g5">5.) Gallery</a></li>
<li><a href="#g6">6.) Personnel</a></li>
</ul>
</li>
<li><a href="#h">H.) Thumbnail Management</a>
<ul>
<li><a href="#h1">1.) Feature Image</a></li>
<li><a href="#h2">2.) Image</a></li>
<li><a href="#h3">3.) Video</a></li>
<li><a href="#h4">4.) Slider</a></li>
<li><a href="#h5">5.) Self Hosted Video</a></li>
<li><a href="#h6">6.) Editing Thumbnail Size</a></li>
</ul>
</li>
<li><a href="#i1">I.) Changing Style</a></li>
<ul>
<li><a href="#i1">1.) Elements Color</a></li>
<li><a href="#i2">2.) Translator</a></li>
<li><a href="#i3">3.) Background</a></li>
<li><a href="#i4">4.) Font</a></li>
<li><a href="#i5">5.) Responsive Option</a></li>
</ul>
</li>
<li><a href="#j">J.) Shortcodes / Snipplet </a>
<ul>
<li><a href="#j1">1.) Top Navigation Left Text Snippet</a></li>
<li><a href="#j2">2.) Contact Page Sidebar Snippet</a></li>
</ul>
</li>
<li><a href="#k1">K.) FAQ</a>
<ul>
<li><a href="#k1">1.) How to disable comment(Leave a Reply)</a></li>
<!-- <li><a href="#k2">2.) Portfolio permalink does not work with qtranslate</a></li> -->
<li><a href="#k3">3.) Blog lose formatting</a></li>
<li><a href="#k4">4.) Manual Excerpt</a></li>
</ul>
</li>
<li><a href="#l">L.) Restrictions!</a></li>
<li><a href="#m1">M.) Tutorial Video</a>
<ul>
<li><a href="#m1">M1.) Installing Theme </a></li>
<li><a href="#m2">M2.) Setting up homepage like demo site </a></li>
<li><a href="#m3">M3.) Creating Blog </a></li>
<li><a href="#m4">M4.) Creating Portfolio / Filter Portfolio</a></li>
<li><a href="#m5">M5.) Creating Gallery </a></li>
<li><a href="#m6">M6.) Page Builder </a></li>
<li><a href="#m7">M7.) Thumbnail Management </a></li>
</ul>
</li>
</ul>
</div>
<div class="lesson">
<h3><a name="a1" id="topic">A1.) Installation</a> (<a href="#top">top</a>)</h3>
<p>
<strong> Installing the theme via Wordpress Panel </strong> <br><br>
1.) Unzip the file you downloaded from themeforest. <br><br>
2.) Logging in to wordpress, go to Appearance > Theme tabs <br><br>
3.) Upload the **** <strong> worldwide_vx-xx.zip </strong> **** file
( Do not upload whole folder you download from themeforest )<br><br>
<img src="image/a1-thumbnail1.png"><br><br>
<strong> If the above solution didn't work, try installing it via ftp access instead. </strong> <br><br>
1.) Unzip the downloaded file.<br><br>
2.) You will see 6-7 folders(PSD,Document,World Wide,demo......) inside.<br><br>
3.) Copy folder 'World Wide' and paste in 'YOUR_DOMIAN/wp-content/themes'.<br><br>
4.) Reay to go!<br><br>
<strong>You can see the video tutorial of the theme installation <a href="#m1">here</a> too </strong>
</p>
</div>
<div class="lesson">
<h3><a name="a2" id="topic">A2.) Load Demo Admin Setting</a> (<a href="#top">top</a>)</h3>
<p>
1.) Unzip the file you downloaded from themeforest. <br><br>
2.) Go to Demo xml folder. <br><br>
<img src="image/a2-thumbnail1.png"><br><br>
3.) Open the file 'Admin-Panel-Setting.txt' and copy code in the file.
<img src="image/a2-thumbnail-3.png"><br><br>
4.) At the Admin Panel > General > Export/Import Option, paste the code and click import.<br><br>
<img src="image/a2-thumbnail4.png"><br><br><br/>
<strong>You can see the video tutorial to set the theme like the demo <a href="#m2">here</a> too </strong>
</p>
</div>
<div class="lesson">
<h3><a name="b1" id="topic">B1.) Logo</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'World Wide admin panel'.<br><br>
2.) Go to 'Overall Elements > Logo'.
<br><br><img src="image/b1-thumbnail1.png"><br><br>
<strong>If it shows as an undefined image, please try seeing this solution.</strong><br>
<a href="http://support.goodlayers.com/undefined-image-when-inserting/">
http://support.goodlayers.com/undefined-image-when-inserting/</a><br><br>
3.) You can set the logo margin size ( top / bottom gap of the logo ) as you want. <br><br>
</p>
</div>
<div class="lesson">
<h3><a name="b2" id="topic">B2.) Main Navigation</a> (<a href="#top">top</a>)</h3>
<p>
1.) You can manage menu by going to 'Apearance > Menu'.<br><br>
<img src="image/b2-thumbnail1.png"><br><br>
2.) Type menu's name.<br><br>
<img src="image/b2-thumbnail2.png"><br><br>
3.) Click 'Create Menu'.<br><br>
4.) Assign the menu to <strong>BOTH</strong> theme location.<br><br>
<img src="image/b2-thumbnail3.png"><br><br>
5.) You can generate menu item from left side and
drag the generated menu at the right side to sort it. <br>
( Try indenting the menu to make the submenu )<br><br>
<img src="image/b2-thumbnail4.png"><br><br>
6.) You have to input the html image tag directly to the navigation label section to make
the icon appear on the menu<br><br>
<img src="image/b2-thumbnail5.png"><br><br>
<pre class="brush: php;">
<img src="http://themes.goodlayers2.com/worldwide/wp-content/uploads/2013/06/home-icon.png" alt="">
</pre>
<br><br>
<strong>DON'T FORGET TO</strong> assign the title attribute to assign the label nav area on the mobile device too.
</div>
<div class="lesson">
<h3><a name="b3" id="topic">B3.) Social Links</a> (<a href="#top">top</a>)</h3>
<p>
1.) You can enable or disble each
<a href="image/b3-thumbnail1.png" rel="prettyPhoto">social icon</a>
by going to 'World Wide admin panel > Overall elememnts > Social Network'.<br><br>
<img src="image/b3-thumbnail2.png"><br><br>
2.) Assign url to each field to enable the social icons.<br><br>
3.) For mail icon, try placing <strong>mailto:support@goodlayers.com</strong> inside the input box to make it support with
your mail service. ( or else, it'll be normal link like other social icons. )
</div>
<div class="lesson">
<h3><a name="c1" id="topic">C1.) Create Sidebar</a> (<a href="#top">top</a>)</h3>
<p>
There are 4 predefined sidebars include with the theme to use with footer area. <br><br>
1.) To create another sidebar, goto 'World Wide admin panel > General > Sidebar'.
Type sidebar name, then click add button and save changes. <br><br>
<strong> Special characters ( such as & ) are not allowed to be in the siebar name </strong><br><br>
<img src="image/c1-thumbnail1.png"><br><br>
2.) Go to page or post, you will see the option for sidebar layout in post options. Select layout and lecet the side bar that you just created.<br><br> <img src="image/c1-thumbnail2.png"><br><br>
3.) Go to 'Appearance > Widget' and you'll see widget area to assign.... or read '<a href="#c2">C2</a>'
</p>
</div>
<div class="lesson">
<h3><a name="c2" id="topic">C2.) Sidebar Widgets</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'Appearance > Widgets'<br><br>
<img src="image/c2-thumbnail1.png"><br><br>
2.) The sidebar you create in above section will appear at right side of this page.
Try dragging the widget in side the sidebar box.<br><br>
<img src="image/c2-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="c3" id="topic">C3.) Set Default Posts Sidebar</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'Admin Panel > General > Blog/Port Style'<br><br>
<img src="image/c3-thumbnail1.png"><br><br>
2.) Set the default sidebar style and assign the sidebar you want. <br><br>
3.) If you modify any posts, the default sidebar will be overwritten with the value you assign in
post option. ( That means after update the post, the default sidebar option will be ignored. )
</p>
</div>
<div class="lesson">
<h3><a name="d1" id="topic">D1.) Footer</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'World Wide Admin Panel > General > Footer Style' and choose footer style you want.<br><br>
<img src="image/d1-thumbnail1.png"><br><br>
2.) Go to 'Appearance > Widgets'. You'll see footer widgets area on the right<br><br>
<img src="image/d1-thumbnail2.png"><br><br>
3.) Drag item from the left side to 'Footer widget area'. Remember that if you choose 3 column
footer style, only 3 footer is required to set, another one will be ignored.<br><br>
</p>
</div>
<div class="lesson">
<h3><a name="d2" id="topic">D2.) Footer Top Twitter</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'World Wide Admin Panel > Overall Elements > Footer / Copyright'<br><br>
<img src="image/d2-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="d3" id="topic">D3.) Copyright</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'World Wide Admin Panel > Overall Elements > Footer / Copyright Area'<br><br>
<img src="image/d3-thumbnail1.png"><br><br>
2.) Fill what you want.
</p>
</div>
<div class="lesson">
<h3><a name="e1" id="topic">E1.) Create Home Page</a> (<a href="#top">top</a>)</h3>
<p>
1.) Create new page and named it as Home Page or anything you want.
<br><br><img src="image/e1-thumbnail1.png" /><br><br>
2.) Go to 'Settings > Reading' and choose a static page as front page.<br><br>
<strong>*** You must leave the post page field blank or else it would mess up the page you select***</strong>
<br><br><img src="image/e1-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="e2" id="topic">E2.) Page Title and Content</a> (<a href="#top">top</a>)</h3>
<p>
1.) Page Title and Content can be added at Edit Page.
<br><br><img src="image/e2-thumbnail1.png" /><br><br>
2.) You can choose to hide the page title ( and content ) at "Page Option".
<br><br><img src="image/e2-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="e3" id="topic">E3.) Page Sidebar</a> (<a href="#top">top</a>)</h3>
<p>
1.) To choose sidebar, go to select layout section of 'Page Option'. Then choose any sidebar
you want. To create new sidebar, follow <a href="#c1">this tutorial</a>.
<br><br><img src="image/e3-thumbnail1.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="e4" id="topic">E4.) Page Top Slider</a> (<a href="#top">top</a>)</h3>
<p>
1.) Page Top Slider will show full width slider above the page content and page sidebar, so it'will always be full width.
You can create it at the bottom of 'Page Option'. To learn more about creating a normal slider, follow <a href="#h4">this tutorial</a>.<br><br>
2.) Selecting the Top Slider to 'Post Slider' will fetch the posts out in a carousel slider format.
<br><br><img src="image/e4-thumbnail0.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="e5" id="topic">E5.) Page Item</a> (<a href="#top">top</a>)</h3>
<p>
1.) Page Item is a item that we provide for the page. Currently, we have up to 18 items.
You can add all these item to page by use the Add Item section in "Page Options".
You can choose item at 'Item list'. When you add item, it will appear at the item container.
<br><br><img src="image/e5-thumbnail1.png" /><br><br>
2.) You can edit, delete, increase size and decrease size of each item by use these following
button. ( each item has different size depends on its functional )
<br><br><img src="image/e5-thumbnail2.png" /><br><br>
3.) There are 5 page items that have inner size, blog, page, portfolio, testimonial and personnal item.
The inner size is the actual size of item. The item size will be the wrapper
( The inner size is relatived with the size of the wrapper ). <br><br>
<img src="image/e5-thumbnail3.png" /><br><br>
4.) You can learn more about each page item at <a href="#f1">this tutorial</a>.
</p>
</div>
<div class="lesson">
<h3><a name="e6" id="topic">E6.) Create Blog Page</a> (<a href="#top">top</a>)</h3>
<p>
1.) Create a new post, assign it to category(if you don't have category, just create a new one.)
<br><br><img src="image/e7-thumbnail1.png" /><br><br>
2.) Create a new page, add page item 'blog' in page builder section.
<br><br><img src="image/e7-thumbnail2.png" /><br><br>
3.) Click on the yellow editor button (4). Choose blog layout and select category that you just created. Click 'done' and publish the page.
<br><br><img src="image/e7-thumbnail3.png" />
</p>
</div>
<div class="lesson">
<h3><a name="e7" id="topic">E7.) Create Portfolio Page</a> (<a href="#top">top</a>)</h3>
<p>
1.) Create a new portfolio post, assign it to category(if you don't have category, just create a new one.)
<br><br><img src="image/e8-thumbnail1.png" /><br><br>
2.) Create a new page, add page item 'portfolio' in page builder section.
<br><br><img src="image/e8-thumbnail2.png" /><br><br>
3.) Click on the yellow editor button (4). Choose blog layout and select category that you just created. Click 'done' and publish the page.
<br><br><img src="image/e8-thumbnail3.png" />
</p>
</div>
<div class="lesson">
<h3><a name="f1" id="topic">F1.) Accordion</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the accordion item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f1-thumbnail1.png" /><br><br>
2.) After you finish customizing, save the page and you will get accordion as below.<br><br>
<img src="image/f1-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f2" id="topic">F2.) Blog</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the blog item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f2-thumbnail1.png" /><br><br>
2.) Blog item have 4 different style, that is widget-style, 1/1 full size, and 1/1 medium size
You can Learn more about <a href="#e5">blog size here</a>.<br><br>
<strong>Blog Grid</strong><br><br>
<img src="image/f2-thumbnail2.png" /><br><br><br><br>
<strong>Blog List</strong><br><br>
<img src="image/f2-thumbnail3.png" /><br><br><br><br>
<strong>Blog Grid List</strong><br><br>
<img src="image/f2-thumbnail4.png" /><br><br><br><br>
<strong>1/1 Medium Thumbnail</strong><br><br>
<img src="image/f2-thumbnail5.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f3" id="topic">F3.) Contact Form</a> (<a href="#top">top</a>)</h3>
<p>
<strong>The Contact Form has only full size.</strong><br><br>
1.) After <a href="#e5">create the contact form item</a> and click edit item, you will
see the email address field. <br><br>
<img src="image/f3-thumbnail1.png" /><br><br>
2.) Fill your email address, save the page and you will get contact form as below.<br><br>
<img src="image/f3-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f4" id="topic">F4.) Column</a> (<a href="#top">top</a>)</h3>
<p>
Column will create a frame for you to write a content. You can add short code or anything
you want to be display. You can create the column item from above
<a href="#e5">tutorial</a>.
</p>
</div>
<div class="lesson">
<h3><a name="f5" id="topic">F5.) Post-Slider Item </a> (<a href="#top">top</a>)</h3>
<p>
This item will act exactly like the <a href="#f9">slider item</a>, but it'll fetch the image from the post instead ( Please make sure
to assign feature image to all posts that will be fetched up too. ). <br><br>
<strong>Carousel Slider</strong><br><br>
<img src="image/f5-thumbnail1.png" /><br><br>
<strong>Normal Slider ( FLEX/NIVO )</strong><br><br>
<img src="image/f5-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f6" id="topic">F6.) Divider</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the divider item</a> and click edit item, you will
see a back to top text. This text will scroll you to top of the page. If you don't
want it, just leave it blank.<br><br>
<img src="image/f6-thumbnail1.png" /><br><br>
2.) Save the page and you will get the divider as below.<br><br>
<img src="image/f6-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f7" id="topic">F7.) Message Box</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the message box item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f7-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get message box as below.<br><br>
<img src="image/f7-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f8" id="topic">F8.) Portfolio</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the portfolio item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f8-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get portfolio item as below.<br><br>
<img src="image/f8-thumbnail2.png" /><br><br>
3.) You can see more about portfolio style at our <a href="http://themes.goodlayers.com/World Wide/portfolio-4-columns-2/">demo site</a> too.
</p>
</div>
<div class="lesson">
<h3><a name="f9" id="topic">F9.) Slider</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the slider item</a> and click edit item, you will see
the slider option. Follow <a href="#h4">this tutorial</a> to learn how
to edit the slider option.
</p>
</div>
<div class="lesson">
<h3><a name="f10" id="topic">F10.) Stunning Text</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the stunning text item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f10-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get stunning text item as below.<br><br>
<img src="image/f10-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f11" id="topic">F11.) Tabs</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the tab item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f11-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get tab item as below.<br><br>
<img src="image/f11-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f12" id="topic">F12.) Testimonial</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the testimonial item</a> and click edit item, the following
options will be shown. Testimonial can be displayed in 2 types. A single testimonial
and a category of testimonial. <br><br>
<img src="image/f12-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get testimonial as below.<br><br>
<strong>Carousel Testimonial</strong><br><br>
<img src="image/f12-thumbnail2.png" /><br><br>
<strong>Static Testimonial</strong><br><br>
<img src="image/f12-thumbnail3.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f13" id="topic">F13.) Toggle Box</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create the toggle box item</a> and click edit item, the following
options will be shown. <br><br>
<img src="image/f13-thumbnail1.png" /><br><br>
2.) Fill All fields, save the page and you will get toggle box item as below.<br><br>
<img src="image/f13-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f14" id="topic">F14.) Multi-level Page</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create page item</a>, you have to save the page and
assign its children.<br><br>
2.) You can assign the children page by go to edit page of that children page.<br><br>
<img src="image/f14-thumbnail1.png" /><br><br>
3.) The page item functional is same as portfolio except it will get its children page
instead of the portfolio category.
</p>
</div>
<div class="lesson">
<h3><a name="f15" id="topic">F15.) Price Item </a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create price item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f15-thumbnail1.png" /><br><br>
2.) The item number is the number of price item you want to show from specific category.<br><br>
<img src="image/f15-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f16" id="topic">F16.) Gallery </a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create gallery item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f16-thumbnail1.png" /><br><br>
2.) Select the <a href="#g5">gallery</a> you made and see what you get.<br><Br>
<img src="image/f16-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="f17" id="topic">F17.) Content Item </a> (<a href="#top">top</a>)</h3>
<p>
This item will get the content in the editor(wordpress visual/html editor) to show
as a page item. Don't forget to hide the page content in page options,
otherwise there will be a duplicated content in the page.
</p>
</div>
<div class="lesson">
<h3><a name="f18" id="topic">F18.) Personnel</a> (<a href="#top">top</a>)</h3>
<p>
1.) After <a href="#e5">create personnel item</a> and click edit item, the following
options will be shown.<br><br>
<img src="image/f18-thumbnail1.png" /><br><br>
2.) Select the <a href="#g6">personnel category</a> you made and see what you get.<br><Br>
<img src="image/f18-thumbnail2.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="g1" id="topic">G1.) Post (Blog)</a> (<a href="#top">top</a>)</h3>
<p>
1.) To create <a href="image/g1-thumbnail2.png" rel="prettyphoto">blog</a>,
go to 'Posts > Add New' and fill your contents.<br><br>
<img src="image/g1-thumbnail1.png" /><br><br>
2.) You can choose to display the item in <a href="image/g1-thumbnail2.png" rel="prettyphoto">
blog</a> at the 'Post Options'.<br><br>
3.) You can learn more about the post thumbnail(in post options) at the <a href="#h">Thumbnail Section</a>
</p>
</div>
<div class="lesson">
<h3><a name="g2" id="topic">G2.) Portfolio</a> (<a href="#top">top</a>)</h3>
<p>
1.) To create <a href="image/g2-thumbnail2.png" rel="prettyphoto">portfolio</a>,
go to 'Portfolio > Add New' and fill your contents.<br><br>
<img src="image/g2-thumbnail1.png" /><br><br>
2.) You can choose to display the item in <a href="image/g2-thumbnail2.png" rel="prettyphoto">
portfolio</a> at the 'Portfolio Options'. <br><br>
3.) You also can change the style of portfolio to be the same as blog by going to
'World Wide admin panel > General > Blog / Port Style' and select use portfolio as blog style.<br><br>
<img src="image/g2-thumbnail3.png" /><br><br>
4.) You can learn more about the portfolio thumbnail( in portfolio options )
at <a href="#h">Thumbnail Section</a>
</p>
</div>
<div class="lesson">
<h3><a name="g3" id="topic">G3.) Testimonial</a> (<a href="#top">top</a>)</h3>
<p>
<strong>Testimonial is the post type that does not have its own page,
you can create it using <a href="#f12">testimonial page item</a> in page options</strong><br><br>
1.) To create each testimonial content,
go to 'Testimonial > Add New' and fill your contents.<br><br>
<img src="image/g3-thumbnail1.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="g4" id="topic">G4.) Price Table</a> (<a href="#top">top</a>)</h3>
<p>
<strong>Price table is also the post type that does not have its own page,
you have to create it using <a href="#f15">price item</a> in page options</strong><br><br>
1.) To create each price table content,
go to 'Price Table > Add New' and fill your contents.<br><br>
<img src="image/g4-thumbnail1.png" /><br><br>
2.) Try placing this to the price content to create the price list like the demo site <br><br>
http://themes.goodlayers2.com/World Wide/price-table/ <br><br>
<pre class="brush: php;">
[price_list]30 GB[/price_list]
[price_list]12 Email Accounts[/price_list]
[price_list]50 GB Bandwidth[/price_list]
[price_list]Live Chat Support[/price_list]
[price_list]Enchanced SSL Security[/price_list]
</pre>
<Br><br>
3.) for normal content, try this shortcode instead.
<pre class="brush: php;">
[price_content]PLACE_YOUR_CONTENT_HERE[/price_content]
</pre>
</p>
</div>
<div class="lesson">
<h3><a name="g5" id="topic">G5.) Gallery</a> (<a href="#top">top</a>)</h3>
<p>
<strong>Gallery is another the post type that does not have its own page,
you have to create it using <a href="#f16">gallery item</a> in page options</strong><br><br>
1.) To create gallery content,
go to 'Gallery > Add New' and fill your contents.<br><br>
<img src="image/g5-thumbnail1.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="g6" id="topic">G6.) Personnel</a> (<a href="#top">top</a>)</h3>
<p>
<strong>Personnel is the other the post type that does not have its own page,
you have to create it using <a href="#f18">personnel item</a> in page options</strong><br><br>
1.) To create personnel post,
go to 'Personnel > Add New' and fill your contents.<br><br>
<img src="image/g6-thumbnail1.png" /><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="h" id="topic">H.) Thumbnail Management</a> (<a href="#top">top</a>)</h3>
<p>
Thumbnail is divided in to 2 types. <br><br>
1.) Thumbnail inside post type. This thumbnail is used in each post type. Ex.
<a href="image/g1-thumbnail2.png" rel="prettyPhoto">post</a>,
<a href="image/g2-thumbnail2.png" rel="prettyPhoto">portfolio</a><br><br>
2.) Thumbnail outside post type ( Refers as Post/Page/Portfolio Thumbnail ).
This thumbnail is used in page. Ex.
<a href="image/h-thumbnail3.png" rel="prettyPhoto">post</a>,
<a href="image/h-thumbnail4.png" rel="prettyPhoto">portfolio</a>
</p>
</div>
<div class="lesson">
<h3><a name="h1" id="topic">H1.) Feature Image</a> (<a href="#top">top</a>)</h3>
<p>
1.) To set feature image, you have to be in 'edit page/post/portfolio'.<br><br>
<img src="image/h1-thumbnail1.png"><br><br>
2.) Upload image you want to set or choose your image from media library and click
'Use as feature image'. Then close and update the page.<br><br>
<img src="image/h1-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="h2" id="topic">H2.) Image</a> (<a href="#top">top</a>)</h3>
<p>
1.) To add images to meta box, click the upload button.<br><br>
<img src="image/h2-thumbnail1.png"><br><br>
2.) Upload image you want to set or choose your image from media library and click
'Insert into Post'. Then close and update the page.<br><br>
<strong> *** Please make sure that you don't leave the LINK URL field blank *** </strong><br><br>
<img src="image/h2-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="h3" id="topic">H3.) Video</a> (<a href="#top">top</a>)</h3>
<p>
1.) You can add video link to any video meta boxes. Currently we support video from
www.vimeo.com and www.youtube.com. <br><br>
<img src="image/h3-thumbnail1.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="h4" id="topic">H4.) Slider</a> (<a href="#top">top</a>)</h3>
<p>
1.) Before you can use slider, you have to have images in media library. To add images,
goto 'Media > Add New' and upload images from your computer. <br><br>
<img src="image/h4-thumbnail1.png"><br><br>
2.) If you are editing the page, you can select slider type and slider width and height.
If you are editing the post or portfolio server will autometically choose the slider type
(flex slider), slider width and height for you. <br><br>
3.) You will face the following screen when you create the slider. the select media
panel will show you all images in media library. Click the image in 'Select Media'
to add image to slider<br><br>
<img src="image/h4-thumbnail2.png"><br><br>
4.) Click edit image setting and you will see the popup options.<br><br>
<img src="image/h4-thumbnail3.png"><br><br>
5.) If you choose link type = 'Link to Video', Anything slider will ignores the image you
select and show the video instead, while other sliders will treat it as a lightbox to video. <br><br>
6.) After you finish editing. Click done and save the page.
</p>
</div>
<div class="lesson">
<h3><a name="h5" id="topic">H5.) Self Hosted Video</a> (<a href="#top">top</a>)</h3>
<p>
<strong> You need to install the JW Player plugin before adding the self hosted video in your site. </strong><br><br>
<strong> *** <a href="http://www.longtailvideo.com/" target="_blank">http://www.longtailvideo.com/</a>*** </strong><br><br>
<strong> Please also update the plugin to latest version too.</strong><br><br>
1.) Going to JW Player > Create Custom Player. <br><br>
<img src="image/h5-thumbnail1.png"><br><br>
2.) Assign the width and height of the custom player to match with the theme thumbnail ( In <a href="#h6"> next section </a> ) <br><br>
3.) In post / portfolio option, you'll see an option to insert the self hosted video.
( Click the Insert JW Player instead of Insert to Post )<br><br>
<img src="image/h5-thumbnail2.png"><br><br>
4.) For embeded normal video into the content section, try using the normal function of JW Player instead.
</p>
</div>
<div class="lesson">
<h3><a name="h6" id="topic">H6.) Editing The Thumbnail Size</a> (<a href="#top">top</a>)</h3>
<p>
1.) Going to gdl-vairable.php file. <br><br>
2.) You'll see many arrays in this file. Try searching for the item you want ( Blog / Portfolio / Gallery ... )<br><br>
3.) For example, if you use the blog medium thumbnail without sidebar, you have to change this value. ( WIDTHxHEIGHT ) <br><br>
<img src="image/h6-thumbnail1.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="i1" id="topic">I1.) Elements Color</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to 'World Wide admin panel > Elements Color'.<br><br>
<img src="image/i1-thumbnail1.png"><br><br>
2.) Choose color for each element.<br><br>
3.) Save option. <br><br><br><br>
<strong> To change the color on live preview *** Only for wordpress version 3.4 ***</strong><br><br>
1.) Go to 'Appearance > Theme' and click Customize<br><br>
2.) Don't forget to save the option after you finish making changes.
</p>
</div>
<div class="lesson">
<h3><a name="i2" id="topic">I2.) Translator</a> (<a href="#top">top</a>)</h3>
<p>
<strong> You can translate this theme in 2 ways </strong><br><br>
<strong> Translate using goodlayers panel </strong><br><br>
1.) Go to 'World Wide admin panel > Translator'.<br><br>
2.) Change each word to what you want. Inside the parentheses is the page which
contains that word.<br><br>
*** We provide only some specific words in our admin panel,
if the word you want is not there, please try using another method instead ***<br><br><br><br>
<strong> Translate using wordpress localization (.mo) </strong><br><br>
1.) Going to 'World Wide admin panel > Translator > Enable admin translator <br><br>
2.) Turning the admin translator off <br><br>
<img src="image/i2-thumbnail1.png"><br><br>
3.) Seeing how to translate the theme here<br><br>
<a href="http://codex.wordpress.org/WordPress_in_Your_Language" target="_blank">
http://codex.wordpress.org/WordPress_in_Your_Language
</a>
</p>
</div>
<div class="lesson">
<h3><a name="i3" id="topic">I3.) Background</a> (<a href="#top">top</a>)</h3>
<p>
<strong>We provide 15 background patterns for your alternative.</strong><br><br>
1.) Go to 'World Wide admin panel > Overall Elements > Background Style'. If you want
your own image as a background, you can choose the Background Type as custom image.<br><br>
<img src="image/i3-thumbnail1.png"><br><br>
<strong>Also the default page header background can be set at the Admin Panel > Overall Elements > Page Title Background</strong><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="i4" id="topic">I4.) Fonts</a> (<a href="#top">top</a>)</h3>
<p>
<strong>We provide 15 cufon + over 300 google fonts(@Fontface) for your alternative.</strong><br><br>
1.) Go to 'World Wide admin panel > Font Style', You can choose any font size and
font family you want. Moreover you can upload your own cufon font at the 'Upload Font' section<br><br>
<img src="image/i4-thumbnail1.png"><br><br>
<strong>The uploaded cufon font must NOT have duplicated name with provided font. Otherwise,
you have to change the font_family name in js file before upload to the server.</strong><br><br>
2.) To upload new cufon font, click 'Upload Font' section and click 'add new font' button.
Then choose the cufon file( .js type ), server will automatically generate the font name
for you. Click save and feel free to use it.<br><br>
<img src="image/i4-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="i5" id="topic">I5.) Responsive Option</a> (<a href="#top">top</a>)</h3>
<p>
1.) The normal option of responsive is set to disable. You can enable it by going to 'Admin Panel >
General > Page Style' and select the enable responsive to on <br><br>
<img src="image/i5-thumbnail1.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="j" id="topic">J.) Shortcodes</a> (<a href="#top">top</a>)</h3>
<p>
<strong>We provide shortcode button for easier use at the text editor.</strong>
<img src="image/j-thumbnail1.png"><br><br>
You can see shortcode list online here <br><br>
<a href="http://themes.goodlayers2.com/World Wide/shortcodes" target="_blank">http://themes.goodlayers2.com/World Wide/shortcodes</a><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="j1" id="topic">J1.) Top Bar Right Text Snippet</a> (<a href="#top">top</a>)</h3>
<p>
<pre class="brush: php;">
<span style="font-size: 12px; font-weight: bold; color: #ffffff; margin-right: 15px;">
[gdl_icon type="icon-phone" color="ffffff"] 1800-2234-5367
</span>
<span style="font-size: 12px; font-weight: bold; color: #ffffff;">
[gdl_icon type="icon-envelope-alt" color="ffffff"] contact@worldwide.co.uk
</span>
</pre>
</p>
</div>
<div class="lesson">
<h3><a name="j2" id="topic">2.) Contact Page Sidebar Snippet</a> (<a href="#top">top</a>)</h3>
<p>
Place This in text widget <br><br>
<pre class="brush: php;">
<div style="background: #f5f5f5; padding: 15px 20px; margin-top: 5px;">
<strong>Tokyo</strong>
552 Minato St.
Shibuya Tokyo
Call : +00-000-0000
Email : contact@yourdomain.com
</div>
<div style="background: #f5f5f5; padding: 15px 20px; margin-top: 20px;">
<strong>London</strong>
11/234 Main Street.
Kingstown London
Call : +00-000-0000
Email : contact@yourdomain.com
</div>
</pre>
</p>
</div>
<div class="lesson">
<h3><a name="k1" id="topic">K1.) How to disable comment</a> (<a href="#top">top</a>)</h3>
<p>
1.) Go to your specified page (or post).<br><br>
2.) Click 'Screen options' on the top. And check 'Discussion' box.<br><br>
<img src="image/k1-thumbnail1.png"><br><br>
3.) Scroll down until you see 'Discussion' meta box. Uncheck allow comment<br><br>
<img src="image/k1-thumbnail2.jpg"><br><br>
4.) Save.
</p>
</div>
<!--
<div class="lesson">
<h3><a name="k2" id="topic">K2.) Portfolio permalink does not work with qtranslate</a> (<a href="#top">top</a>)</h3>
<p>
Try seeing the solution from this site. <br><br>
<a href="http://www.choong.nl/2011/04/10/qtranslate-and-get_permalink/">
http://www.choong.nl/2011/04/10/qtranslate-and-get_permalink/
</a>
</p>
</div>
-->
<div class="lesson">
<h3><a name="k3" id="topic">K3.) Blog lose formatting</a> (<a href="#top">top</a>)</h3>
<p>
Try going to setting > reading and leave the post page field blank. <br><br>
<img src="image/k3-thumbnail1.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="k4" id="topic">K4.) Enable Manual Excerpt</a> (<a href="#top">top</a>)</h3>
<p>
1.) When you edit the post or portfolio, at the top right of the screen, you'll see the screen option.<br><br>
2.) Selecting the excerpt option. <br><br>
<img src="image/k4-thumbnail1.png"><br><br>
3.) Placing your excerpt at the excerpt box at the bottom of the page. <br><br>
<img src="image/k4-thumbnail2.png"><br><br>
</p>
</div>
<div class="lesson">
<h3><a name="l" id="topic">L.) Restrictions</a> (<a href="#top">top</a>)</h3>
<p>
1.) If the pagination does not work for portfolio, please try checking that the portfolio slug
( at admin panel > general > post/portfolio style ), does not have the same name with page name.<br><br>
2.) The uploaded cufon font must NOT have duplicated name with provided font. Otherwise,
you have to change the font_family name in js file before upload to the server.<br><br>
</p>
</div>
<div class="lesson">
<h3><a name="m1" id="topic">M1.) Installing Theme</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/MgGMVEZzw0k" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m2" id="topic">M2.) Setting up homepage like demo site</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Iugj-Go9pow" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m3" id="topic">M3.) Creating Blog</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/ZE9hPnJtotE" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m4" id="topic">M4.) Creating Portfolio / Filter Portfolio</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/KnAVhmjlXHM" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m5" id="topic">M5.) Creating Gallery</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/KaFBClypWk8" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m6" id="topic">M6.) Page Builder</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Dt03WRZJjKs" frameborder="0" allowfullscreen></iframe>
</p>
<h3><a name="m7" id="topic">M7.) Thumbnail Management</a> (<a href="#top">top</a>)</h3>
<p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/crTPDynKV6s" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<div class="lesson">
<center><h3>Once again!,Thanks for purchasing this theme. Enjoy! =)</h3></center>
</div>
</div>
</body>
</html>