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

Enable the Post Comments Form Block

To use the Post Comments Form 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 Comments Form block Name.
4. Enable the Post Comments Form block.

How and Where use the Post Comments Form Block

The Post Comments form 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 Comments Form 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 Comments Form block.
Lets explore the Post Comments Form 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 Comments Form, Post Featured image, Post Meta, Post Comments Form, Post Comments Form etc. Here we show how to add and customize the Post Comments Form Block.

Select Single Posts and Start editing.

Adding the Post Comments Form 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 Comments Form 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 Comments Form block.
3. After on the right side, Click on the Block. Then the Post Comments Form 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

1. Comment Title: Enable the switcher to show the comments title.
2. Comment Count: Enable the switcher to show the count.
3. Comment Form: Enable it to show the Comment Form.

4. Form Title: Set the Form Title.
5. Cancel Reply: Set Cancel reply Text.
6. Login Text: Set Login Text.
7. Logout Text: Set the Logout text.
8. Button Text: Set the Button text.

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.

Comment Heading Section

Go to Style > Comment Heading

Set the style for the comment heading section,

1. Color: Set the color for the comment heading.
2. Typography: Set the typography for the
3. Bottom Space: Set the space from bottom.

Comment List Section

Go to Style > Comment List

1. Padding: Set the padding for the comment list.
2. Bottom Space: Set the Bottom space from the comment list.

AVATAR

1. Size: Set the size for the Avatar.
2. Padding: Set the padding for the inner space.
3. Border: Set the border for the avatar icon.
4. Border Radius: Make the border corner edges radius.
5. Box Shadow: Make the box shadow for the Avatar.

AUTHOR NAME

Normal State

1. Color: Set the text color for the author name.
2. Typography: Set the typography for the author name text.

Hover State

3. Color: Set the color for the author name.

META

Normal State

1. Color: Set the text color for the Meta.
2. Typography: Set the typography for the Meta.

Hover State

3. Color: Set the color for the meta.

MESSAGE

1. Color: Set the text color for the Message.
2. Typography: Set the typography for the Message.

Reply Button Section

Go to Style > Reply Button

Normal State

1. Color: Set the text color for the Reply Button.
2. Typography: Set the typography for the Button.
3. Background: Set the background for the reply button.
4. Padding: Set the padding for the button.

5. Border: Set the border for the button.
6. Box Shadow: Set the box shadow for the button.
7. Border Radius: Make the border corner edges rounded by setting the radius.

Hover State

The changes will appear on mouse hover,

1. Color: Set the text color for the Reply Button.
2. Typography: Set the typography for the Button.
3. Background: Set the background for the reply button.
4. Padding: Set the padding for the button.

Form Heading Section

go to Style > Form Heading

1. Color: Set the text color for the Form Heading.
2. Typography: Set the typography for the Form Heading.
3. Bottom Space: Set the space from the bottom.

Cancel Reply Section

Go to Style > Cancel Reply

Normal State

1. Color: Set the text color for the Cancel Reply.
2. Typography: Set the typography for the Cancel Reply.

Hover State

1. Color: Set the color for the form heading.

Comment Form Section

Go to Style > Comment Form

FORM INFO

Normal State

1. Color: Set the text color for the form info
2. Typography: Set the typography for the form info.
3. Space Between: Set the space between the form info.

Hover State

4. Color: Set the color for the form info.

FORM FIELDS

Normal State

1. Color: Set the text color for the Form Fields.
2. Typography: Set the typography for the Form Fields.
3. Background: Set the background for the reply Form Fields.
4. Padding: Set the padding for the Form Fields.

5. Margin: Set the margin for the form fields.
6. Border: Set the border for the fields.
7. Border Radius: Make the border radius.

Focus State

8. Color: Set the Color for the Form Fields.
9. Background: Set the background for the form fields on focus.

Submit Button Section

Go to Style > Submit Button

Normal State

1. Color: Set the text color for the Reply Button.
2. Typography: Set the typography for the Reply Button..
3. Background: Set the background for the reply Reply Button..
4. Padding: Set the padding for the Reply Button..

5. Margin: Set the margin for the Reply Button.
6. Border: Set the border for the Reply Button..
7. Border Radius: Make the border Radius for the Reply Button..

Hover State

The changes will appear on mouse hover.

1. Color: Set the text color for the Reply Button.
2. Typography: Set the typography for the Reply Button..
3. Background: Set the background for the reply Reply Button..
4. Box Shadow: Set the box shadow for the reply button.

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!