Infographic Code Block

Settings Overview

• Block Editor
  • Infographic Title : You may enter a title to include above the image in your infographic code. Choose which HTML tag to use, and add style tags using the toolbar buttons.
  • Image/Preview Label : You may enter a label to display above the image/title in this block on your site. This is not included in the HTML copy/paste code.
  • Code Box Label : You may enter a label to display above the code box in this block on your site. This is not included in the HTML copy/paste code.
• Toolbar
  • Image : Choose an image from your Media Library to be used as the infographic. [tutorial]
  • Title Tag : Choose a heading tag value or non-heading (div) tag to be used in the infographic code and displayed on the target site.
  • Layout : Choose whether to display the image beside the code box in a “preview window”, or display the image normally over the code box.
  • Title Text Styles : Choose to bold, italicize and/or underline the infographic title.
• Block Settings
  • Image : same as toolbar
  • Layout : same as toolbar
  • Image Alt Text : Enter an image description to be copied into the infographic object on your visitor’s websites. “Alt” is a tag attribute used by browsers, search engines and text readers to describe an object, most browsers will display this text when you mouse over the image.

Object Map (DOM)

• root object (div) targeted node from Block Settings panel : Optional settings that apply to this block.
  • internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are the block’s children.
    • preview wrapper (div) untargeted node : Used to support layout options.
      • preview label (div) : untargeted node : Optional text label for the preview section of the block.
      • preview object (div) untargeted node : Render the image and infographic title as it would be seen on the target site.
        • title (div) targeted node from block toolbar format buttons : Optional infographic title text modified with heading and format/style tags.
        • image (div) untargeted node : Render the infographic image with a link back to the source site/page.
    • code box wrapper (div) untargeted node : Used to support layout options.
      • code box label (div) : untargeted node : Optional text label for the code box section of the block.
      • codebox object (pre) untargeted node : “pre” tag used to contain the actual “code” object.
        • code object (code) untargeted node : “code” tag used to render HTML that can be copied to the clipboard.