Basic Blocks

Basic blocks are webpage elements which are common to most pages.

  • Columns

  • Box

  • Headline and Text

  • Link

  • Image

  • Video

  • Videos: Call to action

Columns

Columns allow you to divide your page into sections and edit unique sections of your page. An inner column can divide column elements into smaller sections of your page. You need at least a single column added to the page builder to begin placing other elements.

Box

Box is an additional div element to use as a container of other elements

  • Elements not supported inside a Box: Header, Footer, Inner Row.

  • Box cannot be dropped inside the following elements: Body, Row, Product Row, Text, Headline, Link, Image, Video, Map, Horizontal Line, Select, Input, Checkbox, Radio, Buttons, Label, Survey Options, Carousel.

Headline and Text

Headline and Text elements allow you to put words on your page.

Text Elements:

Text elements can be modified from the Quick Text Options menu. You can change the style of the text by making it bold, italicized, underlined or applying strike through. A text element can also be converted to a link.

Text can also be styled and managed in the Font styling menu.

Link

Drag a link element to embed a link onto the page.

You can define the following attributes and behaviors for your link:

  • Title: (Required) The text displayed for your link.

  • Link: When a link is defined, the visitor will be taken to an external redirect.

  • Action: (Required) What to do when your visitor selects the link.

    • Full details are here

  • Target: Defines which window the visitor will navigate to the url in:

    • This Window

    • New Window

Image

You can add images to your Checkout Champ Page and asset folder by selecting the Image Block.

When you drag an image to your page, the image folder will display which will allow you to perform the following actions:

Select an image from your Checkout Champ Assets Folder:

Upload an image to your Checkout Champ Assets Folder:

Or select an icon from the Checkout Champ Icon Library:

Once your image is added to your page, you will be able to format and style it in the following ways:

  • Title: Define a Title for your image.

  • Alt: Define alternative text for your image.

    • Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.

    • Alt tags will be displayed in place of an image if an image file cannot be loaded.

    • Alt tags provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

  • Link: You can configure a link to your image so that when a visitor selects the image, they can be taken to a different site.

  • Target: If you have configured a link on your image, you can define whether the user will be taken to a different site in the same browser window or if a new browser window will be opened.

  • Align: Define the alignment of your image respective to its parent element (column, inner column, etc.)

Video

You can easily add exciting video content to your Checkout Champ page.

Select the video icon to define the settings for your video.

  • Provider: Checkout Champ can support video content from the following providers:

    • HTML 5 Source

    • YouTube

    • YouTube (No cookie)

    • Vimeo

    • Wistia

    • JW Player

  • Source: Once you select the video provider, you can define where your content is stored with that provider by setting the source.

  • Poster: If you want a specific image to display before your video plays, you can define a poster.

  • Autoplay: By enabling autoplay, your video content will begin as soon as the visitor arrives at your site.

  • Loop: By enabling loop, the video will restart once it has been completed.

  • Controls: By enabling controls, your visitor will be able to control your page’s video to pause, play, enable full-screen mode, and more.

Videos: Call to action

This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers

Call-to-action displays an element at a set time in a video

Step 1: Select the video element. Open the video manager by clicking the clock icon.

Step 2: Enter the time and the Id of the element to open at that time.

Step 3: Save

Press “Add new time log” to enter as many open times as needed

PreviousBuilding BlocksNextRows & Columns