Blocks

DOM Button Block

by Creator 4

The DOM Button block displays a button or link with custom styling or the button style inherited from the theme and plugin “button” class CSS rules. It is designed to be used as a nested child in other blocks, but works equally well as a block on the root level. Click here to view examples and tutorials for custom styling the button.

Settings Overview

  • Button Options : The button action can be a link to a URL or target a PopUp block on this page. [tutorial]
  • Button Styling : By default the button will inherit “button” styles from wordpress and stylesheets, you may ignore this behavior and customize the button. [tutorial]
  • Block Settings
    • Button Alignment : Align the button left, center or right within it’s available space.
    • Center Button in Mobile : By default the object will be centered in mobile mode. Turning this setting off allows it to be aligned left or right instead.
    • 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]

Object Map (DOM)

  • root object (div) untargeted node : Container object used to manage button layout in root DOM or other blocks.
    • button (tag varies) targeted node from Button Styling panel : The button or link object, gets styling from “button” class or custom settings.

Tutorial

  • Insert a DOM Button block into the page or into another block.
  • Enter a Link URL or PopUp ID. [tutorial]
  • Enter button text directly in the block editor. If left blank, the button will use “Read More…” by default.
  • Open the Block Settings panel in the block inspector (sidebar).
    • Choose a Button Alignment, this may also be chosen from the block toolbar.
    • Turn on the Center Button in Mobile setting if you wish to override the alignment setting in mobile mode.
    • All AMP Publisher blocks have Top Margin and Bottom Margin settings. [tutorial]
  • Button Styling
    • “Button” CSS Class : By default the “button” CSS class will be included on this object. Turn it off to have either no styling (textual link) or to create your own custom button style.
    • Custom Styling : Turn off the “button” class and you get a full set of styling options to modify the button as much or little as you wish. [tutorial]

Comments are closed.