Corporate, Business & Consulting WordPress Theme by DynamicPress Team

Theme Documentation


Introduction

Thank you for purchasing Optimo 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 Optimo 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?

  • Optimo 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 Optimo 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 Optimo WordPress theme.

Thanks!
DynamicPress Team

Theme requirements

WordPress is one of the most popular and simple-in-use CMS in the world that makes it the best choice for your website.

You can install the WordPress from the official website.

To get more information on the WordPress, you may visit the WordPress Codex page.

Recommended server configuration for proper theme functioning:

  • PHP version 5.6 and higher
  • max_execution_time - 3600
  • max_input_time - 3600
  • memory_limit - 256M
  • post_max_size - 64M
  • upload_max_filesize - 64M
  • max_input_vars - 3000

Make sure your server is set up properly and the theme and content will be loaded correctly. Enough server configuration will also ensure fast speed and increase performance.

Theme Installation via WordPress

When you download the theme from Themeforest, you will get an archive file in .zip extension.
You need to unzip that archive. When done, you should see dpr-optimo.zip (zip file name can be changed from version to version).

Please, follow the steps below to install Optimo Theme.

Step 1 - Login to your WordPress Dasrdoard.

Step 2 - Go to Appearance > Themes. Click Add new button, located at the top of the screen or Add new theme ( see screenshots below ).

Step 3 - Click on Upload button at the top of the screen.

Step 4 - Choose dpr-optimo.zip.

Step 5 - Wait while the theme is uploaded and installed then activate the theme.

Step 6 - After activating the theme a notice should appear on the top of the screen, click on begin installing plugins ( see screenshots below ).

Step 7 - Select all the plugin,change Bulk Actions drop to Install then click apply ( see screenshots below ).

Step 8 - Congratulation you are ready to use Optimo, check the First Steps part of our documentation to see what you may want to do before starting to edit your WordPress Site.

Common Theme Installation Problems

“Are you sure you want to do this?”
If you get the “Are you sure you want to do this” message when installing dpr-optimo.zip file via WordPress, it means you have an upload file size limit. Install the theme via FTP if this happens, or ask your hosting company to increase the limit.

Missing stylesheet file
If you get an error saying that the stylesheet is missing, then you have uploaded the wrong folder. Please check that you are uploading the dpr-optimo.zip within the Theme Files folder. You have to unzip the file that you download from Themeforest to find this.

Theme Installation via FTP

If you are going to install the theme using FTP, you will need an FTP Client, such as FileZilla.

When you download the theme from Themeforest, you will get an archive file in .zip extension.
You need to unzip that archive. When done, you should see dpr-optimo Folder(folder name can be changed from version to version).

Please, follow the steps below to install the theme via FTP:

Step 1 - Log into your hosting space (server) via FTP client.

Step 2 - In extracted archive folder, find dpr-optimo folder

Step 3 - Upload the dpr-optimo folder to your server in path .../wp-content/themes/.

Step 4 - The uploaded path should be like this: .../wp-content/themes/dpr-optimo/

Step 5 - Login to your WordPress Dasrdoard and go to Appearance > Themes and activate the Optimo Theme.

Step 6 - After activating the theme a notice should appear on the top of the screen, click on begin installing plugins ( see screenshots below ).

Step 7 - Select all the plugin,change Bulk Actions drop to Install then click apply ( see screenshots below ).

Step 8 - Congratulation you are ready to use Optimo, check the First Steps part of our documentation to see what you may want to do before starting to edit your WordPress Site.

Additional Links

Installing new theme
FileZilla Free FTP Client

Setting up the Demo Content

Before importing the dummy data Make sure you have all the plugin installed (if you want to use woocommerce, make sure to install woocomerce first).

One Click Importer

We will explain how to import the demo usign the Theme One Click Importer

WordPress Importer

We will explain how to import the demo usign the WordPress Importer

Error or Problem with Import of the Demo

If you have problem with the Import of the demo please check this section

Step 1 - Log into your WordPress Dasrdoard.

Step 2 - Go to Optimo Options > Demo Importer.

Step 3 - Then Click on Import Demo.

Step 4 - The Dummy content is really big and may takes more then 15 minutes to import depending where you are living, Do not interrupt/cancel the import process!

Step 5 - Done! Your site should look like selected demo. Eventualy if your selected demo use menu icons or badges you will need set it manualy.

Step 1 - Log into your WordPress Dashdoard.

Step 2 - Go to Tools > Import. Then click on WordPress ( bottom of the list ).

Step 3 - A window should appear click the Install now button which is on bottom right.

Step 4 - Click Activate plugin & Run Importer. Then choose the optimo_demo.xml file and click upload file and import Do not interrupt/cancel the import process!

Step 5 - Done! But you still need to set the Menu, Widget, Homepage.

The importer should be run only once. If something went wrong and you need to import the content again, you may need to reset your WordPress.
Use this plugin to reset the WordPress database : http://wordpress.org/plugins/wordpress-database-reset/

If the import stalls and fails to respond after a few minutes, or it fails with a simple error message like “Import failed,” You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your web host and ask them to increase those limits to a minimum as follows:

  • max_execution_time 3600
  • max_input_time 3600
  • memory_limit 256M
  • post_max_size 64M
  • upload_max_filesize 64M
  • max_input_vars 3000

You can verify your PHP configuration limits by installing a simple plugin found here. And you can also check your PHP error logs to see the exact error being returned.

Also if possible update your PHP version to 5.6+

After doing this you can reset your database using the WordPress Database Reset Plugin and try to re-import the demo data ( WARNING : Reset the database will make you lost all the data of your current wordpress )

If you still have problem your web host may uses process watching software that prevents bulk processing on their web servers.

If you have problem please submit a ticket and we will help you to import the demo.

Optimo theme options panel is powered by Redux. Redux is a truly extensible options framework for WordPress themes and plugins.
We’ve created a custom design for Redux that results in a clean and precise user interface that is amazingly fun to use. Each option is clearly defined, described and logically organized into panels.

We have also create few custom intuitive in use Redux parameter controls for your convenience.

General Options

Here you can style the general appearance of the site and set the main style for all of the pages, posts, portfolios, etc.
Note, theme options influence the whole site. However, you can overwrite them using the meta boxes in each page, post, portfolio back-end editor. Due to this, you can achieve maximum customization for your site.

General Setting
General Styling
Scroll to top
Pagination
Forms
Buttons & Submit
Social Links
Social Share Options
404 Error Page
Login Page
Page Loader
Advanced Options
API Integrations

General Setting

Here you can set:

  • Default page layout (boxed or full width)
  • Main content container default width
  • Default sidebar position
  • Sidebar default width
  • etc

General Styling

Here you can set:

  • Default accents colors for theme
  • Default gradients for theme
  • Default links clor

Scroll To top

Here you can set:

  • Enable or disable scroll to top button
  • Select default icon for this button
  • Select shape and colors for this button

Pagination

Here you can set:

  • Default pagination position
  • Default pagination style
  • Default pagination colors
  • etc

Forms

Here you can set:

  • Default dimensions for form inputs
  • Default shape for form inputs
  • Default colors for form inputs
  • etc

Buttons & submit

Here you can set:

  • Default dimensions for buttons
  • Default shape for for buttons
  • Default colors for for buttons
  • etc

Social Links

Here you can set:

  • Social links used on site

Social Share Options

Here you can set:

  • Select social share buttons available on site
  • Set style for share buttons
  • etc

404 Error Page

Here you can set:

  • Custom colors for 404 page
  • Custom background image for 404 page
  • Set texts displayed on 404 page
  • etc

Please note that you can also use custom 404 page template created in Particles menu

Login Page

Here you can set:

  • Logo for login page
  • Set colors for login page
  • Upload custom background image for login page
  • etc

Page Loader

Here you can set:

  • Enable or disable usage of page prloader
  • Select one of predefined spiners
  • Upload own preloader image
  • Set additional text for preloader

Advanced Options

Here you can set:

  • Enable or disable schema markup
  • Add custom CSS code
  • Add custom JS in header section
  • Add custom JS in footer

API Integrations

Here you can set:

  • Google Maps API key for your site

Typography Options

Optimo theme typography options panel allows you adjust almost all typography aspects.

Here you can set:

  • Set typography for body
  • Set headers typgraphy
  • set typgraphy for different page areas (topbar, footer, menus, sidebars
  • etc

Custom Fonts

In this panel tou can download custom fonts for use in every area of your website. You can download font files or ready fontsquirel font package archives.

Top Bar Options

Here you can content and style of top bar page area.

General
Content
Top Bar Menu
Top Bar Social Icons

General Top Bar Settings

Here you can set:

  • Enable or disable display of top bar
  • Set top bar style (boxed or full width)
  • Set top bar visibility depending devices
  • Set top bar layout (content position)
  • Set top bar style (boxed or full width)
  • Set topbar appearance (colors, background etc.)

Top Bar Content

Here you can set:

  • Top bar content

Top Bar Menu

Here you can set:

  • Style Top Bar menu
  • Style Top Bar menu dropdown
  • etc

Top Bar Social Icons

Here you can set:

  • Enable or disable display social icons in top bar
  • Set top bar icons style
  • etc

Header & Menus Options

In this section, you’ll be able to adjust the header and its appearance for your site. You can set the color schemes, positioning, visible elements, etc.

General Header Setting
Logo
Menu
Mobile Menu
Sticky Header
Social Links

General Header Settings

Here you can set:

  • Select one of predefined header styles as default (please note that you can allways select another header style for specifing pages in page options section)
  • Set default header height
  • Set menu alignment if aplicable for selected header style
  • Force or not full width header
  • Set colors form header background and border
  • Enable or disable header overlapping
  • Set background and default style for overlapping header

Note Please note that you can allways select another header settings for specifing pages in page options section.

Here you can set:

  • Upload own logo images for different menu styles and device resolutions

Menu

Here you can set:

  • Colors for menu links for different header types and menu styles
  • Paddings for menu links
  • Enable or disable dropdown menu indicator and select icon for indicator
  • Enable or disable serch icon in menu and eventually set search style
  • Select custom top menu hover effect

Mobile Menu

Here you can set:

  • Set custom logo for mobile menu
  • Select one of predefined mobile menu styles
  • Select mobile menu icon
  • Set appearance for mobile menu (colors, paddings, alignment)
  • etc

Sticky Header

Here you can set:

  • Enable or disable usage of sticky header
  • Upload custom logo for sticky menu
  • Set appearance for sticky menu (colors, paddings, alignment)
  • etc

Header Social Links

Here you can set:

  • Enable or disable display social links in menu
  • Set appearance for social links in menu (style, size, colors, paddings, alignment)
  • Default colors for for buttons
  • etc

Note You can allways use custom HTML defined in this section or predefined particel created in Particels menu.

Subheader Options

In this section you can enable or disable subheader area and adjust appearance of this area.

Genaral Options

Here you can set:

  • Enable or disable use subheader by default
  • set visibility of subheader on different devices
  • Set style for subheader (font color, size, alignment etc.)
  • Set default subheader height
  • Uplaod default subheader background image

Breadcrumb

Here you can set:

  • Enable or disable display of bradcrumb
  • Set breadcrumb position and alignment
  • Set breadrumbs color
  • etc

Blog Options

Blog options section will be helpful to you in customizing the blog section for your site and creating the functional and informative blog.

Blog & Archive Options

Here you can set:

  • Default blof and archive page layout
  • Post excerpt lenght
  • Blog featured image appearance (dimmensions, overlay etc.)
  • Enable or disable and set order of blog item element
  • Enable or disable and set order of blog item meta data
  • Set pagination type and pagination appearance

Single Post

Here you can set:

  • Default layout for single post items
  • Title position
  • Next/Prev links taxonomy
  • Enable or disable and set order of blog item element
  • Enable or disable and set order of blog item meta data
  • Set related post section appearance

Portfolio Page Options

In portfolio options, you can set default appearance for portfolio pages. Note: all this settings can be overwiten in portfolio pages (created by using Portfolio Page Template) settings.

Bassic Setting
Source
General Layout
Filter Bar Settings
Portfolio Page Style
Portfolio Single Item Style

Basic Settings

Here you can set:

  • Eventually set custom slugs for portfolio custom post type taxonomy

Source

Here you can set:

  • Default source for portfolio page (you can build custom query)

Note You can allways overwrite this setting in page options for porfolio pages.

General Layout

Here you can set:

  • Main content position for portfolio pages
  • Items per page count
  • Columns count
  • Pagination type & alignment

Filter Bar Settings

Here you can set:

  • Enable or disable filters for portfolio
  • Appearance of filters button
  • etc

Portfolio Page style

Here you can set:

  • Portfolio items margins and paddings
  • Portfolio item description position
  • Colors for portfolio item elements
  • Portfolio item hover state colors and decoration
  • Portfolio item appear animation
  • Portfolio item overlay appearance (overlay colors, icons etc)

Single Portfolio Items Style

Here you can set:

  • Default single portfolio item layout and style
  • Media block width
  • Default colors for for buttons
  • Enable and order single portfolio item elemnts
  • Portflio item custom fields titles
  • Appearance of related portfolio items section

Sidebar Options

In this section you can set default sidebar area style

Here you can set:

  • Paddings and margins for sidenar widgets
  • etc

Sidebar Options

In this section you can set default expandable side panel style and behaviour

Here you can set:

  • Expandable side panel position and width
  • Width and behaviour for mobile devices
  • Opening button position, icon and style
  • Expandable panel content type (widget area content or custom tmplate0
  • Panel style 9colours, paddings etc)

Branding Options

In this panel you can set some admin panel branding options

Here you can set:

  • Logo for Template options panel
  • Icon for template options menu

Woocommerce Options

This section stay visible when Woocommecre plugin is installed. Here you can set many Woocommerce pages related functionality and appearance aspects.

General Setting
Woocommerce Pages Layout
Products Archive
Single Product
Cart & Checkout
Products Share Options
Elements Styling

General Settings

Here you can set:

  • Usage of custom Woocommerce sidebar on woocoommerce pages
  • Style of categories widget
  • On sale badge style and content
  • Display wishlist icon

Woocommerce Pages Layout

Here you can set:

  • Woocommerce pages subheader layout (visibility, alignment, spacing, background, colors)
  • Woocommerce breadcrumb (visibility, colors)
  • Enable custom Woocommerce sidebar usage

Menu Cart

Here you can set:

  • Visibility of empty cart
  • Cart behaviour when product added
  • Minicart visibility on mobile
  • Cart display mode
  • Cart widget colors
  • Cart widget icons
  • Car dropdown appearnce

Products Archive

Here you can set:

  • Default shop page title and subtitle
  • Shop and product archive pages layout and width
  • Products per page
  • Shop and product archive pages colums count
  • Shop pages toolbar appearance (layout switcher visibility etc)
  • Product elements visibility and order
  • Usage of quick view button
  • Product content alignment
  • Pagination type and style

Single Product

Here you can set:

  • Single product page layout and width
  • Enable product navigation
  • Enable Ajax add to cart
  • Product image and content areas width
  • Sumary elements visibility and order
  • Tabs style and alignment
  • Upsels and related product area appearance (title,columns count etc.)

Cart & Checkout

Here you can set:

  • Distraction free cart
  • Cross sell products count on cart page
  • Distraction free checkout
  • Time line style

Products Share Options

Here you can set:

  • Producta share possibility
  • Select share pages
  • Appearance of share buttons
  • etc

Elements Styling

Here you can set:

  • Appearance of on sale badge
  • Appearnce of rating stars
  • Colors for all product archive and single product page texts
  • etc

Events Calendar Options

This section stay visible when The Events Calendar plugin is installed. Here you can set many Events Calendar pages related functionality and appearance aspects.

Calendar Page Layout
Single Event Layout

Calendar Page Layout

Here you can set:

  • Events pages title, subtitle and layout
  • Events pages subheader style (colors, background image etc)
  • Calendar view colors
  • Display of featured image in list and day view

Single Event Layout

Here you can set:

  • Single event page layout

Timetable Options

This section stay visible when DPR Timetable plugin is installed. Here you can set many timetable display related functionality and appearance aspects.

Table Layout
Filter Bar
Single Class/Event Layout

Table Layout

Here you can set:

  • Columns headers typography
  • Rows background colors

Filter Bar

Here you can set:

  • Filter bar margins, paddings, border radius
  • Filter bar colors (idle, hover and active state

Single Class/Event Layout

Here you can set:

  • Single class/event page layout
  • Subheader for single class/event page style(height, spacing, background image , colors)

Icon Manager

In this section, you can control the icon packs used for your site as well as upload the custom icon pack.

Demo Importer

In this section is placed demo content importer. Usage of this feature is more detailed described in section Setting up the Demo Content

Import & Export Options

This section allows you to import/export the options from/to your site. It can be useful if you want to transfer the site or there are issues while importing the demo content. It can also serve as a backup of theme options for you.

Visaul Page Builder Elements

DP Tabs

Tabs element allows you to present the information in separate tabs to show any kind of the information on one page. A number of tabs are unlimited.
You may check the module examples on the Tabs page. This is a nested shortcode – module that includes other modules. You may style the container and then fill it in with elements.

Generally this element is extended version of native WPBakery Page Builder tabs.


DP Tabs Extended Options

Extra Tabs Style - You can select outlined, underlined or custom tabs style.

Tabs Icon - Select the icon from built in icon manager options.

Extra tabs styling - We have add more styling options.

See examples of usage on this page

DP Vertical Tabs

 

Generally this element is extended version of native WPBakery Page Builder vertical tabs.


DP Vertical Tabs Extended Options

Extra Tabs Style - You can select outlined, underlined or custom tabs style.

Tabs Icon - Select the icon from built in icon manager options.

Extra tabs styling - We have add more styling options.

See examples of usage on this page

DP Accordion

Generally this element is extended version of native WPBakery Page Builder vertical tabs.


DP Accordion Extended Options

Extra Tabs Style - You can select outlined, underlined or custom tabs style.

Tabs Icon - Select the icon from built in icon manager options.

Extra tabs styling - We have add more styling options.

See examples of usage on this page

DP Contact Form

This element allows you add some custom style for defined in ContactForm7 plugin forms.


Options for DP Contact Form

Form style - Select form style ( default, flat, minimal etc )

Form Typography - Select typography for form elements.

Form elment style - Select colors for form inputs fields.

See examples of usage on this page

DP Ads Banner

This element allows you to create simple advertisment banners.


Options for DP Adds Banner

Content position

Content typgraphy

Content elements colors

See examples of usage on this page

DP Animated Text

This element allows you to create animated text.


Options for DP Animated Text

Text animation type - Select text animation type ( typing, rotate words )

Text typography and style

See examples of usage on this page

DP Animated Title

This element allows you to create animated text.


Options for DP Animated Title

Animation type - Select animation type ( from left, from right, from top, from bottom )

Title typography and style

See examples of usage on this page

DP Before After

This element allows you to images with comparison before/after.

See examples of usage on this page

This element allows you to create blog posts carousel.


Options for DP Blog Carousel

Source - You can select all post or create custom query

Carousel settings - Select items count visible at once, itmes to scroll counts etc.

Carousel navigation settings - Enable or disable and set appearance for navigation dots and arrows.

See examples of usage on this page

DP Blog Grid

This element allows you to create blog grids.


Options for DP Blog Grid

Source - You can select all post or create custom query

Grid Columns - Select grid columns count (eg specify different values for specific devices)

Grid Style - select grid style (default, thumb style, minimal post, list style )

Grid Items Style - select grid ms appearance aspects (colors, typography, etc )

See examples of usage on this page

DP Button

This element allows you to create custom buttons.


Options for DP Button

Button Type - You can select button type (no icon, icon left, icon right, icon on hover etc.)

Button Shape - Select button shape (rounded, circle, square etc)

Button Size - Select button size (small, default, large, extra large )

Button Style - Select colors, backgrouns, typography etc.

See examples of usage on this page

This element allows you to create carousel from any VC elements using well known Slick carousel JS script.


Options for DP Carousel

Carousel Style - Select carousel style (horizontal or vertical)

Carousel Mode - default or center mode

Visible items

Autoplay and carousel speed

Carousel navigation style

See examples of usage on this page

DP Countdown

This element allows you to create count down counters.


Options for DP Countdown

Countdown Layout

Countown Time

Units avilable to display

Countdown typgraphy

See examples of usage on this page

DP Counter

This element allows you to create counters.


Options for DP Counters

Counter Layout - Icon and title positions

Counter Value

Counter Animations - Default or odometer style

Counter Icon

Counter Typgraphy

Counter Colors

See examples of usage on this page

This element allows you to create text box with icons.


Options for DP Featured Box

Box Layout - Icon and title positions, alignment etc

Icon Type - Icon font, text or image(SVG)

Content Alignment

Box Typography

Box Style - colors and size for icon, icon badge, content and title color etc

See examples of usage on this page

DP Flip Box

This element allows you to create fliping boxes.


Options for DP Flip Box

Box Animation - Vertical, horizontal etc

Box Size - minmal height

Box Front Content

Box Back Content

Box Style - colors, background colors, background images etc

See examples of usage on this page

DP Full Page Slider

This element allows you to create full page slider using fullPage.js script. Place inside this element DP Full Page Slider Content Item and inside every VC content.


See examples of usage on this page

DP Google Map

This element allows you to create different Google Maps.


Options for DP Google Map

Map Style - Use one of predefined color style or download one from http://snazzymaps.com

Map Locattions - add location addresses or Lang/Long values

Map settings - height, zoom, level, controls visibility etc

Map Marker Styles

Tooltips Styles

See examples of usage on this page

DP Heading

This element allows you to create different styles of custom headings with subtitles and separators.


Options for DP Heading

General layout - Chose title, subtitle and separator posiions and alignment

Title and subtitle typgraphy

Resposive typgraphy - you can set font sizes for different devices

Colors - set colors for all elements

See examples of usage on this page

DP Hotspoted Image

Hotspot module is the creative way to attract your visitors’ attention and add hotspot icon with tooltip in on image.


Options for DP Hotspoted Images

Background image

Tooltips list- Chose position, title, content and marker image for any tooltip

Tooltip appear node - on Hohover , onVlick or allways visible

See examples of usage on this page

DP Icon List

Icon list module allows you to add the list with the custom icons or dots.


Options for DP Icon List

Icon - set icon (you can set different icon for each list position

Icon style- Chose colors and sizes for icons

Typography

See examples of usage on this page

DP Image Banner

Image banner element is the perfect solution for stylish image banners presentation. It will attract the visitors and show the necessary information.


Options for DP Image Banner

Layout - set position and content appear mode (bellow image, aside image, title on image/content on hover, all info on hover etc.)

Additional Icon- set additional icon badge and it position

Typography

See examples of usage on this page

This element allows you to display the images in a carousel. Moreover, you may add the link to the images to show the external pages.


Options for DP Image Carousel

Hover animation style - opacity, grayscale, opacity&grayscale or flip

Carousel settings- image visible at once, autoplay speed etc

Pagination and navigation

See examples of usage on this page

DP Image Grid

This element allows you to display simple image grids and galleries.


Options for DP Image Grid

Grid style - default or masonry

Hover animation style - overlay, opacity, grayscale, opacity&grayscale or flip

Columns count and items offset

List of images

Appearance styling - overlay colors, border colors and radius etc

See examples of usage on this page

DP Image Stack

This element allows you to present animated image layers.

Options for DP Image Stack

Stack alignment

Animation delay

List of images - you can set eventualy x/y offset for each image

See examples of usage on this page

Note, before adding this shortcode on the page, it is important to have the images with equal sizes for proper displaying, i.e. all the image layers need to have the same sizes as the first image uploaded. So the next images will be positioned correctly relatively to the first image.

DP Modal Box

Modal box allows you to add the content into a multipurpose and ultra stylish shortcode and create popup element on the page.
This is a nested element that includes other elements. You may style the element container and then fill it in with elements.

Options for DP Modal Box

Appearance Options - on click, delay, on scroll

Appearance animation

Modal box dimmensions

Overlay style - overlay and overlay close button colors

See examples of usage on this page

It is important to know, that in order to check the Modal Box popup window for the second time on the page, you need to clear all browser cache and cookies for the page in your browser! Also, only one Modal Box element is supposed to be added per page!

DP Pie Chart

Pie Charts are convenient tools for presenting the colored diagrams in a simple and clear way.

Options for DP Pie Chart

Layout - default, icon in center, icon by title, icon by number

Content - number value, units

Dimensions - circle size, bar and bar background thickness

Colors - color eg gradients for animated bar

Typography - for number, units , title and content

See examples of usage on this page

This element allows you to present portfolio items in carousel form

Options for DP Portfolio Carousel

Source - all items or your own query

Items Count - number value, units

Carousel Items Style - overlay colors, icons etc

Carousel Mode - default or slick center mode

Carousel Settings - speed, autoplay etc

Pagination and Navigation

See examples of usage on this page

DP Portfolio Grid

This element allows you to present portfolio grid in any place

Options for DP Portfolio Grid

Source - all items or your own query

Items Count - number value, units

Grid Settings - columns count, items spacing (can be eventually set different for different devices)

Grid Items Style - overlay colors, icons etc

Grid Filter - enable or disable grid filter

Typography

See examples of usage on this page

DP Portfolio Metro Grid

This element allows you to present portfolio grid with images in differents sizes in any place

Options for DP Portfolio Metro Grid

Source - list of items

Items Dimensions and Overlay Colors - you can set it individually for each item

Grid Settings - columns count, items spacing (can be eventually set different for different devices)

Grid Items Style - overlay colors, icons etc

Grid Filter - enable or disable grid filter

Typography

See examples of usage on this page

DP Price List

This element allows you to create the pricing lists on your site easily and arrange them into the stylish list.

Options for DP Price List

List Content - list of price list items

List Style - currency positions, borders style and colors etc.

Typography

See examples of usage on this page

DP Price Box

This element allows you to create stylish price information blocks and to present your services and features for your customers.

Options for DP Price Box

Layout - minimal, classic, colors, flippng box

Price Box Content - price, currency, title, subtitle, features list

Icon or Image

Button - title, link and style

Badge

Typography

See examples of usage on this page

DP Progress Bar

This element allows you to create the progress bar in the stylish way.

Options for DP Progress Bar

Style - default or compact

Values

Icon

Colors

Typography

See examples of usage on this page

DP Separator

This element allows you to create section separators.

Options for DP Separator

Type - simple, with text, with icon, with image

Style - line height, color, style

Icon or Image

Typography

See examples of usage on this page

DP Share It

This element allows you to create stylish share buttons for your site.

Options for DP Share It

Layout - vertical or horizontal

Style - minimal, rounded, flat, expandable

Button Size and Alignment

Buttons Style - shadows, hover animation

Buttons Typography

See examples of usage on this page

DP Social Icons

This element allows you to add soclia icons to your site.

Options for DP Social Icons

Style - minimal, rounded, otlined, colored

Icon Size and Alignment

Social Networks List

See examples of usage on this page

DP Split Section

This element allows you to create stylish splited sections on your site.

Options for DP Split Section

Image Position - left or right

Image Block Style - dimmensions, animation eg parallax

Content - title, subtitle

Read More Button Style

Typography

See examples of usage on this page

DP Split Slider

This element allows you to create content in form animated split slider.
This is a nested element that includes other elements. You need place inside Left and Right split slider container and than you may fill it in with elements.

See examples of usage on this page

DP Step Box

This element allows you to create stylish process diagram on your site.

Options for DP Step Box

Box Icon Style - classic, with badge, outlined, framed

Content Visibility - allways or on hover

Process Line Style - color , border style, thickness

Read More Button Style

Typography

See examples of usage on this page

DP Subscribe

This element add the stylish subscribe form to your site and let the users subscribe to your news.

Options for DP Subscribe

Form Layout - default, button inside , minimal, animated

Feedburner Name

Button and Placeholder Texts - color , border style, thickness

Form Style - button, borders colors

Typography

See examples of usage on this page

DP Team Box

This element allow you to present your team to the visitors. Will help you to do this in effortless and stylish way.

Options for DP Team Box

Layout - content bellow, content aside, content on hover, flip box

Content - title, position, description, social links

Typography

See examples of usage on this page

This element allow you present testimonials in stylish carousel form.

Options for DP Testimonial Carousel

Style

Image Position

Content Alignment

Testimonials List

Carousel Mode - default or slick center mode

Carousel Settings - speed, autoplay etc

Pagination and Navigation

See examples of usage on this page

DP Testimonial

This element allow you add the reviews of your customers.

Options for DP Testimonial

Layout - content bellow, content aside, content on hover, flip box

Content - title, position, description, social links

Style - colors foe elements

Typography

See examples of usage on this page

DP Time Line

This element allow you to display another elements in timeline diagram.
This is a nested element that includes other elements. You need place inside Time Line Items (eventuell Time Line Seprators) and than you may fill it in with elements.

Options for DP Time Line

Time Line Style - color, thicknes etc.

See examples of usage on this page

DP Video Player

Using the video player element you are able to present videos on your site.

Options for DP Video Player

Player Type - inline player, popup player , minimal player

Video Source - self hosted or embeded

Video Aspect Ratio - 4:3, 16:9 or 21:9

Video Thumbnail - if applicable

Inline Player Style - if applicable (border, shadow)

Typography- if applicable

See examples of usage on this page

DP Workflow

This element allow you to present another elements in form workflow diagram.
This is a nested element that includes other elements. You need place inside Workflow Items and than you may fill it in with elements.

Options for DP Workflow

Workflow Axe Style - color, thicknes etc.

See examples of usage on this page

DP BMI Calculator

This element allow you present BMI Calculator in stylish.

Options for DP BMI Calculator

Content - Title and description

General settings - Default units, button title, button posittion, table position

Style - Colors of all elements

Typography

See examples of usage on this page

DP Parallax Stack

This element allows you to present paralax animated layers.
This is a nested element that includes other elements. You need place inside Parallax Stack Layers and than you may fill it with elements.

Options for DP Parallax Stack Layers

Paralax type - vertical eg horizontal

Parallax factor

See examples of usage on this page

DP Timetable

This element allow you to insert timetable created in DPR Timetable plugin.

Options for DP Timetable

General setting - columns, events and categories to include

Events style - available fields, event block style

Table style - header style and typography, row style and typgraphy, filter style

See examples of usage on this page

DP Animated Container

This element allow you to present another elements animated on scroll or on hover.
This is a nested element that includes other elements. You can plase here any other elements.

Options for DP Animated Container

Magic Scroll - enable Magic Scroll animation and set animation type.

Parallax on hover - enable parallax on hover and set animation type.

Block Reveal Effect - enable block reveal effect set style.

3D Tilt on hover

See examples of usage on this page

DP Animated SVG

This element allow you to inser animate SVG.
For animation is used vivus.js. So for animation you should use stroke based SVG's. For more information please visit this page

Options for DP Animated SVG

SVG animation type - delayed, one by one, scenarize etc.

Animation duration

SVG alignment

Drawing color

DP Woo Category

This elemnt allows you display link to Woocmmerce Category in stylish form.

Options for DP Woo Category

Category Image - you can use woocommerce category thumb or upload custom image

Layout - title and description position in image container

Style - image size, colors of texts and overlays, hover effects (shadow, animation)

Typography

See examples of usage on this page

DP Single Product

This element allows you ddisplay single woocommerce product in stylish form in any place on your site.

Options for DP Single Product

Style - default, compact , hover overlay

Content Position - title and description position in image container

Product Image - you can use woocommerce product thumb or upload custom image

Style - image size, colors of texts and overlays, hover effects (shadow, animation)

Typography

See examples of usage on this page

Child Theme

Optimo comes with a Child Theme.
Simply install dpr-optimo-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 Optimo Theme by simply activating a different theme. Once you activate a different theme, you can delete the Optimo theme.

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

Step 5 - Then simply upload the new “Optimo.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 "Optimo" 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 Optimo theme from your Themeforest and retrieve Optimo folder by unpacking the zip that you download from Themeforest and Optimo_(version.number).zip.

Step 3 - Then simply drag and drop the new "Optimo" 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 Optimo theme.

Speed Optimization

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

  1. Install a Cache Plugin for WordPress. We recommend W3 Total Cache.
  2. Install an Image Compress Plugin. We recommend WP Smush It.
  3. Install a Database Optimizer Plugin We recommend WP Optimize
  4. Reduce the number of posts on the page
  5. Reduce the number of unnecessary plugins.
  6. Use more icons and less images.

Changelog

Version 1.2 (2019.08.18)

- Revslider plugin upgraded (v 6.0.9)
- Fixed Woocommerce 3.7 compatibility
- Fixed demo content compatibility with Revslider 6.0+

Version 1.1 (2019.08.02)

- Revslider plugin upgraded (v 6.0.8)
- WPBakery Page Builder plugin upgraded (v 6.0.5)
- Fixed Redux admin CSS for retina devices
- Fixed minor CSS issues

Version 1.00 (2019.07.13)

- Initial Release!