Or you can also add the theme zip file. Just click on the “Upload theme” button. After that install and activate it.
How to Install Bevro Pro Plugin
For Installing Bevro Pro Plugin in your WordPress dashboard, follow the instructions mentioned below –
Signup to member’s area. Choose your desired plan from here & Register. If you have already signed up Login to your Account.
Now Download Bevro Pro Plugin zip file and Install it in your WP dashboard.
Activate the Plugin.
Demo Import
Follow this video and learn to Import demo data in Bevro theme.
How to setup Menus
To create the menu in Bevro, just follow the below instructions –
Go to Appearance > Menus > Create a new menu. Add a menu name. Select the menu you want to add to your menu.
Main Menu
Create a menu and select the display location as “Main header menu”. This will display menu on Main Header.
Header Menu
Header Above Menu – Create a menu and select the display location as “Header above menu”.
Header Below Menu – Create a menu and select the display location as “Header below menu”.
Footer Menu
Footer Above Menu – Create a menu and select the display location as “Footer above menu”.
Footer Below Menu – Create a menu and select the display location as “Footer below menu”.
How to add Post format
For Post Format, Go to Dashboard > Post > Add new post. You can find Post format in the right-hand column of post editor. You can switch on different post formats from a set list. Just simply pick which formats suit your site best. Post format list consists of:
Aside: Use this for posts to remove post title.
Gallery: A post containing a gallery of images.
Link: A simple link to an external site.
Quote: A quoted block of text, usually with attribution to a quote’s author.
Audio: An audio file or playlist.
Video: A post that has one, or several, videos. The WordPress codex also points out that a single URL may indicate the source of a video, rather than an embedded video.
Site Identity
This setting will allow you to set site identities like Logo, site title, tagline, site icon. Go to Appearance > Customizer > Site Identity.
1. Logo–
You can upload a logo image here. Click on “Select logo” option. Upload the logo image.
2. Retina Logo-
Retina logo is same as the size of normal logo. For example: If the normal logo is 100×100 pixels in size, then the retina logo image would need to be 200×200 pixels in size. Retina logo is best suitable for high definition screens, so that your logo won’t look blurred.
3. Logo Width-
You can adjust the width of the logo by increasing or decreasing the scrollbar.
4. Site Title & Tagline-
In site title just write the text you want to show in the title with a tagline. You can enable or disable the title & tagline from “Display Site Title and Display Tagline” option.
5. Site Icon-
This will show icon in your browser tab. Just upload an image in site icon and show it in your browser tabs.
Container
For Container Setting, Go to Appearance > Customizer > Layout Setting > Container.
In container overall site content will appears. Container will exclude the header & Footer area. You can manage your container by doing the below settings in it. These settings will be applicable for Page, Blog / Archives, Blog Single and WooCommerce Pages.
Full width- . In wide site layout the main body goes with the edge to edge of the browser whereas the content is managed by the container width.
Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
Max Width – In max width site layout, the main body is set to a certain width which includes the content, header & footer whereas the container max width can be managed.
Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
Top/Bottom Margin – You can control the Top/Bottom Margin of your site using this option.
Site Styles (Pro)
For site styles, Go to Dashboard > Appearance > Customize > Layout > Container > Site Styles.
You can manage the overall layout of site using site styles. When you select any Site style layout, that layout will be applied outside the Body of your site.
1. Wide Site Layout –
Your entire site is consist of Main Body which includes content, header, footer & sidebar and the container which only includes the site content & sidebar. In wide site layout the main body goes with the edge to edge of the browser whereas the content & sidebar is managed by the container width.
Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
2. Max Width Site Layout –
In max width site layout, the main body is set to a certain width which includes the content, header, footer & sidebar whereas the container max width can be managed.
Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
Top/Bottom Margin – You can control the Top/Bottom Margin of your site using this option.
3. Padded Site Layout –
In Padded site layout you can set padding in the website outside edges. The content will take the full width whereas the header & footer width can be changed from Container width. Padding remains constant while scrolling your site. You can manage the Top, bottom, left, right padding.
Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
Space Outside Body – Using this option you can add padding in your site. Just put the value in the text area and manage the top,bottom, left & right padding.
Box Shadow – You can enable or disable shadow outside the body of your site.
4. End to End Site Layout –
In End to End site Layout your site will take the edge to edge full width including the header, content, sidebar, and footer for all screen sizes.
Page Right/Left Padding – You can manage the padding in the left & right side of your site edges.
For header setting, Go to Appearance > Customizer > Layout Setting > Header.
Above Header
It appears right above the Main header and allows you to show multiple elements. You’ll get three different layouts. In each layout column you can show elements like social icons, menu, search, Text, Widgets. Here styling can be done using the color scheme, height, border and many more.
Main Header
In main header your logo and main navigation will be displayed along with Menu.
To show navigation menu in your “header” first set the menus from the dashboard. Go with this link.
With Main header setting, you can modify your overall header by adding different layouts with other content. Five different type of layouts shown in below image.
Last Menu Item – You can show search icon, social media profile, text, button or widgets as the last menu item.
Bottom Border size – This will add a separation between Main header and Below Header. You can adjust the width by increasing or decreasing the scroll bar or enter the value in text box.
Bottom Border Color – Pick desired color for your “main header” border. It will only appear when you add a border in your header.
Enable Full Width Header – This will show your Header in Full Width area.
Mobile Menu Open – Choose the Mobile menu alignment left. right or center.
Mobile Header Alignment – Display your header as a stack or inline aligned for mobile devices.
Color scheme – Select the desired color scheme for your above header by clicking on the image. You can show your text in white and background in black or vice versa.
Below Header
It appears right below the Main header and allows you to show multiple elements. You’ll get three different layouts. In each layout column you can show elements like social icons, menu, search, Text, Widgets. Here styling can be done using the color scheme, height, border and many more.
Transparent Header
Transparent Header will simply merge your main header and content.
Enable Front Page Header Transparent – Check the box and enable transparent header. This will display a transparent header on the Front Page.
Enable Internal Pages Header Transparent – Check the box and enable transparent header for Special pages (like archive,404,search, shop, product page etc.)
Sticky Header (Pro)
For sticky header, Go to Customize > Layout > Header > Sticky header. The sticky header will be fixed in the top of your site when you scroll the page. You can easily access the menu from any part of the pages.
Stick Above Header – This option will enable Sticky Header in your Above header. For enabling this option, check the box.
Stick Main Header – This option will enable Sticky Header in your Main header. For enabling this option, check the box.
Stick Below Header – This option will enable Sticky Header in your below header. For enabling this option, check the box.
Menu Style (Pro)
Go to Customizer > Layout > Header > Menu Style. In Menu style you can align your Menu items add special effects in them with color.
Menu Alignment – You can align your Menu items in left, right and center positions. Just select the desired position by clicking the bar.
Link Effect – There are total 8 link effects which will help you to highlight your menu items. Whenever you hover your mouse on the item or click on the menu, the selected effect will be shown. By default, “No effect” has been set. You can also pick a color for your effect from “Link Effect Color” option.
Sidebar
For Sidebar setting, Go to Appearance > Customizer > Layout Setting > Sidebar. You can set the sidebar and its alignment as “Left”, “Right” or “No sidebar” ( it will disable your sidebar).
Default Layout – It will work for overall site. If you choose “Default” option in Page, blog, blog/archive layout then it will follow the sidebar alignment which you have set in the Default layout.
You can also set for Page, blog, blog/archive, WooCommerce.
Sidebar Width (%) – You can adjust the width of sidebar by increasing or decreasing the scroll bar.
Sticky Sidebar (Pro) – By enabling the sticky sidebar, your sidebar will scroll down with the content whenever you scroll the site.
Blog
For Blog setting, Go to Appearance > Customizer > Layout Setting > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.
Blog Archive
Grid Layout – Select the number of columns (up to 4) to display your blog posts. From one column to four columns. You can make your first post large.
Grid Layout(Pro) – Select the number of columns (up to 4) to display your blog posts. You can highlight the First Post & Sixth Post. If you want to show your blog post in Masonry grid layout, enable the Masonry Effect to show blog posts.
Right-Align Content blog layout (Pro) – In this layout, you can show Blog post content in the “right side” and featured image in “left side”. As shown in the below image.
Left-Align Content blog layout(Pro) – In this layout, you can show Blog post content in the “left side” and featured image in “right side”. As shown in the below image.
Zig-Zag blog layout (Pro) – In this layout you can show your blog posts in Zig-Zag format with content and featured image just like the below image.
Enable Masonry Effect (Pro) – A masonry layout is based on columns that display your posts vertically. It will cover all the space and show your post images and content. Width and height are not fixed in Masonry Effect. You can enable this option in Grid Layout. (Layout 1)
Add Space Between Post – Check this option and add space between two blog posts.
Remove Featured Image Space – Remove the padding between the featured images of two blog posts. Use this along “Add Space Between Post” option.
Enable Date Box – You can add the date box on the featured image. Here you will get three different styles Circle, Diamond, and Square.
Enable Drop Cap – You can enable drop cap in your paragraph.
Blog Post Content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
Post Pagination – It will provide you better navigation for your blog page. You can choose an option between “Numbered”, “Load More” and “Infinite Scroll”.
Blog Structure – You can enable or disable “Featured Image” and “Post Title & Meta”.
Blog Meta – You can disable or enable the following elements, These options will work for each post in a page-
Comment – Hide or show your comment from post by just enabling or disabling eye.
Category – Using this option you can show or hide category from blog post.
Publish date – Show or hide the publish date of your post.
Author – In blog post you can show or hide your author name.
Post Meta Separator – You can add separation to the meta tags. In a text field, you can put the desired separator you want to display between.
Blog Content Width – Blog content width allows you to define the width of the container in your blog page.
Choose “Default” value then it will automatically take width which is pre-defined. However, you can also add your custom width by just choosing the “Custom” option. As soon as you choose this option it will open a new field to enter your value. Either you can drag the bar to change the width or can enter your value.
Outside Space & Inside Space(Pro) – Add outside & inside space in blog post by adding padding & margin in them. Outside space will add margin in top, bottom, left & right side. Whereas inside space will add padding in top, bottom, left & right side. You can add margin & padding in PX, Em or percentage.
Note – Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.
Single Post
For single post setting, Go to Appearance > Customizer > Layout > Single Post. A single post will show complete blog post. It will cover all content of posts such as featured image, description, post meta, and all important links.
Single Post Content Width – Change the width of your post page by increasing/decreasing the scroll bar or just enter the value in the text box.
Single Post Structure – Disable or enable the “Featured image” and “Post title & meta” from your post page. Drag & drop the elements and change their position according to your need.
Single Post Meta – Enable or disable the “Comment”, “Category”, “Author” and “Publish date” of a post using this option. Drag & drop the elements and change their position according to your need.
Meta Separator– You can add a separator between the meta tags, just write the “separator character” in the text box and show separation in them.
Enable Drop Cap – The first large capital letter of any paragraph is known as “Drop Cap”. Enable or disable the drop cap at the beginning of the text.
Remove Featured Image Padding – It will remove the spacing or padding from the featured image. It is only applicable for single page post.
Display Author Info – Check the box, Show the “Author bio” in a single post.
Display Related Post – You can show “Related post” under your post. It will automatically display related post which have same category or tag under the main post.
Enable Share Icon(Pro) – Enable or disable the “Share icon” in your post. So that you can easily share your post on desired social media.
Inside Space(Pro) – Add inside space in blog post by adding padding & margin in them.
Footer
For this setting, Go to Appearance > Customize > Layout > Footer.
In footer area you can add important content and navigation option of the site. Show your “Copyright text” in Pro version, Terms and Conditions link or privacy policy links” are added there and more stuff like widgets, social icons etc.
Above Footer
It appears right above the footer widget and allows you to show multiple elements. You’ll get three different layouts. You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the color scheme, height, border and many more.
Space Above Footer(Pro) – Using this option you can add “top & bottom space” in your above footer. This will separate the Above footer from the content area and footer widget area.
Footer widget
In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting desired layout.
Layout 1 – Single column widget area. Widgets will occupy the 100% area of the Footer Widget.
Layout 2 – Two column widget area. Widgets will cover 50-50% area of the Footer Widget.
Layout 3 – Three column widget area. Widgets will occupy 33% widget area in each column.
Layout 4 – Four column widget area. Widgets will occupy 25% widget area in each column.
Layout 5 – You will get three column to add widget but left column will occupy 50% area and remaining two column will take 25% of the area in each column.
Layout 6 – You will get three column to add widget but left most and right most column will occupy 25% width and the center column will occupy 50% of the widget area.
Layout 7 – You will get two column to add widget, left column will occupy the 60% of area and right column will take the 40% of the area.
Layout 8 – You will get two column to add widget, right column will occupy the 60% area and left column will take the 40% of the widget area.
Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.
Widget width – Using this option you can change the width of footer area.
Content width – It will take the width of the content area which you have set in the container width.
Full width – In “full width” your footer will occupy 100% of the screen’s width. It will simply fit the edge to edge of the screen.
Color Scheme – Click on the image and Select the color scheme for your footer. You can show your text in white and background in black or vice versa.
Footer Widget Top/Bottom Padding(Pro) – You can add “Padding” in Top and Bottom side of your footer widget.
Widget Spacing (Pro) – You can add “Spacing” in Top and bottom of footer widget.
Below Footer (Pro)
It appears below main footer widget area and allows you to show desired elements like social icons, menu, search, Text, & Widgets. These elements will be displayed on the bottom-most area of the footer in your site.
Space Below Footer (Pro) – Using this option you can add “top & bottom space” in your below footer. This will separate the Below footer from the footer widget area.
Sticky Footer (Pro)
Your footer will simply attach to the bottom of your screen. Click on the bar to see the footer content.
Scroll to Top
For Scroll to Top, Go to Appearance > Customize > Layout setting > Scroll To Top. You can add back to top button on your site. This button will easily scroll your site to the top of the page in just one click on the button.
Position – You can select position of button.
Icon Color – Pick desired icon color for your button.
Icon Background Color – Pick desired color for your button background.
Icon background Radius – You can change the radius of your button by sliding scroll bar or just enter the value in text box.
Icon Hover Color – Set the hover color of icon when you put mouse over it this color will display.
Icon Background Hover Color – You can change the hover color of icon Background when you put mouse over it this color will be shown in the background.
Color & Background
For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.
Global colors
Theme Color – You can change the default color all over the site. it will cover color of elements like Date box color, Button etc.
Link Color – You can pick color for all the links present on your site.
Link Hover Color – You can pick the link hover color. Whenever you hover your mouse over the link it will show that color.
Text Color – You can pick color for the text of your site.
Title Color – You can pick color for all the title of your site.
Hamburger Colors
For Hamburger Colors option Navigate to Appearance > Customize > Color & Background > Hamburger Colors. Hamburger icon will be shown when you select “Layout 7” or “Layout 8” in your Main header.
Background Color – You can pick the any desired Background Color of your hamburger icon background.
Border Color – You can add border color in your hamburger icon.
Icon Color – Pick color for the hamburger icon using this option.
Border Radius – Using Border Radius option you add desired radius.
Header Colors (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall header which includes “Main Header”, “Above & Below header”.
Above Header –
Background Color & Image – Pick color for your above header background or you can upload image there.
Above Header Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Menu item only.
Above Header Sub Menu – Pick color for link, hovered link and Hovered Background Color. These will be applied for Above header Sub Menu item only.
Above Header Content – Pick color for text, link and hovered link. These will be applied for Above Header Content only.
Main Header –
Site Title – Pick color for your site title, title Hovered Color and Tagline. To display your Site Title from Appearance > Customizer > Site Identity.
Background Color & Image – Pick color for your header background or you can upload image there. These will be applied for Main Header Background only.
Main Header Content – Pick color header text, link and hovered link. These will be applied for Main Header Content only.
Main Menu – In Main Menu option you can pick color for each Menu item and for menu background area. Individual Color options are given for Menu and Sub menu. These will be applied for Main menu items only.
Below Header –
Background Color & Image – Pick color for your Below header background or you can upload image there.
Below Header Content Color – Pick color for link, hovered link and Hovered Background Color. These will be applied for Below header content items only.
Mobile/Pan Color –
Background Color & Image – Pick color for your Mobile/Pan background or you can upload image there.
Mobile/Pan Content Color – Pick color for link, hovered link and Hovered Background Color. These will be applied for Mobile/Pan content items only.
Sticky Header Colors (Pro)
You can do all the above setting for Sticky Header too. For setting up Sticky Header color, Go to Appearance > Customize > Color & Background > Sticky Header.
Content Colors (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Content. From this option you can pick for your overall Content of site.
Content Background Color & Image – Pick color for your content background or you can upload image there. This will be only applied when you select Boxed or Content Boxed Layout in your Container setting while in the other two layouts you’ll not see any change.
Heading – You can pick color for each and every heading tag present in your site from Heading 1 (H1) to Heading 6 (H6) tag.
Blog Colors (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Blog/Archive. From this option you can pick color for posts on blog pages and archive pages items of your site.
Blog /Archive Post –
Blog Archive Post Title Color – Pick color for Post title in blog archive page.
Blog Post Meta Color – Pick color for Post Meta of blog page.
Blog Post Meta Link Color – Pick color for Post Meta link in blog page.
Blog Post Meta Link Hover Color – Pick color for Post Meta hovered link in blog page.
Blog Post Content Color – Pick color for Blog Post Content of blog page.
Date –
First you have to enable “Date box” from Appearance > Customize > Layout > Blog. You can pick Date box background color and Date text color.
Drop Cap –
First you have to enable “Drop Cap” from Appearance > Customize > Layout > Blog. You can pick Drop Cap color from here.
Single Post/Pages (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Single Post/Pages. From this option you can pick color for single post/page items of your site.
Single Post/Pages –
Single Post/Pages Title Color – Pick color for Post title in Single blog page.
Meta Color – Pick color for Post Meta of blog page.
Meta Link Color – Pick color for Post Meta link in Single blog page.
Meta Link Hover Color – Pick color for Post Meta hovered link in Single blog page.
Content Color – Pick color for Blog Post Content of Single blog page.
Share Icon –
Pick desired color for Share Icon. First you have to enable “Share Icon” from Appearance > Customize > Layout > Single Post > Check the box “Enable Share Icon”.
Post Pagination –
By post pagination option you can go with upcoming post or previous post. You can pick color of Post pagination text and hover text color.
Drop Cap –
Pick Drop Cap color from here. First you have to enable “Drop Cap” from Appearance > Customize > Layout > Single Post > Check the box “Drop Cap”.
Sidebar Colors (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Sidebar. From this option you can pick color for Sidebar elements of your site.
Background Color & Image – Pick color for your Sidebar Content background area or you can upload image there. This will be only applied in sidebar area.
Widget Title Color – Pick color for title of widget, you’ll select for your sidebar.
Text Color – Pick color for the text of your sidebar text.
Link Color – Pick color of link in sidebar.
Link Hover Color – Pick color of hovered link in sidebar.
Footer Colors (Pro)
For this option Navigate to Appearance > Customize > Color & Background > Header. You can pick color for your overall Footer which includes “Footer Widget”, “Above & Below Footer”.
Above Footer –
Background Color & Image – Pick color for your Above Footer background or you can upload image there.
Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for Above Footer content items only.
Footer Widget –
Background Color & Image – Pick color for your Footer Widget background or you can upload image there. You can choose widgets from Appearance > Customize > Layout > Footer Widget.
Above Footer Content Color – Pick color for Widget Title, text, link and hovered link. These will be applied for Footer Widget content items only.
Below Footer –
Background Color & Image – Pick color for your below Footer background or you can upload image there.
Above Footer Content Color – Pick color for Text, link and hovered link. These will be applied for below Footer content items only.
WooCommerce Colors (Pro)
You can pick Color & Background for your WooCommerce pages from here. To create WooCommerce pages go with this Doc. For WooCommerce Color & Background setting, Go to Appearance > Customize > Color & Background > WooCommerce.
Product –
Product Background – You can pick color for Product Background area on shop page.
Title – You can pick color for product title in shop page.
Category – You can pick color for Product category in shop page.
Rating – You can pick color for Product Rating in shop page.
Price – You can pick color for Product Price in shop page.
Description – You can pick color for Product Description in shop page.
Sale Badge –
Background – You can pick color for Sale Badge Background area.
Text Color – You can pick color for Sale Badge Text.
Single Product –
Title – You can pick color for Product Title on Single product page.
Rating – You can pick color for Product Rating on Single product page.
Price – You can pick color for Product Price on Single product page.
Content – You can pick color for Product Content on Single product page.
Button Style –
Button Text Color – You can pick color for Button Text on Shop page and Single product page.
Button Background Color – You can pick color for Button Background on Shop page and Single product page.
Button Text Hover Color – You can pick color for Button Hovered text on Shop page and Single product page.
Button Background Hover Color – You can pick color for Button Hovered Background on Shop page and Single product page.
Button Border Radius – You can increase or decrease the Border radius of button.
Dropdown Cart –
Background – You can pick color for dropdown cart background.
Link – You can pick color of links for dropdown cart.
Link Hover Color – You can pick color of link hover color for dropdown cart.
Text – You can pick color of text for dropdown cart.
View Button – You can pick color of View Button box for dropdown cart.
Checkout Button – You can pick color of Checkout Button box for dropdown cart.
Typography
You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.
Font Subsets –
Go to Appearance > Customizer > Typography > Font Subsets.
Google font families support every subset. With this option you’ll get subsets like Latin, Latin-ext, Cyrillic, Cyrillic-ext, Greek, Greek-ext, Vietnamese and Arabic. Without these special characters won’t be displayed at your site. Just check the desired subset and enable it on your site.
Base Typography
Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography in your site. Using different fonts on your site make it a creative website.
For Typography, Go to Appearance > Customizer > Typography > Base Typography.
Body – Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
Title – Choose font of your title. This will set typography for overall site titles. You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
Content – This will set the overall typography of single page from heading H1 to H6.
Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.
WooCommerce Typography (Pro)
Shop – This panel will work for Woo shop pages. You can add typography in Shop page.
Product Title – Set typography in the Product title of Shop page.
Product Price – Set typography in the Product Price of Shop page.
Product Content – Set typography in the Product Content of Shop page.
Single Product – This panel will work for Woo shop pages. You can add typography in Shop page.
Product Title – Set typography in the Product title of Single Product.
Product Price – Set typography in the Product Price of Single Product.
Product Content – Set typography in the Product Content of Single Product.
Note – You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of Shop page and Single product elements.
Header Typography (Pro)
Above Header – You can set the typography of above header content using this option.
Main Header – You can set the typography of main header content using this option.
Below Header – You can set the typography of below header content using this option.
Note – You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of Above Header, Main Header and Below Header elements.
Button Typography (Pro)
You can set the typography for site button text. You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of the call to action site buttons.
Blog Typography (Pro)
Blog/Archive – You can set the typography of Blog/Archive page content.
Blog Title – Set the typography of blog title in Blog/Archive page.
Post Meta – Set the typography of post meta text in Blog/Archive page.
Content – Set the typography of content in Blog/Archive page.
Single Page – You can set the typography of Single Page content.
Blog Title – Set the typography of blog title in Single blog Page.
Post Meta/Pagination – Set the typography of post meta text in Single blog Page.
Content – Set the typography of content in Single blog Page.
Note – You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of Blog/Archive and Single Page elements.
Sidebar Typography (Pro)
Widget Title – Set the typography for Widget Title of sidebar.
Widget Content – Set the typography for Widget Content of sidebar.
Note – You can set the typography for Sidebar. You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of Sidebar elements.
Footer Typography (Pro)
Above Footer – You can set the typography of above footer content using this option.
Footer Widget – You can set the typography of Footer Widget content using this option.
Below Footer – You can set the typography of below footer content using this option.
Note – You can set the typography for Footer elements. You can set Font Family, Text Transform, Font-Size, Line-Height and Letter-Spacing of Sidebar elements.
Site Button Setting
For Site Button, Go to Appearance > Customize > Site button. Site button allows you to change the color of each button.
Button Text Color – You can pick desired color for your button text.
Button Background Color – You can choose desired color for your button background.
Button Text Hover Color – Choose the text to hover color for your button text, whenever you take your mouse over the button it will show the button text hover color.
Button Background Hover Color – Choose the background to hover color for your button, whenever you take your mouse over the button it will show the button background hover color.
Button Border Radius – For button border radius Increase or decrease the scroll bar and change the border radius of a button. It will change the outer border’s edge of the button.
Pre Loader
For Pre loader, Go to Appearance > Customizer > Pre Loader.
For enabling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site.
You can upload a GIF or an image as a preloader or you can pick background color instead of image.
Social Icon Setting
For adding social profile links, Go to Appearance > Customize > Social icon.
You can show these social icon in the header as well as at the footer. To show social icons just put the likns in the text area.
By default it will follow the color scheme but You can also set the “original color” for each social icon.
Search icon & Search box
For Search icon, Go to Appearance > Customize > Search > Search icon.
Icon Font size – You can adjust the size of icon using this option. Enter the value in the text box or slide the bar.
Icon Radius – You can adjust the radius of an icon. Enter the value in the text box or slide the bar.
Icon Color – Pick any desired color for icon from the color bar.
Icon Border Color – Using this option you can pick any desired color for icon border.
Icon Hover Color – Pick any desired color for icon hover. ( When you hover the mouse on the icon it will show your selected color.
Icon Background Color – Pick any desired color for icon background.
For Search box. Go to Appearance > Customize > Search > Search box.
Width – You can adjust the width of search box. Enter the value in the text box or slide the bar.
Height – You can adjust the height of search box. Enter the value in the text box or slide the bar.
Border Radius – You can adjust the border radius of box. This will change the outer border edge of the box. You can increase or decrease the border-radius or enter the desired value in the text box.
Placeholder Font Size – This option will help you in adjusting the font size of the placeholder text. slide the scroll bar or enter the desired value.
Icon Size – Change the size of the icon in a box by increasing or decreasing the scroll bar or enter the value.
Placeholder Text – Write your Placeholder Text in the text box.
Search Box Background Color – Pick desired color for your Search Box Background.
Placeholder Text Color – Pick desired color for your Placeholder Text.
Border Color – Pick desired color for your search box Border.
Icon Color – Pick desired color for search box icon.
WooCommerce
For WooCommerce setting. Go to Appearance > Customize > WooCommerce
First Setup your WooCommerce. Go to your WP dashboard, Install WooCommerce plugin from WordPress.org and activate it.
For WooCommerce General setting. Go to Appearance > Customize > WooCommerce > General
On Sale Badge –
You can show a “circle”, “diamond” and “square” on the upper left side of your product. It will automatically display alongside with the product which is on sale.
Cart –
Cart shows the number of the product you have added in your cart for the final purchase. From this option, You can display Cart Icon in the Menu.
Visibility – You can disable or enable cart icon from your site. You can choose the desired option from the drop-down box.
Show as – You can display your Cart as Icon, Icon & Total (Price total of items you have added in your cart), Icon & Cart count (Total number of items added in cart) or Icon & Cart Count & Total.
Drop-down Color scheme – Choose desired color scheme for your Drop-down Cart.
Note – To create “Cart Page ” Go to Dashboard > Pages > Add New page > Put this Short-code “[woocommerce_cart]” in the editor. Publish it. This will create a cart page on your site.
Checkout Page (Pro)
For enabling Distraction Free Checkout page, just go to Appearance > Customize > WooCommerce > Checkout Page and check the box. With this option the menu in the header and the footer of the website disappears on the checkout page.
Cart Page (Pro)
For enabling Distraction Free Cart page, just go to Appearance > Customize > WooCommerce > Cart Page and check the box. With this option the menu in the header and the footer of the website disappears on the cart page. You can also set the number of Cross Sell Product to show with columns.
Shop page
For Shop Page. Go to Appearance > Customize > WooCommerce > Shop Page
Set the shop page first, Create shop page, Navigate to WooCommerce tab > Setting > Products. Now click on “select a page” choose your shop page and save it.
Products per row – You can enter the number of products which will be displayed in each row. For example, if you set the number of products as “3”, in each row “3” products will be displayed.
Rows per page – You can enter the number of rows you want to show in each page. For example, if you set the number of rows as “4”, on each page “4” row of products will be displayed.
Product Image Hover Style – You can choose the desired hover style and show your product in a unique way. You can display your product in “Zoom” or as “Swap” hover style.
Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.
Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.
Product Structure – Here you can Disable or Enable the elements like “Category”, “Title”, “Ratings”, “Price”, “Add to cart” and “Short description”. You can also change their position by drag & drop the desired element.
Product Content Alignment – You can Align your product content “Left”, “Right” or “Center”. Click on the tab and set the desired position.
Product Box shadow – You can highlight your product with a Shadow in the background. Set product box background shadow by just scrolling the bar or enter the value in the text box.
Product Box shadow on Hover – Set product box on hover shadow by just scrolling the bar or enter the value in the text box. Whenever you hover your mouse on the product it will show a shadow in the background.
Enable Quick View – (Pro) By enabling quick view it will add a Quick view badge to the product image and will show a popup on its click instead of redirecting a visitor to the product single page.
Enable Off Canvas Sidebar – (Pro) By enabling Off canvas sidebar add WooCommerce widgets like a filter, recent products, category etc in a hidden sidebar. Which will display using the filter button. This option works very well with all the responsive devices too.
Single product
You can set up your single product. For single product, Go to Appearance > Customize > WooCommerce > Single product setting.
Content Width – You can adjust the content area of your single product page. Increase or decrease the width by scrolling the bar or just enter the value in text box.
Product Content Alignment – You can align your content “left”, “right” or “center”. Click on the tab and set desired position.
Product Structure – You can Disable or Enable the elements like “title”, “ratings”, “price”, “add to cart”, “meta” and “short description”.Change their position by drag & drop.
Product Description Tab – You can show a short description of the product. Write product short description in the product editor.
Product Tab Layout – You can show your product short description in horizontal or vertical view in tablet & mobile devices.
Up Sell Product – These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality. Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.
Related Product – Related product are the items which are similar to the product your customer is viewing. Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.
White Label (Pro)
With White label, you can rename or present your product and take full control over branding. It is mostly used by Agencies and developers who want to make websites for their clients.
For Enabling the setting in your site, Go to Dashboard > Appearance > Bevro Options > White Label Option > Click on “Setting”.
Once you click on the Setting, it will open a panel. In this panel, you can change each and every detail related to product branding. It will replace Bevro theme, Bevro Pro Plugin Name, Screenshot, Agency Author name, Agency Author URL and the Plugin Description.
FYI – After doing setting in the white label, the whole “Setting panel” will be hidden. If you wish to do any changes in it, just go to Plugin > Bevro plugin, Deactivate it and again Activate. Now you can see the setting panel on your dashboard and make changes in it again.
