Docs

You can find useful resources about how to use custom modules and field areas of DeLight Theme in HubSpot down below

Download Free Theme DeLight

A-Highlights

1-Introduction

B-Module Structure

1-Getting Started

  • Each module is uniquely implemented to meet a specific requirement.
  • Its controllers are standardized in all of modules so that it is as editor-friendly as possible.
  • Please take a look at the following structure to get an overview of the module structures in general.

C-Module Library

1a-Navigation

To change navigation menu and logo, you should follow:

  • I) Click Header
  • II) Open Global Editor
  • III) Edit “Logo” or “Navigation” Section

1a.1-Logo

global logo description

1a.2-Navigation Menu

global menu description

1b-Footer

To change footer, you should follow:

  • I) Click Footer
  • II) Open Global Editor
  • III) Edit “Footer” Section

1b.1-Footer Menu

global footer description

2-Hero Banner

Hero banner is extremely flexible and you have a lot of choices to create a hero section. Let’s have a look at our great options.
There is a general structure of the hero module below.
There are some examples below that you can optimize your hero section. It is all up to you. Enjoy it.

2.1) Hero Banner Module Features

  • Image Mode (Background or Regular Image)
  • Background Image Position on Column (Top / Center / Bottom)
  • Background Image Size (Cover / Contain)
  • CTA or Link
  • Override Theme Font Color
  • Module Background Image
  • Module Background Overlay Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Column Reverse
  • Animation Off/On

Type 1 (Wave Effect)

hero module type 1

Type 2 (Left - Right Column)

hero module type 2

Type 3 (Background Image - Centered Text)

hero module type 3

Type 4 (Overlay Background Filter with Text)

hero module type 4

3-Two Column Full Width Box

3.1) Two Column Full Width Box Features

  • Adding Extra Boxes
  • CTA or Link
  • Override Theme Font Color
  • Background Image
  • Overlay Color on Hover
  • Border Off/On and Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Animation Hover

Type 1

full width module type 1

Type 2

full width module type 2

4-Two Column List View

4.1) Two Column List View

  • Adding Extra Grids
  • CTA or Link
  • Override Theme Font Color
  • Background Image
  • Border Controller
  • Padding Controller for Mobile, Tablet and Desktop View
  • Grid View (Left / Center)

Type 1

list view module type 1

5-Two Column Image and Text Module

5.1) Two Column Image and Text Module Features

  • CTA or Link
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Reverse View
  • Animation Off/On

Type 1

image and text module type 1

Type 2

image and text module type 2

6-One Column Card

6.1) One Column Card Features

  • CTA or Link
  • Override Theme Font Color
  • Grid Background Color
  • Module Background Image
  • Module Background Overlay Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Grid View (Left / Center)

Type 1

one column card module type 1

Type 3

one column card module type 3

7.1) Gallery View Features

  • Adding Extra 3 Types of Boxes ( Main / 2 Column / Aside)
  • Optional Text on Images
  • Box Overlay Color on Hover
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Animation

Type 1

gallery view module type 1

8-Four Box View

8.1) Four Box View Features

  • Adding Extra Cards
  • Box Overlay Color on Hover
  • Pulse Color
  • Link
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

four box module type 1

9-Pricing Cards

9.1) Pricing Cards Features

  • Adding Extra Cards
  • Box Background Color
  • CTA or Link
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View
  • Box View
  • Animation

Type 1

pricing card module type 1

10-Content Banner

10.1) Content Banner Features

  • CTA or Link
  • Module Background Image
  • Module Background Overlay Color
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

content banner module type 1

11-Testimonial Block

11.1) Content Banner Features

  • Module Background Color
  • Override Theme Font Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

testimonial block module type 1

12-Team Members

12.1) Team Members Features

  • Adding Extra Boxes
  • Override Theme Font Color
  • Module Background Color
  • Box Overlay Color on Hover
  • Link
  • Padding Controller for Mobile, Tablet and Desktop View
  • Box View

Type 1

team members module type 1

13-Frequently Asked Questions

13.1) Frequently Asked Questions Features

  • Adding Questions
  • Color Controller
  • Background Color
  • Hover Controller
  • Border Controller
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

faq module type 1

14-Content Slider

14.1) Content Slider Features

  • Adding Extra Slider Contents
  • CTA or Link
  • Reverse Columns
  • Option to Change Tablet View
  • Override Theme Font Color
  • Background Color
  • Box Background Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

content slider module type 1

Type 2

content slider module type 2

15-Feature Box View Slider

15.1) Feature Box View Slider Features

  • Adding Extra Slider Contents
  • CTA or Link
  • Override Theme Font Color
  • Hover Box Text Color
  • Hover Box Button Background Color
  • Background Color
  • Box Background Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

feature box module type 1

16-Contact Us Form

16.1) Contact Us Form Features

  • Adding Extra Contact Information
  • Adding Form
  • Form Captcha
  • Reverse Column
  • Override Theme Font Color
  • Background Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

contact us module type 1

17-Logo Slider

17.1) Logo Slider Features

  • Adding Extra Slider Contents
  • Override Theme Font Color
  • Background Color
  • Box Background Color
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

logo slider module type 1

18-Text With Image Hover

18.1) Text With Image Hover Features

  • Drag and Drop Compatibility
  • Content Visibility Without Hover
  • Overlay Color on Hover and Without Hover
  • Override Theme Font Color
  • Background Color
  • Animation Off/On
  • Padding Controller for Mobile, Tablet and Desktop View

Type 1

logo slider module type 1

19-404 System Template

19.1) 404 System Template

    Type 1

    404 system template type 1

    20-500 System Template

    20.1) 500 System Template

      Type 1

      500 system template type 1

      D-Editable Fields

      Title and Description

      • The titles and the descriptions are rich text and content, size, color, style, alignment, and more can be changeable
      • title and description

      Call to Action (CTA) Button

      • Call-To-Action (CTA) fields provide a way for users to pick a CTA to display. CTA's are essentially trackable buttons or links.
      • See also for more detail about Link and other field types:Module and Theme Fields Types
      • cta button

      Image

      • The image can be in a box, card, column, or even can be a background of modules and it can be editable.
      • image description

      Image Mode

      • There are 2 options in this field. You can select the image as a background image or a regular image. When the image has an important semantic meaning, you should select “regular image” with alt text.
      • *The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
        Alt-text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
      • *For more information, please visit here:
        Background Image
        Regular Image
      • image mode description

      Background Size

      • Background size should be used with “Image mode” that is selected as background - ”bg” for short”. Because “background-image” has these kinds of features in CSS in Web Development
      • *For more information, please visit here:
        Background Size
      • background size description

      Background Position

      • Background position should be used with “Image mode” that is selected as background - ”bg” for short”. Because “background-position” has these kinds of features in CSS in Web Development
      • *For more information, please visit here:
        Background Position
      • background position description

      Background Image

      • The background image can be the background of a box, card, column, or even can be a background of modules and it can be editable.
      • background image type 1 description
        background image type 2 description

      Background Color

      • The background color is a color field that can be editable in a module, box, card, or column.
      • background color type 1 description
        background color type 2 description

      Color Controller

      • Color Controller controls the content of the color. If you want to override the theme font color, you should switch it on and select a color.
      • color controller description

      Padding Controller

      • Padding controller is padding properties that are used to generate space around the top and bottom of the modules.
        • Mobile: 320px and up to 320px
        • Tablet: 768px and up to 768px
        • Desktop: 1025px and up to 1025px
      • padding controller description

      Reverse Column / Reverse View

      • The switch reverses columns from left to right or right to left
      • reverse controller type 1 description
      • Choice allows columns to view 2 or 3 columns or 3 to 4 columns.
      • reverse controller type 2 description
      Animation
      • If there is an animation switch on some modules, it allows modules to have animation or not.
      • animation description