SECTION 01Hero Posts Panel

After Hero Posts is installed and activated, you should see Hero Posts panel on your dashboard.

Note that Hero Posts plugin only works with default Blog post type. Custom post types are currently not supported.

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/03/dashboard.png

In order to select one of the templates, first click on Add New option in the plugin panel.

Once you click on ‘Add New’ option, you will see box with big ‘+’ button. Click on it, and pop up with predesigned templates will show. Select template you want to use / edit.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/03/select_template.png
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/06/template.png

SECTION 02Hero Posts Container

All Hero Posts elements are added to this container element. Here are its options:
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/03/container-options.png

Hero Posts container has several commands, such as:

  • Add – add new element to the container.
  • Edit – edit Hero Posts container settings such as color, shape, etc. (see section below)
  • Duplicate – duplicate an element or entire container.
  • Copy – copy an element or entire container.
  • Copy + – copy several elements one after the other.
  • Paste – paste previously copied element / container.
  • Delete – delete an element or entire container.

When you click to edit Hero Posts container, you will see the following options.

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

General Settings

Order by – select how the posts will be ordered

Order direction – select if the order will be ascending or descending

Sticky posts – choose if you want sticky posts to be visible

Categories – add category slugs of categories you want to show

Tags – add tag slugs of tags you want to show

Data filter – enter time string of posts you want to show

Post formats – add specific post formats you want displayed (audio, video)

Taxonomies – enter post taxonomies (eg tag:highlight,michael-jackson;custom-taxonomy:slug1,slug2)

Authors – enter ID of authors whos posts you want to show

Design Settings

Base gap – choose gap size between the posts

Accent color – select accent color for details in the hero posts template

Custom Settings

Custom ID – assign custom ID to the template

Custom class – add existing or assign new class

Custom style – change some of the predefined settings (more info on this link)

SECTION 03Row and Column

Once you add Hero posts element, you need to add Row and Column elements to it.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/04/row-element.png

Within the Row element, you can select the gap between columns / posts.

Once you add Row element you can select how many columns it will have.

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

Column Settings

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

Column order – if the Row element contains several columns, you can set their order on desktop and responsive devices

Content align – select the alignment of the posts’ content (on desktop and mobile devices)

Vertical align – select the vertical align of the content

Items height – select if the height will auto adjust or all items will keep the same height

Elements

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

The following elements can be added to the Column:

Article item – template for individual posts

Banner – placeholder for the banner code

HTML – classic editor

Inner row – allows you to create multiple inner rows and inner columns within Column element

Repeater – repeat content as many times as possible

Separator – adds space between elements, it can contain a line

Slider (Swiper) – Hero posts slider element

You can find more detailed explanation of each individual element on this link.

SECTION 04How to add Hero Posts element

There are two ways to add Hero Posts template to the page.

If you are using one of the following page editors – Bold Builder, Elementor, Fusion, or Gutenberg, you can find BoldThemes Hero Posts element on the list of all elements.

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

Then you can select previously created template from the dropdown.

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

Other option is to copy template’s shortcode to the Text element of your page editor, or default WP text editor.

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

SECTION 05Additional Settings

In Settings >Reading panel on your dashboard you can find the following two settings.
https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/05/hero-posts-additional-settings.png

Hero posts reading speed – here you can enter the average reading speed (words per minute)

Hero posts image replacement – Hero posts will use given image url to generate dummy images for posts without featured image. Use %1$s for width, and %2$s for height.