TABLE OF CONTENTS
- Text Block
- Quote Block
- Button Block
- Image Block
- Gallery Block
- Video Block
- Audio Block
- Divider Block
- HTML Block
Text Block
The text block is a freeform text editor that allows you to create rich content with various formatting options. You can add text, style it with headings, bullet lists, make text bold, italic or underlined, and add links to your text.
Toolbar
In order to add rich text features like links, bulleted lists, or change text alignment, select the text you'd like to update and the toolbar will appear above it.
By default, the toolbar stays out of your way so you can focus on your content.
Text Only
The Text Block is intended for creating text only portions of content. The other basic blocks (image, video, etc) and other block categories are intended for more media rich or customizable layouts.
Quote Block
The Quote Block enables you to set apart a block of text from its surrounding content. The block can be a quote, a Scripture reference or any text you'd like to give unique styling to.
The basic block includes a sample quote and a second line as the reference.
Properties panel
Opening the properties panel allows you to adjust the following.
Text Color: Color of both the quote and the reference.|
Background Color: Choose the color of the quoted area.
Border Color: Select the color of the border.
Show Reference: Toggle whether to show the reference or not. It is better to hide the reference than to delete all of the text, making it harder to bring it back should you need it later.
Border Thickness: Set the size of the border around the quoted area.
Quote Height: Set the height of the quoted area.
Space Above Block: Set the space above the block.
Space Below Block: Set the space below the block.|
Button Block
The Button Block allows you to add one or more styled buttons to your page.
Button Menu
Clicking a button reveals the button menu.
The buttons in the menu include:
Bold: Makes the text of the button
Link/Text: Click here to update the text of the button and control where it links to.
Text color: Opens a color picker to change the text color of the button.
Button color: Opens a color picker to change the background color of the button.
Border color: Opens a color picker to change the border color of the button.
Border radius: Adjust how rounded the button will be.
Button Properties Panel
The Button Properties Panel allows you to customize the appearance of the button.
The properties include:
Text: The text displayed on the button.
Link: The URL the button links to.
Text color: The color of the text on the button.
Button color: The background color of the button.
Border color: The color of the border around the button.
Border radius: The roundness of the button's corners.
Button Properties Panel
Click the dot options menu button in your Button Block to access the Button Properties Panel. The panel includes some shared block properties as well as the option to center align all buttons in your block.
Image Block
Choose the image block icon from the Blocks Panel to insert an image into your page.
Choosing an image
When you first insert an image, the Choose Image modal will open, allowing you to select an image from your computer or upload a new one.
Image Properties
Floating Toolbar
Clicking on an inserted image reveals a floating toolbar with quick edit actions:
- Select Image: Choose an image from your computer or upload a new one.
- Link Image: Add a link to the image.
- Size: Change the size of the image.
- Border roundedness: Control the roundedness of the image.
- Align Image: Align the image to the left, right, or center of your page. By default,
all images are centered.
Properties Panel
Clicking the options button in the block toolbar opens up the Image Block Properties Panel.
Within the panel, you can choose a different image as well as adjust the spacing above and below the image.
Gallery Block
Added an image Gallery Block to any page on your site. From the Add Block panel, click the Gallery icon.
Creating the Gallery
When the block is first inserted, you'll be prompted to give the gallery a title, and then begin selecting images.
Adding Images
Clicking the Add Images button will open a modal where you can select images from your media library or upload new ones.
You can select multiple images at once by using the checkboxes and clicking add images or add them one by one by clicking the Add Image button.
Properties Panel
There are more options for controlling the behavior and appearance of the gallery in the properties panel. Access the panel by clicking the options menu (...) in the top right corner of the block.
Properties
| Property | Description |
|---|---|
Auto-scroll images | Enable automatic scrolling of images within the gallery. |
Gallery | Update the gallery to display. Select from one of your previously created galleries. |
Image Height | Choose the height of the images displayed in the gallery. Galleries are the full width of the content area by default. |
Space above/below | Adjust the spacing above and below the gallery. |
Video Block
Add a video that you've previously uploaded or include a video from one of many services like Youtube or Vimeo from the Add a Block panel.
You'll be prompted to select a video from your library or upload a new one.
Properties Panel
Click the options button (...) in the top right corner of the block toolbar to open the Video Block Properties. Below are some of the properties you can customize:
| Property | Description |
|---|---|
Alignment | The alignment of the video within its container |
Video size | The size of the video within its container |
Space above | The space above/below the video block |
Audio Block
Add an audio player to your page by clicking the Audio block in the Add a Block panel.
You'll be prompted to select an audio file or upload a new one. Once selected, you'll see a full width audio player inserted into your page.
Properties
Click the options button (...) in the top right corner of the block toolbar to open the Audio Block Properties. Below are some of the properties you can customize:
| Property | Description |
|---|---|
Audio file | The audio file the player will control |
Album Art | Toggle on/off to select album art to display in the player |
Allow download | Enable downloading of the audio file |
Allow share | Enable sharing of the page on Twitter/X |
Space above/below | Adjust the space above and below the Audio Block |
Divider Block
Add a content Divider Block to your page to add extra separation between pieces of content. Click the Divider icon in the Add a Block panel.
This block adds a full width, 1px tall, horizontal line that separates content blocks.
Properties
Click the options button (...) in the top right corner of the block to access the Divider Properties Panel.
| Property | Description |
|---|---|
Line Color | Choose the color of the divider |
Rounded | Check the box to give a round off the ends of the divider |
Width | Choose the width of the divider. Default is 100%. |
Line Height | Choose the height of the divider. Default is 1px. |
Space above/below | Adjust the space above and below the divider. Default 5% |
HTML Block
Insert a block of HTML code directly into your page. Click the HTML icon in the Add a Block panel.
Below is a sample HTML block: 
For security reasons, this block will only accept plain HTML. Combined with the Custom CSS feature in the Website section of Herald you can create a very customized block of content on any page.
The properties panel for the HTML block allows you to adjust the space above and below the content.