Blog Post 02

Take a look at the front-end preview of Blog Post 02 Widget from Maxhost Live Demo:

Using Blog Post 02 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:

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 ‘Blog Post 02‘ element from there. You will get the ‘Settings‘ window from where you can set your content of Blog Post 02 as you need.

Settings

  • Change Parallax Background Image– Put the url of the image to Change parallax background image.
  • Heading Line-1– in this field, you need to type the Heading Line 1.
  • Heading Line-2– in this field, you need to type the Heading Line 2.
  • Number of Posts– Number of Posts to Show will be written here.
  • Crossed Shaped Section Top– Choose ‘Yes’ if you want to make your section’s top Crossed Shaped.
  • Crossed Shaped Section Bottom– Choose ‘Yes’ if you want to make your section’s bottom Crossed Shaped.

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.

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.