# 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. {% hint style="info" %} *You need at least a single column added to the page builder to begin placing other elements.* {% endhint %}
## **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](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-building-tips/common-page-elements#commonpageelements-commonheader) 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](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-building-tips/common-page-elements#commonpageelements-commonfooter) 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 font, size, and style, etc. A text element can also be converted to a link.
Text can also be styled and managed in the Font styling menu. Basic:
Advanced:
## **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](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/building-blocks/button-blocks/button-and-link-actions) * 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" * Animate: Apply an animation to your link * Delay (Seconds): 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 #### Videos: Call to action {% hint style="info" %} **This functionality is supported for Youtube, Vimeo, Wistia, and html5 providers** {% endhint %} 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.
Press “Add new time log” to enter as many open times as needed **Step 3**: Save and Publish