Magazine Blocks by BlockArt

Gutenberg Editor, Magazine & Newspaper Website Builder, Page Builder with Posts Blocks

Featured Posts

The Featured Posts Block is suitable for displaying the posts of your site in the horizontal layout, with the first post having the bigger featured images with the post title followed by the smaller one with, the smaller featured image and post title.

Adding Featured Post Block
Adding Featured Post Block

After you have chosen the Featured Posts Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:

General #

The general settings consist of eleven options, as listed below:

General #

  • Preset – It refers to the way in which the blog posts are organized or rearranged. Currently, the Featured Posts block provides two layouts with various styles on each layout for displaying the post.

If you choose Layout 1, it allows you to choose the number of columns. You can select either a single or two columns.

Preset Setting

Query #

It consists of the settings related to the posts that are displayed on the front end. It allows you to choose posts depending on Category, Tag, Date, Title, Authors, etc.

Also, you can sort the posts in Ascending or Descending order. Likewise, you can choose the number of posts to be displayed.

Moreover, you can also exclude the specific category to be displayed.

Query Setting

Heading #

The Heading area refers to the Title that gets displayed at the top of the posts and comes with the following option to customize it:

  • Enable – Switch the Toggle to the right area to enable the heading. Enabling the option will display the heading on your end.
  • Preset – The Preset on the Heading refers to the styles used to display the heading area. Currently, it has two layouts with various styles on each.
Heading Setting

Post Box #

The Post Box refers to the area of each individual post that gets displayed. It comes with the following options listed below:

  • Boxed – It displays the post content within a box.
  • Border – It displays the post content inside the border.
Post Box Setting

Image #

The option is for customizing the images of the posts that appear while using the blocks. The options are listed below:

  • Enable – Switch the Toggle to the right area to enable the featured image. Enabling the option will display the Featured Image of each post.
  • Animation – It adds the animation effect while the featured image is being loaded on your end.
Featured Image Setting

Post Title #

The options work for the post title of the Featured Posts block and provide the following options:

  • HTML Markup – It changes the heading tag for the post title. Under the HTML Markup option, select the required markup for your post title. You can set your post title to be in H1 – H6.
Post Title Setting

Header Meta #

It refers to the metadata appearing in the header area of each post. Currenlty, the post category, and comments are displayed as the header meta and comes with the following option:

  • Category – Switch the Toggle to the right area to enable the category. Enabling the option will display the Category on the header area.
  • Comment – Switch the Toggle to the right area to enable the comment icon. Enabling the option will display the Comment counter in the header area.
Header Meta Setting

Meta #

Meta refers to the metadata displayed over the post, such as Author, Date, etc. With the Featured Posts block, you’ll get the Author and Date meta below the post title, which comes with the following customization options:

  • Position – It allows changing the position of Meta. You can display the Meta above or below the post title.
  • Author – Switch the Toggle to the right area to enable the Author. Enabling the option will display the Author’s name and icon.
  • Date – Switch the Toggle to the right area to enable the Date.
Meta Setting

Excerpt #

An Excerpt is a summary or brief description of a post that provides readers with a quick overview of the content, allowing them to decide whether they want to read more. The Excerpt displays below the meta with the following options:

  • Enable – Switch the Toggle to the right area to enable the Excerpt. Enabling the option will display the Excerpt text on your end.
  • Limit – By default, the Featured Posts blocks limit excerpts’ length upto 20 words. You can increase or decrease the excerpt length on your preference.
Excerpt Setting

Read More #

The Featured Posts Block allows displaying the Read More tag on the post. Clicking the read more tag will display the full contents of the post. It comes with the following options:

  • Enable – Switch the Toggle to the right area to enable the Read More. Enabling the option will display the Read More tag below the excerpt text.
  • Text – It allows you to change the read more label. By default, the label is Read More, but it can be changed.
Read More Setting

Pagination #

Pagination is a way of splitting the contents of your site into multiple pages. Featured Posts Block allows Pagination on the site with the options listed below:

  • Enable – Switch the Toggle to the right area to enable the Pagination on your site. Enabling the option will display the Pagination below the page.
  • Alignment – It sets the alignments for the Pagination. You can set the alignments as LeftCenter, and Right. Moreover, you can also set the pagination position to be different depending on the device, i.e., desktop, tablet, or mobile.
Pagination Setting

Style #

Under the style settings, you’ll find the following options available:

Post Box #

  • Background – It sets the background color for the post box. You can change the visual appearance of the background by changing its color or adding an image.
Post Box Background Color
  • Box Shadow – It adds a shadow effect around the box. When you enable the Box Shadow option, you will get the following customization options:
    • Color – It allows you to select the appropriate box-shadow color for the post box.
    • Horizontal-X – It displays the box shadows in the horizontal position.
    • Vertical-Y – It displays the box shadows in the vertical position.
    • Blur – You can set up the blur value of the box shadows appearing.
    • Spread – The shadow’s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site’s requirements.
    • Position – You can set the position of the box shadows as Inset or Outline.
Post Box Box Shadow

Highlighted Post #

The Highlighted post in the Featured Posts Block refers to the first post with bigger featured images and other content. It comes with the following styling options:

  • Image Height – It determines the size of the Highlighted Post Image. Moreover, you can also set the size of the image to be different depending on the device, i.e., desktop, tablet, or mobile.
Highlighted Post Image Height
  • Typography – It controls the highlighted post-title typography, such as font family, weight, font size, line height, and other styling properties. The options are listed below:
    • Font Family – It allows you to choose the appropriate Font Family for the post title.
    • Weight – It refers to the thickness or boldness of the post title.
    • Size – It controls the font size of the post title.
    • Line Height – It manages the space above and below the post title.
    • Letter Spacing – It controls the amount of space between characters in the text.
    • Style – Using the property, you can set the post title to be Italic or Oblique.
    • Transformation – It changes the case of the text such as lowercase, uppercase, and capitalize.
    • Decoration – The styling is applied to the post title to make it more visually appealing. The options include underline, overline, and line through.
Highlighted Post Post Title Typography

Image #

Under the setting, you can change the width and height of the image appearing on the Featured Posts Block. Depending on the responsive device i.e desktop, tablet, and mobile, you can set the width and height.

Heading  #

  • Heading Color – It allows you to change the color of the heading text in Normal and Hover modes.
Change Heading Text Color
  • Border Color – It allows you to change the color of the heading Border.
Change Heading Border Color

Post Title  #

  • Typography – It controls the Post title Font Family, Weight, and Font Size.
  • Text Color – It allows you to change the color of the post title on Normal and Hover Mode.
Change Post Title Color and Typography

Header Meta #

  • Text Color – It allows you to change the color of the Meta Text in Normal and Hover modes.
  • Background – It sets the background color for the Header Meta. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.
  • Padding – It adjusts the space of header meta elements.
  • Border – It customizes the Border area added around the Header Meta and comes with the following options:
    • Type – You can set the border type as SolidDottedDashedDouble, etc. Moreover, select the border type to be None if you do not want to add any borders on the meta area. When you select none, you will be given the following option:
      • Radius – It allows you to fix the radius value to make the round corners for the column border.
    • Box Shadow – When you enable the Box Shadow option, you will get the following customization options:
      • Color – It allows you to select the appropriate box-shadow color for the header meta.
      • Horizontal-X – It displays the box shadows in the horizontal position.
      • Vertical-Y – It displays the box shadows in the vertical position.
      • Blur – You can set up the blur value of the box shadows appearing.
      • Spread – The shadow’s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site’s requirements.
      • Position – You can set the position of the box shadows as Inset or Outline.

However, if you select the border type to be other than none, two more options will be added. The option is listed below:

  • Border Color – It allows you to choose the appropriate border color for the header meta area.
  • Size – It provides the option to select the border size.

Note – You can apply the border settings option differently for Normal and Hover Modes.

Change Header Meta Styling

Meta #

  • Icon Color – It allows changing the icon’s color representing the metadata.
  • Link Color – It allows changing the color of the link representing the metadata. You can change the link color in Normal and Hover modes.
Change Meta Styling

Excerpt #

  • Text Color – It allows you to set the excerpt text color.
  • Margin – It manages the margin value of the excerpt text.
Change Meta Styling

Read More #

  • Text Color – It allows you to change the color of the Read More label on Normal and Hover Mode.
  • Background – It allows you to add the background for the Read More tag. You can add an image or use the color to set the background. Moreover, you can set the different background colors on Normal and Hover Modes.
  • Spacing – It manages the spaces in between the content appearing above the Read More tag.
  • Padding – It sets the padding value for the Read More tag.
  • Border – It customizes the Border area added around the Read More tag.
Change Read More Styling

Pagination  #

  • Text Color – It allows you to change the color of the pagination on Normal and Hover Mode.
  • Background– It allows you to add the background for the Pagination. You can add an image or use the color to set the background. Moreover, you can set the different background colors on Normal and Hover Modes.
  • Padding – It sets the padding value for the Pagination.
  • Border – It customizes the Border area added around the Pagination.
Change Pagination Styling

Advanced #

The Advanced section consists of four options for the Featured Posts block.

Spacing #

Under the spacing section, you can find the following options available:

  • Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
  • Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Manage Block Styling

Z-Index #

It allows you to set the priority of the Featured Post block according to the site requirement.

Responsive Condition #

Using the option, you can enable/disable displaying the block on various screen sizes:

Hide on Desktop – It hides the Featured Posts block on the Desktop.

Hide on Tablet – It hides the Featured Posts block on Tablet.

Hide on Mobile – It hides the Featured Posts block on Mobile.

Manage Responsive Condition

Advanced #

Under the option, you can set the CSS ID and Classes for this particular Featured Posts block. The available options are listed below:

  • Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
Block HTML Setting
  • CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
  • Additional CSS Class(es) – It allows you to add a CSS Class(es) to your block, letting you write custom CSS to style this particular block. On a page, there might be two Featured Posts blocks, and you want to make some changes on one Featured Posts block but leave another Featured Posts block untouched. In this case, you can define the CSS classes for the one Featured Posts block on which you want to make some changes. 

Moreover, you can add more than one class separately by commas.

For example, if you want to change the width of the Featured Posts block only, you can add the class featured-width under the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:

.featured-width{
width:70%
}

Upon adding the code, it will make the changes only to this particular Featured Posts block and not other Featured Posts blocks.

Powered by BetterDocs

Scroll to top