BeGreen WordPress Documentation

The Documentation

BEGREEN GENERAL

BeGreen Instruction

Firstly, we would love to send our great thanks to you for purchasing BeGreen. This documentation covers almost everything to guide you step by step from the start to have your site on air. We encourage you to read thoroughly all sections before you go on.

WordPress Information

Before installing this theme, please make sure that you have a working WordPress version already installed. For further guides to install WordPress, please find in below useful links:

Download Theme Package

When our theme is purchased successfully from ThemeForest, you will need to download theme package to use. To download the package, please login to your ThemeForest account, navigate to “Downloads”, click the “Download” button in the left side of the theme, choose “All files & documentation” to download our theme package to your computer. The theme package includes:

Requirements for BeGreen

To use BeGreen theme, you must be running WordPress 4.4 or higher, PHP 5.5 or higher, and MySQL 5.5 or higher. Follow the checklist below to ensure that your host can work well with BeGreen theme:

Video Tutorial

Install BeGreen Theme & Import Sample Data

INSTALLATION

There are two ways to install theme. It belongs to the way you choose your preference.

Install Theme via WordPress

Note: If you see this message “Are You Sure You Want To Do This” when installing yolo-begreen.zip file via WordPress, it means that you have an upload max file size limit. Please try to read this blog to find a solution for your website.

Install Theme via FTP

Follow this video tutorial on how to install BeGreen theme & plugins

Plugin Installation

Here is the list of plugins that will come together with our theme when it is activated. It is recommended to install and activate these plugins based on your own need:

Import Demo Content

The easiest way to import our demo content is to use our Demo Content Importer. Our importer will give you all pages and posts, several sample sliders, widgets, and more.

Import the content file (.XML)
import the content file import the content file step 3

Directly import the content file .xml downloaded from the package:

Import Slider

All our sliders should imported before importing Sample Demo Data, please follow these steps:

Auto Import
import sample data
Follow this video tutorial to import sample data of BeGreen theme

Update Theme

Auto Update

Please follow these steps to update this theme automatically:

Manual Update

You can also update the new version in traditional way:

Basic Setting

If you’re new to WordPress, you’ll probably see that your site after importing data is completely different from our demo

It’s because some basic settings are needed on WordPress site. If you know where the issue is and how to fix it, please skip this section.

Setup Home Page & Blog Page

To assign Homepage and Blog page, please follow these steps:

Assign Menu

Please go to Appearance > Menus, then find Menu Settings > Display Location at the bottom.

Check the Primary Menu, then save it. This action will assign the menu “Main Menu” to the location Primary (the main menu) on our theme.

You can see more details at: http://codex.wordpress.org/Appearance_Menus_Screen

Change Permalink

Please go to Permalinks setting: Settings >Permalinks, then change the Common settings to Post name.

You can see more details at:http://codex.wordpress.org/Using_Permalinks. After these steps are done, your site will look like our demo, you can move on to process to build your content.

THEME OPTIONS

Based on Redux Framework, BeGreen provides Theme Options helping users easily to control WordPress theme. There are many options in Theme Options, each option has a mission to make your website nicer and more eye-catching. You absolutely go to BeGreen> Theme Options to see all options. And do not forget to follow this section to see description of each option in Theme Options.

General Setting

General Setting section allows you to configure general pages such as select page preloader or configure enhancement or 404 page.

General Setting
General Setting
404 Setting
404 setting

404 section allows to configure 404 page by adding title, background image for 404 page.

Pages Setting

Page Setting section will help you to configure main page on your WordPress site. There are 3 sections you need to configure on Page Setting including Archive page, Search Page and Single Blog section.

pages-setting
Pages Setting

Pages Setting

Pages Title Setting

Archive Page

Archive page section provides many options which will help you configure archive page for your WordPress Website.

pages-setting

Archive Page

Archive Title Setting

Search Page

Search Page section allows you to configure all options of Search Page.

search-page
Single Blog

Single Blog section allows you to configure single blog page. For example: layout, sidebar, etc.

pages-setting

Single Blog

Single Blog Title Setting

Logo & Favico

logo&favico

In this section, you can upload your logo, sticky logo and custom favico for your WordPress website.

There are many options on Header section helping you to configure Header for your WordPress website. Follow these descriptions to learn more about them:

header

Header Schema

Header Navigation

Header Customize

Header Customize section will help you to configure megamenu, select search button style, shopping cart style, etc.

header

Header Customize Navigation

Header Customize Left

Header Customize Right

Mobile Header
mobile menu

In this section, you can select Footer Block for your main page..

Styling Option

styling-options

Styling option allows you to configure Primary color, text color, submenu color and page title color for your website.

Sub-menu Scheme

Page Title Background Color

Typography

In this section, you can select Fonts for body, menu, page title, page sub title from dropdown list font.

Social Profile

Social Profile section allows you to turn on social media and add the link your account to your website.

Promo Popup

Promo Popup allows you to create a Newsletter form which will be displayed when visitors begin getting access to your website

promo-popup

WooCommerce

WooCommerce section provides many options helping you to configure shop page, archive product page and single product page.

promo-popup
Archive Product
archive-product

Layout Options

Page Title Options

Single Product
single-product

Layout Options

Page Title Options

Product Related Options

Portfolio

Portfolio section wil help you to configure options of portfolio page.

portfolio

Portfolio Page Title Options

Portfolio Single Settings

Custom CSS & Script

In this section, you absolutely add your Custom CSS and Custom JS segments for your website.

Import /Export

In this section, you can import or export date from your website.

HEADER

Add Header To Page

There are two ways which you can use to add header style to page:

Header Styles

BeGreen supports 7 header style layouts. Follow these images below learn more about them:

Header Style of Each Homepage

In this section, we will guide you how to build Header Style for each Homepage of BeGreen. Follow these steps below learn more for details:

Main Home

Planter Home Shop

Green Shop Home

Tree Shop Home

Business Home

Service Home

Creative Agency Home

Planter Agency Home

Personal Artist Home

Split Screen Home

Follow this video tutorial learn more about how to configure Header Style layout of BeGreen

PAGE

Create New Page

create_new_page
 

Page Options

We have created some specific BeGreen page settings which will help you to build splendid pages for your website. Follow the list of options below to see how they work:

Page Layout
page_layout
Page Top
page_top
Page Header

Page Header will allows turning On/Off Header for your page. In addition, you absolutely customize Header Customize option, if Header Customize option is turned on, you can configure many options for your page such as Header Layout, Header Scheme, Header sticky, etc.

Page Header Customize
page_top
Logo
page_logo
Menu
page_logo

Menu section will help you to choose separated menu for page. You can select Page Menu and Page menu mobile.

Page Title
page_logo

On this section, you can customize your page title with many options such as turn on/off page title, select color for page title or sub title from table color.

Page Footer
page_logo

Page Footer allows you to select footer to override footer selected on Theme Options

POST

Create New Post

Follow these steps below to create blog post:
  • Step 1: In your Admin Panel, go to Post and navigate to Add New.
  • Step 2: Enter your title and choose Post Format from Format box on the right side which shows different post format options: Standard, Image, Gallery and Video.
  • Step 3: Add your post content in editing field. You can use our shortcodes to build your content where needed. .
  • Step 4: Add Categories for the post from the Categories box on the right side. You can add new category or choose from existing categories. Check the box to select Categories for your post. Add relevant Tags for your post in the Tags box, set Featured image on the right side and other settings from the sections below Editing field. If you need more detailed guides about post settings in WordPress, please find in WordPress Codex.
  • Step 5: After your content is added, scroll down your mouse, you will see Page Options section allowing you to have more configurations for your post.
  • Step 6: All are done, click Publish to publish your post.
create_ post
 

Post Format

BeGreen supports 7 post formats. Follow these steps below to see the description of Post Formats and Global setting of Post.

  • Standard Settings: This is the standard post, on this post format, you can choose Featured Image and set the content for it.
  • Gallery Settings: When selecting Gallery Format, you will have Gallery Setting meta-box to add as many images as you want to your gallery and manage your preview content as Featured Image, First Image on Gallery or Image Slideshow.
  • Image Settings: When you selecting Image Format for you post, you will have Image Settings a meta-box to choose a main image of the post. Set Feature Image as the main image for preview content or Choose Your Image if you want to set another image as the main image for preview content.
  • Video Settings: When selecting Video Format, you will have Video Setting meta-box where you can add video URL, and embedded video code, aspect ratio, and preview content as Featured Image, Video or Featured Image as Video Thumbnail.
  • Audio Settings: When selecting Audio Format, you will have Audio Setting meta-box where you can add embedded audio code, aspect ratio and preview content as Featured Image, Video or Featured Image as Video Thumbnail.
  • Quote Settings: When selecting Quote Format, you will have Quote Setting meta-box where you can add the quote and citation and manage your preview content as Featured Image.
  • Link Settings: When selecting Link Format, you will have Link Setting meta-box where you can add the URL, Text and manage your preview content as Featured Image.

Page Options

Like Page Options section of Page, you absolutely configure more options on Page Options of Post. To learn more about descriptions of each option, please visit Page section.

BEGREEN CUSTOM POST TYPE

Team Member

Create New Team Member
  • Step 1: From admin panel, navigate to Team Member > Add New to add new team member
  • Step 2: In the right side, select Team Categories and Featured Image for team member.
  • Step 3: Fill out all information of Team Member Information, Social Profiles, Specialty and Certificates for your Team Member.
  • Step 4: All are done, click “Publish” to save the configuration.
Team Member Setting
  • Team Member Information: Enter all information of Team Member as Image, name, position, phone, email and experience.
  • Social Profiles Enter your link social here. Leave blank if you don’t show Social for your Team Member.
  • Specialty: Enter the description for your Team member specialty.
  • Certificates: Enter the description for your Team member certificates.

Footer Blocks custom post type will help you create particular footer style by using Visual Composer shortcode. On BeGreen, we provides 11 sample footer blocks. You can install our sample data to learn more about this.

Create New Footer Blocks
  • Step 1: From Admin Panel, navigate to BeGreen > Footer Blocks > Add New
  • Step 2: Add the content by using Visual Composer shortcode.
  • Step 3: All are done, click Publish to save your configuration.

Testimonials

Create New Testimonial
  • Step 1: From Admin Panel, navigate to Testimonials > Add New
  • Step 2: Enter testimonial title and description.
  • Step 3: Select testimonial categories and add Featured Image on the right side.
  • Step 4: Scroll down, you will see Testimonial Information section. Enter testimonial information here.
  • Step 5: All are done, click Publish to save your configuration.
Testimonial Settings
  • Email Enter testimonial email
  • Position: Enter testimonial position.
  • URL:Enter testimonial URL here.
  • Special: Enter testimonial special here.
  • Rating: Choose rating for testimonial.
  • Rating: Choose rating for testimonial.
  • Background Image: Choose background image for testimonial.

Portfolio

Create New Portfolio
  • Step 1: From Admin Panel, navigate to Portfolio > Add New
  • Step 2: Enter portfolio title and description.
  • Step 3: Select Media Type, Portfolio Categories, Portfolio Tags and Featured Image on the right side.
  • Step 4: Scroll down, you will see Excerpt and Custom Field section. Enter excerpt and custom field here.
  • Step 5: All are done, click Publish to save your configuration.
Portfolio Page

To set up a page as Portfolio page on our demo website to show all portfolios such as 2 columns, 3 columns, you can create a new page. Then, use Yolo Portfolio shortcode and configure option in this shortcode. This shortcode will help you to create Product list page.

WOOCOMMERCE PLUGIN

When WooCommerce plugin is installed in your WordPress website successfully, you are able to create online shop or product list page. Below is the guide to create Product or shop page using WooCommerce.

Create New Product

To create a new product, please follow these steps:

  • Step 1: Navigate to Products in your WordPress admin sidebar.
  • Step 2: Click Add New to make a new product. Create a title, and insert your product content in the editing field. You can use any of our shortcode builder elements inside the product.
  • Step 3: Add Categories from the right side. To assign it to the product, check the box next to the category name.
  • Step 4: Add Tags from the right side. Type the name of the tag in the field
  • Step 5: Select featured image for product by hitting button “Set featured images”. You can then select product images to add into Product Gallery
  • Step 6: Scroll down your mouse, you will see Product Data option. Remember to choose Product Data: Simple product.
  • Step 7: Once you have finished, click “Publish” to save your product.

Shop Page

To set up a page as Shop page to show all products, create a new page. From admin panel, navigate to Woo Commerce > Settings

In Products tab, navigate to Display sub-tab on the top, here you can find your page from dropdown list to set as Shop page.

Product List Page

To set up a page as Product List page to show all products such as product list 2 columns, 3 columns, you can create a new page. Then, use Yolo Product shortcode and configure options on this shortcode. This shortcode will help you to create Product list page.

BEGREEN SHORTCODE

Instead of writing lines of code to build elements, we built BeGreen with number of premade shortcodes that enable you to create many elements you see in our demo in fingertips.

By installing Visual Composer (the page builder plugin is integrated in the theme package), you will have the Visual Backend Editor where every shortcodes are displayed visually and easily generated with several clicks.

In addition to Default Visual Composer shortcodes, BeGreen comes with 19 specific shortcodes. To generate these shortcodes, go to Backend Editor, click the “+” icon to add shortcode.

Navigate to BeGreen Shortcodes to find a shortcode you want to use. You can add those shortcodes to any pages or posts for your own use.

BeGreen-shortcode

Below are a list of 20 shortcodes and their artributes:

shortcode

Yolo Single Product

Use this shortcode to show single product on front page.


Detailed option:

  • Layout Style:- select - Choose layout style for single product shortcode including Style 1, Style 2, Style 3, Style 4.
  • Action Button Tooltip: - yes/no - Turn On/Off action button tooltip for single product shortcode.
  • Disable Action Button: - select - Choose action buttons which you don't want to display. Check Select All box to disable all action buttons.
  • Background Product Style: - select - Choose background style for single product from drop down list styles.
  • Select single product by search name: - select - Choose single product which will be displayed on single product shortcode.
  • Choose Product Brand's Logo: - image - Choose product brand's logo for product. This option only display when selecting Layout Style: Style 4.
  • Extra Class Name: - string - Enter the class name if you want to customize this shortcode.
  • CSS Animation: - Select - Choose types of animation when viewing on browsers.

Yolo Product

Use this shorcode to display products as Grid or Masonry style. This shortcode is used on Product Grid, Product Columns page.

Detailed option:

  • Products Style: - select - Choose layout style for products including: Grid, Masonry.
  • Columns: - select - Choose the number of columns which product items will be displayed on Products page.
  • Single Product Style: - select - Choose style for single product including Style 1, Style 2, Style 3.
  • Action Button Tooltip: - yes/no - Turn On/Off action button tooltip.
  • Disable Action Button: - select - Choose action buttons which you don't want to display. Check Select All box to disable all action buttons.
  • Source: - select - You can choose products from categories or Product Items. Check Select All to select all categories and all Product Items.
  • Filter Style: - select - Choose filter style for product page.
  • Show/hide "All" in filter: - select - Turn On/Off filter style.
  • Filter alignment: - select - Choose filter align ment including: Center, Left, Right
  • Show/hide Sorting product: - Show/Hide - Show/Hide sorting product.
  • Product Per Category: - number - The number of products will be displayed on product page.
  • Products Ordering: - select - Choose product ordering for product page including Publish Date, Random, Alphabetic, Popularity, Rate and Price.
  • Sorting: - select -Select how to sort products including Ascending or Descending
  • Extra Class name: - string - Enter class name if you want to customize this shortcode.
  • CSS Animation: - select - Select types of animation when viewing on browsers.

Yolo Product Slider

Use this shortcode to show product items as slider on your site.

yolo_product_slider

Detailed option:

  • Source: - select - Choose the source to display product items on Yolo Product Slider shortcode. You can choose product items from Categories or Product Items.
  • Product Per Slide: - number - Select number of product per slider from drop down list.
  • AutoPlay: - select - Turn On/Off auto play feature for product.
  • Slide Duration: - number - Enter the time duration for your slider.
  • Single Product Style: - select - Select product style from drop down list style.
  • Action Button Tooltip: - Select - Select Yes/No to turn on/off Action Button Tooltip.
  • Disable Action Button: - select - Choose action buttons which don't display on product.
  • Number of Products: - number - Enter number of products for slider.
  • Product Ordering: - select - Choose product ordering from drop down list product.
  • Sorting: - select - Choose product sorting including Ascending and Descending..
  • Extra class name: - string - Enter class name if you want to custom this product.
  • CSS Animation: - select - Choose types of animation when viewing browsers.

Yolo Product List

Use this shortcode to show a list of products on your page.

yolo_product_list

Detailed option:

  • Source: - select - Choose the source which product items will be displayed on Product List. If you choose Source: From Categories, you need to select categories from Select Category option. If choose Source:From Product Items, you need to enter your product IDs on Select Product option.
  • Single Product Style: - select - Select single product style from drop down list style.
  • Action Button Tooltip: - yes/no - Turn On/Off action button tooltip for product item.
  • Disable Action Button: -select - Select action button which you want to disable on product item. Check Select All to disable all buttons.
  • Pagination: - select - Choose types of pagination including Load More Button, Page Number and Infinite Scrolling.
  • Pagination alignment: - select - Choose pagination alignment including Center, Left and Right.
  • Products Per Page: -number - The number of products allowed, how many products to show on one page.
  • Product Ordering: -select - Choose the order of product which will help you arrange your products following to different order criteria including Publish Date, Random, Alphabetic, Popularity, Rate and Price.
  • Sorting: -select - Choose the sorting order for product list.
  • Extra Class Name: -number - the number of products allowed, how many products to show on one page.
  • CSS Animation: - select - Choose types of animation when viewing browsers.

Yolo Blog

Yolo Blog shortcode will help you to show the list of blog posts on your page.

yolo_blog
Detailed option:

  • Blog Style: - select - Choose layout style for blog page including List (Lage Image),List(Medium Image), Grid and Masonry. If you choose Layout Style: Grid/ Masonry Columns, this option will appear. You can choose the number of columns for post.
  • Narrow Category: - select - Select categories of post items displayed on blog page.
  • Total items: - Enter the number of posts which will be displayed on blog page.
  • Pagination Style :- Select - Choose pagination style including Show all (posts), Default, Load More and Infinity Scroll.
  • Hide Author/Date/ Category/ Comment/ Read More: - check - Check yes to hide author, date, category, comment and read more of post.
  • Excerpt Length: The number of characters displayed on post section.
  • Extra class name:- string - Enter class name if you want to customize this shortcode.
  • Order By:- select - You can arrange your posts following to different order criteria.
  • Sorting:- select - Arrange your posts in ascending or descending order regarding to order criteria you set above.
  • CSS Animation:- select - Select types of animation if you want to be animated when it enters into the browsers viewport.

Yolo Portfolio

Yolo Portfolio shortcode will help you to show product on Portfolio page.

yolo_blog
Detailed option:

  • Thumbnail type: - select - Choose type of thumbnail from drop down list.
  • Portfolio Title: - select - Select portfolio title style from drop down list to display portfolio title.
  • Overlay Style: - select - Choose overlay style for portfolio.
  • Overlay Effect:- Select - Choose overlay effect for portfolio
  • Hover Dir Effect: - On/Off - Turn On/Off hover effect for portfolio.
  • Columns: - select - Choose columns to display portfolio item on portfolio page.
  • Source: - select - Choose portfolio source including Portfolio Category or Portfolio Item.
  • Show Filter: - select - Choose portfolio filter.
  • Filter By:- select - Choose filter by tags,categoy for portfolio.
  • Show Paging: - select - Choose paging.
  • Number of item: - number - The number of portfolio items will be displayed on portfolio page.
  • Order Post Date By: - select - Choose ordering.
  • Padding: - select - Choose padding from drop down list.
  • Extra class name:- string - Enter class name if you want to customize this shortcode.
  • CSS Animation:- select - Select types of animation if you want to be animated when it enters into the browsers viewport.

Yolo Testimonial

Use this shortcode to build testimonial on front page.

testimonial

Detail option:

  • Layout Style: - select - Choose layout style for testimonial.
  • Source: - select - Choose source from testimonial categories or testimonial IDs.
  • Order Post Date By: - select - Choose the sorting order including Descending or Ascending.
  • Excerpt Length: - number - Enter excerpt length.
  • Auto Play: - Yes/No - Turn On/Off auto play testimonial.
  • Slide Durations: - number - Enter slide durations.
  • Extra class name: - string - Enter class name to customize this shortcode.
  • CSS Animation: - Yes/No - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

Yolo Recent News

Use this shortcode to display recent posts on your page.

recent-news

Detailed option:

  • Choose Layout: - select - Select layout style for Yolo Recent News shortcode.
  • Select Categories: - select - Select categories to display posts on your page.
  • Number of Columns: - select - The column attribute controlling the width of columns should be displayed.
  • AutoPlay: - select - Turn On/Off auto play.
  • Slide Durations: - number - Enter slide durations.
  • Posts Per Page: - number - Choose the number of posts that will be displayed per page.
  • Excerpt Length: - number - The number of characters displayed on post description.
  • Extra class name: - string - Enter extra class to customize this shortcode.
  • CSS Animation: - select - Select types of animation if you want this element to be animated.

Yolo CountDown

count down

Use this shortcode if you want to show count down on your website.

Detailed option:

  • Select Datetime: - select - Select date time from the calender.
  • Choose layout: - select - Select layout style for countdown including Circle Inline Style, Circle Responsive and Number.
  • Extra class name: - string - Enter extra class to customize this shortcode.
  • CSS Animation: - select - Select types of animation when viewing on browsers.

Yolo Banner

Use this shortcode to display banner on front page.

Detail option:

  • Layout Style: - select - Select layout style for banner shortcode. There are 8 layout styles you can choose.
  • Title - string - Enter the title for banner
  • Title Style: - select - Select title style for banner including Top and Bottom.
  • Link: - select - URL is redirected when visitors click the banner.
  • Banner's Images: - select - Select banner's image for banner shortcode.
  • Label: - string - Enter name of label.
  • Title color: - select - Select title color.
  • Extra Class Name: - string - Enter extra class to customize this shortcode.
  • CSS Animation: - select - Select types of animation for this shortcode.

Yolo Client

Use this shortcode to show clients logo on front page

  • Clients: Click "+" button to add clients, you need to add Name, Image and URL for client.
  • AutoPlay: - Yes/No - Turn On/Off auto play slider on this shortcode.
  • Slider Duration: - number - Enter duration for slider.
  • Choose Layout: - select - Select layout styles for Yolo Client shortcode.
  • Logo per slide: - number - The number of sliders displayed on slider.
  • Extra class name: - string - Enter extra class if you want to customize this shortcode.

Yolo Icon Box

This shortcode will help you to show icon box on front page.

Detailed option:

  • Layout Style - select - Select layout style for Yolo Icon Box including Style 1, Style 2, Style 3, Style 4.
  • Icon Library: - select - Choose icon library from Font Awesome, Open Iconic, Typicons, Entypo and Linecons
  • Icon: - select - Choose the icon from drop down list icons.
  • Icon Color: - select - Select icon color from color table.
  • Custom Icon Image: - image - Select icon image.
  • Background Image: - image - Select background image.
  • Title: - string - Enter title here.
  • Link: - URL - Choose URL when visitors click icon.
  • Description: - string - Enter description here.
  • Extra Class Name: - string - Enter extra class to customize this shortcode.

Yolo Team Member

Use this shortcode to build team member on about us page.

team-member

Detailed option:

  • Source: - select - Choose source from category or Member IDs to display team member on page.
  • Style: - select - Choose hover style for team member item.
  • Layout Style: - select - Choose layout style to display team member.
  • Total Item: - number - The number of team members displayed on one slider.
  • Column Display: - number - Choose number of columns which team member will display on shortcode.
  • Order Post Date By: - number - Enter excerpt length.
  • Auto Play: - Yes/No - Turn On/Off auto play team member.
  • Slide Durations: - number - Enter slide durations.
  • Extra class name: - string - Enter class name to customize this shortcode.
  • CSS Animation: - Yes/No - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

Yolo Google Maps

Use this shortcode to display google maps on front page.

Detailed option:

  • Choose style layout: - select - Select style layout for map.
  • Choose style map: - select - Select map style for map.
  • Info window title: - string - Add info for title.
  • Info window image: - image - Choose image
  • Map height: - number - Enter the height of map.
  • Latitude: - number - Get latitude from here: https://www.google.com/maps
  • Longitude: -number- Get longtitude from here: https://www.google.com/maps
  • Zoom: - number - Enter zoom here..
  • Image to replace marker: - image - Select the image to replace the original map marker (optional)..
  • Extra class name: - select - Select font family.
  • CSS Animation: - select - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

Yolo Video Player

Use this shortcode to show video player on front page.

video-player

Detailed option:

  • Style: - select - Choose style layout from drop down list.
  • Heading: - string - Enter heading here.
  • Title Color: - color - Choose title color.
  • Subheading: - string - Enter subheading here.
  • Description Color: - color - Choose description color.
  • Icon Color: - color - Choose icon color here.
  • Video URL: - link - Enter video URL. You can choose Vimeo or Youtube video.
  • Height: - number - Enter video height.
  • Width: - number - Enter video width here.
  • Background image: - image - Choose background image for shortcode..
  • Extra class name: - select - Select font family.

Yolo Instagram

Use this shortcode to show instagram on front page.

instagram

Detailed option:

  • Instagram Username: - string - Enter instagram username here.
  • Layout Style: - select - You can choose intagram style grid or slider.
  • Image Size: - select - Choose image size style from drop down list style.
  • Total Images Display: - number - The number of image to display.
  • Number of Column Images: - number - Enter number of column to display image.
  • Check for new images on every (hours): - hours - Enter the hours to checkout the new image.

Yolo Counter

Use this shortcode to show counter on front page.

counter

Detailed option:

  • Style: - select - Choose style for counter.
  • Title: - string - Enter text for counter title
  • Number: - number - Enter number of statistical. Example 1466.
  • Extra class name: - select - Select font family.
  • CSS Animation: - select - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

Yolo Widget

Use this shortcode to call widget on your page.

Detailed option:

  • Sidebar: - select - Choose style for counter.
  • Extra class name: - select - Select font family.
  • CSS Animation: - select - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

Yolo Slider Text

Use this shortcode to call widget on your page.

slider-text

Detailed option:

  • Slider Text: Add slider text that includes Title, Description,URL of slider.
  • AutoPlay: - select - Turn On/Off auto play
  • Slide Duration (ms): - number - Enter slider duration.
  • Choose style: - select - Choose style from drop down list.
  • Extra class name: - select - Select font family.
  • CSS Animation: - select - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

    • Yolo Slider Images

    Use this shortcode to call widget on your page.

    slider-images

    Detailed option:

    • Slider Images: Add slider images that includes Title, Description,URL of slider.
    • AutoPlay: - select - Turn On/Off auto play
    • Slider Duration (ms): - number - Enter slider duration.
    • Choose style: - select - Choose style from drop down list.
    • Logo per slide: - select - Number - Enter logo per slide.
    • Extra class name: - select - Select font family.
    • CSS Animation: - select - Select types of animation if you want this element to be animated when it enters into the browsers viewport.

NEWSLETTER

Create Newsletter Form

Please make sure that you have installed Contact Form 7 before, then follow these steps to create newsletter page.

  • Step 1: Go to Contact > Add New to create a contact form with fields having these names:
    • your-email
    • submit

    • Here is an example of Newsletter Form:

  • Step 2: Go to Pages > Add New > Add Contact Form shortcode to your page > Select contact form option. You can choose previously created contact form from the drop down list.
    • contact-form
  • Step 3: Publish page and you will have the Newsletter form as below:

Newsletter Form Style

BeGreen supports 3 Newsletter Form Styles for your website. With each Newsletter Form Style, we declare a class. Each class has separate CSS style, you can easily to use one of classes to your website.

Follow lists below learn more about Newsletter Form Styles:

  • Newsletter Home 1: class="home 1"

    • Form:

    Front Page:

  • Newsletter Home 2: class="home-2"

    • Form:

    Front Page:

  • Newsletter Home 4: class="home-4"

    • Form:

    Front Page:

FOOTER

How to add a footer block to page

Please follow these steps to how to add a footer block to page

  • Step 1: From Admin Panel, navigate to BeGreen > Footer Blocks > Add New to create a new footer block.
  • Step 2: Add content to footer block. You can use shortcodes of Visual Composer to add your content as you want.
  • Step 3: Click Publish to save configuration.
  • Step 4: Assign Footer Block to page.
      There are 2 ways which you can use to assign a footer block to your page:
    • 1 - If you want all pages of your website will be received a footer block only: Please go to Theme Options > Footer> Select Footer Block > Choose a footer block from drop down list.
      • footer1
    • 2 - If you want each page of your website will be received a different footer block: Please open your page > Scroll down you will see Page Option section > Page Footer > Select Footer > Choose a footer block from drop down list. If you choose Default style, footer will be overridden on Theme Option.
      • footer2

If you have imported our sample demo data, a lot of Footer blocks are available, you can go to Footer Blocks to see all Footer Blocks or edit them.

In addition, we used Visual Composer shortcodes to build Footer Blocks. To turn on Visual Composer shortcodes on Footer Blocks, navigate to Visual Composer > Role Manager > Posts type : Custom > Check yolo_footer checkbox.

TRANSLATION

BeGreen is a WMPL – compatible and multi- language ready theme. To translate this theme, follow these steps below

  • Step 1: Download and install PoEdit tool.
  • Step 2: Open PoEdit and open the .po file of your preferred language in PoEdit and search your line you want to change. To do this, select the Edit button > Find option.
  • Step 3: In the Search Window, type the text string you are looking for. Once it is selected, replace the text in the Translation text area in the lower part of the window with your preferred translation.
  • Step 4: If you’d like to edit another text string, just repeat Steps 1 to 2.
  • Step 5: Click “Save” to save configuration. The .mo file will be auto created.
  • Step 6: Finally, you need to rename of .mo file with Code Name of your language. Please see the language code list HERE

    • For example de_DE.mo for German – Deutsche

  • Step 7: Navigate to Settings > General > Site Language to select your language.

SUPPORT

When you come to this section, we hope that you found all the information provided in this documentation helpful and you have finished installing and polishing your site as what you have imagined of. After reading carefully this guide, if you still need any helps, don’t hesitate to contact us at Yolo Support Center. You will be asked to create an account if you are new to us and enter purchase code to post a topic for support. To get your purchase code, please login to your ThemeForest account, navigate to “Downloads”, click the “Download” button on the left side of our theme, choose “License Certificate” to download the license file where you can find the purchase code.

Please be noted to post a topic with your issues be clearly clarified. It is recommended you send us together with link of your site and your admin account. These will help to save time for both of us. Finally, please be patient. It will take us some time to check all the topics and we will solve topics from older to newest.

Hopefully, you will enjoy using BeGreen! Thank you for choosing our theme.