Basic Blocks

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

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.

Header

Drag a pre-formatted Header to your page which can be styled to your liking. This element is used to apply a Common Header to your funnel pages.

Footer

Drag a pre-formatted Footer to your page which can be styled to your liking. This element is used to apply a Common Footer to your funnel pages.

Headline and Text

Drage a Headline or Text element to your page.

Text inside Headline and Text elements can be modified from the inline Text Editor 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.

Within the Style menu for the link you can define the following attributes and behaviors:

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
Product: Assign a product to the link
Variant: Assign a variant to the link (must select Product first)
Replacement: Assign the product that should be replaced when the customer buys an "upgrade"
Animation: Apply an animation to your link
Delay (Sec): Add a delay (in seconds) before your link animation starts
Speed: Select the speed at which the animation plays
Loop: Choose if the animation should loop or not
Align: Define the alignment of your link respective to its parent element (column, inner column, etc.)

Image

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

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:

Select an icon from the Checkout Champ Icon Library:

Select a Stock image from Unsplash:

Enter the image's source URL:

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.

After dragging the Video element to the page, open the style manager 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
- Rumble
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.
Aspect Ratio: Choose from a set of predeteremined aspect ratios