
Blocks
Infographic Code Block
The Infographic Code Block lets you to share an image on your site with a code box allowing your visitors to copy/paste the HTML code on to their site, with link and sttribution back to the source page on your site.
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.
- preview wrapper (div) untargeted node : Used to support layout options.
- 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.