
Blocks
DOM Text Block
The DOM Text block is simply a block of text with advanced font styling options. It is designed to be used as a nested child in other blocks, but works equally well as a block on the root level.
Settings Overview
- Block Settings
Object Map (DOM)
- root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
- content (div) untargeted node : This is the text object. It is a child of the block to allow for advanced styling and handling from parent objects.
Tutorial
- Insert a DOM Text block into the page or insert it into another block.
- Enter some text directly in the block editor.
- Open the Block Setting panel in the block inspector (sidebar).
Example # 1
Inherited font color with center alignment and italic font style.
- Insert a DOM Text block into your page/post.
- Enter some text directly in the block editor.
- Open the Block Settings panel in the block inspector (sidebar).
- Set the Text Alignment to center. This may also be done from the block toolbar.
- Choose “Italic” from the Font Style selector. [tutorial]
Example # 2
Verdana font family with purple font color and 24px font size.
- Insert a DOM Text block into your page/post.
- Enter some text directly in the block editor.
- Open the Block Settings panel.
- Choose a Font Color (doesn’t have to be purple). [tutorial]
- Adjust the Font Size to 24px using the slider or by entering 24 in the number field.
- Choose “Verdana” from the Font Family selector.
Example # 3
White font color with black text shadow, bolded and set to 30px font size.
- Insert a DOM Text block into your page/post.
- Enter some text directly in the block editor.
- Open the Block Settings panel.
- Change the Font Color to white. [tutorial]
- Change the Text Shadow Color to black.
- Turn on the Double Shadow setting. This intensifies the shadow.
- Adjust the Font Size to 30px using the slider or by entering 30 in the number field.
- Choose “Bold” from the Font Weight selector. Text with a shadow is usually more readable when bolded.
Comments are closed.