Documentation
An overview of One, how to install and use, theme options and examples, and more.
An overview of One, how to install and use, theme options and examples, and more.
We would like to thank you for purchasing One!
This documentation file helps you to understand the whole theme concept and how it works. You should read all sections of the file before start your work. Here have multiple detailed explain of elements, theme sections and included video tutorials.
If you have any questions that are beyond the scope of this help file, please check out and search for Forum page.
After that you still can't find the solution yet, please leave a ticket on Support system then support agents help your issue asap.
Surely you have already installed WordPress on your server. If you don't installed it yet and you are new to WP and have problems installing it, you might want to check out following tips.
You need to download theme files after you've purchased the it. Following image describes downloads section of the item and you have 2 download choices.
Visit Downloads menu from your profile dropdown.
Please click on Download (green) button and choose your options.
Downloading All Files gives you a all-files.zip file with all the content listed below
Downloading the installable WordPress theme only gives you the One.zip file.
You can either choose to upload the theme via WordPress upload function or via ftp to your site.
Appearance -> Themes
Install Themes
tabOne.zip
file (it is located in the folder you've downloaded from ThemeForest).Install Now
buttonNote: This is a short video instruction but prepared on a different theme. If you see here some small difference please do not pay attention on them and just focus on the steps.
wp-content -> themes
directoryAppearance -> Themes
of your dashboard and Activate the theme.After the activation you see this notice at top of your dashboard. This theme requires those three additional plugins and you need to install those.
Please click on Begin insalling plugins.
Note: This is a short video instruction but prepared on a different theme. If you see here some small difference please do not pay attention on them and just focus on the steps.
Envato Toolkit plugin requires MarketPlace username and API Key. You can get API key from your Settings tab of ThemeForest account. Lets provide those infomation and get theme update anytime and easily.
You can get latest theme version easily with this Themes section after a while.
Theme has dedicated data option. You should click One of those link and select your desired Concept home page layout. Action will set a few important tasks including selection of Home page, Main navigation setting and Sidebar widgets when you click on Import Demo Data button.
Note: Please wait patiently for a while until imports all the content. Delay time is depends on your server upload speed but it won't be exceed than 2 minutes.
Previous option helps you to include minimized demo content on your site reason for quick include. But you can have full demo data with regular XML data imports.
Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.
Hope you have provided your account information in Envato Toolkit plugin. If you go to the Envato Toolkit => Themes page, you'll see similar to following image. Let's click on Update automatically link at right bottom. This is a most efficienat and easy way to integrate latest verion on your site.
After clicking to auto-update, you’ll see the confirmation that everything worked correctly.
Go to the Appearance => Themes and activate another theme than One such as TwentyTwelve, TwentyThirteen or One child theme. Delete the old version of the theme because folder name existing error comes up when we try to install it without deletion. Then install the theme again as you see early in this documentation.
Usually updating a theme means replacing the old files with the new Ones. You can see changelog.txt file from the new download archive and you can get updated files list as modified/added and deleted. Upload and overwrite those files on your theme directory.
If theme changed lots of files and you really hard to collect changed files, there is a better way to do it when it comes to WordPress themes.
WordPress treats two version of the same theme as different themes. That is, if you have One v1.2 and v1.3 in your wp-content/themes folder they are treated as two different themes independent of each other.
That means you can have multiple version of the same theme installed on your blog. So whenever there is a new version of your theme available, instead of replacing or deleting the files of the older version follow this procedure.
The main advantage of following the above procedure is you can quickly switch back to the old version of the theme if you find any problems with the new version or if it clashes with any plugins you are using.
Live Customize panel has many options those help you to control your site. You have to know only where your desired options exist and how they are capable of. Please take some time to navigate through each tab and read options' description.
Group | Class | Description |
---|---|---|
Menus | ||
Menu locations | ||
Menu options | ||
General |
Brand Color | The color that styles active menu, links & hover, pagination and much. But if the color doesn't fit for your area, you can set correct One at specific areas. Those customizations won't be overwritten by this. |
Title color | ||
Content text color | ||
Background color | ||
Preloader loading | ||
Font | ||
Font | Here is the font section which helps you to change the font. | |
Title font normal | ||
Text font | ||
Secondary font | ||
Menu font | ||
Logo and Header | ||
Logo Image | ||
Page title background image | ||
Header Options | You can choose from 2 header layouts. | |
Header Layouts | Header area fullwidth, Header area wrapped(boxed). | |
Header layout dark? | ||
Header search button | ||
Phone number | ||
Contact info | ||
Coming soon page | Coming soon page option | |
Coming soon background picture option | ||
Logo image option | ||
Coming soon page style option | ||
Coming soon time counter option | ||
Footer Options | ||
Footer columns | Select footer columns up to 4. | |
Footer text color | ||
Sub footer background color | ||
Sub footer text | ||
Footer background Image | Optional background image | |
Extras | Export/Import | |
Custom CSS | ||
General CSS | ||
Tablet CSS | Screen width between 768px and 991px | |
Wide Phone CSS | Screen width between 481px and 767px. Ex: iPhOne landscape. | |
Phone CSS | Screen width up to 480px. Ex: iPhOne portrait. | |
Widgets | You can add your widgets here to sidebars and footer columns. | |
Static Front Page | Choose your main page | Front page display |
Logo and header option configures header parts inclufing logo, header background image, header layouts, header layour color, search button and contact information.
Brand Color is the basic color of your website. It changes color of such things header login, text, menu item,slider button, main part icon,button etc.You can change brand color through customize's general option.
After the installation, you can configure something on following place for Visual Composer. You might want to allow VC for your custom post types initially.
Visual composer has tons of elements that presents content view. But our theme has more advanced elements that enriches this beautiful theme. Please hit on the tab and find elements and use them for your need. Every element has a purpose and detailed options. You can see their live result on the demo pages. Enjoy :)
Group | Description & Used Concepts |
---|---|
Blog Posts | Show your blog posts by category and by specific numbers. |
Branch | It will show your company branches. |
Button | Here you can change your button style. |
Image carousel | Here you can change your pictures as carousel. |
Category title | Here you can show your category with title and image. |
Client slider | Show your clients logo will be with slider. |
Counter | The element shows the items number. |
Event | The element shows the event details. |
Google Map | The element allows options for you to fill overlay coloured layer and custom map marker image. |
Icon box | Insert the icont with styles. |
Info box | Insert the information with icon and description. |
Heading carousel | It will show swiper slider of images. |
Page title slider | Here is the you can upload image and text. It will show your page title with image. |
Portfolio | Show your portfolio posts by category and specific numbers. |
Pricing element | It will show your product price with details. |
Progress Barr | Show your progress bar with animated and items selection. Also you can customize select two different style of "Standard & Circled". |
Project | It will show project with image and description. |
Separator | This element will show section elements separated by branch style. |
Service element | This element, you can add own company services here. |
Service slider element | It will show swiper slider of services. |
Service type | It will show the service types. |
Team | Manage your team member profile pages using our Team Member custom post type, create multiple teams. |
Testimonial | Testimonial Slider Swiper Container. |
Title | It will show title with different styles. |
You'll find Page options at bottom of your main editor. Please read the option name and description and use them for customize your every single page.
Each headers' main slider made by "Page title slider element".Select 'page title slider' element and open the setting. You can configure each slide's image by value.
Page title slider setting | Description & Used Concepts |
---|---|
Image Upload | Choose your slider image. |
Page title style | Choose your style from 6 sliders styles. |
Title | Add title of each slide. |
Subtitle | Add subtitle of each slide. |
Description | Add description of each slide. |
Description | Add description of each slide. |
Paragraph | Add paragraph description of each slide. |
Button 1 and 2 Name | Add buttons' name. |
Link | Add buttons' link. |
Just in case changing slider width, you can use row's setting.
If you need to add space top of your slider, You can use remove padding option in bottom of your page.
First of all, you need to active "The Event Calendar" plugin.You'll find event option on your admin dashboard. Create your event using by "The Event Calendar" setting.
EVENT CALENDAR SETTING | Description & Used Concepts |
---|---|
TIME AND DATE | You can set event's start and end date & time. |
LOCATION | Point the event location with google map. |
ORGANIZERS | Insert organizer's information. |
EVENT WEBSITE | Here you can insert your event website. |
EVENT COST | Here you can insert your event currency symbol and cost. |
Click the event icon on the topbar. You will see your created events on the calendar.
If you want to display your event posts on the pages. You can use the 'Event' element.
If you want to choose one event as single page. You can do it on the appearance's menu. Paste your event permalink to the custom link's URL option.
Our theme is compatible with Contact form 7 and please put following markup on the Form field of your form. Then your form turns similar into our style that presents on Contact page.
<fieldset class="contact-form-fieldset"> [text* name id:inp1 class:contact-inp placeholder "Name"] <label for="inp1" class="contact-form-label fa fa-user"></label> </fieldset> <fieldset class="contact-form-fieldset"> [email email-502 id:inp2 class:contact-inp placeholder "Email"] <label for="inp2" class="contact-form-label fa fa-at"></label> </fieldset> <fieldset class="contact-form-fieldset"> [textarea message id:inp3 class:contact-inp placeholder "Message"] <label for="inp3" class="contact-form-label fa fa-pencil"></label> </fieldset> [submit class:wpc-btn class:size-1 class:marg-lg-t30 "Send now"]
You can have subscribe form by MailChimp for WordPress plugin. Install the plugin and add a widget instance on footer sidebar area.
Sometimes hard to implement small css features by predefined options. Then we've prepared some helpful classes those can used on any custom places and style your content. Most of page builder elements have Extra class field and you can allow following classes on them.
Class name | Description |
---|---|
.text-white |
Sets text color as white |
.text-light | Sets text color as white |
.text-dark |
Sets text color as black |
.text-thin-300 |
Sets text font weight 300 |
.text-center |
Text center |
.text-right |
Text right |
.text-left |
Text left |
.list-inline |
Allows ul/ol to inline style. |
.no-margin |
Disables element margin. Efficient usage is on Rows |
.no-margin-top |
Disables element margin top |
.no-margin-bottom |
Disables element margin bottom |
.no-padding |
Disables element padding |
.no-padding-top |
Disables element padding top |
.no-padding-bottom |
Disables element padding bottom |
Footer quicklink menu is made by the "Custom menu" widget.
We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.
FontsOnce again, thank you so much for purchasing this theme.
We'd be glad to help you if you have any questions relating to this theme. We I'll do our best to assist.