In this documentation, we will discuss the customization of the Post Content block, brought to you by Zoloblocks.

Enable the Post Content Block

To use the Post Content block from Zoloblocks, you must first enable the block.

1. Go to WordPress Dashboard > Zoloblocks Plugin dashboard.
2. Then Click the Blocks Tab.
3. Search by the Post Content block Name.
4. Enable the Post Content block.

How and Where use the Post Content Block

The Post Cotent block is designed exclusively for Single pages and requires a Block Theme for functionality.
In regard to, we offer the Axvart Theme, which is compatible with the Post Content block. If you’re a ZoloBlocks Pro user, the Axvart Theme is included with the plugin for seamless use. If you want then you also can use another block Theme for using the Post Content block.
Lets explore the Post Content block.

Go to WP dashboard > Appearance > Add New Theme > Add the Theme > Install and Activate the Theme.
Please read the doc of how to install and activate the Axvart Theme from here.

Now Go to Appearance > Editor > All Templates > set the default Single Post Template and edit the template to your working demand by using Zoloblocks Single blocks like Post Content, Post Featured image, Post Meta, Post Content, Post Comments Form etc. Here we show how to add and customize the Post Content Block.

Select Single Posts and Start editing.

Adding the Post Content Block

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Post Content block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Post Content block.
3. After on the right side, Click on the Block. Then the Post Content details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

Customize the layout by following controls,

1. Inherit Theme Layout: Enable the switcher to inherit the layout from themes.
2. Alignment: Set the alignment for the content. Content will be align by following ( Left, Middle, Right, Stretch ).

Style Tag Section

Go to Basic > Style Tag

Set the style tag for the content,

1. Heading: Heading style will appear by default.

Edit Style Tag

2. Click on the Up Icon and toggle bar will open with controls.
3. Type: Set the type for the style tag ( e.g.: Heading ).
4. Heading Tag: Select the Heading tag. ( H1 – H6 ).

Add New Image Style Tag

1. Click on the ” + ” Icon it will add new style tag.
2. Image: Newly added image will appear on the style tag.

3. Type: Set the Image type for the style tag (e.g.: Image ).

Add New Link Style Tag

1. Click on the ” + ” Icon it will add new style tag.
2. Type: Set the Link type for the style tag (e.g.: Link ).

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Content Section

Go to Style > Content

Normal State

Set styles by following the controls on the content section, The changes will appear normally.

1. Color: Set the color for the content tag. Choose color form the color plate.
2. Typography: Set the typography for the title Set the typography for the Content. Text Size, Font, Weight etc options .
3. Text Shadow: Set the shadow effects for the Content.
4. Text Stroke: Set the strokes for the text.

5. Background: Select the background for the content.
6. Padding: Make the inner spacing for the content.
7. Margin: Set margin for outer space.

8. Border: Set the border for the content.
9. Box Shadow: Make the Box shadow for the content.
10. Border Radius: Make the border corner edges rounded by setting the border.

Hover State

The changes will appear on the hover state.

1. Color: Set the color for the content.
2. Background: Set the background color for the content.
3. Border: Set the border of the content.

4. Box Shadow: Make the box shadow for the content.
5. Border Radius: Make the border radius for the corner edges rounded.

Image Section

Go to Style > Image

Normal State

Make the image stylish by following the controls,

1. Width: Set the width for the image.
2. Height: Set the height for the image.
3. Background: Define the background for the image.
4. Padding: Make the padding for the image.

5. Margin: Adjust the margin for the image. It’s for outer space.
6. Border: Set the border for the image.
7. Border Radius: Make the border radius by following.
8. Box Shadow: Apply the box shadow for the image.
9. CSS Filters: Configure the CSS Filters to make image more customisable, Here’s included the Brightness, Contrasts, Saturate, Hue Rotate options.

Hover State

The changes will take effect when the mouse hovers over the image.

1. Border Color: Set the border color for the image.
2. Box Shadow: Make the box shadow for the images.
3. CSS Filters: Configure the CSS Filters to make image more customisable, Here’s included the Brightness, Contrasts, Saturate, Hue Rotate options.
   

Heading Section

Go to Style > Heading

Normal State

1. Color: Set the color for the heading content.
2. Typography: Select the typography for the heading.
3. Text Shadow: Apply the text shadow effects for the heading.
4. Text Stroke: Select the text stroke for the heading.
5. Margin: Adjust the margin for the heading.

Hover State

The changes will appear on mouse hover,

6. Color: Choose the color for the heading.

List Section

Go to Style > List

Normal State

1. Color: Choose the Test color for the Link.
2. Typography: Select the typography for the title of the Button, Text Size, Font, Weight etc options .
3. Background: Set the background for the Link Button.
4. Padding: Adjust the inner padding of it.

5. Margin: Adjust the margin for the link button.
6. Border: Define the border for the button.
7. Box Shadow: Make the box shadow effect for the button.
8. Border Radius: Make the border corner edges rounded by following.

Hover State

The changes will appear on mouse hover.

9. Color: Specify the text color for the link.
10. Background: Define the background for the link.
11. Border Color: Set the border color for the link items.
12. Box Shadow: Apply a box shadow effect to the link.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

The Demo and Video Tutorial will Coming Soon!

Thanks for being with us!