Dani Documentation

Wordpress theme

A how-to guide and helpful informations
about options and features of the theme.

Purchase it here Video Tutorials


First of all, a big thanks for purchasing this theme. This document includes a guide and general information about the theme.


Please read and search this documentation file before seeking support. If you have any questions that are beyond the scope of this document you can still contact us and open a support ticket here.

Do not use the comment section on the themeforest item page.
This will slow down the support process.

Theme Installation
See video tutorial

This theme requires the latest Wordpress version (4.6 and later).

There are 2 different ways to upload the theme.

  1. FTP: Unpack the dani.zip and upload the unpacked folder into the wp-content/themes/ folder
  2. WordPress: Login into WordPress and go to Appearance > Add New Themes > Upload. Select the zipped theme file dani.zip and click Install Now.

Once you have uploaded the theme you need to activate it. Go to Appearance > Themes and you should see the new Theme. Click Activate.

After activating the theme you will see a notice to install required plugins.
Click on "Begin activating plugin" and install them!

Note Since version 1.4 the woocommerce plugin is included which will launch a "Setup Wizard". You can skip this. If you're not planning to use the woocommerce plugin you can deactivate it of course.

You can now import the demo content if wanted. (Recommended)
See See Import Demo below

Import Demo
See video tutorial

Note Before importing the demo you need to know that wordpress create a sample page and a sample post when installing wordpress. You can delete them.

You can import the demo content with just one click. Go to Appearance > Theme Options > Import Demo and click on the button. The importing action can take some seconds. That's it.

This will import pages,posts,portfolio,menu,images,theme options,wordpress-settings, etc.
After importing the demo you probably need to adapt the footer widget area to your needs.

Shop Demo import

If you imported the Shop demo you need to adapt some minor settings.

  • Woocommerce > Settings > Products > Display: Select the right Shop Page
  • Woocommerce > Settings > Checkout: Select the right Cart & Checkout Page
  • Woocommerce > Settings > Account: Select the right Account Page

Update Theme

If you need to update the theme, there are 2 ways to do this:

  • WordPress: Deactivate the current theme by activating any other theme. Once the theme is not active you can delete this theme. After deleting it install the new updated theme and activate it. Don't worry, you won't lose your settings,options,content, ...
  • FTP: Delete the current theme folder 'dani' in wp-content/themes/ and upload the new one.

NOTE You won't lose your settings,options,content, ... But if you did customizations to the theme files (edit/add code), they will of course be lost because the files are replaced by the newer files.

Update Plugins

If one of the plugins needs an update, a message will appear to update this plugin. Click on "begin updating plugin" and update it.

If this doesn't work, there is a second method to update the plugin. Follow these steps:

  • Go to Plugins > Installed Plugins
  • Deactivate the plugin in question
  • Once deactivated, delete the plugin in question.
  • Now you will get a message again, for installing the plugin.

Theme Options

The theme uses its own Theme options panel which you can access by navigating to Appearance > Theme Options. They give you full control over your website, and you can customize a design without using a single line of code.

Please go through all options to set up your site to the way you want it.

Adding Logo

Please upload your logo in 2 different version to the media library.

  • Dark logo
  • Light logo

Note The logo will display in the original size you uplaod it. So, if you upload a logo which has 500x500 px, it will display in this size which is of course too big. So make sure to upload the logo in the exact size you want to display it.

Important If you want to make your logo retina ready you need to upload the @2x version of your dark + light logo.
Example: your dark logo is called dark-logo.png. Call your retina logo dark-logo@2x.png and upload it. It's very important that you upload both logos to the library at the same time/day. Make sure to install the plugin WP Retina 2 by Jordan Meow.

Once you uploaded your logos to the library you can select your Logo in the Theme Options.

  1. Go to Appearance > Theme Options > General
  2. Add your Logo(s) by clicking on Upload Image
  3. Choose your image on your Media Library OR upload a new image and click on Select Image


You can also upload a favicon to the them options panel. This will only have impact if you did not upload any Site Icon for your Site identity in Appearance > Customize > Site identity. It is recommended to upload a Site Icon instead of thetheme option favicon.


Set up your default header appearance layout in the theme options.

As mentioned above, these are the default settings and you can adapt them individually for all of your pages,posts or portfolio items.
To do so, just go to your page and scroll down to the Header Options and adapt it to your needs.


This themes gives you full control about your typography and fonts.

Choose your font and typography settings for the different parts and elements.

Additionally, you can also select different font sizes for different devices.

Font Manager

Since version 1.2 you can add fonts from Typekit or custom fonts. To do so scroll down to the font manager and add a new font.

Important It's very important that you enter the correct values for the "Family Name" and "Weights & Style".
Choose your type (Typekit,Custom Font,Google font). Only choose "Google font" when the font does not show in the Font list but is well available on the google font library.

Once you've added the font you can select it on the font list, add the very top.

  1. Add the font(s) to the font manager with the correct values and check the 'Typekit' type.
  2. Put the embedding script (which you got from typekit) to the typekit textarea.

Important For typekit you need to use the familay name typekits gives you. For example:
Proxima Nova would be proxima-nova
Brandon Grotesque would be brandon-grotesque

Custom fonts

Follow these steps if you want to use a customwebfont

  1. Make sure you have installed the Child theme.
  2. Copy the folder/files that contain the web font to the Child theme.
  3. Copy the @fontface CSS, and put it inside the style.css of the theme child, it should look something like the following code example.
    font-family: 'MyWebFont';
    src: url('folder/WebFont.eot');
    src: url('folder/WebFont.eot?#iefix') format('embedded-opentype'),
    url('folder/WebFont.woff') format('woff'),
    url('folder/WebFont.ttf') format('truetype'),
    url('folder/WebFont.svg#webfont') format('svg');
    MyWebFont is the name you need also to use when adding the font to the font manager
  4. Add the font(s) to the font manager with the correct values and check the 'Custom Font' type.

Social Networks

For all social networks you have a profile, please enter the url's of these profiles.

With the shortcode [sr-social style="normal"], you can now display these networks on any part of your website. Usually it is entered into a footer area or menu area.

Portfolio Grid

Before you add any Portfolio item please add a Portfolio page (if not done yet).

  1. Go to Page > Add New and give it a name
  2. Enable the pagebuilder
  3. Add a "Portfolio Items" Row to the pagebuilder and set up your options. You can now set up your different grid options (see below)

Actually, you can add your portfolio grid to any page you want.

Note As long as you don't have created any portfolio single item, your grid won't show anything of course.

Grid options

The Grid type gives you 2 possibilities. Grid / Masonry or Smart Scroll. Go through all other grid settings to get what you want.


Here you can decide which items you want to show. You can show all the items or only show specefic items by category.

The Count number value is the amount of items shown per page. Enter -1 if you want to show all items.

By enabling the Live Filter the visitors will have the possibility to filter your items on the page.

Captions / Hover

Set up the caption appearance (item name + category) and the hover effect.

Attention These settings can be individually overwritten in the portfolio single settings. You could for example choose a different caption appearance for a specefic item. By forcing these settings these individual settings won't have any impact.

Portfolio Single Item

Note The Dani Portfolio plugin must be installed to add portfolio items.

Create your different portfolio items by going to Portfolio > Add New.

Start by setting up the different layout options (below editor).

Add now your content to the editor.

Note You will find further option in the theme options (share,pagination, ...)

Add Featured Image

Featured Images are very important for this Theme. You should add a featured image to all your portfolio items. This is the image which will "represent" your project (on the grid, sharing, ...). To do so, click on Set featured image and choose your Image.

Go now to Appearance > Theme Options > Portfolio to set up the different options to enable sharing,pagination, etc.

Featured Image Size

The size of your featured images depends on your grid settings. (columns & grid width).
For example, if you choose a fullwidth grid, it will take the fullwidth of the screen and the biggest desktop screen out there is 2560px. So if you choose a 2 columns grid your featured images should have 1280px in width.
The boxed grid for example is limited to 1200px maximum (no matter what screen size). With a 3 column grid it the featured image would need a width of 400px.

Blog Setup

First of all, create a page where your Blog posts should be displayed. Once the page is created head to Settings > Reading and choose "A static page" and choose your Blog page you just created for "Posts Page". All your blog posts will be displayed on this page.

Note If you don't have selected a page for "Front Page" yet, you should select one. This is the main front page (home page) the visitor will see when it visits to your site.

Select also an amount for "Blog pages show at most". This is the amount of posts shown per page.

Head now to Appearance > Theme Options > Blog to setup your general blog layout appearance.
If you choose a layout with sidebar you can add your widgets for the sidebar in Appearance > Widgets.

Add blog posts to any page

The pagebuilder gives you the possibility easily add some posts in any page you want.

To do so, just add a "Blog Posts" Element to the pagebuilder and set up your options.

Blog Posts

To create blog posts, just go to Posts > Add New.
Select your post format and depending on the forma set up the different options related to your format.

Add now your content to the editor and save the post.

Note You will find further option like sharing, pagination, show date, ... in the theme options.

Add Featured Image

Featured Images are very important for this Theme. You should add a featured image to all your posts. This is the image which will "represent" your project (on the grid, sharing, ...). To do so, click on Set featured image and choose your Image.

Shop Setup

Make sure to have the WooCommerce plugin installed. If not, go to Appearance > Install Plugins and install & activate it.

You will now get a message to "Run the Setup Wizard". If you plan to import one of the shop demos, it is not recommended to run the wizard, because this will create double pages for 'cart','checkout','my account'. So in this case you should skip it.

This wizard will take you through the first steps for WooCommerce. It will create the needed pages (please check if they do not already exist, otherwhise you can skip this step) and setup the different options like taxes, currency, etc. You can at any time change these settings afterwards.

Now you are ready to go and add your products, set up all the woocommerce settings and the theme options.

Hero & Page Title
See video tutorial

The Hero / Page Title is the first content of the page. It can contain a big image,video,slider,etc. or just the name of a page.

You can set up individual hero for each of your page/portfolio/post. Go to your page and scroll down to the "Page Title / Hero Settings".

For the hero, you can choose between different background options (color,image,video or slider).

Note If "Show Pagetitle" is off and no background option is selected for the "Hero Type", no pagetitle/hero will be showed and your page starts with the normal content.


This theme uses a build-in pagebuilder to handle it's content. Using Dani's pagebuilder, you can create beautiful layouts with ease and control every part of your page.

To activate the Pagebuilder, click on the blue pagebuilder button on the default Wordpress editor.

Attention When you activate the Pagebuilder you will lose all the editor content.
Important Pagebuilder is can not be activated on blog posts yet. This might change in future.

You can now start adding your different rows and elements.


The Shortcodes mainly are selfexplained. You can access the Shortcodes via the shortcode button (blue "+" button). This allows you to add some small elements like buttons, icons, tabs, etc.

Revolution Slider

The theme comes packed with the incredible Revolution slider plugin. This great plugin has loads of useful options. We recommend you to have a look at the original Slider Revolution resources to learn more about the plugin and its usage.

Include Slider to your page

To inlcude the slider into your page go to the Hero settings and select Revolution Slider. Select here the slider you want to include in the hero part of the page.

If no slider exist yet, please create one by heading to Slider Recolution > New Slider.

Change header color depending slider background

The feature you need to know about the combination with Dani and Revolution Slider is the automatic color change for the header part (logo + menu). To activate this feature, just add the classnames text-light or text-dark based on the slide skin.

Make sure to add this for each of your slide.

Now you need to add some javascript.
Go to your slider settings and scroll down to the Custom CSS / Javascript section. Paste the following into the "Custom Javascript" field.
revapi1.bind("revolution.slide.onchange",function (e,data) {	
    if (data.currentslide.hasClass('text-light')) {
    } else {

revapi1 You might have to change this. Ceck it by clicking on "API Functions" and check the name.
If the name is different adapt it in the javascript field.


I recommend to install the plugin WP Retina 2x by Jordan Meow.

Make your logo retina ready

Your logo needs to be uploaded in normal size and in retina size! Add the @2x to your image name. Example: your normal logo is called logo.png. Call your retina logo logo@2x.png and upload it. Upload both image files to the library. In the Theme Options choose the normal logo size (logo.png for example, not the @2x file).

Attention It's very important that you upload both logos at the same time/day

Multilingual / WPML

Dani is tested and certified by the WPML official team. WPML is the best known WordPress plugin for multi-language websites. WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.

Have a look at the WPML Website for more information and documentation.

How to setup WPML with Dani theme

After you installed the wpml plugin, go through the wpml setup. In the "language Switcher" step, it is recommended to NOT add the switcher to the menu,widget or footer. Instead, activate the Theme switcher in Theme Options > Header & Menu > WPML

Duplicate pages,post for translation

The duplicate option is the recommended option to create the translations for your pages. Because, if you're using the '+' icon to add translation, it will not duplicate the content, and for pages,posts with a lot of pagebuilder elements, you will need to recreate all these elements and structure. So instead, use the duplicate option.
This is the only way you can copy/duplicate the pagebuilder content.

To do so, go to your page,post,portfolio you want to translate and check the Duplicate checkbox of all the languages you want to translate and click on the "Duplicate" button.

Once you've done this the page has been duplicated and you can now edit the wanted language of this page.

When you decide to provide any page,posts,portfolio project in different language, WPML will duplicate this page,post,project for each of your language. This means, If you decide to deactivate the wpml plugin any time later, you will have multiple/duplicated pages,posts,projects.

Translate the theme related words/strings

When making your site multilingual, you will see some theme related words/senteces which you can't change. For example "Next Project" in the single portfolio navigation. You need to install the "WPML String Translation" plugin. Thanks to this you can translate any theme related string.

Duplicate Pages, Posts, Projects

The theme does not have a build in duplicate option but there are tons of plugins which does this. The best plugin, and the one which is compatible with the Dani theme, is the WP Duplicate posts pages & CPT


Version 1.7

  • New play/pause for video background
  • New tags for blog posts
  • New different grid spacing for portfolio grid
  • Optimize visual composer compatible (not included)
  • Optimize mute bg sound when opening lightbox video
  • Fix top margin for side single portfolio on mobile devices
  • Fix Image pagination
  • Fix Blog page builder element „filter by category“
  • Fix Responsive font sizes for headers with classes
  • Fix polylang error message
  • Fix multiple google maps
  • UPDATE woocomemrce templates
  • UPDATE revolution slider

Version 1.6

  • New WPML Support
  • New Scroll Down Arrow
  • New gif (second image) hover option for portfolio
  • New Pagebuilder preview for text element (backend)
  • New Big wrapper (1660px) for header option
  • New separate gallery light boxes
  • New inline video Lightbox option
  • Fix isotope/smartscroll images 100% width
  • Fix video hover if load more
  • Fix loading icon for lightbox
  • Fix logo height safari
  • Fix Portfolio side layout if description not sticky (.col-not-sticky)

Version 1.5

  • New Clone feature for page builder
  • New show / hide category for blog posts
  • New 5 columns for shop grid page builder
  • Optimize menu size for mobile devices
  • Optimize page builder drag & drop
  • Fix custom logo height on mobile
  • Fix vertical logo max height for preloaded
  • Fix deprecated message for widgets (php7)
  • Fix cart icon appearance on dark skin
  • Fix hide load more button when smart scroll is selected
  • Fix blog post date format
  • Fix blockquote anchor not underlined
  • Fix smart scroll rotate screen (iPad)
  • Update revolution Slider

Version 1.4.1

  • Optimize Pagebuilder Column Choice edit
  • Optimize header-spacer for mobile devices
  • Optimize font settings for menu items on mobile
  • Fix Cart Icon center if custom height logo
  • Fix Submenu line height fix if custom height logo
  • Fix underline menu if custom height logo
  • Fix Shop gallery grid for mobiles
  • Fix Footer bottom center
  • Fix Pagetitle bug if woo commerce installed
  • Fix Light logo Position on mobile
  • Fix Menu colors on dark header

Version 1.4

  • New WOOCOMMERCE Compatible
  • New big wrapper option for title content width
  • Optimize wrap menu toggle to menu-actions (header + style + script)
  • Optimize menu slide when menu is open
  • Optimize hide alt text for page loader logo (css)
  • Fix Submenu font theme options
  • Fix hover color for submenu
  • Fix line height for image pagination next/project
  • Fix social shortcode padding and underline

Version 1.3

  • New Dark Appearance
  • New Menu color option (dark or light)
  • New Caption option for lightbox images
  • New Custom logo for preloaded screen
  • Optimize center logo on loading screen
  • Optimize back to top arrow
  • Optimize minor css optimizations
  • Optimize Add social meta (go) for all pages
  • Fix Page Pagination for Blog Page
  • Fix Font manager (saving issue)
  • Fix line height for image pagination next/project
  • Fix background image for image pagination
  • Fix classic menu light on mobile
  • Fix single pagination
  • Fix team member website url

Version 1.2

  • New Architecture Demo
  • New Typekit & Custom fonts integration
  • New Custom logo height for mobile devices
  • New Image option for Portfolio single pagination
  • New Underline hover option for main menu
  • New Footer width option
  • New customize option for column row
  • New spacing option for column row
  • New Wrapper big option
  • New List style for social media shortcode
  • New Show / Hide option for footer
  • New Custom typography option for widget titles
  • New Button with arrows shortcake option
  • Optimize align side portfolio to header
  • Optimize share text option
  • Optimize position of backtoworks (css)
  • Optimize quotes for block quotes different font (css)
  • Optimize make toggle fixed if header is not-fixed (css+js)
  • Fix font for social media text style from body (custom style)
  • Fix horizontal scroll on mobiles (mquerries)
  • Fix fifth column issue

Version 1.1

  • New Pagination Option for portfolio
  • New Load More Option for portfolio
  • New Infinity Load Option for portfolio
  • New portfolio category url with hashtag
  • New Retina support for google map pin
  • New Back to top
  • New Logo Height option
  • New Video Tutorials
  • Optimize menu position
  • Fix pointer-event when menu is open
  • Fix single pagination vertical center fix
  • Fix Minor bugfixes
  • Important Make sure to update the dani-core plugin (see the update on how to update it)

Version 1.0

Initial release