This documentation provides comprehensive insights into the Call To Action Blocks developed by Zoloblocks.

Adding a block to the editor

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 the block ” Call to action ” and then appears the block.
3. Select the Call to action blocks ( with zoloblocks logo T.R corner).
4. Then Drag and Drop it on the page.

After Inserting the blocks, The Call To Action Blocks will appear. Follow this work with controls,

1. Click on the Document Overviewer button
2. Then Blocks list view will appear.
3. After on the right side, the description of the selected block appears.
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

In this section, you can set the general controls of accordion,

1. Presets: Presets are pre-defined configurations that allow users to quickly apply a specific style. Select any provided presets you prefer.
2. Show Title: Enable the switcher to show Title.
3. Show Description: Enable this to show the description of the Call to action.

4. Show Button: Enable this switcher to show the Button.
5. Alignment: Set the content alignment ( Left, Center, Right, Justify).

Content Section

Go to Basic > Content

In this section, You can set content for the Call To Action.

1. Title: Set the Title for the call to action.
2. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Description: Set the Description.

4. Button Label: Set the label of the button.
5. URL: set the URL of this button, which will navigate to the new link.
6. Open in new tab: Enable the switcher, It will help to open a new tab of the Browser.

7. Icon Status: Set the Icon status ( No Icon, Icon & Text, Icon Only ). Here select the Icon & Text.
8. Select Icon: Select any Icon from the Icon library.
9. Position: Set the position of the Icon along with the Text. ( Left or Right).

Style Tab

This tab provides the controls of the Single Accordion Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Flex Direction Section

Go to Style > Flex Direction

This section provides the controls of Call to Action Direction,

1. Reverse Flex Direction: Enable the switcher to change the direction of the Button position reverse.
2. Gap: Set the gap for the spacing between the content and the Button.

Title Section

Go to Style > Title

In this section, you can set the Title more stylish,

1. Color: Set the color for the Title.
2. Typography: Set the typography for the Title.
3. Margin: Set margin for making space around the Title.

Description Section

Go to Style > Description

This section refers to change the description typography.

1. Color: Set the color for the description.
2. Typography: Set the typography for the Typography.
3. Margin: Set margin for making space around the description.

Button Section

Go to Style > Button

In this section, You can control the basic customization,

1. Icon Size: Set the icon size.
2. Spacing: Set the Spacing from the Icon.
3. Typography: Set the typography of this button.
4. Border: Set the border of the button.

5. Border Radius: Make the border corner rounded.
6. Padding: Set the padding of the button.

Normal State Button

7. Color: Set the color of the button label.
8. Background: Set the background of the Button.

9. Box Shadow: Set the Box shadow of the button.

Hover State Button

10. Color: Set the color of the button label for the hover state.
11. Background: Set the background of the Button for the hover state.

12. Box Shadow: Set the Box shadow of the button for the hover state.

Extra Tab Controls

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 Video help you to learn more about the block. Please visit the demo page for examples.

Thanks for being with us.