4. Elements

SECTION 01Article Item

Article Item is added to Column element, and it defines layout of individual posts in Hero Posts template.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/07/article-item.png

General Tab

Content align – select the alignment of the post’s content

Content vertical align – select the vertical align of the content

Title tag – select the H tag for this post’s title

Title size – select the post’s title size

Image Tab

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/07/image-tab.png

Image position – select where post’s featured image will display relative to other post data. Note that you can change its position depending on a device / screen size.

Base image size – select image’s base size

Lazy load image – check if you want post’s featured image to be lazy loaded. Note that if you are already using lazy load feature from some plugin, such as Jetpack, you don’t need to check this option

Image border radius – select if you want image to have rounded corners. If you set it to 0% the image will be square

Image overlay background type – select overlay type for the image

Start / End color – set the overlay percentage

Show In Tab

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/05/article-item-show-in.png

Excerpt – select if the post excerpt will be visible. Additionally, you can select how many lines of the text will be visible.

The following checkboxes allow you to choose which post information should be visible on the frontend.

They can be displayed on several different positions. Although note that the appearance depends on selected image position as well.

The positions are:

  • Top left corner
  • Top right corner
  • Supertitle
  • Title
  • Subtitle
  • Bottom left corner
  • Bottom right corner
  • Image top left corner
  • Image top right corner
  • Image center
  • Image bottom left corner
  • Image bottom right corner

The following post info can be shown in Hero Posts:

  • Title
  • Categories
  • Tags
  • Author name
  • Author photo
  • Date
  • Time
  • Date & Time
  • Time ago
  • Comments number
  • Post format
  • Reading time
  • Sticky mark

Design Tab

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/07/design-tab.png

Max lines in title – select how many lines of post’s title will be visible in Hero Posts

Content text color – select title and excerpt text color

Content text background color – select title and excerpt text background color

Post data style – select if post data (date, time, etc.) will show with icon next to them or not
*Note that icons are predefined in the plugin, and cannot be changed.

Post format icons options – select if post format’s icon(s) will display

Categories style – select how post categories will display

Hover Tab

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/hover-tab.png

Image overlay opacity from / to – set the image overlay percentage when image is not hovered, and percentage it will change to when you hover over it

Image blur from / to – select the image blur (in pixels) when image is not hovered, and blur value it will change to when you hover over it

Image zoom from / to – set the image zoom value when image is not hovered, and zoom value it will change to when you hover over it

Move content by – select how many pixels the content will move (up and down) when you hover over image

SECTION 03Repeater

This element allows you to display multiple posts / elements with previously defined settings.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/repeater.png

Repeat count – select how many times post / element will repeat settings

Hide elements – select if the first / last separator will be visible or not

The following elements can be added to Repeater element.

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/repeater-elements.png

Please note – if you add Article Item element to the Repeater, it will show different posts (from newest to older ones), and they will all have the same settings.

If you add elements such as Banner or HTML, they will be duplicated and you’ll need to change them manually.

SECTION 04Slider

This element displays posts as a slider.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/07/slider.png

Slides per view – select how many slides will be visible at once (on desktop, and smaller devices)

Space between slides – if you previously selected to show multiple slides, here you can set spacing between them

Animation effect – select how the slides will move. Note that if you select cube or fade, slider will automatically display only one post at a time.

Autoplay delay – select the speed of slides autoplay, or set it to 0 to disable autoplay

Custom Swiper additional params – additional settings for slider

Navigation style – select the navigation arrows style (filled, outline, clean…)

Navigation size – select the navigation arrows size

Navigation vertical position – select the vertical alignment of the arrows

Navigation horizontal position – select the horizontal position of the arrows (inside or outside the slide) on desktop and smaller devices

Pagination style – select if the slider will have pagination. Pagination displays at the bottom of the slides

Pagination size – select the size of pagination

In the Slider element you can add Slide or Repeater element.

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/slider-elements.png

If you add Repeater first, you can then add Slide item to it and set it to repeat multiple times.

Once you add Slide element, you can add following elements to it.

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/slide-items.png