WordPress Theme Guide: Cosmone
1. One-page Home Page Setting
The default setting displays the Blog page as Home page. If you want to turn to a one-page Home page, you have to switch the mode first. Go to Dashboard -> Appearance -> Theme Options, navigate to Home Page, and turn on the “One Page Home” switch. 
1.1. Add new Home sections
There is no default Home section in the list; you have to create a new one manually.
Go to Dashboard -> Home Sections -> Add New. Type in a title, and add some words in the editor.
1.2. Section Options
You are allowed to do more settings whenever you create a new section. Navigate to Section Options (below the editor) -> General Options, there are various options you can edit in order to make the section what you need.
1.2.1. Content Full Width On/Off: decides whether the section is full width or with sidebars.
1.2.2. Assign to nav Menu: decides whether adding the section name to the navigation menu or not.
1.2.3. Show/hide section title: whether showing or hiding the section title can be controlled.
1.2.4. Custom section title (default post title): enables you to showing another section title on the Home page; if not amend, it will display the default post title.
1.2.5. Background: have full control of the section background, including background color, background-repeat, background-attachment, background-position and background-size. You can also upload or select an image as background.
1.2.6. Padding Top: a value that shows the distance between the content and the top.
1.2.7. Padding Bottom: a value that shows the distance between the content and the bottom.
1.2.8. Section Css Class: a place for you to quote custom Css model from style.css files.
1.2.9. Short description: type in some descriptions, which will be displayed below the section title.
1.3. Manage Section order
Thanks to one-page’s feature of putting all sections in a single page, it is important to decide the order of all your sections. Whenever you create a new section, navigate to the “Attributes” area, type in a number (from 0), which controls the priority of the section’s displaying order. The larger the number is, the prior the displaying order is. If the numbers are the same, the publish time matters. After everything been set, do not forget to click on the Publish button.
2. Portfolios Settings
The Portfolio section enables you to showcase products with galleries from different categories. How to change Portfolio’s styles will be explained in the “Shortcode” section later. First, let’s see how to create a portfolio page with gallery.
2.1. Add new portfolios categories
Go to Dashboard -> Portfolios -> portfolios categories, navigate to Add New Category. Edit Category name, slug, and descriptions. Click on the “Add New Category” button, and you will see the name appears in the right-side list. Each name on the list can be opened to amend settings separately.
2.2. Add new portfolios
Go to Dashboard -> Portfolios -> Add New, navigate to Add New Portfolio, type in a title, edit the permalink, and edit the content in the text box.
Navigate to “Portfolios Categories” in the right-side box, select a category from the table.
Navigate to “Featured Image” below “Portfolios Categories”, click on the “set featured image” and choose an image from the media library in the popup box, as the cover of the gallery.
2.3. Portfolio gallery setting
Navigate to Portfolio Meta Box, click on the “Create Gallery” button, upload images or add images from your media library to the gallery in the popup box, then click on the “Add to gallery” button.
After all settings are done, finally click on the Publish button.
2.4. Add Portfolios to Navigation menu
Go to Dashboard -> Appearance -> Menus, expand the “Portfolios” or “Portfolios Categories” selection in the left-side box, tick those you want to be displayed on the navigation menu and click on “Add to Menu”. Then in the right-side editor, tick “Home Page Header Menu” in the “Menu Settings” area. Finally click on the Save Menu” button.
3. Theme Options Settings
There are various custom settings in the Theme Options, including General Options, Home Page Settings, Header Settings, Footer Settings, and 404 Page Settings. All these settings affect the entire style of your website, which can be easily amended according to the following instruction.
3.1. General Options
Go to Dashboard -> Appearance -> Theme Options -> General Options.
3.1.1. Theme Scheme: Choose a color scheme from the select box, including blue, green, orange (default), and red. This choice controls the dominant hue of the theme.
3.1.2. Upload Logo: click on the blue “+” button to upload or select an image from the Media Library, click on the “Send to Option Tree” button. The image will appear in the top left corner of your Home page.
3.1.3. Upload Favicon: click on the blue “+” button to upload or select an image from the Media Library, click on the “Send to Option Tree” button. The image will appear in a browser’s address bar or next to the site name in a bookmark list.
3.1.4. Post Content Typography: multiple selections on post content typography can be set here, including font-color, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-decoration, and text-transform. A demo effect can be previewed from the text box.
3.1.5. Custom CSS: a place for you to quote custom Css codes from style.css files.
3.1.6. Reset Options/Save Changes: After all setting are done, click on the “Save Changes” button. If you want to turn back to default settings, you can click on the “Reset Options” button.
3.2. Home Page Settings
Go to Dashboard -> Appearance -> Theme Options -> Home Page.
3.2.1. One Page Home On/Off: a switch controls the Home page displaying, whether as Blog page or one-page Home page.
3.2.2. Section Title Typography: controls the typography of different sections’ titles, including font-color, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-decoration, and text-transform. A demo effect can be previewed from the text box.
3.2.3. Section Description Typography: controls the typography of different sections’ description words, similar to above.
3.2.4. Section Content Typography: controls the typography of different sections’ content, similar to above.
3.2.5. Reset Options/Save Changes: After all setting are done, click on the “Save Changes” button. If you want to turn back to default settings, you can click on the “Reset Options” button.
3.3. Header Settings
Go to Dashboard -> Appearance -> Theme Options -> Header.
3.3.1. Header Background: Choose a color as background, or click on the blue “+” button to upload or select an image from the Media Library, click on the “Send to Option Tree” button. The image will cover the background color.
3.3.2. Tagline Typography: controls the tagline typography, including font-color, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-decoration, and text-transform. A demo effect can be previewed from the text box.
3.3.3. Reset Options/Save Changes: after all setting are done, click on the “Save Changes” button. If you want to turn back to default settings, you can click on the “Reset Options” button.
3.4. Footer Settings
Go to Dashboard -> Appearance -> Theme Options -> Footer.
3.4.1. Footer Background: Choose a color as background, or click on the blue “+” button to upload or select an image from the Media Library, click on the “Send to Option Tree” button. The image will cover the background color.
3.4.2. Footer SNS Icon: there are four existing SNS Icons; click on the pencil icon to open more detailed settings, type in Title -> Choose SNS types -> enter SNS links. You can also add more SNS icons by clicking on the “Add New” button. Click on the dustbin icon can delete them. You can also manage their order through drag & drop.
3.4.3. Copyright: edit the copyright of your website at the text box, which will be displayed at the Home Page Footer area (below SNS icons).
3.4.4. Tracking Code: The Tracking Code initiates the recording process for every page on your site on which it is placed, although not every visitor will actually be recorded. That is determined by your recording ration, quota, visitor type, browser and other parameters. (e.g. Google Analytics tracking code, for more information, visit our WordPress tutorial “How to Add Google Analytics to WordPress”)
3.4.5. Reset Options/Save Changes: after all setting are done, click on the “Save Changes” button. If you want to turn back to default settings, you can click on the “Reset Options” button.
3.5. 404 Page Settings
Go to Dashboard -> Appearance -> Theme Options -> 404 Page.
Type in a title -> edit content in the Text box -> Click on the “Save Changes” button
4. Shortcode
Cosmone theme supports shortcode functionality, and there are 18 set of built-in shortcodes for you to customize. There’s no need for you to write codes manually, since the shortcode generator can help to receive such effects. All you have to is select from our 18 kind of shortcode styles and set properties according to your preference.
The Cosmone admin panel allows you to insert shortcode in four different places, including Posts, Pages, Portfolios and Home sections. The following instructions focus on how to insert shortcodes into Home sections.
Go to Dashboard -> Home Sections -> Add New, click on the blue square brackets icon to open the shortcode generator. In the popup “MageeWP Shortcodes Generator” box, you can see all of the 18 set of shortcodes, such as Button, Column, Row, etc. Now a detailed instruction of each of them will be introduced.
4.1. Icon Shortcode
Click on “Icon” in the MageeWP Shortcodes Generator to open Icon editor.
Choose an icon name from the large amount of Font Awesome Icon Name list by clicking the “Click Here” link. Select icon size from the drop-down list, customize Css styles, and finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.2. Button Shortcode
Click on “Button” in the MageeWP Shortcodes Generator to open Button editor.
4.2.1. Button Color: choose a color from the five color schemes, including purple, pink, green, yellow, orange.
4.2.2. Button Style: Cosmone offers two kinds of Button styles; choose one from the select box.
4.2.3. Icon in Button: select an icon name from the various Font Awesome Icon Name list.
4.2.4. Button Text: type in the words showing on the Button
4.2.5. Button Link: enter a link address, which leads to a new web page while clicking on the button.
4.2.6. Link Target: a property that controls the opening style of the link target, including four optional parameters: “_self”, “_blank”, “_parent”, and “_top”.
4.2.7. Css Class: a place for you to quote custom Css codes from style.css files.
Finished by click on the “Insert Shortcode” button, and you can see a sentence of codes in the Content text box.
You can amend the codes here or delete it. If you want to add more buttons, repeat the above actions.
4.3. Column + Row Shortcode
Column and Row usually be used together to divide the layout. When you want to divide a section into different parts, add a Row tag, and fill it with columns.
4.3.1. Column
Click on “Column” in the MageeWP Shortcodes Generator to open Column editor.
Choose the grid size from the select boxes. For detailed information about grid. Customize Css styles in the Css Class box, and edit content in the Content box. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.3.2. Row
Click on “Row” in the MageeWP Shortcodes Generator to open Row editor.
Customize Css styles in the Css Class box, and edit content in the Content box. Since Column and Row usually be used together to divide the layout, you can copy the Column shortcode and paste the code sentence to the Content box. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.4. SNS Shortcode
Click on “Sns” in the MageeWP Shortcodes Generator to open SNS editor. Type in Icon (Font Awesome icon name or image url), type in link address, customize Css styles in the Css Class box, and finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.5. Align Shortcode
A shortcode to control the align styles, which can be used anywhere, such as while editing a post’s content, or used with other shortcodes together.
Click on “Align” in the MageeWP Shortcodes Generator to open Align editor. Customize Css styles in the Css Class box, edit content in the Content box, and finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.6. Portfolio Shortcode
Click on “Portfolio” in the MageeWP Shortcodes Generator to open Portfolio editor.
Choose a style from the list, either “Style 1” popup-box style or “Style 2” image-link style. Select Portfolio Category, type in list number, choose whether showing pagination, choose columns, customize Css styles, and finally finished by clicking on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.7. Service Shortcode
Click on “Service” in the MageeWP Shortcodes Generator to open Service editor.
Type in atitle, type in Icon (Font Awesome icon name or image url), customize Css styles, and finally finished by clicking on the “Insert Shortcode” button to insert the shortcode to your Content text box.
When you add several Service shortcodes, you’d better put these codes with Column and Row tags together, in order to make the layout more organized.
4.8. Team Shortcode
Click on “Team” in the MageeWP Shortcodes Generator to open Team editor.
Choose a style from the list, type in team member’s Name, edit Avatar by naming a url, type in byline, customize Css styles, and finally finished by clicking on the “Insert Shortcode” button to insert the shortcode to your Content text box.
When you add several Team shortcodes, you’d better put these codes with Column and Row tags together, in order to make the layout more organized.
4.9. Testimonial Shortcode
Click on “Testimonial” in the MageeWP Shortcodes Generator to open Testimonial editor.
Choose a style from the list, either “Style 1” message-board style or “Style 2” slideshow style. Customize Css styles, and amend Content in the editor. The default three sentences of codes refer to three testimonials. You can add more or delete. Amend author, add avatar, and edit text content. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.10. Pricing Shortcode
Click on “Pricing” in the MageeWP Shortcodes Generator to open Pricing editor.
Choose a style from the list, type in title, price and button text, insert a button link address, edit button link target (e.g. “_self”, “_blank”, “_parent”, “_top”, etc.), customize Css styles, and edit content.
There are four existing code sentences in the Content box, where you can add more or delete. While “support=yes”, a tick will be showed; while “support=no”, a cross will be showed. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
When you add several Pricing shortcodes, you’d better put these codes with Column and Row tags together, in order to make the layout more organized.
4.11. Gmap Shortcode
Click on “Gmap” in the MageeWP Shortcodes Generator to open Gmap editor.
Amend width percentage, type in your address, choose Marker or not, edit Zoom, customize Css styles, edit infowindow descriptions in Content box, and finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.12. Accordions Shortcode
Click on “Accordions” in the MageeWP Shortcodes Generator to open Accordions editor.
Choose a style from the list, choose Active Item (the default expanding item), customize Css styles, and edit content. There are three existing code sentences in the Content box, where you can add more or delete. You can also amend accordion title and accordion content. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.13. Contact Shortcode
Click on “Contact” in the MageeWP Shortcodes Generator to open Contact editor.
Type in your email address in the “Sent To” box, customize Css styles, and click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.14. List Shortcode
Click on “List” in the MageeWP Shortcodes Generator to open List editor.
Type in Font Awesome Icon Name, customize Css styles, and edit list content in the Content text box. Each line in the text box refers to a line in the list. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
You’d better put these codes with Column and Row tags together, in order to make the layout more organized.
4.15. Progress Shortcode
Click on “Progress” in the MageeWP Shortcodes Generator to open Progress editor.
Choose a style from the list, type in title and percentage, customize Css styles, and finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.16. Tabs Shortcode
Click on “Tabs” in the MageeWP Shortcodes Generator to open Tabs editor.
Type in Active Item (the default expanding item), customize Css styles, and edit content. There are three existing code sentences in the Content box, where you can add more or delete. You can also amend tab title, tab content and icon. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
4.17. Timeline Shortcode
Click on “Timeline” in the MageeWP Shortcodes Generator to open Timeline editor.
Type in list number and category name, choose Post Style (either import data from Blog or Portfolio), and customize Css styles. Finally click on the “Insert Shortcode” button to insert the shortcode to your Content text box.
5. Blog Page Settings
Usually, most people will put the one-page as Home page, which makes it difficult for visitors to find out the Blog page. Therefore, you should know how to create a static blog page and add it to the Home page navigation menu.
5.1. Create a static Blog page
Go to Dashboard -> Pages -> Add New, type in title (Blog), amend permalink, and edit content in the text box.
5.1.1. General options
Navigate to Page Meta Box below the Text box, choose blog layout from the Sidebar selection box. Set Blog page background by selecting a color or uploading an image.
5.1.2. Page Attributes
Navigate to Page Attributes area on the right, choose parent pages, select Template, and edit the order in the navigation menu. The larger the number is, the prior the displaying order is. You can also upload an image in the Featured Image area.
Finally click on the Publish button.
5.1.3. Make Blog a static page
Go to Dashboard -> Settings -> Reading, navigate to Font page displays, select “A static page”, and choose “Blog” in the Posts page.
Do more specific setting below, including “Blog pages show at most”, “Syndication feeds show the most recent”, “For each article in a feed, show (either Full text or Summary), “Search Engine Visibility”. Finally click on the Save Changes button.
5.2. Add Blog to Navigation menu
Go to Dashboard -> Appearance -> Menus, find Blog in the left-side “Pages” select box, tick it and add to menu. Then in the right-side editor, tick “Home Page Header Menu” in the “Menu Settings” area. Finally click on the Save Menu” button.
6. Revolution Slider Settings
Cosmone has a powerful built-in Slider Plugin, which named Revolution Slider. The plugin can form slider shortcode automatically, that can be inserted into Posts, Pages, Home sections, and Portfolios, just like all other shortcodes.
Go to Dashboard -> Revolution Slider (below Settings) -> Create New Slider.
Type in Slider Title and Slider Alias (such as “Slider 1”), then a Slider Shortcode will be displayed below automatically. You can do more detailed settings in other areas of this page, such as Slider Layout, Height, Width, Shuffle Mode, etc. After all settings are done, click on the “Create Slider” button. The page will turn back to the Slider Lists.
Find out the Slider Name (“Slider 1”) you have created just now, click on the “Edit Slides” button -> Add New Slide -> upload image files or choose from Media Library -> click on the “Insert” button.
Then the selected image will appear in the Slides List. For more slides, repeat the process. Click on the Close button and the page will turn back.
Click on the Slider Name (“Slider 1”), copy the Slider Shortcode, and add it to the place you want to display. For example, you can create a Welcome section in the Home page, with this eye-catching slidershow.