938 lines
44 KiB
HTML
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>
|