CTA Banner Documentation
Introduction
CTA Banner is a Call-To-Action section mainly intended to be placed within a webpage as a break with a button linking to an actionable item (such as Contact Form, or Booking Form). It is responsive and has been designed using mobile-first approach. The colors are as set in the bootstrap variables. It includes two partial templates that can be used based on design requirements. Have a look at the demo. The details are shown below.
Template: _cta_banner.liquid
The _cta_banner.liquid partial template has customization fields for the editor. It can be included with a single line and has various fields that can be set by the editor to customize the look of the CTA banner.
Show Full
{%- include "/marketpath/cta-banner/_cta_banner.liquid" -%}Template: _cta_banner_base.liquid
The _cta_banner_base.liquid partial template is the base template which is used by the above template. It has no editor customizable fields and instead relies on various input variables (as listed below). This allows all parameters to be set. For normal use, please use the "_cta_banner.liquid" template. This is mainly intended for developers who are looking to use the banner without any user input, or with their own customized fields.
cta_type - Select between "Sectioned Banner", or "Single Line Full-Width". Ensure to enter the string exactly as shown.
bg_type - Select between "Primary Colour", "Secondary Colour", "Dark Colour", "Bricks", "Triangles", "Abstract", "Tornado Swirls", "Tilted Lines", or "Geometric Pattern". Ensure to enter the string exactly as shown.
color_mode - Select between "Light", or "Dark". Ensure to enter the string exactly as shown.
rounded - If cta_type is selected as "Sectioned Banner", this value (true or false) will determine whether the corners are rounded or not.
cta_title - Main title of the CTA Banner. It is a *REQUIRED* field.
cta_description - Main description of the CTA Banner. It is only applicable when "cta_type" is "Sectioned Banner".
cta_button_text - The text to display on the primary button. It is a *REQUIRED* field.
cta_button_link - The URL that will be linked when the primary button is clicked. If this is not set, it will default to "#".
exclude_cta_stylesheet - If a developer feels neccessary to reduce the numuber of CSS files loaded, they can import the partial SCSS file "/marketpath/cta-banner/scss/_cta_banner_backgrounds.scss" in the "main.scss" file and set this variable to true using "{% assign exclude_cta_stylesheet = true %}".
Show Full
{%- include "/marketpath/cta-banner/_cta_banner_base.liquid" cta_type:"Single Line Full-Width" bg_type:"Triangles" cta_title:"Contact Us" cta_description:"Get in touch with us" cta_button_text:"Contact Us" -%}