MAGEEWP

Themes for WordPress

MAGEEWP

Themes for WordPress

Onetone User Manual

1. Introduction

1.1 Guide introduction

In this user guide you will find all required information to get your site up. It is mainly introducing how to use WordPress theme Onetone to make one-page site and change demo date to what you need. Specific description of the various functional modules, features and principles will be written. If you are user for Onetone pro, click to view pro user manual.

1.2 WordPress Theme Onetone

WordPress is most likely to be the first platform that many take into consideration when setting up a website. It is a general trend in the world now. Onetone is a free responsive business theme based on HTML5 & CSS3. Keeping up with the latest web design trend, Onetone applies to the layout of one-page, which showcases all the essential features of your website on the Home page. Onetone can provide a way to satisfy and understand all of users ‘needs –even for a brand-new user. The basic sections designed for business purpose have already been built for you. Onetone Introduction

2. Compatibility

Onetone is compatible with the WordPress version 4.0 and later (PHP v.5.2.4 or greater; MySQL v.5.0.15 or greater). Most JavaScript enabled browsers will make our themes work with no issues. They are designed and optimized for desktops, tablets and smartphones. Currently we are testing themes in:
  • Google Chrome (Mac and PC)
  • Firefox (Mac and PC)
  • Internet Explorer 10 and later (also, we’re making sure that site remains readable in IE 9)
  • Safari (Mac and PC)
  • Opera (based on Blink/Chromium engine; Mac and PC)
  • Safari Mobile
  • Chrome (on iOS and Android)

3. Installation

3.1 Install WordPress Theme(2 ways)

  • Download & install the theme from WordPress dashboard
Go to Dashboard->Appearance->Themes->Add New->Input “Onetone” into search box->Click “Install” ->Download and Install online dashboard setting
  • Download the installable theme file-> Save it in your device
You can download the theme from wordpress.org or our official site. Then you need to upload the installable file to your wordpress site. Log in your WordPress Go to Dashboard-> Appearance -> Themes -> Add New. Click on ‘Upload’ -> ‘Browse’ ->Load the onetone.zip file you downloaded earlier ->click on ‘Install Now’. upload setup

3.2 Activate Theme

 Appearance > Themes to activate the theme by hitting the correspondent “Activate” link.

3.3 Magee Shortcodes Plugin

After active the free version theme, you will see the tip on the top of Appearance/Themes like below, the plugin Magee Shortcodes will enhance the Onetone fuction, so we highly recommend installing it. Click the Begin installing plugin, you will be redirected to “Appearance/Install Plugins”, click “install” and you will install the the plugin Magee Shortcodes conveniently. After install the Magee Shortcodes plugin, go to “plugin/installed plugins” and click “Activate”, then you could use it in the post/page now. More usage about the plugin you could read the Magee Shortcodes Guide.

4.Homepage

4.1 Assign Homepage

Step 1

Create a new page by navigating to the ‘Pages’ tab in your WordPress admin sidebar. Once here, click the ‘Add New’ button at the top of the page. home page a

Step 2

Input a new name for your page, then find the ‘Page Attributes’ box on right side. Under theTemplate section, select the ‘Front Page’ option from the dropdown list. home page b

Step 3

Setting up your home page is the same as setting up any other regular pages, except that you need to specify in the settings which page will be your Main Home Page.
    • Navigate to the “Dashboard> Settings > Reading” interface
    • Check “A static page(select below)”
    • In the ‘Front page’ selector choose the page you want to be the Homepage from the Front Page dropdown list.
front-page-display

4.2 Header Setup

The words in red box (the image below) are the site title and tagline. The site title and tagline can be changed associated with your own logo, style. So you can customize your site’s title and tagline to promote your business. header-content  
  • Click “Customize” in the top left of homepage
  • Click “Site Identity”
  • Edit it in site title and Tagline
  • Don’t check “Display Header Text” if site title and tagline are not needed
header setting steps
  • Remember to save and publish.

4.3 Background Setup

4.3.1 Slider in Banner

Slider can only display in Section 1. If you want to use it, choose slider instead of content for section 1. slideshow introduction Check “Choose to display default slider instead of section contents here“, set slide as the section background. changing slider Then go to Onetone Options->Slider, here you can:
  • Choose slideshow number (at most 5 pieces);
  • Change slideshow image;
  • Insert slideshow content;
  • Set slide speed.
slider-section

Image

Remove the default picture -> Click “Upload” ->Choose your logo or image-> “Select”

Text

Some html and shortcode knowledge will be required if you want the text look well. Don’t break the default structure if you know a little about html and shortcode. Edit the text, take place the sample words.

Slide Speed

The default slide speed is 5000 milliseconds. To achieve the slideshow effects, you can set a time to control show procedure. slider-content

4.3.2 Video Background

The theme allows you to insert a video as background for a section on the home page of your website. You can explain about your product or services through this video. video background introduction Click in” YouTube Video Background Options” to expand. In “YouTube ID for Video Background“, input Video ID, not url.(pictured below) YouTube-ID-display In”Video Background Section“, set the order of video background section. Video background can be put in any section. In general, it will be selected as “Section 1—Banner“. video backgroundsection Set Video Controls yes or no, finally save all options. YouTube-ID If you want to enable animation for fixed section content, check “Enable animation for default section content” to enable Animation. Animation  

 4.4 Section 1—— Banner

This section is designed for showing your “Banner”, your title, your slogan, etc. It usually consists of background and top bar.   banner-introduction This section is named as “Banner” by default,click “Banner” to expand and edit it. banner-section

Hide Section

When the section is useless or unwanted,”Hide Section” can help you to hide the unwanted section so that it disappears in the homepage.Choose it when you want to hide the section. Note that the following”Hide Section” appeared in the each section please reference here. hide section setup

Section Title

Insert title for this section, it appears at the top of the section.  Section title can be kept empty in home section for legibility. Please note that more information about how to set section title appeared in the following section can be found here. section title

Menu Title

This title will display in the header menu. If leave it empty, this section link would not be displayed in header menu. Setting it according to your requirements. Please note that more information about how to set menu title appeared in the following section can be found here. menu title

Menu Slug

The “slug” is the URL-friendly version of the name. It is usually all in lowercase and only contains letters, numbers, and hyphens since non-English words can’t be read well in some browsers. Please note that more information about how to set menu slug appeared in the following section can be found here. menu-slug

Section Css Class

This option is for the css advanced users, by using it, you will get various styles.  Leave it blank when you don’t need it. Please note that more information about how to set section css class appeared in the following section can be found here.

Section Background

These Multiple color scheme feature makes your website attractive.
  • Select color -> select any color and any image that suits your business identity.
  • Click “Remove” -> Upload -> Check “Upload Files/Media Library” -> Click picture you want ->”Save” set-sectionbackground Please note that more information about how to set section css class appeared in the following section can be found here.

Section Content

“Default”and “Custom” are available for you to choose in “Section Content” “Default”:fixed  layout,a simpler,less complicated mode with a set form ,language,and hierarchy. Enter the each column name when prompted. “Custom”:non-fixed layout,user can use html and shortcode to get more complex structure,so you’d better know and use html andshortcode well. Select the mode based on the actual situation. Then the following section will explain in detail how to use them. The explanation on how to set the “Default” and”Custom” appeared in the following section can consult here,each section layout is different but the steps is similar. (1)Choose “Default” is simpler for the user who not familiar with html and feel confused with the shortcode. default setup
  • Select words color that suits your business identity.
  • Insert sub-title for this section. It appears at the bottom of the section title.
sutitle setting
  • Set button Text
  • Set button Link
  • Choose Button target “self” or “blank”
  • Go to Fontawesome to find more icon codes. (You simply need to copy the code and paste it into corresponding field in a menu item)
fontawesone icons (2)Choose “Custom” is for the user who want to get his style site. But you’d better know html and shortcode well. custom setting Use Shortcode or use html to edit section content.Please edit it carefully.
  • Finally click on the ‘Save Options’ button.

4.5 Section 2——Slogan

This section is explanation module, setting is similar, and you custom it according to your requirements. slogan introduction
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area,
  • Click on “Section 2—Slogan” to expand the form.
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Select “Default” and “Custom” in Section Content Module
(1)Check “Default” in Section Content Model slogan default  
  • Select words color that suits your business identity;
  • Insert sub-title for this section, it appears at the bottom of the section title;
  • Set Button Text;
  • Set Button Link, like “https://***.com”;
  • Choose Button Target “self” or “blank”;
  • Edit words in Description.
(2)Check “Custom” in Section Content Model Edit this part by using html and shortcode. slogan custom
  • Finally click on the ‘Save Options’ button.

4.6 Section 3——Services

This section is designed for you to introduce the services from your company, the features of your product, etc. service introduction
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area,
  • Click on “Section 3—Services” to expand the form
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Select “Default” and “Custom” in Section Content Model
(1)Check “Default” in Section Content Model servicedefault
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Go to Fontawesome to find more icons to take place of sample icon;
  • Upload image for this section. Leave it blank if you don’t need it;
  • Set Service Title;
  • Input title link;
  • Choose Link Target “self” or “blank”;
  • Edit words in Service Description.
(2)Check “Custom” in Section Content Mode service custom You can edit the section content by using html and shortcode.
  • Finally click on the ‘Save Options’ button.

4.7 Section 4——Gallery

This section is designed for you to display the pictures of your products, projects etc and provide relevant links for lead customers to other respective detailed pages, an effective way of showing and expanding your business。 gallery introduction
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area
  • Click on “Section 4—Gallery” to expand the form
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Click “Remove” -> Upload -> Check “Upload Files/Media Library” -> Click picture you want ->”Save”
  • Choose “Default” or “Custom” in Section Content Model
(1) Check “Default” in Section Content Model gallery default
  • Select color that suits your business identity;
  • Insert sub-title for this section;
  • Remove the default picture and upload image you need;
  • Input title picture link;
  • Set link target “Blank” or “self”
(2)Check “Custom” in Section Content Mode gallery custom Edit this part by using html and shortcode.
  •  Finally click on the ‘Save Options’ button.

4.8 Section 5—— Our Team

The section mainly introduces your team to the public and shows your teammate to promote your business. team section1
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area,
  • Click on “Section 5—Our Team” to expand the form.
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Choose “Default” or “Custom” in Section Content Model
(1)Check “Default” in Section Content Model team section2
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Set column number, “2” “3” “4” are available for you to choose;
  • Upload avatar image;
  • Input link, name and byline;
  • Edit description in description section;
  • Change social icons and add social icons’ link (at most 4).
(2)Check “Custom” in Section Content Mode team section3 Edit this part by using html and shortcode. Remember to click “save options”

4.9 Section 6——About

“About” section is a part to present the basic information of you or your company.Add a brief paragraph to introduce your business to let your customers get know your company and products quickly. Personal information is a part to show your contact information. about section
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area
  • Click on “Section 6—About” to expand the form
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Choose “Default” or “Custom” in Section Content Model
(1)Check “Default” in Section Content Model about default
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Edit your words in left content;
  • Edit your words in right content.
(2)Check “Custom” in Section Content Mode about custom You can edit this part by using html and shortcode.
  • Finally click on the ‘Save Options’ button.

4.10 Section 7——Custom

This part is designed for you to customize your own section, together with section 8 are an integral part of Testimonials. testimonial11
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area
  • Click on “Section 7—Custom” to expand the form
  • Hide the section if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Choose “Default” or “Custom” in Section Content Model
(1)Select “Default” in Section Content Model custom default
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Select header background color;
  • Upload header background image.
(2)Select “Custom” in Section Content Model custom custom You can edit the part by using html or shortcode. Finally click on the ‘Save Options’ button.

4.11 Section 8—— Testimonials

Testimonials section, a part to display the feedback from your customer, the section consist of customer’s suggestion ,their image and jobs, help other customer to judge your company, our products. Section 8 is the part to your clients’ information. testimonial22  
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area
  • Click on “Section 8–Testimonials” to expand the form
  • Check “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Choose “Default” or “Custom” in Section Content Model
(1)Check “Default” in Section Content Model test-default  
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Set column number, “2” “3” “4” are available for you to choose;
  • Upload avatar image;
  • Input link, name and byline;
  • Edit description in description section
(2)Check “Custom” in Section Content Model test custom Edit this part by using html and shortcode. Finally click on the ‘Save Options’ button

4.12 Section 9——Contact

This section is designed for your customers to leave a message to you. contact introduction
  • Go to Dashboard -> Appearance -> Onetone Options, navigate to Home Page area,
  • Click on “Section 9–Contact” to expand the form.
  • Select “Hide Section” if needed
  • Type in Section Title
  • Type in Menu Title
  • Type in Menu Slug
  • Amend background color or upload an image
  • Choose “Default” or “Custom” in Section Content Model
(1)Check “Default” in Section Content Model contact default
  • Select color that suits your business identity;
  • Insert sub-title for this section. It appears at the bottom of the section title;
  • Add your email address to Your E-mail;
  • Edit in Button Text.
(2)Check “custom” in Section Content Model Edit this part by using html and shortcode. custom contact This section is a part to get in touch with your clients, so the messages would be sent to the email address you set in user profile. Finally click on the ‘Save Options’ button.

 4.13 Section 10—Section 15

There are 15 sections in all, 9 sections are showing in the homepage, some sections are hidden from section11 to section 15.You can customize these sections that all depend on your requirements. section10-15
 

5. General Options

general options Back to Top Button—–Show or hide are available for you to choose. top button Custom CSS—–If you need add extra css codes, edit this part. The following css code will add to the header before the closing </head> tag. (The custom css is for the css advanced users.If you’ve some knowledge about CSS then you can add custom CSS to change the styling where you want to.) Tracking Code—–Paste your Google Analytics (or other) tracking code here. This will be added into the header template of your theme. Please put code inside script tags. You can generate detailed statistics about the website’s traffic and traffic sources with the help of this section. To see what’s happening on your site, simply insert the tracking code in Tracking code section and save the changes. Space before </head>—–Add code before the head tag. Space before </body>—–Add code before the body tag. Tips: Click ‘Restore defaults’ to import default date if needed.
 

6. Header

Homepage Header Overlay

Overlay means you could put the header over the banner and has tansparent backgroud like below. You could switch it on or off.

General Header Settings

header1

In”Header Background”,you can set:

Header Background Image—-Set background for the header area, as follow 100% Background Image—-Click “yes”, the header background image display at 100% in width and scale according to the browser size/Click “No”, the header background image will change its original size. Parallax Background Image—–Turn on to enable parallax scrolling effect on the background image for header top positions. Background Repeat—-Choose the way of background image’s repeating. “repeat”,” repeat-x”,” repeat-y”, “no-repeat” are available for you to choose. Header Top Padding & Header Bottom Padding—-This option allows you to enter a numerical value to set the space header top and the header bottom. In pixels or percentage, ex: 10px or 10%.Top Bar Options—-Top Bar is always above the header and banner.

For top bar, you can set:

top-bar
  • Display Top Bar (yes or no),
  • Background Color
  • Left Content (info, sns, menu and none.)
  • Right Content (info, sns, menu and none.)
  • Info Color, Info Content and Menu Color also can be set in this option.
  • Social Links, you can set 9 social icons and 9 social icon links.
  • Social Icons Color is unlimited.
  • Social Icon Tooltip Position can be set as” left” “right” and “bottom”.
Attention: More social icon codes, you can get from http://fontawesome.io/icons/ header2
 

7. Sticky Header

sticky-header introduction Backing to top-level pages is a real problem when you are in emergency, yes? Don’t want to scroll all the way back up to the top to select a menu item, yes? With Onetone’s sticky header, you no longer have to do it. Your main menu and logo will always be at the top of the screen, automatically following. This makes it much easier for your viewers to quickly navigate through your site. sticky header changingEnable Sticky Header on Mobiles” and “Enable Sticky Header on Tablets” can enable stick header to adjust to tablets and mobiles. Sticky Header Menu Item Padding—–Set the distance between each menu item in the sticky header Sticky Header Navigation Font Size—–Set the size of the menu item in the sticky header. Sticky Header Logo Width—-Set logo width in the sticky header.
 

8. Logo

This option allows you to upload your own logo and favicon. The logo will display in the left of header. logo section introduction

Upload Logo

Click “Upload” ->Choose your logo or image-> “Select” logo changing 2

Upload Logo (Retina Version @2x)

This option is designed for apple device, twice the size of the image displays in the other device.

Sticky Header Logo

Set logo for sticky header Click “Upload” ->Choose your logo or image-> “Select” logo changing  

Attention:

  • Select an image file for the retina version of the logo.
  • If retina logo is uploaded, enter the standard logo (1x) version width, do not enter the retina logo width. Use a number without ‘px’, ex: 40
  • If retina logo is uploaded, enter the standard logo (1x) version height; do not enter the retina logo height. Use a number without ‘px’, ex: 40
  • You can also set the left/right/top/bottom margin of the logo using a number without ‘px’, ex: 40
margin setting

Logo Left Margin/Logo Right Margin/Logo Top Margin/Logo Bottom Margin

The option is setting the margin of logo, set it depend on your needs.
 

9. Styling

styling Here you can set:
  • Primary Color
  • Background Colors
  • Elements Colors
  • Layout Options
  • Fonts Colors
  • Main Menu Colors
Primary Color Primary Color is the color style of the whole site; it is the default color in somewhere in site like link hover color. Please below effect for your reference. primary color settingBackground /Element /Font /Main Menu Colors
  • Navigate to the Appearance> Onetone Options > Styling tab.
  • Select a color by clicking the Select Color button. Enter the hexcode of your desired color or use our built in color picker tool.
  • Set the Opacity by entering a numerical value in the Opacity field. Choose from 0, which makes it transparent, to 1, which makes it opaque.
  • Layout Options
  • You can set a global top and bottom padding for the page content in Appearance> Onetone Options > Styling tab under the Layout Options section.

10. Sidebar

Onetone offers both single and dual sidebars layout. Onetone includes a powerful set of options to achieve this throughout the theme. It allows single or dual sidebars, or no sidebars. There are two sidebar dropdown fields that allow you to make these selections; Left Sidebar and Right Sidebar. siderbar Blog Posts – the single post pages that are created for each blog post. Blog Archive / Category Pages – any cat/arch pages created for blog posts. Search Page – the search results page that displays when a search is performed. 404 Page – the 404 results page that displays when a page doesn’t exist.
 

11. Slider

Refer to 4.3.1
 

12. Footer

setting-footer   If you check” Enable Footer Widgets Area”, the widgets area will appear in the bottom of the page. footer-display  

12.1 Widgets Area

widgets-area You can drag & drop unlimited number of widgets to every widgets area. Remember to click the “save” button after editing widgets. You can also remove widgets by clicking the “delete” link inside the correspondent widget area.
 

13. 404 page

page404   404 page will appear when the given page can’t be found. HTML codes are required in this section; you’d better edit it in text mode. Don’t break the default structure if you are not familiar with the html codes.
 

14. Post & Pages

Even for a business website, a blog can become a central component, despite your website having a static homepage. You can use your blog to drive more visitors to your website, which in turn has the ability to generate more leads and help your business grow faster. Also, Onetone is not a single-page template. You could also add more pages to your site with our theme.

14.1 Create a new page

To edit your site’s pages, click the Pages menu in your dashboard creating-page   Go to Dashboard ->Pages ->Add New ->Publish
  • Click Add new located on the right side of the screen.
  • Title your new page.
  • Edit some words in content section; by using shortcode to getting more page style (suggest your editing in “Text” mode).
  • Finally, remember to click publish. (When you’re ready to publish, you can either publish immediately to save this or a draft, or schedule the page to be published later.)

14.2 Onetone Metabox Options

metabox-options This page allows you to specify default settings for pages area:
  • Depend on content full width “Yes” or “No”, “Full width” option will page content utilize 100% of site content width;
  • Display breadcrumb yes or no;
  • Set page size (padding top and padding bottom);
  • Select layout of page area (sidebar position).

14.3 Assign Blog List Page

If you would like to have a blog, you have the option to set up a separate page to display your recent posts elsewhere on your site.
  • Go to Dashboard>Pages>Add New>Title your new page “Blog” (or anything else you like) > Publish this page.
  • Navigate to the “Dashboard> Settings > Reading” interface
  • Check “A static page(select below)”
  • In the “Posts page” section choose “Blog” or name you create. Selectors choose the page that you have created to be the Homepage.

14.4 Create a new post

To edit your site’s posts, click the Postss menu in your dashboard creating-post Go to Dashboard ->Posts ->Add New ->Publish
  • Click Add new located on the right side of the screen.
  • Title your new post.
  • Edit some words in content section; by using shortcode to getting more page style (suggest your editing in “Text” mode).
  • Finally, remember to click publish. (When you’re ready to publish, you can either publish immediately to save this or a draft, or schedule the page to be published later.)
Then this blog post would appear in posts list.

Menus

15.1 Add blog link to homepage main menu

You can see “Blog” appear in the header. blog displaying Refer to 14.2, you have already created a new page called “blog” and go to Settings ->Reading to set the page as Posts Page.
  • Then go to Appearance >Menus
  • Check Blog to Add to Menu
  • Check Home Page Header Menu
  • Save changes menus
 
  • Finally, click “Save Menu” button.

15.2 HomePage Header Menu

You could not only add blog, but also other pages, posts, links to the homepage menu. Check Home Page Header Menu, Menu Title can be displayed in homepage’s menu. If you have added menu item into Home Page Header Menu, those items will appear after all sections’ menu title. And it only appears in homepage; edit it in Appearance/Menus.

15.3 Primary Menu

Primary menu would display in all pages & posts excerpt for homepage. You could also create a new menu and save it as primary menu through Appearance->Menus. primary menu
 

16. Technical Support for—Onetone

Onetone offers a number of avenues for reaching helpful, individualized support. Our technical support will help you get straight to the right source, so that you can get the quickest, most accurate answer to your question! Here you can get technical support ASAP Company website: https://www.mageewp.com Email: support@mageewp.com Facebook: https://www.facebook.com/MageewpSupport/ Forum: https://www.mageewp.com/forums