Dana Documentation

Introduction

Thank you for purchasing Dana WordPress Theme. Before you get started, please be sure to always check out these documentation files. We outline all kinds of good information, and provide you with all the details you need know to use Dana Theme.

If you are unable to find your answer here in the documentation, please contact us on our Support Forum or directly from our themeforest account

What is included in the price?

Dana WordPress Theme
Child Theme
Lifetime Updates
Theme Documentation
Premium Plugins
Premium Plugins documentations
Premium Support - To our support forum.

Please don't forget to rate Dana with 5 stars and leave a nice review, it means a lot to us.
Simply log in into your Themeforest, go to Downloads section and click 5 stars next to the Dana WordPress theme.

Thanks!
Bearsthemes Team

General Options

You can enable Less Design, change Body Layout, change Body Background and enable Page Loader in the Theme Options. Please, follow the steps below to change general options.

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > General .

Step 3 - Choose which part of the theme you want to modify.

Enable Less Design: To generate css over time...

Site Layout: To modify Body layout with wide or boxed.

Body Background: To modify Body background with image, color, etc.

Mobile Width: Controls the width to enable mobile.

Smoth Scroll: To use smoth scroll.

Back To Top: Control button back to top.

Site Loading: Control animation before site load complete.

Step 4 - When you have finish to customize the general options don't forget to save

Upload your logo

You can upload your logo image in the Theme Options. Please, follow the steps below to upload your logo:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Theme Options > Header.

Step 3 - Upload a Logo ( Used For normal header ) and a Logo ( Used for Stick Header ).

Upload your favicon

You can upload your favicon image in the Appearance. Please, follow the steps below to upload your favicon:

Step 1 - Go to Appearance > Customize > Site Identity.

Step 2 - Upload your favicon. Should be a Png/Gif image.

Menu Setup

Creating your menu

First we will see how to create your menu

Adding pages to your menu

How to add page to our new menu

Assigning a Menu to a Location

Select where to show our menu

Mega Menu

Learn how to make an awesome mega menu

Creating your menu

Step 1 - Login to the WordPress Dasrdoard.

Step 2 - From the 'Appearance' menu on the left-hand side of the Dasrdoard, select the 'Menus' option to bring up the Menu Editor.

Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button.

Your menu is now defined, and you can now add pages to it (steps below).

Adding pages to your menu

The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. The Screen Options are located in the top right corner of your WordPress Dasrdoard.

Step 1 - Locate the pane entitled Pages.

Step 2 - Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.

Step 3 - Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Step 4 - Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.

Step 5 - Click the Save Menu button once you've added all the menu items you want.

Your custom menu has now been saved.

Assigning a Menu to a Location

Once you've created a menu and filled it with items, it's time to assign it to one of the theme pre-defined locations.

Step 1 - Go to Appearance > Menus and click Manage Locations.

Step 2 - Assign each Theme Location with a menu. You can assign menus to multiple Theme Locations.

Step 3 - Click the Save Changes button.

Mega Menu

Dana features Mega Menus. The mega menus are available only for top level navigations items only in "Main Menu" area.
Follow the steps below to create a mega menu:

Step 1 - Add a an item to the menu editor. This has to be a top level item!

Step 2 - Click on arrow icon in the top right-hand and exapnd.

Step 3 - Seclect the columns number you want to use in Submenu Type.

Step 4 - Now, you need to add child menu items, which will represent columns in the mega menu.
First level of child items will represent Titles in each of columns.
Add sub child menu items, like on the image below.
Step 5 - Now, add child items to each of those columns. This will represent your actual sub-menu pages. Take a look at the image below.

Step 6 - If you want to Remove the Titles Go back to the Mega menu setting and check Hide Mega Menu heading.

Step 7 - Adding Widget / Image to the Menu. To do this first you need to have a Widget set with some widget ( you can create new sidebar go to Appearance > Widget ). Menu doesn't work with all the widget, but works will all Dana Widget and Default WordPress Text Widget

Step 8 - Add icon FontAwesome.

Header Options

Follow the steps below to find out how to change the header:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Header .

Step 3 - Select the header layout.

Navigation Options

Follow the steps below to find out how to change the navigation:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Menu .

Step 3 - Choose which part of the theme you want to modify.

Full Width (100%): Turn on to have the header area display at 100% width according to the window size. Turn off to follow site width.

Enable Header Top: Turn on to enable header top.

Enable Header Bottom Absolute: Turn on to enable header bottom absolute.

Logo: Upload the logo of header.

Menu Assign: Select menu assing of header.

Menu Align: Control align of menu.

Enable Menu Content Right: Turn on to enable content right of menu.

Enable Header Sticky: Turn on to enable sticky header.

And more...

Footer Options

Follow the steps below to find out how to change the footer:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Footer .

Step 3 - Select the footer layout.

Step 4 - Choose which part of the footer you want to modify.

Full Width (100%): Turn on to have the header area display at 100% width according to the window size. Turn off to follow site width.

Enable Footer Top: Turn on to enable footer top.

Footer Top Columns: Controls the columns number of the footer top.

Enable Footer Top Columns Class: Turn on to enable footer top columns class.

Footer Top Background: Control the background of the footer top.

And more...

Step 5 - When you have finish to customize the color don't forget to save.

Title Bar Options

Follow the steps below to find out how to change the title bar:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Title Bar .

Step 3 - Choose which part of the title bar you want to modify.

Full Width (100%): Turn on to have the content area display at 100% width according to the window size. Turn off to follow site width.

Title Bar Align: Control align of the title bar.

Title Bar Background: Control the background of the title bar.

Title Bar Overlay Color: Control the overlay color of the title bar.

Title Bar Padding Space: To modify value of Font Family, Font Subsets, etc for title text.

Title Bar Space: Control the bottom margin the title bar.

Step 4 - When you have finish to customize the color don't forget to save.

Typography Options

Follow the steps below to find out how to change the Typography:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Typography .

Step 3 - Choose which part of the typography you want to modify.

Body Font Options: To modify value of Font Family, Font Subsets, etc.

H1 - H6 Font Options: To modify value of Font Family, Font Subsets, etc.

Step 4 - When you have finish to customize the color don't forget to save.

Blog Options

Follow the steps below to find out how to change the Archive Post:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Archive Blog .

Step 3 - Choose which part of the Blog you want to modify.

Archive Post Options

Signle Post Options

Step 4 - When you have finish to customize the color don't forget to save.

Page Options

Follow the steps below to find out how to change the page options:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Page .

Step 3 - Choose whether or not you would like to show page comments.

Step 4 - When you have finish to customize the color don't forget to save.

Custom CSS & Js Options

Follow the steps below to find out how to change the custom css & js:

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Theme Options > Custom CSS & Js .

Step 3 - Quickly add some CSS to your theme by adding it to this block.

Step 4 - When you have finish to customize the color don't forget to save.

Create Blog Posts

Adding Posts

You can customize each posts modifying the post options.
We will explain you how to create post using Dana.

Gallery Posts

We will explain you how to create Gallery Post.

Video Posts

We will explain you how to create Video Post.

Audio Posts

We will explain you how to create Audio Post.

Quote Posts

We will explain you how to create Quote Post.

Show your Posts

How to create a Blog page to show your post

Adding Posts

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click the 'Posts' tab.

Step 3 - Click the 'Add New' sub-tab.

Step 4 - Start filling in the blanks: enter your post title in the upper field, and enter your post body content in the main post editing box below it.

Step 5 - As needed, select a category, add tags, post format, fill in the meta setings below the editor.

Step 6 - Upload a featured image for your Post.

Create Gallery Post

Step 1 - Change Post Format to Gallery.

Step 2 - Scroll down until you see the Gallery Settings.

Step 3 - After finishing, Update your Post, it should looks like this

Video Post

Step 1 - Change Post Format to Video.

Step 2 - Scroll down until you see the Video Settings.

Step 3 - After finishing, Update your Post, it should looks like this

Audio Post

Step 1 - Change Post Format to Audio.

Step 2 - Scroll down until you see the Audio Settings.

Step 3 - Publish or Update your post, it should looks like this

Quote Post

Step 1 - Change Post Format to Quote.

Step 2 - Scroll down until you see the Quote Settings.

Step 3 - After finishing, Update your Post, it should looks like this

Link Post

Step 1 - Change Post Format to Link.

Step 2 - Scroll down until you see the Link Settings.

Step 3 - After finishing, Update your Post, it should looks like this

Show your Posts

To you show your posts you need to create a Blog page. Click here to check how create a blog page.

Create Blog page

Follow the steps bellow to understand how to create a blog page.

Create blog page

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button .

Step 5 - Select the Blog module.

Step 6 - The Blog Settings should appear. You can customize the Blog by modifying the settings

Step 7 - After finishing, Publish the page.

Create Portfolio post

Add Portfolio Items

How to add Portfolio item to showcase your work.

Portfolio Post Setting

We will explain you how to post setting.

Add Portfolio Items

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard).

Step 2 - Click the 'Portfolio' tab.

Step 3 - Click the 'Add New Portfolio Item' sub-tab.

Step 4 - Start filling in the blanks: enter your portfolio title in the upper field, and enter your portfolio body content in the main post editing box below it.

Step 5 - Add tag(s) to your item, the tags will be used as a filter on Portfolio Template pages.

Step 6 - Upload a featured image for your portfolio item then publish it.

Post Setting

Step 1 - Scroll down until you see the Portfolio Settings.

Step 2 - After finishing, Update your Post

Showing Portfolio Items

To you show your portfolio items you need to create a Portfolio page. Click here to check how create a portfolio page.

Create Portfolio page

Follow the steps bellow to understand how to create a portfolio page.

Create Portfolio page

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Portfolio module.

Step 6 - The Portfolio Settings should appear. You can customize the Portfolio by modifying the settings

Step 7 - After finishing, Publish the page.

Create Team Post

Add Team Items

How to create your team post.

Add Team Items

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click the Teams > Add New.

Step 3 - Fill the title field with the team name, add a Group and Filter category if needed.

Step 4 - Add a featured image, it will represent your team member's image.

Step 5 - Scroll down until you see the Team Settings.

Showing Teams

You need to use the Team module in order to list your teams.
Check the team module page for more information

Create Team page

Create Team page ( standard )

We will explain how to create a team page.

Create Team page ( carousel )

We will explain how to create a team page using Carousel.

Create Team page ( standard )

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Team module.

Step 6 - The Team should appear. You can customize the Team by modifying the settings

Step 7 - After finishing, Publish the page.

Create Team page ( carousel )

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Team Carousel module.

Step 6 - The Team Carousel should appear. You can customize the Team Carousel by modifying the settings

Step 7 - After finishing, Publish the page.

Theme Options

The theme comes with an extensive Theme Options Panel. From the Theme options panel you will be able to set or change the color of the theme, layout, header style, social icons and a lot more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme. Click Theme Options to access the Theme Options Panel.

Use Font flaticon

Follow the steps below to use font flaticon:

Step 1 - Login to site flaticon to search and add icon in your collections.

Step 2 - Click Download colection button to download iconfont.zip file.

Step 3 - Extract and replace all file in folder flaticon.

Step 4 - Go to folder fonts to open flaticon.html file from extrax file.

Step 5 - Select and coppy class iconfont.

Step 6 - Input class iconfont in icon font option of element.

Revolution Slider

Dana theme includes the premium plugin - Revolution Slider.
Once you've installed and activated the Revolution Slider plugin, you will then see the menu item appear at the bottom of the WordPress menu, as below:

Documentation

You can import the revolution slider we used in our demo, all slider are in the slider folder. To learn more about the Revolution Slider plugin please read the Plugin documentation

Essential Grid

Dana theme includes the premium plugin - Essential Grid.
Once you've installed and activated the Essential Grid plugin, you will then see the menu item appear at the bottom of the WordPress menu, as below:

Documentation

You can import the essential grid we used in our demo, all grid are in the ess_grid.json. To learn more about the Essential Grid plugin please read the Plugin documentation

Use Page Builder

Activate Page builder

We will explain how to active the Visual Composer.

Add and modify Row Layout

We will explain how to add Row and change Row layout works.

Edit Element

We will explain how to edit element.

Duplicate Element

We will explain how to duplicate element.

Remove Element

We will explain how to remove element.

About Row / Column / Custom heading / Text Block Design options

We will explain how to edit design options to make your page looks beautiful.

Official Plugin Documentation

For More information about the Visual Composer check the official documentation.

Activate Page builder

Step 1 - Log in to your WordPress Administration Panel.

Step 2 - Click on Pages > Add New.

Step 3 - Click on Backend Editor.

Add and modify Row Layout

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon) to Edit the Row element ( in our example we use row with 3 columns filled with text block )

Step 4 - To change the Row layout ( number of columns ) you need to click the second Icon from the left then select a layout or custom to make your own

Edit Element

Pencil Icon - To Edit Row, Column or Module you need to click the Pencil icon.

Duplicate Element

Pages Icon - To Duplicate Row or Module you need to click the Pages icon.

Remove Element

Trash Box Icon - To Remove Row, Column or Module you need to click the Trash Box icon.

About Row / Column / Custom heading / Text Block Design options

Design Options - When you edit row / column / custom heading / text block module, you can edit the design options . Row / Custom Heading / Text Block element have a default Bottom Margin of 35 pixel, you may want to set it to 0 if you don't want to have bottom space It is Good to add bottom Padding to your Column, so they will looks good on mobile Left and Right Margin should NEVER be modified, please left blank For Row module the Left and Right Padding should also NEVER be modified, please left blank

Create Full width Section

We will explain how to create a full width content section.

Full Width Section should only be used on pages without sidebars!

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Change the Type setting to Full width content then click Save changes

Set Background Section

Fixed Section

We will explain how to create Fixed Section

Parallax Section

We will explain how to create a Parallax Section

Video Section

We will explain how to create a Video section.

Fixed Section

Full Width Section should only be used on pages without sidebars!

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes

Step 5 - Seclect background overlay and Enable background fixed in this row.

Step 6 - Update or Publish your page and you should now have a section with background fixed

Parallax Section

Full Width Section should only be used on pages without sidebars!

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).

Step 5 - Click on Design Options ADD padding and REMOVE margin for better result, add a Background Image change to Cover and then Saves changes

Step 6 - Update or Publish your page and you should now have a section with parallax background

Video Section

Full Width Section should only be used on pages without sidebars!

Step 1 - Go to your page / post, first activate the backend editor and click Add Element

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - If checked, video will be used as row background.

Step 5 - You can edit the Design options ( remove margin and add padding "optional" ) and then Saves Changes and Update / Publish your page. You should now have a Full width Section with Video

Set your Homepage

Step 1 - Go to Settings > Reading in your WordPress Dasrdoard panel.

Step 2 - Set "Front page displays" to a "Static Page".

Step 3 - In the drop down menu for "Front Page" choose a page which will be your home page.

Step 4 - Leave the drop down menu for "Posts page" empty, as this is not used by the theme.

Step 5 - Save changes.

How to Create One Page

Set the One page sections ID

First we will explain how to create the page

Set the menu for the One page

We will explain how to set the menu needed for your one page.

Set the One page sections ID

Step 1 - Go create or edit a page : Page > Add new.

Step 2 - Select the Row Module

Step 3 - Click on the Edit This Row (pencil icon)

Step 4 - Set an ID for the row, You need to use the Same ID when you create the Menu

Step 5 - Repeat the step 3 and 4 for all the row you want to link for the Menu

Step 6 - Update or Publish your page then go create the Menu needed for your page to work

Set the menu for the One page

Step 1 - Login to the WordPress Dasrdoard.

Step 2 - From the 'Appearance' menu on the left-hand side of the Dasrdoard, select the 'Menus' option to bring up the Menu Editor.

Step 3 - Select Create a new menu at the top of the page.

Step 4 - Enter a name for your new menu in the Menu Name box.

Step 5 - Click the Create Menu button.

Step 6 - Click on Custom Links and add the div ID you used in you page ROW ( example if you set row id to : the_portfolio you need to set the custom link to #the_portfolio ).

Step 7 - Repeat and add custom link for each section you want to link, then set the menu as One Page menu(Edit page and scroll down until you see the Page Options).

Create Contact Form

Create Contact Form

Dana uses the contact form 7 plugin, check the steps below to see how to create the contact form.

Create Contact Page

We will explain how to use the form you just created in your page or post.

Contact Form 7 Documentation

Link to the Official Documentation of the Plugin.

Create Contact Form

Step 1 - Log in to your WordPress Dashboard, go to Contact > Add New

Step 2 - Give a Name to your form and change Mail Info

Step 3 - Edit the Form field to change the Form Layout ( if you want to use one of the layout you saw on the demo check the next step )

Step 4 - Save your Form

Create contact page

Step 1 - Log in to your WordPress Administration Panel (Dasrdoard)..

Step 2 - Click on Pages > Add New.

Step 3 - Give your page a name then Change the Editor to Backend Editor ( you need to have the Visual Composer plugin activated ).

Step 4 - Click on the Add Element button

Step 5 - Select the Contact Form 7.

Step 6 - The Contact Form 7 Settings should appear. Select the Form you want to use you can also customize the Color and change the fields layout and button design

Step 7 - Update / Publish your page

WooCommerce

Dana themes is 100% compatible with the WooCommerce plugin for WordPress. It includes full design integration of the WooCommerce pages, shortcodes and widgets.
If you want to use Woocommerce you will have to install the plugin, to do so go to Plugins > Add New , search for Woocommerce.
The Plugin you need to install is WooCommerce - excelling eCommerce by WooThemes
For full documentation visit the following websites:

WooCommerce Plugin Page

WooCommerce Documentation

WooCommerce Community Forums

WooCommerce Builtin Shortcodes

Child Theme

Dana comes with a Child Theme.
Simply install Dana_Child.zip like a regular WordPress theme.

What is a Child Theme?

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Why use a Child Theme?

If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes. It’s a great way to get started if you are just learning WordPress theme development.

Additional Links

Child Themes - Codex

You need to use a Child Theme only if you are making code customizations.

Theme Update via WordPress

Updating the theme via WordPress is very similar to the install process via WordPress.
Follow the steps below to update your theme via WordPress:

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Go to Appearance > Themes.

Step 3 - Deactivate the Dana Theme by simply activating a different theme. Once you activate a different theme, you can delete the Dana theme.

Step 4 - Delete the Dana Theme. Do not worry, your content will not be lost!

Step 5 - Then simply upload the new “dana.zip” file in the Appearance > Themes section. Click on the Install Themes tab at the top and choose to upload the zip file. You have this step explained in section: Theme Installation via WordPress.

Theme Update via FTP

Updating the theme via FTP is very similar to the install process via FTP.
Follow the steps below to update your theme via FTP:

Step 1 - Go to .../wp-content > themes location on your server using a FTP client and backup your "Dana" theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.

Step 2 - Download the new version of Dana theme from your Themeforest and retrieve Dana folder by unpacking the zip that you download from Themeforest and Dana_(version.number).zip.

Step 3 - Then simply drag and drop the new "Dana" theme folder into .../wp-content > themes location. Choose to “Replace” the current one if you did not delete it.

Step 4 - Log into your WordPress Dasrdoard, go to Appearance > Themes and activate the new Dana theme.

Speed Optimization

If you think your website takes too much time to load maybe you should.

Install a Cache Plugin for WordPress. We recommend W3 Total Cache.

Install an Image Compress Plugin. We recommend WP Smush It.

Install a Database Optimizer Plugin We recommend WP Optimize

Reduce the number of posts on the page

Reduce the number of unnecessary plugins.

Use more icons and less images.

Changelog

Version 1.2

* Released: November 11, 2017 - Update dummy data import. - Fix bug on attachment template. - Fix instagram feed. - Fix small issues ...

Version 1.1.2

* Released: November 4, 2017 - Fix title bar v2. - Fix post options hidden in unyson v2.7.9 - Fix small issues ...

Version 1.1.1

* Released: October 6, 2017 - Add taxonomy for postype team. - Add taxonomy for postype testimonial. - Fix widgets not found on child theme.

Version 1.1

* Released: October 2, 2017 - Add 2 header vertical template. - Add footer sticky options. - Add nice scroll bar options. - Add sup text options of item for menu. - Fix extra font options. - Fix page search result break . - And small issues ...

Version 1.0.1

* Released: September 21, 2017 - Update Theme requirement options. - Update Install manual document.

Version 1.0

* Released: September 17, 2017

Multi-Purpose WordPress Theme by Bearsthemes Team

Introduction

What is included in the price?