Features Block 01

Take a look at the front-end preview of Features Block 01 Widget from Maxhost Live Demo:

Using Features Block 01 in WPBakery

Go to Pages -> Add New on your WordPress Admin Dashboard and click on the ‘WPBakery Page Builder‘ button given at the top of the page. Now, click on the ‘Frontend Editor‘ button, and you will have a screen like below:

Features Block One Content

Click on the ‘Add Element‘ button and you will find a window as shown in the following image:

Under the ‘by Fluent-Themes Shortcodes’ tab, you will get all the custom WPBakery elements created for Maxhost theme.

Choose ‘Features Block 01’ element from there. You will get the ‘Settings‘ window from where you can set your content of Features Block 01 as you need.

Settings

Features Block One Left Content
  • Change Parallax Background Image– Put the URL of the image to Change parallax background image.
  • Left Heading Line-1– Left side Heading Line-1.
  • Left Heading Line-2– Left side Heading Line-2.
  • Left Side Image– Attach the left side image of this block.
  • Left Side Bullet Points– Start each point on new line.
  • Right Heading Line-1– Right side Heading Line-1.
  • Right Heading Line-2– Right side Heading Line-2.
  • 1st Domain Name– Domain Name.
  • 1st Button Label– Button label.
  • 1st Button URL– Button URL.
  • 2nd Domain Name– Domain Name.
  • 2nd Button URL– Button URL.
  • 3rd Domain Name– Domain Name.
  • 3rd Button URL– Button URL.
  • 4th Domain Name– Domain Name.
  • 4th Button URL– Button URL.
  • 5th Domain Name– Domain Name.
  • 5th Button URL– Button URL.
  • Crossed Shaped Section Top– if yes, then check tick mark in the box below.
  • Crossed Shaped Section Bottom– if yes, then check tick mark in the box below.

Row Settings

General Tab

WPBakery Row Settings – Maxhost
  • Row Stretch – Select stretching options for row and content (Note: stretched may not work properly if parent container has “overflow: hidden” CSS property).
  • Columns Gap – Select gap between columns in row.
  • Full Height Row – If checked row will be set to full height.
  • Equal Height – If checked columns will be set to equal height.
  • Reverse Columns in RTL – If checked columns will be reversed in RTL.
  • Content Position – Select content position within columns.
  • Use Video Background? – If checked, video will be used as row background.
  • Parallax – Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
  • CSS Animation – Select type of animation for element to be animated when it “enters” the browsers viewport (Note: works only in modern browsers).
  • Row ID – Enter element ID (Note: make sure it is unique and valid according to w3c specification).
  • Disable Row – If checked the row won’t be visible on the public side of your website. You can switch it back any time.
  • Extra Class Name – Style particular content element differently – add a class name and refer to it in custom CSS.
  • Want to have Top Padding? – Input top padding in pixel (i.e 50px).
  • Want to have Bottom Padding? – Input bottom padding in pixel (i.e 50px).
  • Want to have Left Padding? – Input left padding in pixel (i.e 50px).
  • Want to have Right Padding? – Input right padding in pixel (i.e 50px).

Design Options Tab

  • Border Color – You can select border color whatever you want.
  • Border Style – You can select border color whatever you want.
  • Background – Background Image can be uploaded from from your system or Media Library.

Column Settings

General Tab

  • Use Video Background – If checked, video will be used as row background.
  • Parallax – Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
  • CSS Animation – Select type of animation for element to be animated when it “enters” the browsers viewport (Note: works only in modern browsers).
  • Element ID – Enter element ID (Note: make sure it is unique and valid according to w3c specification).
  • Extra Class Name – Style particular content element differently – add a class name and refer to it in custom CSS.ustom.
  • Position – here you can choose between Absolute and Fixed position.

Design Options Tab

  • Border Color – You can select border color whatever you want.
  • Border Style – You can select border color whatever you want.
  • Background – Background Image can be uploaded from from your system or Media Library.

Responsive Options

  • Width – You can select column width from the Drop Down.
  • Responsiveness – Adjust column for different screen sizes. Control width, offset and visibility settings.