Full-Width Content

Spacing: Use these inputs to configure the top and bottom spacing of your section. This can be useful to increase or decrease the height of a section, reduce spacing between sections which share the same background color, or scale this spacing based on screen size when using certain types of backgrounds.

• Top Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom

Text Color Override: These inputs override the color of any text which appears directly on your background. Use these to make all text use a light color when using a darker background to ensure the text is legible. NOTE: Elements other than text may be affected as well and some text may not necessarily be white.

• White Text on All Screens: Boolean (check to enable)
• White Text on Desktop: Boolean (check to enable)
• White Text on Laptop: Boolean (check to enable)
• White Text on Tablet: Boolean (check to enable)
• White Text on Mobile: Boolean (check to enable)
  

Layout Controls: This group contains inputs which are unique to this section for controlling the overall layout or style. Depending on the section, some inputs outside of this section may change based on the configuration here.

• Content Width: Single Choice: Narrow (Default), Narrow (Left), Width of Grid, Width of Window
• Content Alignment: Single Choice: Left-Aligned, Center-Aligned
• Content Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned

Preheader: Text Input

Header: Text Input

Content: Text Area

Enable Lightbox Video: Boolean (check to enable) Check this box to enable video modal/lightbox controls. If you wish to use an embed use the content rich text area.

If you check Enable Lightbox Video, the following controls for video will appear. 

• Media: Device Visibility:
  • Hide on Desktop: Boolean (check to enable)
  • Hide on Laptop: Boolean (check to enable)
  • Hide on Tablet: Boolean (check to enable) 
  • Hide on Mobile: Boolean (check to enable)

• Video Group

  • Video: Type: Single Choice: YouTube / Wistia / Video Modal, Vidyard Modal, Hubspot Video Modal
  • Based on your selection for Video: Type, the following inputs will show.
    1. YouTube/Wistia/Vimeo Modal
       
       • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Image: Image, Alt, Size
       • Link to: External, File
       • URL: Input URL
       • Video: Label Text: Text Input
    2. Vidyard Modal
       • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Image: Image, Alt, Size
       • Vidyard Video: UUID: Text Input - Enter the UUID (internal ID) of this Vidyard video.
       • Video: Image ALT Tag: Text Input
       • Video: Label Text: Text Input
    3. HubSpot Video Modal
       • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail, No Thumbnail Image
       • Video: Thumbnail Image: Image, Alt, Size
       • Video: HubSpot Video: Video
       • Video: HubSpot Play Button Color: Color, Opacity
       • Video: Image ALT Tag: Text Input
       • Video: Label Text: Text Input
         
         

Conversion Type

Conversion Type: Single Choice: CTA, Form, None

Based on your selection for Conversion Type, the following inputs will show.

1. Option: CTA (REPEATABLE GROUP)
   
   1. Option: HubSpot Call-To-Action
      • CTA: Button Color: Single Choice: Primary, Secondary, White
      • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
      • CTA: Select HubSpot CTA from the CTA Section of your portal
   2. Option: Custom Link
      • CTA: Button Color: Single Choice: Primary, Secondary, White
      • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
      • CTA: Button Text: Text Input
      • CTA: Hyperlink
        • Link to: External, Content, File, Email Address, Blog
        • URL: Input URL or Select Page
      • CTA: Open in a New Tab?: Boolean (check to enable)
      • CTA: Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
   3. Option: Scroll to section 
      • CTA: Button Color: Single Choice: Primary, Secondary, White
      • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
      • CTA: Button Text: Text Input
      • CTA: Section Anchor ID: Text Input - Add the anchor ID of a section on this page to link to it. To link to a section on a different page, use the Custom Link option and add the section ID to the end of the URL preceded by a hashtag.
      • CTA: Title Attribute: Text Input - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.Option: Scroll to Section
   4. Option: None
2. Option: Form
   • Form: Header (optional): Text Area
   • Form: Select HubSpot Form from the Form Section of your portal
   • Form: Button Color: Single Choice: Primary, Secondary, White
   • Form: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
   • Send form notifications to specifies email addresses instead of the form defaults: Boolean (check to enable) - Enable this to use choose an email address from your portal
   • Send a follow-up-email: Boolean (check to enable) - Enable this to select a follow-up email from your portal
3. Option: None

Reserved block class:

.section--fullwidth

Resources:

modules/Full-Width Content/Full-Width Content.css

module js inside main module