Blocks

DOM Text Block

by Creator 2

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
    • Margins : All AMP Publisher blocks have a Top Margin and Bottom Margin setting allowing you to create space without having to insert a spacing block. [tutorial]
    • Text – Font : Includes all text alignment and styling options available for text. [tutorial]

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).
    • All AMP Publisher blocks have Top Margin and Bottom Margin settings allowing you to create space without having to insert a spacing block. [tutorial]
    • You have a variety of text styling options including alignment, color, shadow and font styles. [tutorial]

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.