Blobie Documentation

### Blobie Multiconcept Creative WordPress Theme by DynamicPress Team

Support Forum View Theme Demo

# Theme Documentation

### Introduction

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

- Blobie 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 Blobie 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 Blobie 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-blobie.zip (zip file name can be changed from version to version).

Please, follow the steps below to install Blobie 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-blobie.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 Blobie, 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-blobie.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-blobie.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-blobie 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-blobie folder
Step 3 - Upload the dpr-blobie folder to your server in path .../wp-content/themes/.
Step 4 - The uploaded path should be like this: .../wp-content/themes/dpr-blobie/
Step 5 - Login to your WordPress Dasrdoard and go to Appearance > Themes and activate the Blobie 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 Blobie, 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

#### One Click Importer

Step 1 - Log into your WordPress Dasrdoard.
Step 2 - Go to Blobie 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.

#### WordPress Importer

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 blobie_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/

#### Error or Problem with Import of the Demo

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.

Blobie 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

##### 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

Blobie 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.

#### Logo

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 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

#### DP Blog Carousel

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

#### DP Carousel

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

#### DP Featured Box

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

#### DP Image Carousel

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

#### DP Portfolio Carousel

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

#### DP Testimonial Carousel

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

Blobie comes with a Child Theme.
Simply install dpr-blobie-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 Blobie Theme by simply activating a different theme. Once you activate a different theme, you can delete the Blobie theme.
Step 4 - Delete the Blobie Theme. Do not worry, your content will not be lost!
Step 5 - Then simply upload the new “Blobie.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 "Blobie" 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 Blobie theme from your Themeforest and retrieve Blobie folder by unpacking the zip that you download from Themeforest and Blobie_(version.number).zip.
Step 3 - Then simply drag and drop the new "Blobie" 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 Blobie 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.1.1 (2020.01.03)

    - Fixed VC Header Builder elements Menu Vertical and Menu Horizontal

Version 1.1 (2019.12.31)

    - Updated WPBakery Page Builder plugin (now v 6.1 )
    - Updated Interactive Showcase VC elements (now added autoplay setting)
    - Fixed DPR Resize class issue on IIS servers
    - Fixed DP Price List element CSS issue with multiline description
    - Fixed single portfolio responsive CSS issue
    - Added two new demo front pages

Version 1.0.2 (2019.12.12)

    - Fixed DPR Blobie Extensions plugin error with child theme

Version 1.0.1 (2019.12.11)

    - Fixed JS bug in Redux Color field

Version 1.0 (2019.12.10)

    - Initial Release!