1. General info & Installation

1.1 Few words on start

Be|theme is the new era of building websites. Totally new & fully customizable Muffin Builder, lot`s of shortcodes, Full Width Portfolio, Swipe Technology, Revolution Slider, sticky menu or detailed Muffin Options panel. Be sure that with our new theme you can easily customize whatever you want on page. Please also note that all those options are amazingly easy to use.

1.2 Package from themeforest

At first, after purchasing this theme please download the package from Themeforest. All you need to do that, is move your mouse over your login name in right top corner (of course after you`re logged in Themeforest) and then click Download. Here you will find all the items that you have purchased. It looks exactly just as the diagram next to.

In the next step click the Download > Main File(s) button next to Be|theme theme and save package on your computer.

In the package you can find things like documentation, license, psd files, zipped file with theme files and folder with theme files called betheme. Please unpack the whole package after downloading it from Themeforest.


1.3 Installation & Update

At first please make sure that you have unpacked the whole package shown in the last point. This is very important! You can complete installation in two different ways:

  1. WordPress Theme Manager - please go to Appearance > Themes > Add new > Upload, select zipped theme folder called betheme.zip and press Install Now button. The wordpress will do the rest for you.
  2. FTP upload - upload non-zipped theme folder called betheme to /wp-content/themes/ folder in your WordPress installation folder on your server.

In the second part of this guide we have described how to update Be|theme. Please make sure that you didn`t make any changes in the files. If you have made changes and you don`t want to lose them, the best way is to use one of freeware tools for comparing files, ex. Beyond Compare (we are not the authors of this tool so please don`t ask us how to use it. Answears to how to use it can be found on their website). After comparing these files you can upload on server only the files that hasn`t been changed.

If you haven`t changed any theme files, all you need to do is update your version of theme by downloading the latest package from themeforest, unpacking files and uploading new files on the server while replacing the old files. Simply overwrite them.

All your data in the database are safe because after updating theme files doesn`t change anything in the database. Please however always make a backup of your files & database.

IMPORTANT!!! After theme installation, at the top you have box with information about required and optional plugins. To install them and activate, please navigate to Appearance > Install Plugins section, and install only NECESSARY PLUGINS. We included plugins like: Slider Revolution (required), Contact Form 7 (required), Duplicate Post (optional), Envato WordPress Toolkit (optional), Force Regenerate Thumbnails (optional), Layer Slider (optional), Recent Tweets (optional) and Visual Composer (optional).


2. Demo content

For Be, we created two different ways to upload demo content. The first one is 1 Click Demo Install, but the second one are .xml files. Below we will describe both and you can choose which one you like the most.

2.1 1-Click Demo Install

Since version 2.4 we added 1 Click Demo Install possibility for better purposes. If you are using this option you don`t need to use .xml files no longer. All you need to do is go to Appearance > BeTheme Demo Data section and choose what exactly you want to install. You can select if you want to install whole content, one of homepages, content, options or widgets.

Since 12th September 2014, when a new update (4.2) has been released, we decided to create totally different demos for better purposes (not just homepages but all settings, widgets, menus, images and other stuff associated with a particular demo). For more info about this feature, please navigate to http://forum.muffingroup.com/betheme/discussion/1064/how-to-re-create-one-of-full-demo-pages-betheme-demo-data


3.1 Header layout

To setup header layout, please navigate to Appearance > BeTheme Options > Layout > Header section and choose one of available layouts. Below header styles, you can also setup some other things that we listed below:

  • Header | Style - choose own header style (Modern, Classic, Stack: left, Stack: center, Stack: right, Simple, Empty, Fixed, Below slider, Transparent, Creative, Creative: Always Open or Magazine)
  • Header | Image upload own header background image if you don`t want default one (image will be applied for all pages instead of default). You can also upload different header images for different pages but this can be done while you edit/create page on right side where is Set featured image option.
  • Header | Image Attachment choose between fixed or parallax header background position.
  • Header | Sticky - turn on/off sticky header
  • Header | Sticky Style- choose between white and dark sticky styles.
  • Header | Minimalist - turn it on if you want to use header without background image & padding
  • Sliding Top turn it on if you want to show widgitized area sliding from top (widgets for this section can be setup in Appearance > Widgets section)
  • Search Icon turn ON/OFF search icon in header.
  • Action Button | Title - title for action button in header top bar
  • Action Button | Link - link for action button in header top bar
  • Banner - type header magazine banner code
  • Subheader - you can choose if you want to hide just breadcrumbs, whole subheader or none of them.
  • Subheader | Image - upload subheader image (section where title are breadcrumbs are)
  • Subheader | Transparent - turn on/off transparency for subheader where title and breadcrumbs are. After that header image will be visible through the Subheader.

3.2 Logo & Favicon

To setup logo please navigate to Appearance > BeTheme Options > Layout > General section and you will be able to upload Custom & Retina Logos. Under you can also upload own favicon. Please remember that Retina Logo should be always 2x larger than Custom Logo (this field is optional).


3.3 Social icons

To setup social icons visible in right top corner, please navigate to Appearance > BeTheme Options > Layout > Social Icons section and setup links to social icon profiles. Please remember that each link should start with http:// always!

3.4 Sliding Top

To setup widgets inside Sliding Top Area, please navigate to Appearance > Widgets section and setup widgets for Sliding Top area #1, Sliding Top area #2, Sliding Top area #3 and Sliding Top area #4. Of course you don`t need to setup widgets for all of them. It depends only on your needs and you can even setup for only one section. After widgets setup, you must go to Appearance > BeTheme Options > Layout > Header section and turn on Sliding Top option.

4. Pages creation

Creating your own page has been never so easy. To make the first step please go to Pages > Add new. On first sight everything looks just like in default wordpress. But when you have a look under Visual/HTML area you will see some Page options.

4.1 Getting started

In first Visual/HTML area you can build your page using all available options in editor. Beyond the default options we included []+ button for WordPress editor. With this option you can build any page you want based on shortcodes. All available shortcodes for this theme has been described in Muffin Builder & Shortcodes section.

Please note that you can build pages based not only on shortcodes. You can also use Muffin Builder.

Below the Muffin Builder you can find some Muffin Options.

  • Hide the content - this options will hide the content from Wordpress editor. You can turn this button on or off. If you`re using Muffin Builder for building content please turn this button off. If you won`t turn it off, the content from Wordpress editor will show above the Muffin Builder items.
  • Custom Layout - if you want custom layout for page, you need to create it first in Layouts section which is available in main dashboard menu on the left side and then you can choose which one you want to use for page. If you won`t choose any, will be used default. Thanks to this possibility you can have different layouts for different pages.
  • Custom Menu - if you want custom menu for page, you need to create it first in Appearance > Menus section which is available in main dashboard menu on the left side and then you can choose which one you want to use for page. If you won`t choose any, will be used Main Menu as default. Thanks to this possibility you can have different menus for different pages.
  • One Page - Turn it ON if you want to create one page with #hashtag links. More info about this feature please read here.
  • Layout - you can choose personal layout for each page. There is 4 options to choose: full width without sidebar, left sidebar, right sidebar or both sidebars.
  • Sidebar - here you can select proper sidebar for this page (of course if in the previous option you have selected right or left sidebar). You can create your own sidebars in Appearance > BeTheme Options > Getting started > Sidebars.
  • Sidebar 2 - here you can select proper sidebar for this page (of course if in the previous option you have selected right or left sidebar). You can create your own sidebars in Appearance > BeTheme Options > Getting started > Sidebars.
  • Slider | Revolution Slider - you can select one of the Revolution Slider's for page. Please also note that for each page can be different slider. Of course, before select slider you need to create it with amazing Revolution Slider
  • Slider | Layer Slider - you can select one of the Layer Slider's for page. Please also note that for each page can be different slider. Of course, before select slider you need to create it first
  • Slider | Shortcode - if you want to use other slider then please paste slider`s shortcode here
  • Title Area | Hide - this option removes Subheader section where is page title and breadcrumbs.
  • Content | Remove Padding - ON/OFF padding for the very top content section.
  • SEO Title - title for page (if you leave this field empty, page will get default settings from Appearance > BeTheme options > Getting started > General)
  • SEO Description - description for page (if you leave this field empty, page will get default settings from Appearance > BeTheme options > Getting started > General)
  • SEO Keywords - keywords for page (if you leave this field empty, page will get default settings from Appearance > BeTheme options > Getting started > General)
  • Custom CSS - you can create custom css for current page only

After set up all this options on right side you can also choose right Page Template for this site.


4.2 Muffin Builder

What about Muffin Builder? With his help web development is child's play. Page can be splitted on totally different sections where you can choose things like colors, backgrounds, layouts, sidebars, classes and much more. For each section you can add an items that you need.

Now with the new Muffin Builder you can also do things like clone sections or items so building websites is much faster and easier. You will love it!

To add item inside section please click Add item button. After that you will see the right Item already added below. You can do few things with this added Item.

  • Expand Item to 1/6, 1/5, 1/4, 1/3, 1/2, 2/3, 3/4, 1/1 by using "+" button in the Item. The same way you can shorten this Item using "-" button. Please note that not all Items working with all sizes.
  • You can delete Item/Section if you don`t need it by ˟ in right Item corner.
  • You can edit each Item/Section by click on "pencil" in right bottom corner in the Item.
  • You can clone each Item/Section by click on "clone" in right bottom corner in the Item.
  • You can also move any Item/Section by drag & drop.

Please remember that Muffin Builder is working only with Default template.

You can choose one of below items:

4.2.1 Accordion / Toggle

This Item is adding Accordion or Toggle on page. You can add as many tabs as you need, just type Title and Content (you can use html tags) for each tab. You can also use Drag&Drop option to set the order for items.

Available sizes:'1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (accordion item title)
  • Accordion (you can add as many tabs you want, use drag & drop to change their order and also you can remove them)
  • Open first (you can select if you want to open first tab or not)
  • Style (you can choose Accordion or Toggle style)

4.2.2 Article box

This Item is adding Article box on page. You can add as many article boxes on page as you need, just type content into fields.

Available sizes:'1/3', '1/2'

Attributes:

  • Image (upload image for box)
  • Slogan (text available at the top of right side item)
  • Title (title for article box item)
  • Link (link to any page you like - if you want you can leave this field empty)
  • Open in new window (choose if you want to open link in the new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.3 Blockquote

This Item is creating Blockquote box with photo and some content.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Content (text your own content for blockquote Item. Here you can use html tags)
  • Author (author of this blockquote)
  • Link (link to author's page)
  • Open in new window (choose if you want to open link in the new window or not)
  • Style (you can choose own style for this item - Classic or Modern)

4.2.4 Blog

This Item allow you to add Blog on any page you like with other muffin builder items. Great solutions for all those who want to get blog content with other stuff.

Available sizes: '1/1'

Attributes:

  • Count (choose how many posts you want to show)
  • Category (select category from which one you want to show posts)
  • Multiple Categories (type categories slugs if want to show post from multiple categories)
  • Style (you can choose Classic, Timeline or Masonry blog style)
  • Show Read More link (you can show Read more button or not)
  • Show pagination (choose if you want to have pagination or not)

4.2.5 Blog slider

This Item allow you to add some posts inside slider. This item has been equipped with swipe technology and works great on all kind of mobile devices like tablets or mobile phones.

This Item allow you to add some posts inside slider. This item has been equipped with swipe technology and works great on all kind of mobile devices like tablets or mobile phones.

Available sizes: '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (title for Blog Slider item)
  • Count (type the number of items you would like to see inside Blog Slider)
  • Category (choose category from which you want to show posts)
  • Multiple Categories (type categories slugs if want to show post from multiple categories)
  • Show Read More button (you can show Read more button or not)

4.2.6 Call to action

This Item allow you to create nice Call to action item with background image or without, icons, texts and other stuff. You can use it for any needs you like.

Available sizes: '1/1'

Attributes:

  • Title (is visible on the left side of item)
  • Icon (type any icon you like from our list of available icons)
  • Content (content visible on the right side of item)
  • Link (link for action icon in the middle of item)
  • Button Title (fill this field if you want to show button instead of icon)
  • Class (is useful when you want to open link in popup window)
  • Open in new window (choose if you want to open link in the new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.7 Chart

This Item allow you to create nice section or single elements with chart. You got many possibilites to use it.

Available sizes: '1/4', '1/3', '1/2'

Attributes:

  • Percent (setup how many percent should be around the circle)
  • Chart label (text inside chart item)
  • Chart icon (choose any icon you want from our list of available icons)
  • Chart image (instead of our icons, you can upload your own image inside)
  • Title (title for chart item)

4.2.8 Clients

This item can create nice section with Clients.

Available sizes: '1/1'

Attributes:

  • Items in row (choose number of items in row)
  • Category (choose category from which you want to show clients)
  • Style (you can choose between 2 different styles: Default and Tiles)

4.2.9 Code

This Item can be used  for present code. Also it convert all html tags into html special chars.

IMPORTANT! This item does not parse html so if you want to parse it, then please use Column item instead!

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Content (add your own code here)

4.2.10 Column

This Item is creating your own column. Think about what you want to be here and just do it. You can use iframes, html, local css styles and much more. Inside Column, you can do anything you can imagine.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (visible only via admin panel - item label)
  • Column content (this is the only attribute for this Item, feel free to use html tags and shortcodes in this section)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.11 Contact box

This Item is creating Contact box. Fill right fields and get let your customers to contact with you.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (contact box title)
  • Address (set up your address, html tags are also allowed for this field)
  • Telephone (telephone number)
  • Email (email address)
  • WWW (website url)
  • Background image (you can upload background image if you want to get nice background for this item)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.12 Content WP

Adding this item will show Content from Wordpress Editor above Page Options section. You can use it only once time per page. Please also remember to turn off "Show The Content" option if you prefer using this item as in other case, content will be duplicated.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'


4.2.13 Counter

This Item is creating nice counter with icon or image. For this item you have some nice options described below.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Icon (you can choose any icons from our predefined icons list)
  • Icon color (type color for icon)
  • Image (if you don`t like icons, you can upload your own image)
  • Number (number for counter item)
  • Title (text placed under number)
  • Style (you can choose between Vertical or Horizontal style)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.14 Divider

This item is creating space between elements. It is also aligning for a single line, boxes located underneath. You can choose few different styles of this item.

Available sizes: '1/1'

Attributes:

  • Divider height (enter the amount of the divider height)
  • Style (choose between Default, Dots and ZigZag styles)
  • Line (choose between Default, Narrow, Wide and Default line style)
  • Theme Color (choose YES, if you want line to be the same as theme color)

4.2.15 Fancy heading

This item is creating great Fancy heading. You can set up totally different headings in different places what you can see in preview section.

Available sizes: '1/1'

Attributes:

  • Title (title for heading)
  • Use H1 tag (choose YES, if you want title to be H1 tag instead of H2)
  • Icon (you can choose any icon you want from our icon's list)
  • Slogan (small text visible under title)
  • Content (content which you would like to have inside heading)
  • Style (you can choose 1 of 3 different styles for this item)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.16 FAQ

With this item you can create own FAQ page.  You can also use Drag&Drop option to set the order for items.

Available sizes: '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (type title for this item)
  • Add tab (just add your own tabs for FAQ item)
  • Open First (turn it on if you want to have first accordion item opened)

4.2.17 Feature list

With this item you can create very nice Feature list section.  You can use here icons, links and colors for icons.

Available sizes: '1/1'

Attributes:

  • Title (type title for this item)
  • Content (for each item inside you need to use text shortcode [item icon="icon-picture" title="some text" link="#"]). Of course each item can have own icon, text and link.

4.2.18 How it works

How it works item allow you to create some nice steps section, that can be used especially on landing pages. You can setup some nice things for this item

Available sizes: '1/4', '1/3'

Attributes:

  • Background image (upload background image for the item visible in circle)
  • Number (digit visible in the right bottom section of the item)
  • Title (title is visible under circle)
  • Content (type some text here that describe item - it is visible under the title)
  • Line (choose between showing line that is connecting items or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.19 Icon box

With this item you can create awesome looking Icon box with well done hover effect. This item got many different styles so you can create your own.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Title (title for icon box item)
  • Content (text for icon box item)
  • Icon (icon for icon box image - use one of icons from icon's list)
  • Image (if you don`t want to use one of our icons, then you can upload own image instead)
  • Icon Position (you can choose between Top and Left position for icon)
  • Border (choose if you want to show right border or not)
  • Link (type link for icon box item or leave it empty if you don`t want)
  • Open in new window (choose if you would like to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)
  • Custom CSS classes (you can type own class for section - this is really great option for all those who want to get special style for section). For example you can add here my-own-super-section class and then you can go to Theme options > Layout > Custom CSS and write there own styles for this class:

    .my-own-super-section { margin: 30px; padding: 20px; font-size: 15px; etc... }

    This is just example of what you can do so please do not use above css :)

    If you want to use multiple classes then please separate them with SPACE. We have one built-in class for this section which is named dark and you can use it if you want to get dark  background.

4.2.20 Image

This item is very useful option for embedding images into page. Images can have links or can be zoomed after click.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Image (choose your own image)
  • Border (choose Yes, if you want border around image)
  • Align (choose how you want to align image)
  • Margin Top (margin value from top in px)
  • Alternate text (alt text for image)
  • Caption (short text under image)
  • Zoomed image (choose image, if you want it to be opened after click)
  • Link (if you don`t want to open image after click, you can type your own link for this image)
  • Open in new window (choose if you would like to open item in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.21 Info box

With this item you can create awesome looking Info box with some informations inside. You can also setup background image so it can look much nicer.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (title for info box item)
  • Content (text inside info box item)
  • Background image (setup background image for info box item)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.22 List

List item give you many possibilities and using it you can create lot`s of nice things on website. You can define style, images, icons and much more. Preview below will show only small part of what can be done with List.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Icon (use any icon you want from our icon's list)
  • Image (instead of icon, you can upload own image for list item)
  • Title (title for list item)
  • Content (text for list item)
  • Link (list item can have link or not - depends on your needs)
  • Open in new window (choose if you would like to open item in new window or not)
  • Style (you can choose between 4 different styles so each item can be different)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.23 Map

This Item will create the Google map. Map item is based on Google Maps API.

Available sizes: '1/6', '1/5', '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Google Maps Lat (type right Lat value for your position)
  • Google Maps Lng (type right Lng value for your position)
  • Zoom (zoom of the map)
  • Height (height of the map)
  • Marker Icon upload own marker icon instead of default (only .png format)
  • Styles you can get predefined styles from snazzymaps.com or generate your own here
  • Box | Title (title for address box visible on the right side)
  • Box | Address (content for address box visible on the right side)
  • Box | Telephone (phone number for address box visible on the right side)
  • Box | Email (email for address box visible on the right side)
  • Box | WWW (www for address box visible on the right side)

The map will appear only if Google Maps Lat and Google Maps Lng are filled correctly.

4.2.24 Offer

This Item will create nice Offer section to present your offer. To create items for this item, you need to add items in Offer section which is in main wordpress dashboard menu on the left side, between "Clients" and "Portfolio" sections.

Available sizes: '1/1'

Attributes:

  • Category (select category from which you want to show offer items)

This item doesn`t have any attributes. Remember that Offer item can be used only on pages without sidebar and section must be setup on Full Width.


4.2.25 Opening hours

This item will create nice Opening hours box where you can type any content you want inside. Also you can setup background image to make this item much nicer.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (type title for Opening hours item)
  • Content (you can use anything inside you want, like plain text or html tags)
  • Background image (use image if you want to get nice background)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.26 Our team

This Item will create the single Our team profile. Show your team using this item.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Heading (type heading text under photo)
  • Photo (choose photo for one of your our team's profile)
  • Title (title for one of your our team's profile)
  • Subtitle (subtitle for one of your our team's profile)
  • Phone (phone number for one of your our team's profile)
  • Content (useful field if you want to describe our team member)
  • Email (email for one of your our team's profile)
  • Facebook (facebook link with http:// for one of your our team's profile)
  • Twitter (twitter link with http:// for one of your our team's profile)
  • LinkedIn (LinkedIn link with http:// for one of your our team's profile)
  • Blockquote (type blockquote for our team item)
  • Style (you can choose layout between 3 different styles)
  • Link (type link if you have special page for team member)
  • Open in new window (choose if you want to open link in the new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

You can create as many profiles for your members as you need.


4.2.27 Our team list

This Item will create the single Our team profile. Show your team using this item.

Available sizes: '1/1'

Attributes:

  • Photo (choose photo for one of your our team's profile)
  • Title (title for one of your our team's profile)
  • Subtitle (subtitle for one of your our team's profile)
  • Phone (phone number for one of your our team's profile)
  • Content (useful field if you want to describe our team member)
  • Blockquote (you can type your team member's blockquote here)
  • Email (email for one of your our team's profile)
  • Facebook (facebook link with http:// for one of your our team's profile)
  • Twitter (twitter link with http:// for one of your our team's profile)
  • LinkedIn (LinkedIn link with http:// for one of your our team's profile)

You can create as many profiles for your members as you need.

4.2.28 Photo box

This Item will create the single Photo box item. This item can have link or not - depends on your needs.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Title (title for Photo Box item)
  • Image (choose photo for Photo Box item)
  • Content (text from this section is visible under photo)
  • Text Align (you can choose between Center, Left and Right align for text)
  • Link (you can type link for this item if you want)
  • Open in new window (choose if you want to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.29 Portfolio

This Item will create Portfolio (the same items as on portfolio page) in any place you want.  Use your portfolio items with any other shortcodes on page.

Available sizes: '1/1'

Attributes:

  • Count (decide how many portfolio items you want to show on one page)
  • Category (choose from which category you want to show portfolio items)
  • Multiple Categories (type categories slugs if want to show post from multiple categories)
  • Style (choose between 5 different styles for portfolio item)
  • Order by (choose the way for order your portfolio items)
  • Order (choose if you want to order items Ascending or Descending)
  • Show pagination (choose if you want to show pagination or not)

4.2.30 Portfolio grid

This Item will create Portfolio grid (the same items as on portfolio page) in any place you want.  Use your portfolio items with any other shortcodes on page.

Available sizes: '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Count (decide how many portfolio items you want to show on one page)
  • Category (choose from which category you want to show portfolio items)
  • Multiple Categories (type categories slugs if want to show post from multiple categories)
  • Order by (choose the way for order your portfolio items)
  • Order (choose if you want to order items Ascending or Descending)

4.2.31 Portfolio slider

This Item create awesome, swipe touch Portfolio slider in any place on page you like. This item looks and work really cool on all devices.

Available sizes: '1/1'

Attributes:

  • Count (type the number of items that you want to show in portfolio slider item)
  • Category (select category from which you want to show portfolio items)
  • Multiple Categories (type categories slugs if want to show post from multiple categories)
  • Order by (choose the way for order your portfolio items in slider)
  • Order (choose if you want to order items Ascending or Descending)

4.2.32 Pricing item

This Item will create amazing Pricing item. You can choose between 3 different styles. For example you can use item as boxes or also you can use them as table with label or without it.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Image (additional field for image at the top of pricing item )
  • Title (pricing item title)
  • Price (enter your price)
  • Currency (enter your currency)
  • Period (enter period for pricing table)
  • Subtitle (text visible under price)
  • Content (enter item content)
  • Link title (enter link title, this link title will appear only if this field is filled)
  • Link (enter link, this link will appear only if this field is filled)
  • Featured (choose if you want to make item featured or not)
  • Style (you can choose between 3 different styles)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.33 Progress bars

This Item will create Progress bar. You can add as many you want.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Add your own tabs by clicking "Add tab" button. You can add as many tabs as you need.

Attributes:

  • Title
  • Content (type here as many bars you like, the shortcode for progress bar is [bar title="Photoshop" value="80"])

4.2.34 Promo box

This Item will create nice Promo Box with some text, image and button with link. You can choose between left or right style and also you can setup some other settings.

Available sizes: '1/2'

Attributes:

  • Image (upload photo for Promo Box item - can be on right or left side )
  • Title (title for Progress Box item)
  • Content (content for Progress box item)
  • Button Text (type text for the button inside Progress Box item)
  • Button Link (link for the button)
  • Image position (choose between left or right side position for image above)
  • Border (choose if you want to show border on right hand side or not)
  • Open in new window (choose if you want  to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.35 Quick Fact

Create Quick Fact thing. Really nice item to present some facts with short description.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Heading (you can put some text above counter icon)
  • Number (number is visible at the top of the item)
  • Title (title is visible just under the large  number)
  • Content (type short description which is visible under title)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.36 Shop Slider

This item will create nice Shop Slider with products from WooCommerce plugin. This item is perfect when you create shop.

Available sizes: '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title (type title for Shop Slider item)
  • Count (type how many products items you would like to show)
  • Show (choose between Featured, Onsale or All products for slider)
  • Category (choose from which category you want to show Shop Slider)
  • Order by (you can order slides by Date, Menu order and Title)
  • Order (above options can be ordered Ascending or Descending)

4.2.37 Slider

If you don`t want to use Revolution Slider and need something simplier then we recommend to use Slider item. You can show some images on simple slides in easy way. This item only give you possibility to paste slides on page. If you want to add slides then, you should do it in "Slides" section which is available on the left side in wp dashboard where is whole menu.

Available sizes: '1/1'

Attributes:

  • Autoplay timeout (type in miliseconds, time between slide transitions)
  • Category (choose from which category you want to show slides)
  • Ordery by (you can order slides by Date, Menu order and Title)
  • Order (above options can be ordered Ascending or Descending)

4.2.38 Sliding box

Sliding Box item all you to create photo box with nice sliding up effect. This box can have link or not.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Image (photo for Sliding box item)
  • Title (text visible under photo)
  • Link (type link for the box or not - depends on your needs)
  • Open in new window (choose if you want to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.39 Tabs

This Item allow you to create 4 different Tabs. You can add as many tabs as you want.

Available sizes: '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Add your own tabs by clicking "Add tab" button. You can add as many tabs as you need.

Attributes:

  • Title (tabs title)
  • Content (tabs content)
  • Style (we did 4 different styles for this item: Horizontal, Horizontal with Big Icon, Vertical, Vertical with Big Icon)
  • Unique ID (optional) - this item is only for those of you who want build one-page with links for sections and for example you want send users to right section and right tab.

4.2.40 Testimonials

This Item will create Testomonials slider. Testimonials for this section, you can add in Testimonials > Add new section.

Available sizes:'1/1'

Attributes:

  • Category (choose form which category you want to show testimonials)
  • Order by (choose how to order testimonials - Title, Menu order or Date)
  • Order (choose if you want to order Ascending or Descending)
  • Hide Photos (hide testimonials images if you don`t want to use them)

4.2.41 Timeline

This Item will create Timline section and you can use it for anything you need. Inside it works just like Tabs or Accordion. Just Add tab and add any content you want inside.

Available sizes: '1/1'

Attributes:

  • Title (title for timeline item)
  • Content (text for timeline content section)

4.2.42 Trailer Box

Trailer Box item have slogan, photo and very nice hover effect. Just upload your image, type slogan and enjoy good looking item.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2'

Attributes:

  • Image (upload image for Trailer Box item)
  • Slogan (slogan is visible on this image on blue background with diagonal lines)
  • Title (text visible under the slogan, directly on image)
  • Link (Trailer box item can have link or not - depends what you need)
  • Open in new window (choose if you want to open link in new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

4.2.43 Video

This item is very useful option for embedding Vimeo, Youtube and HTML5 videos into page.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Video ID - video`s ID. This value is placed at the end of every vimeo or youtube video

        For vimeo video ID is: http://vimeo.com/19819283

      For youtube video ID is: http://www.youtube.com/watch?v=YE7VzlLtp-4

      The bolded values are ID's for videos.

  • Parameters - field for multiple paramaters for videos
  • HTML5 mp4 video - instead of youtube and vimeo videos you can upload own videos in HTML5 formats
  • HTML5 ogv video - instead of youtube and vimeo videos you can upload own videos in HTML5 formats
  • HTML5 placeholder image - placeholder image for HTML5 videos (useful especially on mobile devices)
  • Width - player`s width, 700 is highly recommended for left or right sidebar template while 950 for a default one.
  • Height - video player`s height

4.2.44 Visual Editor

This item is best choice for those who don`t like coding with html or css. Just put what you need and style it.

Available sizes: '1/6', '1/5', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1'

Attributes:

  • Title - visible only via admin panel - item label
  • Visual Editor - put text, media or other stuff and style if for your needs with visual editor

4.2.45 Countdown

Great item for all those who want to put countdown in any place on page.

Available sizes: '1/1'

Attributes:

  • Launch Date - type launch date in the following format: 12/30/2014 12:00:00 | month/day/year hour:minute:second
  • UTC Timezone - choose your timezone

4.2.46 Flat box

Item with icon on left and image on right with nice hover effect.

Available sizes: '1/4', '1/3', '1/2'

Attributes:

  • Icon (type any icon you want from list of available icons)
  • Icon background (type color in hex format, ex: #FFFFFF)
  • Image (upload image)
  • Title (text visible under the image)
  • Content (text visible under the title)
  • Link (type link for item)
  • Open in new window (choose if you want to open link in the new window or not)
  • Animation (choose entrance animation on scroll or leave without animation)

SPECIAL ITEM - "SECTION"

This is totally new item which gives you lot`s of possibilities with creating pages. Now you can split each page, post or portfolio item for sections. Section is a part of page and can have own settings. Please take a look on image next to.

Attributes:

  • Title (for backend purposes only)
  • Background Image (you can upload image/pattern for background section)
  • Background Image position (choose position for background image)
  • Background Color (you can choose color for background)
  • HTML5 mp4 video (you can upload background video for section)
  • HTML5 ogv video (you need to upload both: mp4 and ogv for cross-browser compatibility)
  • Layout (you can choose if you want section with sidebar or not - each section can have own sidebar what is really amazing and people loves it)
  • Sidebar (choose sidebar for section)
  • Padding Top (you can add top padding for section if you want)
  • Padding Bottom (you can add bottom padding for section if you want)
  • Style (choose 1 of 5 predefined styles for section)
  • Custom CSS classes (you can type own class for section - this is really great option for all those who want to get special style for section). For example you can add here my-own-super-section class and then you can go to Theme options > Layout > Custom CSS and write there own styles for this class:

    .my-own-super-section { margin: 30px; padding: 20px; font-size: 15px; etc... }

    This is just example of what you can do so please do not use above css :)

    If you want to use multiple classes then please separate them with SPACE. We have one built-in class for this section which is named dark and you can use it if you want to get dark  background.

  • Custom ID (useful option for one page websites especially or for custom css changes)
  • Responsive Visibility (you can choose on what devices section should be visible or not)

4.3 Page Templates

Template has several specially designed Page Templates, which can be used on Pages, adding them special features.

  • Archives - this template can automatically create list, that contain Available Pages, Latest Posts, Archives by Subjects and Archives by Months.
  • Blank Page - this template create blank page. Basically on this page you can create anything you want from scratches.
  • Portfolio - this template let you to add Portfolio for website. You can see these entries in section Portfolio > Portfolio.
  • Sitemap - this template let you to create simple sitemap.

4.4 Raw/Text Shortcodes

As you know, shortcodes are really useful in creating pages, and they accelerate your work. That`s the main reason why have created them. Below you`ll learn how to use them in the "Be|theme" theme. There is a lot of them and they are easy to use.

4.4.1 Adding shortcodes in content using wp-editor

You can use shortcodes directly in WP editor. Just click on "[]+" button. After that you`ll see whole list of shortcodes. After select right shortcode and click "Insert", the shortcode will be inserted into editor.


4.4.2 List of available shortcodes & how to use them

We divided all text shortcodes on 3 different sections: Column, Content and Builder shortcodes.

4.4.2.1 Column shortcodes

Those shortcodes are for users who don`t want to use Muffin Builder and build all pages on shortcodes only. We created 6 different shortcodes here:

  • [one_fourth]Insert your content here[/one_fourth]
  • [one_third]Insert your content here[/one_third]
  • [one_second]Insert your content here[/one_second]
  • [two_third]Insert your content here[/two_third]
  • [three_fourth]Insert your content here[/three_fourth]
  • [one]Insert your content here[/one]
4.4.2.2 Content shortcodes

1) Alert - this shortcode allow you to add some nice alerts. This item got only one attribute:

  • style (choose between error, info, success, warning)

Below you can see the example of Alert shortcode:

[alert style="warning"]Insert your content here[/alert]

Example of usage you can check on Typography page.

2) Blockquote - this shortcode create blockquotes . Attributes available for this item:

  • author (author name)
  • link (link for author's page)
  • target (if you want to open link in new window, use _blank value)

Below you can see the example of Blockquote shortcode:

[blockquote author="Muffin group" link="#" target="_blank"]Insert your content here[/blockquote]

Example of usage you can check on Typography page.

3) Button - this shortcode create buttons in many different styles. Button can have link to other page/subpage or can be download button. Also can have icon on left or right hand side. Attributes available for this item:

  • title
  • icon (if you want to use button with icon, type icon name here)
  • icon_position (you can choose position for icon: left or right)
  • link (type link for button)
  • target (if you want to open link in new window, use _blank value)
  • color (use one of predefined colors or hex colors , like: #E8E8E8)
  • font_color (use hex colors , like: #E8E8E8)
  • large (choose 1 if you want large button or 0 if regular)
  • class (if you want link button to other section on the same page with nice scroll effect, you must type scroll class but if you want button to open link in iframe, then use prettyphoto class)
  • download (if you want button to be download button, you need to type name of file for download)

Below you can see the example of Button shortcode:

[button title="Download file" icon="icon-download" icon_position="left" link="#" target="_blank" color="" font_color="" large="0" class="" download=""]

Example of usage you can check on Typography page.

4) Code - this shortcode is for presenting code on website (code is not parsed in this section at all) and have no attributes available. Just content inside.

Below you can see the example of Code shortcode:

[code]Insert your content here[/code]

5) Content Link - this shortcode create nice links with content inside. There is few attributes available for this item:

  • title
  • icon (if you want to use button with icon, type icon name here)
  • link (type link for button)
  • target (if you want to open link in new window, use _blank value)
  • class (if you want link button to other section on the same page with nice scroll effect, you must type scroll class but if you want button to open link in iframe, then use prettyphoto class)
  • download (if you want button to be download button, you need to type name of file for download)

Below you can see the example of Content Link shortcode:

[content_link title="Go for it" icon="icon-lamp" link="#" target="_blank" class="" download=""]

Example of usage you can check on Content elements page.

6)  Divider - This item is creating space between elements. It is also aligning for a single line, boxes located underneath.

Divider shortcode got 4 attributes:

  • height - enter the amount of the divider height (in px)
  • style - you can choose between 3 different divider styles: default, dots and zigzag
  • line - you can choose between 4 different styles: default, narrow, wide or 0 (0 means no line)
  • themecolor (choose between 0 or 1 - means color for this line comes from theme color option)

Example of this shortcode below:

[divider height="30" style="default" line="default" themecolor="1"]

Example of usage you can check on Typography page.


7)  Dropcap - this shortcode create nice looking part of text, where one letter is featured. Attributes for this item you can see below:

  • background - background color in hex format, ex: #000000
  • color - text color in hex format, ex: #FFFFFF
  • circle - choose between 0 (default look) and 1 (circle style)

Example of this shortcode below:

[dropcap background="" color="" circle="0"]I[/dropcap]nsert your content here

Example of usage you can check on Typography page.

8)  Google font - this shortcode allow you to add text with any google font you want. Attributes for this item you can see below:

  • font - type Google font name
  • subset - subset for google font (multiple separate with comma, ex. latin,latin-ext)
  • size - font size in px

Example of this shortcode below:

[google_font font="Exo" subset="cyrillic-ext,latin" size="25"]Insert your content here[/google_font]

Example of usage you can check on Typography page.


9)  Highlight - this item create text with nice highlight effect. This item got 2 attributes:

  • background - background color for highlighted text
  • color - text color for highlighted text

Example of this shortcode below:

[highlight background="" color=""]Insert your content here[/highlight]

Example of usage you can check on Typography page.

10)  Hr - this item create nice line with few different styles. Attributes for hr are:

  • height - height for hr in px
  • style - you can choose between 3 different divider styles: default, dots and zigzag
  • line - you can choose between 4 different styles: default, narrow, wide or 0 (0 means no line)
  • themecolor (choose between 0 or 1 - means color for this line comes from theme color option)

Example of this shortcode below:

[hr height=”30” style=”default” line=”default” themecolor=”1”]

Example of usage you can check on Typography page.


11)  Icon - you can add any icon you want on page. This item got only 1 attribute:

  • type - type name of icon you want use

Example of this shortcode below:

[icon type="icon-lamp"]

Example of usage you can check on Typography page.

12)  Icon bar - this shortcode create nice icon bar. Attributes for this item:

  • icon - type name of icon you want use
  • link - link for icon bar shortcode
  • target - if you want to open link in new window, use _blank value
  • size - if you want large icon, then type large, leave field empty if you want default size
  • social - using this option makes icon colorful, available styles: facebook, google, twitter, vimeo, youtube, flickr, linkedin, pinterest i dribbble

Example of this shortcode below:

[icon_bar icon="icon-calendar" link="#" target="" size="large" social=""]

Example of usage you can check on Content elements page.


13)  Icon block - this shortcode create icon as block. Attributes for this item:

  • icon - type name of icon you want use
  • align - choose between left or top style
  • color - icon color in hex format
  • size - icon size in px

Example of this shortcode below:

[icon_block icon="icon-lamp" align="" color="" size="25"]

Example of usage you can check on Typography page.

14)  Idea - this shortcode create nice box with text inside. This looks like true idea box. Item don`t have any attributes, just text inside.

Example of this shortcode below:

[idea]Insert your content here[/idea]

Example of usage you can check on Boxes & Infographics page.


15) Image - this is a very useful shortcode for embedding images into page. This item got a long list of available atrributes:

  • src (url to image)
  • align (optional alignment for image) - available values: none (default), left, right,center
  • caption (optional) - text available under the image
  • link (optional) - link for larger image or other page
  • link_image (optional) - link to larger version of image
  • target (optional, works only with "details" link_type) - link target, available value: "_blank" (open in new window)
  • alt (optional) - alternative text for image
  • border - type 1 if you want border around image or 0 if not.

Below you can see some examples of this shortcode:

[image src="" align="" caption="" link="" link_image="" target="" alt="" border="0"]

Example of usage you can check on Typography page.

16) Table - this is is using html code to embed it on page and create table. This item needs just content inside. You can make any rows and columns you want and inside you can put anything you want. Below you got 2 examples of raw html used for tables:

<table>
	<thead>
		<tr>
			<th>Employee</th>
			<th>Salary</th>
			<th>Bonus</th>
			<th>Supervisor</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Stephen C. Cox</td>
			<td>$300</td>
			<td>$50</td>
			<td>Bob</td>
		</tr>
		<tr>
			<td>Josephin Tan</td>
			<td>$150</td>
			<td>-</td>
			<td>Annie</td>
		</tr>
		<tr>
			<td>Joyce Ming</td>
			<td>$200</td>
			<td>$35</td>
			<td>Andy</td>
		</tr>
		<tr>
			<td>James A. Pentel</td>
			<td>$175</td>
			<td>$25</td>
			<td>Annie</td>
		</tr>
	</tbody>
</table>

or also you can try below html for different table:

<table>
	<thead>
		<tr>
			<th class="clear"></th>
			<th>Salary</th>
			<th>Bonus</th>
			<th>Supervisor</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Stephen C. Cox</th>
			<td>$300</td>
			<td>$50</td>
			<td>Bob</td>
		</tr>
		<tr>
			<th>Josephin Tan</th>
			<td>$150</td>
			<td>-</td>
			<td>Annie</td>
		</tr>
		<tr>
			<th>Joyce Ming</th>
			<td>$200</td>
			<td>$35</td>
			<td>Andy</td>
		</tr>
		<tr>
			<th>James A. Pentel</th>
			<td>$175</td>
			<td>$25</td>
			<td>Annie</td>
		</tr>
	</tbody>
</table>

Example of usage you can check on Content blocks page.


17) Tooltip - great shortcode that you can use in any place you want. Under regular text shows small box where you can rollover some more informations. This item got only one attribute:

  • hint - text visible in box under main text

Example of this shortcode below:

[tooltip hint="Insert your hint here"]Insert your content here[/tooltip]

Example of usage you can check on Typography page.

18)  Video - inside this shortcode you can add vimeo or youtube videos. Attributes for shortcode:

  • video - type just video ID (not whole link!). Example of youtube ID is: TUhNdTq1jTw but for vimeo: 85002648
  • parameters - multiple parameters should be connected with &, for example: autoplay=1&loop=1
  • mp4 - instead of youtube and vimeo videos you can upload own videos in HTML5 formats
  • ogv - instead of youtube and vimeo videos you can upload own videos in HTML5 formats
  • placeholder - placeholder image for HTML5 videos (useful especially on mobile devices)
  • width - video width in px
  • height - video height in px

Example of this shortcode below:

[video_embed video="62954028" parameters="autoplay=1&loop=1" mp4="" ogv="" placeholder="" width="700" height="400"]

19) Tooltip Image - shortcode similar to tooltip but with additional image:

  • hint - text visible in box under main text
  • image - path for image

Example of this shortcode below:

[tooltip_image hint="Insert your hint here" image=""]Insert your content here[/tooltip_image]

Example of usage you can check on Typography page.

20) Fancy Link - great shortcode with different variations on hover:

  • title - link title
  • link - please remember to use links with full path, start with http:// always
  • target - if you want to open link in new window, use _blank value
  • style - styles are number, choose number from 1 to 8
  • class (if you want link button to other section on the same page with nice scroll effect, you must type scroll class but if you want button to open link in iframe, then use prettyphoto class)
  • download (if you want button to be download button, you need to type name of file for download)

Example of this shortcode below:

[fancy_link title="Test title" link="_blank" target="" style="2" class="" download=""]

Example of usage you can check on Typography page.


4.4.2.3 Builder shortcodes

1) Article Box - this shortcode create nice box with image and some text. Box can be link or not. This item got below attributes:

  • image (put path to image for article box shortcode)
  • slogan (slogan available next to image)
  • title (title for article box shortcode)
  • link (link to any page)
  • target (optional target for link, ex. "_blank")

Below you can see the example of Article Box shortcode:

[article_box image="#" slogan="Article slogan" title="Article title" link="#" target="_blank"]

Example of usage you can check on Boxes & Infographics page.

2) Blog - this item gives you many possibilities. You can put blog on any page you like and you can use it with other shortcodes as well.

This item got few attributes:

  • count (type number of posts that you want to show with blog shortcode)
  • category (type name of category for blog shortcode, ex: "applications")
  • style (we got 3 predefined styles for blog items - choose your own from the following one: classic, masonry or timeline)
  • pagination (choose 1 if you want to get pagination or 0 if you don`t want)

Below you can see the example of Blog shortcode:

[blog count="2" category="all" style="modern" pagination="0"]

3) Call to action - this item gives you possibility to create nice section with icon, some texts and link.

This item got few attributes:

  • title - text visible on the left side
  • icon - icon is visible in the middle, between title on the left and content on the right
  • link (you can link to any stuff you want, like videos, images, pages, etc.)
  • class (type any class you want if you need something special. We especially use prettyphoto to open images/videos in popup window or scroll if you want to link to other section on the same page and you get nice smooth scroll effect)
  • target (optional target for link, ex. "_blank")

Below you can see the example of Call to action shortcode:

[call_to_action title="title text" icon="icon-lamp" link="#" class="" target="_blank"]Insert your content here[/call_to_action]

Example of usage you can check on Content elements page.

4) Chart - use this item if you want to put some charts on your page.

This item got 4 attributes:

  • percent (type number of percents for chart shortcode)
  • label (text in chart icon)
  • icon (put icon name instead of percent label)
  • image (you can also put image instead inside this item)
  • title (type title for this item)

Below you can see the example of Chart shortcode:

[chart percent="50" label="50" position="left" title=""] Insert your content here [/chart]

Example of usage you can check on Boxes & Infographics page.


5) Clients - with this shortcode you can put clients on page.

This item got just one attribute "in_row" and you must type the number of client items that you want to display.

Below you can see the example of Clients shortcode:

[clients in_row="6"]

Example of usage you can check on Loops page.

6) Contact box - this shortcode create great looking contact box item.

This item got 6 attributes:

  • title (type title for contact box shortcode)
  • address (type address)
  • telephone (type phone number)
  • email (type email)
  • www (type url - start with http://)
  • image (image will be applied for background)

Below you can see the example of Contact Box shortcode:

[contact_box title="Ask question" address="14th Avenue Street" telephone="+40 4290-09-21" email="noreply@envato.com" www="http://muffingroup.com" image=""]

Example of usage you can check on Content elements page.


7) Counter - this shortcode allow you to create counter items with icons or images. Also you can choose different styles.

This item got 6 attributes available:

  • icon (type any icon you want from list of available icons)
  • color (type color in hex format, ex. #000000)
  • image (instead of icon you can give path to image)
  • number (type number value)
  • title (type title)
  • type (choose between vertical and horizontal)

Below you can see the example of Counter shortcode:

[counter icon="icon-heart-line" color="#222222" image="" number="44" title="" type="vertical"]

Example of usage you can check on Boxes & Infographics page.

8) Fancy heading - use this shortcode if you want to get not just typical heading. You can create different styles with icons and other stuff.

This item got 4 attributes:

  • title (type title)
  • icon (type any icon you want from list of available icons)
  • slogan (small text visible under main text)
  • style (you can choose one of the following value for this attribute: icon, line and arrows)

Below you can see the example of Fancy heading shortcode:

[fancy_heading title="" icon="icon-heart-line" slogan="Slogan text" style="icon"] Insert your content here [/fancy_heading]

Example of usage you can check on Content elements page.


9) Feature list - using this shortcode you can create list of nice feature elements with icons and text.

This item got 3 attributes:

  • title (type title)
  • link (url address)
  • icon (type any icon you want from list of available icons)
  • target (optional target for link, ex. "_blank")
  • animate (entrance animation on scroll)

Below you can see the example of Feature list shortcode:

[feature_list][item title="" link="" icon="icon-lamp"][item title="" link="" icon="icon-lamp"] [item title="" link="" icon="icon-lamp"] [/feature_list]

Example of usage you can check on Content block page.

10) How it works - this shortcode create nice section with image, number and text.

This item got 4 attributes:

  • image (type path for the image)
  • number (number visible next to image)
  • title (large text visible under image)
  • border (choose 1 if you like border or 0 if not)

Below you can see the example of How it works shortcode:

[how_it_works image="" number="" title="" border="1"]Insert your content here[/how_it_works]

Example of usage you can check on Content elements page.


11) Icon box - nice box with lot`s of possibilities and layouts.

This item got 7 attributes:

  • title (type title)
  • icon (type any icon you want from list of available icons)
  • image (instead of icon above, you can use own image)
  • icon position (type left or top position for icon inside this item)
  • border (choose 1 if you like border or 0 if not)
  • link (link to any page you like - start with http://)
  • target (optional target for link, ex. "_blank")

Below you can see the example of Icon box shortcode:

[icon_box title="" icon="icon-lamp" image="" icon_position="" border="0" link="" target="_blank"]Insert your content here[/icon_box]

Example of usage you can check on Boxes & Infographics page.

12) Info box - nice box with some informations and lists inside.

This item got 7 attributes:

  • title (type title)
  • image (image will be used for background)

Below you can see the example of Info box shortcode:

[info_box title="" image=""]Insert your content here[/icon_box]

Example of usage you can check on Content elements page.


13) List - shortcode with icon or image on the left side and title/text on the right

This item got 6 attributes:

  • icon (type icon name that you want use for item)
  • image (instead of icon above, you can use image)
  • title (large text visible on the right side)
  • link (url for item)
  • target (optional target for link, ex. "_blank")
  • style (choose between 1, 2, 3 or 4 to select right style)

Below you can see the example of List shortcode:

[list icon="icon-lamp" image="" title="title text" link="#" target="_blank" style="1"]Insert your content here[/list]

Example of usage you can check on Content blocks page.

14) Lists - great tool when you want to present something within the list. We prepared some types of lists. Below you can check all of them:

List check

<ul class="list_check">
<li>List item 1</li>
<li>List item 2</li>
</ul>

List star

<ul class="list_star">
<li>List item 1</li>
<li>List item 2</li>
</ul>

List idea

<ul class="list_idea">
<li>List item 1</li>
<li>List item 2</li>
</ul>

List mixed

<ul class="list_mixed">
<li class="list_check">List item 1</li>
<li class="list_star">List item 2</li>
<li class="list_idea">List item 3</li>
</ul>

As you can see, all of these lists have only a different kind of class. So if you want to change type of the list, you can easily do so by just changing the name of class..


15)  Map - this shortcode allow you to add map with any size you want in any place.

This item got 4 attributes:

  • lat - right Latitude value for map
  • lng - right Longitude value for map
  • height - type height in px for your map
  • zoom - type number for google map zoom, ex: 13

Example of this shortcode below:

[map lat="" lng="" height="200" zoom="13"]

Example of usage you can check on Content elements page.

To get right lat & lng value we recommend to use http://itouchmap.com/latlong.html tool.

16)  Opening hours - this shortcode create great box with info about opening hours and image in the background.

This item got 2 attributes:

  • title - large text visible under box
  • image - this is background image

Example of this shortcode below:

[opening_hours title="Opening hours" image=""]
<p>Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.</p>
<ul>
<li><label>Monday - Friday</label><span>8<sup>00</sup> - 16<sup>00</sup></span></li>
<li><label>Saturday</label><span>8<sup>00</sup> - 15<sup>00</sup></span></li>
</ul>
[/opening_hours]

Example of usage you can check on Content elements page.


17) Our team - present your staff using this shortcode.

This item got 9 attributes:

  • image - type path for image
  • title
  • subtitle
  • email - type email for our team item
  • phone - type phone number for our team item
  • facebook - type link for facebook profile - always start with http://
  • twitter - type link for twitter profile - always start with http://
  • linkedin - type link for linkedin profile - always start with http://
  • style - choose between vertical and horizontal styles.

Example of this shortcode below:

[our_team image="http://path-to-image" title="" subtitle="" email="" phone="" facebook="" twitter="" linkedin="" style="vertical"]

Example of usage you can check on Content elements page.

18) Our team list - present your staff using this shortcode.

This item got 9 attributes:

  • image - type path for image
  • title
  • subtitle
  • blockquote
  • email - type email for our team item
  • phone - type phone number for our team item
  • facebook - type link for facebook profile - always start with http://
  • twitter - type link for twitter profile - always start with http://
  • linkedin - type link for linkedin profile - always start with http://

Example of this shortcode below:

[our_team_list image="" title="" subtitle="" blockquote="" email="" phone="" facebook="" twitter="" linkedin=""]Insert your content here[/our_team_list]

Example of usage you can check on Content elements page.


19) Photo box - good looking box with title, text and image with nice hover effect.

This item got 4 attributes:

  • image - type path for image
  • title - large text visible under image
  • link - url to any page
  • target - optional target for link, ex. "_blank"

Example of this shortcode below:

[photo_box image="http://#" title="Title" link="#" target="_blank"]Insert your content here[/photo_box]

Example of usage you can check on Boxes & Infographics page.

20) Portfolio - this shortcode add portfolio items in any place on page you want.

This item got 6 attributes:

  • count - type the number of items you want to show
  • category - type name of category from which you want to show portfolio items, ex: applications
  • orderby - you can order items by: date, menu_order or title
  • order - you can order items by ASC or DESC
  • style - you can choose one of the following styles: list, flat, masonry and grid
  • pagination - type 1 if you want to show pagination or 0 if you don`t want

Example of this shortcode below:

[portfolio count="2" category="" orderby="date" order="DESC" style="grid" pagination="0"]

21) Pricing Item - the same item as Pricing table from Muffin Builder.

This item got 10 attributes:

  • image- additional field for image at the top of pricing item
  • title - main text visible under box
  • currency - type currency that is the best for you, ex: $
  • price - type price for pricing item
  • period - type period for pricing item
  • subtitle - small text visible inside box
  • link_title - type title for button
  • link - type url for pricing item button
  • featured - if you want featured item, type 1 or if not, then type 0
  • style - choose between box, table and label styles

Example of this shortcode below:

[pricing_item image="" title="Standard" currency="$" price="39" period="monthly" subtitle="" link_title="" link="#" featured="1" style="box"]
<ul>
        <li><strong>List</strong> item</li>
</ul>
[/pricing_item]

Example of usage you can check on Content blocks page.

22) Progress bars - present your skills using this shortcode.

This item got 3 attributes and is splitted on 2 blocks:

  • title - type title for general progress bars item
  • title - type title for bar inside progress bar section
  • value - type value for bar

Example of this shortcode below:

[progress_bars title=""][bar title="Bar1" value="50"][/progress_bars]

Example of usage you can check on Boxes & Infographics page.


23) Promo box - nice box with image, title, text and button. 2 different styles available for this item.

This item got 7 attributes:

  • image - type path for image
  • title - large text visible next to image
  • btn_text - type text for button
  • btn_link - type url for button
  • position - choose between left or right position
  • border - type 1 if you want border or 0 if not
  • target - optional target for link, ex. "_blank"

Example of this shortcode below:

[promo_box image="" title="Title text" btn_text="Read more" btn_link="#" position="left" border="0" target="_blank"]Insert your content here[/promo_box]

Example of usage you can check on Boxes & Infographics page.

24) Table - this shortcode allow you to create table on page. This item doesn`t have any special fields. We used standard HTML code for that.

Example of this shortcode below:

<table>
<thead>
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 col 1 content</td>
<td>Row 1 col 2 content</td>
<td>Row 1 col 3 content</td>
</tr>
<tr>
<td>Row 2 col 1 content</td>
<td>Row 2 col 2 content</td>
<td>Row 2 col 3 content</td>
</tr>
</tbody>
</table>

Example of usage you can check on Content blocks page.


25) Quick fact - box with number and text.

This item got 4 attributes:

  • heading - you can put some text above counter icon
  • number - type any number you want
  • title - large text visible under number
  • animate - entrance animation on scroll or leave without animation

Example of this shortcode below:

[quick_fact heading="" number="" title="" animate=""]Insert your content here[/quick_fact]

Example of usage you can check on Boxes & Infographics page.

26) Slider - present images in slider mode

This item got 3 attributes:

  • category - type name of category or type all if you want to show all slides
  • orderby - you can order items by: date, menu_order or title
  • order - you can order items by ASC or DESC

Example of this shortcode below:

[slider category="" orderby="date" order="DESC"]

27) Sliding box - great looking box with image and nice hover effect

This item got 4 attributes:

  • image - put path for the image
  • title - text visible in the bottom of image
  • link - type url for image
  • target - optional target for link, ex. "_blank"

Example of this shortcode below:

[sliding_box image="" title="" link="" target="_blank"]

Example of usage you can check on Boxes & Infographics page.

28) Testimonials - present testimonials as slider.

This item got 4 attributes:

  • category - type name of category from which you want to show portfolio items, ex: applications
  • orderby - you can order items by: date, menu_order or title
  • order - you can order items by ASC or DESC
  • border - type 1 if you like border or 0 if don`t

Example of this shortcode below:

[testimonials category="" orderby="menu_order" order="ASC" border="1" hide_photos="1"]

Example of usage you can check on Loops page.


29) Trailer box - this shortcode is great to present images. Good looking hover effect will be interesing for your users.

This item got 5 attributes:

  • image - path for the image
  • slogan - small text inside shortcode
  • title - large text inside shortcode
  • link - type url
  • target- optional target for link, ex. "_blank"

Example of this shortcode below:

[trailer_box image="" slogan="" title="" link="" target="_blank"]

Example of usage you can check on Boxes & Infographics page.

30) Countdown - this shortcode is great to put time countdown in any place you want.

This item got 2 attributes:

  • date- type launch date in the following format: 12/30/2014 12:00:00 | month/day/year hour:minute:second
  • timezone - choose your timezone

Example of this shortcode below:

[countdown date="12/30/2014 12:00:00" timezone="0"]

Example of usage you can check on Under construction page.


31) Flat box - item with icon, image and nice hover effect.

This item got 7 attributes:

  • icon- type any icon you want from list of available icons
  • background - type color in hex format, ex: #FFFFFF
  • image - upload image
  • title - text visible under the image
  • link - type link for item
  • target - choose if you want to open link in the new window or not
  • animate - choose entrance animation on scroll or leave without animation

Example of this shortcode below:

[flat_box icon="icon-lamp" background="#FFF" image="#" title="" link="#" target="_blank" animate=""]Insert your content here[/flat_box]

Example of usage you can check on Boxes & Infographics page.

32) Accordion

This item got 3 attributes:

  • title- accordion title
  • open1st - choose 0 if all accordions should be closed or 1 if 1st should be opened
  • style - choose between accordion and toggle styles

Example of this shortcode below:

[accordion title="" open1st="0" style="accordion"][accordion_item title="Title"]Content[/accordion_item][/accordion]

Example of usage you can check on Content blocks page.


33) FAQ

This item got 2 attributes:

  • title- faq title
  • number - type FAQ number

Example of this shortcode below:

[faq title=""][faq_item title="Title" number="1"]Content[/faq_item][/faq]

Example of usage you can check on Content blocks page.

34) Tabs

This item got 2 attributes:

  • title- tab title
  • type - choose between horizontal and vertical styles

Example of this shortcode below:

[tabs title="" type=""][tab title="Title"]Content[/tab][/tabs]

Example of usage you can check on Content blocks page.


35) Shop slider

This item got 5 attributes:

  • title- tab title
  • count - type how many products items you would like to show
  • category - choose from which category you want to show Shop Slider
  • orderby - you can order slides by date, menu and title
  • order - above options can be ordered ASC or DESC

Example of this shortcode below:

[shop_slider title="" count="5" category="" orderby="date" order="DESC"]

Example of usage you can check on Loops page.

36) Portfolio slider

This item got 5 attributes:

  • title- tab title
  • count - type how many portfolio items you would like to show
  • category - choose from which category you want to show portfolio items
  • category_multi - type ID of various categories if you want to show items from different categories (separate with comma)
  • orderby - you can order slides by date, menu and title
  • order - above options can be ordered ASC or DESC

Example of this shortcode below:

[portfolio_slider count="5" category="" category_multi="" orderby="date" order="DESC"]

Example of usage you can check on Loops page.


37) Blog slider

This item got 5 attributes:

  • title- tab title
  • count - type how many portfolio items you would like to show
  • category - choose from which category you want to show blog items
  • category_multi - type ID of various categories if you want to show items from different categories (separate with comma)
  • orderby - you can order slides by date, menu and title
  • order - above options can be ordered ASC or DESC

Example of this shortcode below:

[blog_slider title="" count="5" category="" category_multi="" more="0"]

Example of usage you can check on Loops page.


5. Slider

5.1 Revolution Slider

5.1.1 Getting demo slider

In package downloaded from Themeforest you can find revolution-slider-demo folder where you got many .zip files with different sliders for different homepages.

On the list of available sliders, in the right bottom section you will see "Import Slider" button. All you need to upload slider is choose right .zip file with slider from revolution-slider-demo folder and then you must click "Import Slider" button.


5.1.2 Slider management

After pressing the "Create New Slider" button you will reach a form where you are asked to enter a Slider Title (used for the Slider overview in this backend) and a Slider Alias (a slug that is used to implement the Slider in your WP later, so keep it simple with no spaces and special chars).

You are also prompted to enter the Sliders Basic Settings, a Slider Title (for you to remember the Slider by) and a Slider Alias (please do not use special characters or spaces here, this defines the shortcode for you to use in your content).

The options in the boxes on the right side (General Settings, Position, Appearance, Navigation, Thumbnails) have helping Tooltips on mouseover so they are not explained here.

The Slider Type can be fixed (not responsive, fix dimensions), responsive (changes depending on the size of its max. sizes given later in relation to the screen size) or fullwidth (always 100% in width of the screen size, but height keeping the aspect ratio).

The Sizes section is needed to fit the slider in all screen sizes needed. The height of the slider will always be calculated to keep the aspect ratio from the max width and height given in the Slider Size line.

The next step is creating/editing slides. You get there by just clicking on "Edit Slides" in the Slider Form window.

Just press "New Slide" and the native WP Media Upload dialog window will appear. Choose or Upload the slide's background image, choose "Full Size" and then "Insert Into Post" (all like you are used to it in your WP editor). You can always click on the pic to change it.

Use the arrow handles on the right side to change the slides position in the slider (top to bottom = first to last slide to be shown) or delete it with the "Delete" button.

The "Edit Slide" leads you to the next chapter "Slide".

In the "Edit Slide" view you see the heart of our plugin. The drag&drop Caption editor.

But first please note that you have another chance here to change the background image with the "Change Image" button.

To create a Layer (Caption, Image or Video) press the button "Add Layer" or "Add Layer: Image". In case of a text layer a basic layer will be created you can use the "Text" field in the Layer Params to change the caption on it. The "Style" selectbox shows some basic styles (CSS classes) you can use to style the caption (you can always add own CSS classes to this field or edit the existing ones via the "Edit CSS File").

In case of an Image Layer you will see the native WP Media Uploader again. In case of a Video Layer you will prompted to a custom Video selection wizard.

You now can move the Layers around via drag&drop or type in the x and y coordinate in the corresponding fields.

The "Layers Sorting" drag&drop list determines the Layers' z-index. This list specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Please also note that slider is a plugin and whole documentation for this item you can find in documentation/revolution-slider-documentation folder in package downloaded from themeforest.

Remember: please set up chmod on 777 on below folders to show slider thumbnails and for possibility to edit CSS styles for slider in admin panel.

wp-content/plugins/revslider/cache

wp-content/plugins/revslider/rs-plugin/css

NOTE! In default Revolution Slider version included into theme you will get all our styles for plugin. After update plugin to newer version, please do not forget to copy slider styles from /revolution-slider-demo/captions.css (this folder is included into TF package) to /wp-content/plugins/revslider/rs-plugin/css/captions.css

5.1.3 How to update Revolution Slider itself?

If you want to update current Revolution Slider version you have 2 ways to do it:

  1. Go to Revolution Slider section which is in main wp dashboard section on the left side. Then click on "Update Plugin" button in the right bottom corner, go to theme-name\functions\plugins folder and select revslider.zip file and just upload it. That`s it.
  2. You can do it via FTP. Just log in into your FTP server and go to wp-content/plugins/revslider/ folder. Unpack files from revslider.zip file which has been described in point 1 and replace files from unpacked folder into your FTP to wp-content/plugins/revslider/ folder.

5.1.4 Revolution Slider Purchase Code

Revolution Slider is external plugin which is included into theme because for each product we purchase "Extended license" and that`s why we are able to include it into them. This plugin works fine of course and you can always get current slider version if you want directly from us. What you need to do, to get this slider is send us request about it via contact form on our profile's page http://themeforest.net/user/muffingroup (it is in the right bottom corner) and we`ll send you current version.

Remember, that we update revolution slider plugin with theme updates time to time so with each next theme update, slider will be also updated.

The option with registering Revolution Slider has been already added to plugin and this only allow you to get automatic updates and support for this plugin directly from author if you need. You don`t need to register this product because it is not required but if you want to get those features, then you need to purchase this plugin directly from author. This is how it works for all themes on Themeforest and not only in our case.

6. Muffin Options Panel

Theme options panel has been especially created to make your work faster and easier. Using it is very easy and in just a few minutes you can change a lot of things on your page.

6.1 Getting started

6.1.1 General

In this section you can set up some general options for your site. You can find here things like Google Analytics, Responsive version, etc. Please check below options available in this section:

  • Responsive - choose if you want to use responsive version or not.
  • Nice Scroll - choose if you want to use scrollbar with a very similar ios/mobile style.
  • Navigation Arrows - choose if you want Hide, Show for all or Show for the same category (excluding shop), navigation arrows for Blog, Portfolio and Shop pages.
  • Share Box - this box is available on blog, portfolio and shop pages.
  • All pages in pagination - ON/OFF the pages instead of a short list of the pages near the current page.
  • Page comments - ON/OFF comments for single page.

6.1.2 Advanced

In this section you can set up some advanced options for your site. Please check below options available in this section:

  • Static CSS - for more info please visit Static CSS section.
  • Responsive | Hover effects - choose if you want to show hover effects in responsive mode or not.
  • Responsive | Section Background Image - choose if you want to show section's background images on all devices or desktop only .
  • Nice Scroll | Speed - choose scroll speed in px.
  • prettyPhoto | Disable - ON/OFF prettyPhoto feature.
  • prettyPhoto | Width - type default width for prettyPhoto feature.
  • prettyPhoto | Height - type default height for prettyPhoto feature.
  • Use built-in SEO fields - if you are using external SEO plugin you can easily turn off built-in SEO option.
  • Meta Description - this is meta description for homepage but it`s also default description for each page added in Pages section.
  • Meta Keywords - this is meta keywords for homepage but it`s also default keywords for each page added in Pages section.
  • Google Analytics - paste your Google Analytics code to track your site.
  • Google Remarketing - paste your Google Remarketing code to add potential customers to Google list.
  • Content Display Order - choose the way of how content should be displayed (1st muffin builder or wordpress editor)
  • Builder Visibility - choose who can see Muffin Builder (Author, Editor, Administrator or everyone).
  • Error 404 Icon - you can change icon layout for 404 page. List of all available icons you can check on http://themes.muffingroup.com/betheme/shortcodes/typography#icons
  • Error 404 | Custom Page - you can select custom page for Error 404 instead of default.

6.1.3 Sidebars

This is default option for pages and posts. Here you can set whether your post or page should have full width or maybe include a sidebar (left or right). For example when you choose Left sidebar each of your pages or post that you will create will have left sidebar. Of course, this is only default option and while creating page or post you can set up your own layout.

You can also manage your Sidebars here. You can add new and delete existing one.

URGENT! Please do not use any special characters for Sidebars titles because wordpress do not accept them.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.1.4 Blog

Here you can find some options for blog page. This is of course a default option for new pages. You have got the following options for blog:

  • Posts per page - you can select how many posts should be on page
  • Layout - choose layout for blog thatyoulike the most (Classic, Masonry or Timeline)
  • Excerpt Length - number of words visible in excerpt on Blog page
  • Post Title - turn ON/OFF post title for single post
  • Post Meta - show all post meta for blog posts
  • Author Box - this option will show autor box under single post page
  • Related Posts - this option will show related posts under single post page
  • Comments - turn ON/OFF comments for single posts
  • Load More button- turn ON/OFF load more button for blog page
  • Blog Page - this option allow you to assing right page for blog
  • Random Love - if you want to show random number of loves for posts on start, click "Randomize" button

All of this options except Posts per page can be changed for each post.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.1.5 Portfolio

This option will certainly be very helpful in creating your portfolio page. Here you can set the following options:

  • Posts per page - this is the number of portfolio posts per page.
  • Layout - you can choose what layout will be the best for your portfolio (list, flat, grid, masonry or masonry flat)
  • Full width style - ON/OFF full width for portfolio
  • Order by - you can select what should be used to sort your portfolio.
  • Order - you can choose how your portfolio should be ordered (ascending or descending).
  • Hover Title - ON/OFF titles for portfolio items.
  • Portfolio Link - choose the way to open portfolio link.
  • jQuery filtering - you can choose if you want to filter portfolio items using jquery plugin to make your portfolio look much better.
  • Load More button - ON/OFF button for ajax load more feature.
  • Portfolio page - here you can select the right page for portfolio from list of all created pages. You need to choose a page for that because the theme applies info such a layout, sidebar and link to page in breadcrumbs.
  • Single Project | Slug - this is a link to single item. After changing that option please go to "Settings > Permalinks" and click "Save changes" button.
  • Single Project | Related projects - turn on/off related projects on project's page.
  • Single Project | Comments - ON/OFF comments on single project's page.
  • Random Love - if you want to show random number of loves for posts on start, click "Randomize" button

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.1.6 Shop

This section have some options for woocommerce plugin:

  • Products per page - type the number of products you would like to see per page.
  • Layout - choose between Grid (3 or 4 columns), Masonry or List layouts for shop page.
  • Catalogue Mode - ON/OFF catalogue mode for shop page (catalogue is without "Add to cart" buttons)
  • Shop slider - choose slider for shop pages if you like
  • Related products - turn on/off related products on single product`s page.
  • Product Page Style - choose style for single product page.
  • Cart Icon - choose own icon in header instead of default cart icon.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.1.7 Sliders

In this section you can setup timeouts for different sliders on page:

  • Blog | Timeout - type in miliseconds time between transitions.
  • Clients | Timeout - type in miliseconds time between transitions.
  • Offer | Timeout - type in miliseconds time between transitions.
  • Portfolio | Timeout - type in miliseconds time between transitions.
  • Shop | Timeout - type in miliseconds time between transitions.
  • Slider | Timeout - type in miliseconds time between transitions.
  • Testimonials | Timeout - type in miliseconds time between transitions.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.1.8 Hooks

This is section where you can put some code (especially html) that allow you to show different things and elements in places that are not available from Muffin Builder or Visual Composer tools. For example if you want to put some code above header (banner or information about cookies), then put code in Top field.


6.1.9 Under construction / Maintenance mode

This option is for all those who work on website and does not want to show how page looks like while building. For this section you have below details available:

  • Under Construction if you will turn this button ON, then under construction page will be visible for all NOT logged in users. Click here to view this page.
  • Title - title text is visible under clock icon on page.
  • Text - text is visible under under title.
  • Launch date - type estimated time when you are planning to finish website and show it to users.
  • UTC Timezone- choose right timezone from list.
  • Contact Form Shortcode - type shortcode for contact form which you have created in Contact Form 7 plugin. You can create any form you want and give it for users.
  • Custom Page - instead of default under construction page, you can select your own.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.2 Layout

In this section you can set up some layout options such as social icons or logo.

6.2.1 General

This section is created for header. Here you can set up some options like:

  • Custom Logo - upload logo that fit the best for your homepage layout
  • Retina Logo - upload logo that fit the best for your homepage layout (retina logo must be 2x larger than regular homepage logo)
  • Text Logo - type text if you prefer text logo than image
  • Custom Favicon - upload your custom favicon image in .ico format
  • Use 960px grid - turn this option on if you want to use 960px grid for whole website (you can setup this option for inner pages separately also)
  • Layout choose between Boxed and Full width layouts
  • Background Image you can upload background image if use Boxed layout
  • Background Image position choose right position for background image
  • Sidebar | Lines choose lines style for sidebar
  • Footer | Style choose footer style
  • Footer | Background Image upload background image if you like
  • Footer | Call To Action - call to action text under the footer widgets
  • Footer | Copyright - type your own text for copyright section if you don`t like default one
  • Footer | Hide Copyright & Social Bar - you can hide footer section where copyrights and social icons are
  • Popup Contact Form Shortcode - type Contact Form 7 shortcode if you like to get popup email icon on the right side

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.2.2 Header

Here you can set up some options for logos, header and much more. Below we will describe all of them.

  • Style - choose own header style (Modern, Classic, Stack: left, Stack: center, Stack: right, Simple, Empty, Fixed, Below slider, Transparent, Creative, Creative: Always Open or Magazine)
  • Header | Image - upload own header background image if you don`t want default one (image will be applied for all pages instead of default). You can also upload different header images for different pages but this can be done while you edit/create page on right side where is Set featured image option.
  • Header | Image Attachment - choose between fixed or parallax header background position.
  • Header | Sticky - turn on/off sticky header
  • Header | Sticky Style - choose between white and dark sticky styles.
  • Header | Minimalist - turn it on if you want to use header without background image & padding
  • Sliding Top turn it on if you want to show widgitized area sliding from top (widgets for this section can be setup in Appearance > Widgets section)
  • Search Icon - turn ON/OFF search icon in header.
  • WPML Languages Flags - choose between Dropdown and Horizontal style or hide them completely.
  • Action Button | Title - title for action button in header top bar
  • Action Button | Link - link for action button in header top bar
  • Banner - type header magazine banner code
  • Subheader | Visiblity - you can choose if you want to hide just breadcrumbs, whole subheader or none of them.
  • Subheader | Style - choose between 5 different subheader styles.
  • Subheader | Image - upload subheader image (section where title are breadcrumbs are)
  • Subheader | Transparent - turn on/off transparency for subheader where title and breadcrumbs are. After that header image will be visible through the Subheader.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.2.3 Menu & Action Bar

In this section you can setup some things for menu and action bar:

  • Menu | Style - choose between default and highlight menu styles.
  • Menu | Align Right - on/off right align menu
  • Menu | Responsive Button | Text - if you don`t like responsive menu icon, you can type text instead
  • Menu | Responsive Button | Sticky - ON/OFF sticky menu in responsive mode (especially useful for mobiles)
  • Action Bar you can turn ON/OFF section under header where is slogan, phone, email address and social icons.
  • Action Bar | Slogan - slogan text visible under the menu
  • Action Bar | Phone - phone is visible next to slogan text
  • Action Bar | 2nd Phone - phone is visible next to slogan text
  • Action Bar | Email - email is visible next to phone number

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.2.4 Social Icons

Here you can set up some options for social icons. Below we will describe all of them.

  • Open links in new window - turn ON, if you want to open social profiles in new window
  • Skype - link to your skype profile
  • Facebook - link to your facebook profile
  • Google + - link to your Google + profile
  • Twitter - link to your twitter profile
  • Vimeo - link to your vimeo profile
  • YouTube - link to your youtube profile
  • Flickr - link to your flickr profile
  • LinkedIn - link to your LinkedIn profile
  • Pinterest - link to your Pinterest profile
  • Dribbble - link to your Dribbble profile
  • Instagram - link to your Instagram profile
  • Behance - link to your Behance profile
  • VKontakte - link to your VKontakte profile
  • RSS Icon - ON/OFF RSS icon next to social icons

If you leave empty field for social icons like facebook, twitter etc. the icons will be not shown on the page.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.2.5 Custom CSS & JS

Here you can find two fields" "Custom CSS" and "Custom JS". You can paste here your own css or js code for your page. Of a this field you don`t need to make any changes in css or js files.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3 Colors

This is probably the most powerful options section in theme options panel. Here you can set up any color for each part of your page. Just check how many options you can set up in our color section.

6.3.1 General

Only two options are available in this section:

  • Theme skin - here you can choose one of the predefined styles or you can set your own colors. Please remeber that custom color can be used only with the Custom Skin.
  • Body background - choose color for your background
  • One Color - you can choose one color for all elements around page and within this option you can create own skin color

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.2 Header

  • Action Bar background - background color for action bar in the top
  • Header background - background color for header section
  • Top Bar Left background - background color for left top bar section
  • Top Bar Middle background - background color for middle top bar section
  • Top Bar Right background - background color for right top bar section
  • Menu Link color - link color for menu item
  • Menu Active Link color - link color for active menu item
  • Submenu background - background color for submenu section
  • Submenu Link color - link color for submenu section
  • Submenu Hover Link color - link for submenu section on hover
  • Search Bar background - background color for search bar section
  • Subpage Title color - title text color for subpage

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.3 Content

  • Theme color - you can choose one color for many elements on page like icons, buttons and other stuff.
  • Text color - text color for content
  • Link color - text color for links
  • Link Hover color - hover color for links
  • Note color - color for note
  • List color - color for list's icons
  • Dropcap & Highlight background - background color for highlight and dropcap shortcodes
  • Highlight Section background - font color for highlight section
  • Hr color - color for line shortcode
  • Button background - background color for button shortcode
  • Button color - text color for button shortcode

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.4 Footer

  • Footer Theme color - color for icons and other small elements
  • Footer background - background color for footer section
  • Footer Text color - text color for footer section
  • Footer Link color - link color for footer section
  • Footer Hover Link color - link color for footer section on hover
  • Footer Heading color - heading text color for footer section
  • Footer Note color - note color for footer section

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.5 Sliding Top / Widgetized area

  • Sliding Top Theme color - color for icons and other small elements
  • Sliding Top background - background color for Sliding Top section
  • Sliding Top Text color - text color for Sliding Top section
  • Sliding Top Link color - link color for Sliding Top section
  • Sliding Top Hover Link color - link color for Sliding Top section on hover
  • Sliding Top Heading color - heading text color for Sliding Top section
  • Sliding Top Note color - note color for Sliding Top section

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.6 Headings

  • Heading H1 color - text color for h1 (Subpages header title font color)
  • Heading H2 color - text color for h2
  • Heading H3 color - text color for h3
  • Heading H4 color - text color for h4
  • Heading H5 color - text color for h5
  • Heading H6 color - text color for h6

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.3.7 Shortcodes

  • Accordion & Tabs Active Title color - title color for active Accordion & Tabs shortcodes
  • Blockquote color - text color for Blockquote shortcode
  • Content Link Icon color - icon color for Content Link shortcode
  • Counter Icon color - icon color for Counter shortcode
  • Get in Touch background - background color for Get in Touch shortcode
  • Icon Bar Hover Icon color - icon color for Icon Bar shortcode while hover
  • Icon Box Icon color - icon color for Icon Box shortcode
  • Image Frame Link background - link background color for Image Frame shortcode
  • Image Frame Link color - link text color for Image Frame shortcode
  • List & Feature List Icon color - icon color for List and Feature List shortcodes
  • Pricing Box Price color - price color for Pricing Box shortcode
  • Pricing Box Featured background - featured item background color for Pricing Box shortcode
  • Progress Bar background - background color for Progress Bar shortcode
  • Quick Fact Number color - number color for Quick Fact shortcode
  • Sliding Box Title background - title background color for Sliding Box shortcode
  • Trailer Box Subtitle background - subtitle background color for Trailer Box item

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.4 Fonts

In this section you can set up fonts for your website. We divided this section on four blocks what you can see below.

6.4.1 Font Family / Custom font uploader

  • Content Font - this font will be used for all theme texts except headings and menu
  • Main Menu Font - this font will be used for header menu
  • Page Title Font - this font will be used for subheader title
  • Big Headings Font - this font will be used for all big headings, like: H1, H2, H3 and H4
  • Small Headings Font - this font will be used for all small headings, like: H5 and H6
  • Blockquote font - this font will be used for blockquote item
  • Google Font Style & Weight - you can upload only those font styles which you want to use. This option impact on page load time. Before you check option, make sure that font you selected works with specific font. Style and weight for fonts you can check at https://www.google.com/fonts
  • Google Font Subset - you can specify which subsets should be downloaded. Multiple subsets should be separated with coma (,)
  • Custom Font | Name – type custom font name that will be uploaded in 4 below fields
  • Custom Font | .woff - .woff file for custom font
  • Custom Font | .ttf - .ttf file for custom font
  • Custom Font | .svg - .svg file for custom font
  • Custom Font | .eot - .eot file for custom font
  • Custom Font 2 | Name – type 2nd custom font name that will be uploaded in 4 below fields
  • Custom Font 2 | .woff - .woff file for 2nd custom font
  • Custom Font 2 | .ttf - .ttf file for 2nd custom font
  • Custom Font 2 | .svg - .svg file for 2nd custom font
  • Custom Font 2 | .eot - .eot file for 2nd custom font

You can choose your own font from a palette of over 600 fonts.

IMPORTANT!!! We added fields for custom fonts. If you have own font and don`t want to use any of Google Fonts, you can upload own files for this font and use it inside theme. Each font consists from 4 files: .woff, .ttf, .svg and .eot and all those files must be uploaded in right fields. Only then your font will work properly. After upload you can select custom font for right sections.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.4.2 Font Size

  • Content - this font size will be used for all theme texts
  • Main menu - this font will be used for top menu only
  • Heading H1 - this font will be used for h1 headings
  • Heading H2 - this font will be used for h2 headings
  • Heading H3 - this font will be used for h3 headings
  • Heading H4 - this font will be used for h4 headings
  • Heading H5 - this font will be used for h5 headings
  • Heading H6 - this font will be used for h6 headings

You can select the font size of the range 1-70.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.5 Translate / Built-in Translator

Translating the most important sections on the page has never been so easy.

6.5.1 General

It depends how you want translate your theme. If you don`t want to translate using .mo and .po files you can do it easily in this section.

  • Enable Translate - you can turn it off if you want to use .mo/.po files for more complex translation.
  • Search Placeholder - here you can set up placeholder text for Header and Widget Search
  • results found for: - here you can set up placeholder text for search page
  • Home - here you can set up breadcrumbs text
  • Prev page - text available on pages with pagination
  • Next page - text available on pages with pagination
  • Load more - text available on pages where Load More button is available
  • No translations available for this page - text available in header when you use WPML plugin
  • Days - text available on pages with countdown
  • Hours - text available on pages with countdown
  • Minutes - text available on pages with countdown
  • Seconds - text available on pages with countdown

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.5.2 Blog & Portfolio

This is area where you can set up some texts for your portfolio and blog page.

  • Filter by - text visible on blog and portfolio pages
  • Tags - text visible on Blog page
  • Show all - text visible on blog and portfolio pages
  • Published by - text visible on blog and portfolio pages
  • at - text visible on blog and portfolio pages
  • Categories - text available on Blog & Portfolio pages
  • Read more - text visible on blog and portfolio pages
  • Do you like it? - text visible on blog page
  • Related projects - text visible on blog and portfolio pages
  • Client - text visible on portfolio page
  • Date - text visible on portfolio page
  • Website - text visible on portfolio page
  • View website - text visible on portfolio page
  • Task - text visible on portfolio page

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.5.3 Error 404

Now your Error 404 page is 100% configurable. You can set up here below options:

  • Title - this is title for error 404 page
  • Subtitle - this is subtitle for error 404 page
  • Text - text message for error 404 page
  • Button - this is text for button on error 404 page

For each fields you can set up your own text.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


6.6 Import & Export

This section is especially for all those who want to move settings from theme options panel between themes or when you move your website from test server to live. You have few different ways to import or export settings what you can see on image next to.

You can also Reset settings from this section to default if you want so your theme will look like on our demo version.

Please always remember to click "Save Changes" button. Without that you will lose all your changes.


7. Blog

To create a blog please create a new page Pages > Add New and set up the title eg. Blog. In field Template leave default option on Default Template. In bottom section you will find Page options such as Layout and Sidebar. As you probably have guessed, you can choose whether your blog should be on full width or whether you want it with the sidebar (left or right). If you want blog with the sidebar you should also select the right sidebar for your page.

You can also add video for each post. In section Post option, uder the Visual/HTML default editor you have some options to set. In this section you can set up Vimeo or Youtube video.

At the end please click Publish button on the right.

In the next step please go to Settings > Reading > Front page displays > A static page > Posts page, select page that you have already created and click Save changes.

We have created some features specifically for bloggers. You will find them in Theme  options panel > Getting started > Blog. These options are set on default for each new post. Full description of options for blog can be found in section Theme Options

Adding new posts works similar to standard WordPress Posts > Add New. Posts will be displayed on the already created page.

Images for posts we can add using featured image.

With the latest version you can use Muffin Builder inside posts. Of course you can still use wordpress default editor but if you want create something advanced then you can use our easy to use builder - the same as for pages. Under muffin builder you can find also a lot of options what you can see on the image next to.

With this version we created also posts formats what you can also see on screenshot above. We already did 4 posts formats: Standard Horizontal Image, Vertical Image, Quote, Video and Link.

For more info about post creation please go to http://en.support.wordpress.com/posts/. You can also check the movie about how to create a post http://www.youtube.com/watch?v=Sa4uimrgNz8


8. Portfolio

To create a portfolio please start by creating a new page Pages > Add New and setting up the title eg. Portfolio. In field Template set the option Portfolio template. In the bottom section you also have Page options such as Layout and Sidebar. As you have probably guessed, you can select whether your portfolio should be in full width or whether it should be with a sidebar (left or right). If you decide on the portfolio with a sidebar you should also select the right sidebar for your page.

In Portfolio section you can also add videos from Vimeo or Youtube or even upload own videos in mp4 format  for each portfolio item. Please don`t forget set up featured image for portfolio item when you are adding video.

We have created some options for Portfolio page. You can find them in Theme options panel > Getting started > Portfolio. More info about these options can be found in Theme options panel.

Porfolio items are working just like typical post. To add a new portfolio please go to Portfolio > Add new. As you can see you choose similiar options as for a blog. Additionally, in the bottom section of the page you have Page options. Here you can choose whether you want a full width portfolio or the one with a sidebar (left or right). When you choose the option with a sidebar please don`t forget to select the right sidebar for this page.

You can also type Excerpt and select Featured image. After that please just click Publish button.

With Be|theme, we added many new options for Portfolio. Now, whole content inside portfolio item can be created with Muffin Builder (of course you can use wp default editor as well if you want). It works the same way as for standard pages. Under Muffin Builder you can also find more options like SEO fields, slider, sidebars and many other. All available options for Portfolio item you can see on the right side image.


Menu creation works as in default Wordpress.

To add your own menus go to Appearance > Menus, type Name for your menu and click Create Menu. In next step, in section Theme Locations for position Main menu you need to choose a menu that you’ve just created.

Now you can add Pages, Posts and Custom Links from blocks located on the left. At the end you need to save it by clicking on Save Menu.

If you want to add special things to menu like portfolio categories, posts categories, classes for links, etc. then please click on "Screen options" button in right top corner and there is much more options that can be used for menu items.

For more info about the menu creation please go to http://en.support.wordpress.com/menus

With this theme we also created Mega Menu option so you can create nice menus with items in columns with titles or without. If you want to create mega menu as we did for "Shortcodes" section on our demo, then it should be done as on image next to.

For Mega Menu columns you must add menu item with # "URL" attribute and - as "Navigation label" value. Under this empty columns you can add right menu items.

But if you want columns with "Titles" at the top, then instead of - you must type own value.

To understand how we built menu with MegaMenu options, we recommend to upload xml file with dummy content so you can learn faster and easier how it works.


Smooth scroll effect and hashtag links for one page websites

OLD METHOD

If you create one page website or just want to use links with hashtags around one page, you need to create links with hashtags "#". For example if your website is http://website.com and on this page you want create links with hashtags for sections, in Appearance > Menus section you need to create link like http://website.com#section1

Also for sections that you want link for, you must type right Custom ID which must be the same as value after # in link. So in this case Custom ID must be section1. Custom ID can be setup only for "Section" item inside Muffin Builder.

But if you want to get smooth scrool effect for those menu items, you need to setup right CSS Classes field for each menu item which should have this effect. To do that, in Appearance > Menus section please click in right top corner on "Screen Options" button, check "CSS Classes" field and after that, under each menu item you will see "CSS Classes" field. Inside you must type scroll value. After that you will get this effect for each menu item for which you typed scroll value.

NEW METHOD

The only difference between OLD and NEW method is that you don`t need to setup scroll class for menu items but the whole rest works the same. Instead of class, you must turn ON One Page option in Page options section while you create or edit page.

The new method works much faster and scroll is smoother. We recommend to work with NEW METHOD instead of OLD one.


10. WooCommerce / Shop integration

Be|theme is fully compatible with WooCommerce plugin. We carefully created whole design so you can get very nice shop with tons of options and all looks perfect with theme design. WooCommerce is external plugin and all info about this awesome plugin you can find plugin's author page. Below you have all friendly links that will be useful:


10.1 How to install WooCommerce and setup the default shop pages

At first please go to Plugins > Add new section and type "WooCommerce" into search field. Then click "Search Plugins" button.

After that you will results and what you need to do is click on "Install now" button next to "WooCommerce - excelling eCommerce" plugin.

After that plugin will be installed and please click "Activate plugin" link.

Later you will then see a WooCommerce Purple Notfication Bar at the top of the plugin page. Click the Install WooCommmerce Pages button in the purple bar to install all the default pages.

Please Note: Once you are done installing WooComerce and the default pages, you can go to the Appearance > Menu section of your admin and choose to add all the WooCommerce pages to your menu. They will be listed at the top under the most recent pages.


10.2 How to add new product

Go to Products > Add product section. After that you will see page wich looks like below and all you need to do is fill those fields with own values.

All info about adding new product you can read on http://docs.woothemes.com/document/managing-products/


10.3 How to use WooCommerce shortcodes and setup pages for shop

All pages that you want to setup for WooCommerce are in WooCommerce > Settings > Catalog section. But if you want to get some shortcodes for pages like cart or checkout (most WooCommerce pages must be created manually and that`s why for each you have own shortcode) you need go to WooCommerce > Settings > Pages section.

Whole list of shortcodes included with WooCommerce plugin you can find on http://docs.woothemes.com/document/woocommerce-shortcodes/

List of all available pages for WooCommerce plugin you can find on http://docs.woothemes.com/document/woocommerce-pages/


11. Translation & WPML

10.1 Use .mo/.po files and Poedit software

For all those who prefer translation with files included into theme we recommend to use .mo/.po files. Those files works in pair so for each language you need to have 2 files with the same name but different extension. For example if you want to translate theme into German language, you're files should be de_DE.mo and de_DE.po

For editing this files you need to use Poedit software which is very easy to use. All you need to do is upload those files into this software, edit them and upload into "languages" folder where theme is installed.

10.2 Use our built-in translator

If you don`t want to play with above files and prefer much easier and faster way to translate your theme we recommend to use our built-in translator. This tool is in Theme options > Translate section.

Multilingual website / WPML integration

Be|theme was tested with WPML plugin and is fully compatible. If you want to have multilingual website, this is the best way to do it. If you want to use this plugin, you must purchase it first and then install into your wordpress installation. Below we serve links that will be useful for WPML plugin:


Footer was divided into 3 different sections: Call to action, Widgets and Copyright & Social icons. One screenshot below you will see explanation of what is what:

  1. Call to Action - text for this item can be edited in Appearance > BeTheme Options > Layout > General section where is field called Footer Call To Action
  2. Widgets - for footer we created 4 sections especially for widgets. To add/edit widgets inside, please navigate to Appearance > Widgets section and choose widgets for Footer area #1, Footer area #2, Footer area #3 and/or Footer area #4 sidebars.
  3. Copyright & Social icons - copyright text can be changed in Appearance > BeTheme Options > Layout > General section. There is field called Footer Copyright. If you leave this field empty, then default copyright shows. But social icons shows only, when you fill Appearance > BeTheme Options > Layout > Social icons section with proper links to social media pages.


11.2 Widgets

We included 9 custom widgets but in total you have 33 different widgets to use. To get them, all you need to do is drag widgets available on left side and drop into right sidebars on the right side. But if you want to create own sidebar, then please navigate to Appearance > BeTheme Options > Getting started > Sidebars section and create as many sidebars as you need because this is unlimited. After that, you can go back to Appearance > Widgets section and move widgets again into new sidebars.


12. Extras

We got some extra sections in this documentation to help you with some other things that could be also important while creating websites. We divided them into few sections and all you will find below

12.1 Retina Ready

Be|theme is fully Retina Ready. All images around website can have 2 different sizes - first one is standard image for most screens but the second one is for all devices with HQ screen like Retina.

For logo we got additional field in Theme options > Layout > Header section. In this section you can upload standard logo and retina (this second one must be 2x larger than regular).

The same thing happen to all other images but only if you want to get perfect looking images on Retina screens. If for example you build website where you upload regular images into Content or Muffin Builder, you must always upload 2 images in Media > Add new section which looks like below:

my_image.png - this is the name for standard image
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image

So as you can see above, the second file for retina must have @2x additional name for file.

If you will upload all images twice as we described above, your whole website will get perfect images on all kind of devices.


12.2 SEO

In the era of what is happening in the search engines (especially Google) we implemented SEO option in our theme. We hope this will be very helpful for all of you.

To set up general options for SEO please go to Theme options panel > Getting started > General . You can set up here things like Meta Description or Meta Keywords for homepage (this is also default option for each new page).

If you are using external SEO plugin you can easily turn it off.

Of course you can also set up options like Title, Meta Description and Meta Keywords for each page in this theme. You can do it in Pages > Add page > Page options.

In section Page Options, Post Options & Portfolio ItemOptions you can find fields like SEO Title, SEO Description and SEO Keywords. If you fill those fields, the page will adopt this values. If you leave this fields empty, the page will adopt default values that are in Theme options panel > Getting started > General.


12.3 Support & contact with us

You can contact us in few ways. It depends on what you exactly need.

  • If you have got a questions about theme, please place your question on forum http://forum.muffingroup.com/betheme . Of course we answear support questions in comments or emails but we prefer to provide you with support on forum because your question can be helpful to other customers.
  • Via comments we prefer only presale questions or comment that is not related to support.
  • If you have a really big problem and really need to give us access to your account (that is personal and can only be used by support) you can contact us by using contact form on our profile`s page on Themeforest http://themeforest.net/user/muffingroup - in right bottom section of page.

There is no other way contact with us. So please don`t contact us by sending message on youtube, facebook or twitter - because it`s really difficult for us to control, your question could be lost in these communication channels.



12.4 Advanced theme customization

Sometimes there is a moment when you want to change something on your site that is not available in theme options panel. Something like: font size, color, margin or any other customization. You don`t have to ask us about all these things and wait for our response ever again. You can succeed in doing it on your own.


12.4.1 Google Chrome

To do it you can use two best tools available for free in your web browser. If you`re using Google Chrome you can inspect element that you need to change by "Inspect element". To do it just hover mouse on element and click "Inspect element". After that you`ll see something like on image next to.

As you can see on the image, on the left side there is a list of styles used for each class/id. If you want to change something, you can edit it on the screen and see how the elements look like. If everything is good and you want to make the same changes on your site please copy right styles from box of right side, for example:

#weekly-features .inner-border { 
    height: 80px;
    padding: 20px;
}

and paste this code into: Theme options > Styles > Custom CSS code. If you want to paste this code instead of Custom CSS code you can do it in custom.css file. The result will be identical. It`s up to you to decide on which way to use.


12.4.2 Firebug for Firefox

Apart from Google Chrome, we also suggest to use Firebug for Firefox. In contrast to Google Chrome, Firebug must be installed at first before you can use it. To do so please click Firefox in the left top corner > Add-ons and then search for Firebug and install it. When you get it into your browser you can use it the same way as with Google Chrome but instead of clicking "Inspect element" please click "Inspect element with Firebug". On the screen below you can see that it will look very similar to Inspect element in Google Chrome.

As you can see on image, on the left side there is a list of styles used for each class/id. If you want to change anything you can edit it on the screen and check what elements look like. If everything is good and you want to make the same changes on your site please copy right styles from box of right side, for example:

#weekly-features .inner-border {
     height: 80px;
    padding: 20px;
}

and paste this code into: Theme options > Styles > Custom CSS code. If you want to paste this code instead of Custom CSS code you can do it in style.css file. The result will be identical. It`s up to you to decide on which way to use.

As you can see, it`s not difficult to use it and with the support of this tool you can save a lot of time, so we encourage you to try to do it as described and enjoy your new skills.


13. Hosting

If you did not chosen any hosting yet or current one doesn`t work well, we recommend to use Hostgator. We have fully tested our themes with this hosting and all works very well and fast. Hostgator owners gave special offer dedicated for our customers and you can get great VPS hosting 50% OFF. To get this hosting or any other please click on banner below. Enjoy!


14. Static CSS / Page speed

We noticed that some of you got problems with page speed because of 2 very important theme files - style.php and style-colors.php. Files are responsible for most styles and colors on page. Those files contain some functions that are getting CSS from database but are in .php extension because this is the only way to load colors directly from muffin options/database. However if you finished your website and decided to do not change colors/styles from panel you can switch from .php files to .css files and your page speed will be improved.

  1. After finished website, please open YOUR style.php and style-colors.php files in your web browser. On our demo the example links are as follow: http://themes.muffingroup.com/betheme/wp-content/themes/betheme/style.php and http://themes.muffingroup.com/betheme/wp-content/themes/betheme/style-colors.php and then get & copy whole content from both into style-static.css file on your FTP server.
  2. After first step, please go to Theme options > Getting started > General section and turn ON Static CSS button.

After those changes, instead of .php files will be used only one file called style-static.css and in some cases it should improve page speed.


15. Visual Composer plugin

With 4.0 version of BeTheme, we added Visual Composer for those who prefer working with this plugin. To activate plugin after theme installation, please go to Appearance > Install Plugins section, install it and activate. After that plugin will be ready to use.

Plugin after activation is available in the same section where default wordpress editor visible is. So please create/edit page and above wordpress editor you will see two large, blue buttons called Backend Editor and Frontend Editor. This is exactly what you need to build content within Visual Composer

To explore the capabilities of Visual Composer, please have a look into documentation and also please watch video below:


16. White Label Panel

Since version 6.0, you can transform Muffin branded panel to white label. With this option all our logos or muffin texts and links will be removed. To transform Muffin Options panel to white label, please open functions.php file on your FTP and replace below part of code:

define( 'WHITE_LABEL', false );

with below:

define( 'WHITE_LABEL', true );