Blocks

Call to Action Box

by Creator

The Call to Action (CTA) Box puts a pre-designed text box object next to a content object. The text box has a few text fields and a button and simple style options. This block is meant to have a button and lead your visitors somewhere on your site, or to open a PopUp block on the page.

Settings Overview

  • Getting Started
    • Button : Target a Link or PopUp ID from the button in the CTA Box. [tutorial]
    • Sub-Text Link: You may also (or instead) target a Link or PopUp ID from the text field below the button in the CTA Box.
  • CTA Box : The CTA box contains optional text fields and a button, edit these fields and the button text directly in the block editor. The button will default to “Read More…” if no text is entered.
    • Object Alignment : Choose where to display the object in respect to the Content Wrapper.
      • This setting is ignored in mobile mode unless you turn on the Side-by-Side in Mobile setting, along with other options for how to display the object in mobile.
    • Vertical Alignment : Vertical alignment of the content wrapper and object when displayed side-by-side.
      • When the object is taller than the content wrapper, the content will be aligned to the top, center or bottom of the object.
      • When the object is shorter than the content wrapper, the object will be aligned to the top, center or bottom of the content.
      • This setting uses CSS Flexbox tech to responsively retain this alignment across browser, object and content sizes.
    • Text Size : You have individual font size settings for each of the text fields in the CTA Box.
    • Box Width : Fixed width in pixels for the CTA box. The content wrapper will also use this setting to calculate it’s available width in response to the box.
    • Object Separation Margin : Distance in pixels between the main object and the Content Wrapper.
    • Fill Width in Mobile : Ignore the width setting and fill the available area in mobile mode. By default the CTA box will retain it’s width setting in mobile mode while being centered (per options). This setting allows it to fill the width on smaller devices.
    • Center Object 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. Object alignment can be affected by text and object alignment rules inherited from parents.
    • Side-by-Side in Mobile : Ignore the other mobile options and force the object and content wrapper to stay side-by-side in mobile mode. Be sure to use a width that is small enough to allow the contents of your content wrapper to be readable. This may still have odd looking results on the smallest of devices.
  • Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
    • root object : Block Settings panel
      • CTA box object : CTA Box panel
        • button: Button Styling panel
      • content wrapper : Content Wrapper panel
        • title : Title panel
        • content : Nested Content panel

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire 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 considered the block’s children.
      • box wrapper (div) targeted node from CTA Box panel : This is a wrapper node to which we apply styles and media object specific rules. It’s children are a series of objects that display either an AMP friendly image or media embed. It’s children will inherit it’s styles, so we only allow certain styles in this node.
        • title text (div) untargeted node : Inherits font styling from CTA Box with it’s own specific Font Size setting.
        • call text (div) untargeted node : Inherits font styling from CTA Box with it’s own specific Font Size setting.
        • button (*depends) targeted node from Button Styling panel : The button can use the “button” class to inherit button styles from WordPress and stylesheets. It can also be custom styled or act as a plain link without button styling.
        • subtext (div) untargeted node : Inherits font styling from CTA Box with it’s own specific Font Size setting.
      • content wrapper (div) targeted node from Content Wrapper panel : This node contains the block title, subtitle and content area so it can be set side-by-side with the media object. Styles applied to this node will be inherited by all children, including nested children and will override the same style applied to the block at root level.
        • title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block and/or content wrapper.
        • content (div) targeted node from Nested Content panel : This node is where you may enter basic text as paragraph blocks (just type) or insert other blocks. Styles applied to this node are inherited by it’s children and it follow suit with previously explained cascading.
          • wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
            • nested blocks (?) untargeted nodes : Anything put into the nested content area. Each block may have it’s own style rules, some core blocks do. Styles applied to a child “should” be able to override the same style cascaded to it from above. I use the word “should” because we only have control over our own blocks and how styles are applied to them, core and outsider blocks have their own methods.

We will give an example of a CTA box with a button that opens a PopUp.

Thsi example is available from our API as a Block-Set download, we will show you how to recreate it yourself.

Example 1 – Call to Action Box

In this example we just add some basic colors and shadows to create a block that stands out without getting too complicated.

Callbox Title
CALLOUT
ACTION BUTTON
Linkable Sub-Text
Call to Action Box

This block has an “ACTION BUTTON” that is set to open a PopUp block on this page, but amy be used to link to any URL. The “Linkable Sub-Text” is linked to the site’s homepage, but it can be used as normal text. The CTA Box text nodes each have a size setting, and the box itself has a full set of styling settings including width and position.

This block can be nested with Core Paragraph, Heading, List and Shortcode blocks… as well as all AMP Publisher blocks designed for nesting.

  • Insert a Call to Action Box block into your page/post.
  • Open the Getting Started panel in the block inspector (sidebar).
    • In the Button section enter “popup” (or any unique ID) in the Link URL or PopUp ID field. [tutorial]
    • Turn on the Target PopUp setting. This will allow the button to open a PopUp block on this page with the ID: “popup”.
  • First add some color and shadow to the block. Open the Block Settings panel.
    • Choose a Background Color. [tutorial] This example uses a light blue background and dark blue text because the block colors are linked to our site’s Accelerate Color Palette. Choose any color you wish, but be sure your text is readable against it. The content text uses your site’s text color by default, you can change it in the Content Wrapper panel, or directly in each content node (Title & Nested Content).
    • Choose a Box Shadow Color. [tutorial] This example uses a medium blue as it is linked to the site’s Medium Base Color in the palette. Black is always a solid choice for shadow color. Once a color is set the other shadow options will appear, but we do not need to sdjust any of them as this example is using the default.
    • Set the Padding to 30. [tutorial] This will give space between the block edges and the box/content objects.
  • You can enter any text you wish into the content object (right side).
    • In the block editor, click in the Title field in the content object and enter some text. Entering a title is optional, the node will be omitted if left blank.
    • Below the title field is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
  • Same for the CTA box. Go ahead and enter text into any/all of the fields in the CTA box object in the block editor. Each field is optional, though you can actually use this block without a button or call to action if you just like how it looks. We just prompt for a required button link/ID as that is the point of the Call to Action Box.
    • You may enter text directly into the button in the block editor, if left blank the button will use the default text “Read More…”. Our example uses the text “ACTION BUTTON”, which certainly won’t work for your needs.
  • While this example uses the default text sizes and colors (blue and white) for the CTA box, we suggest you open the CTA Box panel and play around with the settings.
    • You might want to change the CTA box width to suit the text you entered. Change the Box Width settnig by using the slidebar or entering a width in pixels into the number field. The default is 240, this example uses a width of 300.

Example 2 – PopUp Block

You cannot see this example on the front end, unless you toggle it using the CTA box button from Example 1. It does not matter where on your page you insert a PopUp block because the block is invisible upon page load, then when it is toggled on it is overlayed over the page instead.

The block is actually right here in the DOM, after the paragraph above and before the list below.

  • Insert a PopUp Block block into your page/post.
  • Open the PopUp Settings panel. Enter “popup” (or the exact ID you entered into the CTA box) in the PopUp ID field.
  • In the block editor, click in the Title field in the content object and enter some text. Entering a title is optional, the node will be omitted if left blank.
  • Below the title field is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
  • This example has a DOM Media block nested into it with a YouTube video as a demonstration. We adjusted the window width to keep the video size reasonable. This step may not suit your needs, but for the sake of learning we’ll walk you through it.
    • Open the PopUp Settings panel. Set the Window Width by % Percentage to 0. This tells it to use the Window Width by Pixels setting instead, which defaults to 700 and suits our example video.
    • After the text/children you entered into the nested content area, insert a DOM Media block.
    • Open the Media Settings panel and and enter a Youtube video URL into the Video/Social Media Embed URL field (or any video or social embed URL from the supproted providers). That’s it, video in a popup.
  • This example uses default styling, so there is nothing here to duplicate. You can easily change the overlay Backdrop Color and Backdrop Opacity in the PopUp Settings panel, this is a simple way to customize it to suit your site. We suggest you play around with the various panels and settings to get a feel for what they can do.