TYPOGRAPHY & COMPONENTS

Header Typography


h1

h1.secondary

h1.accent

h2

h2.secondary

h2.accent

h2 linked

h2.secondary linked

h2.accent linked

h3

h3.secondary

h3.accent

h3 linked

h3.secondary linked

h3.accent linked

h4

h4.secondary

h4.accent

h4 linked

h4.secondary linked

h4.accent linked

h5
h5.secondary
h5.accent
linked
h5.secondary linked
h5.accent linked
h6
h6.secondary
h6.accent
h6 linked
h6.secondary linked
h6.accent linked

Text Styles


Body Text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae purus maximus, blandit neque vehicula, vehicula augue. Morbi finibus arcu urna. Mauris non risus vitae metus cursus semper vel eget nunc. Morbi non tortor eget tortor dapibus ultricies. Aenean et dolor tristique, auctor enim eget, sagittis neque. Nam sodales turpis at lacinia fermentum. Aenean massa sapien, gravida vitae nibh ac, venenatis facilisis ligula. Mauris quis tempor ex. Nullam porta tortor gravida nibh aliquet maximus. Nullam massa libero, pulvinar ac porta sit amet, ultricies quis nunc. Ut eros nisl, vulputate id molestie et, lobortis a tellus.

Blockquote Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae purus maximus, blandit neque vehicula, vehicula augue. Morbi finibus arcu urna.

 

Link Styles


Default Link
Secondary Link
Emphasized Link
Secondary Emphasized Link

 

Button Styles


Button

Button Secondary

Button Transposed

Button Transposed Secondary

Button Outline

Button Outline Secondary

Button Transposed Outline

Button Transposed Outline Secondary


Adding a section to your webpage using Layouts

HubSpot allows you to add a new section anywhere to your web pages using layouts, below you will find the default sizing of each layout. Starting with a single column, two columns, 3 columns, as well as 4 columns. 

Single Column Content Module
This content will span the width of the page. 

Multi-Column Content Module: 2 columns
This content will span the width of the container. 

Multi-Column Content Module: 2 columns
This content will span the width of the container. 

Multi-Column Content Module: 3 columns
This content will span the width of the container. 

Multi-Column Content Module: 3 columns
This content will span the width of the container. 

Multi-Column Content Module: 3 columns
This content will span the width of the container. 

Multi-Column Content Module:
4 columns

This content will span the width of the container. 

Multi-Column Content Module:
4 columns

This content will span the width of the container. 

Multi-Column Content Module:
4 columns

This content will span the width of the container. 

Multi-Column Content Module:
4 columns

This content will span the width of the container. 


HubSpot Default Modules

HubSpot provides built-in modules that allow you to drag and drop them into your website pages for an additional layer of customization. I've dropped them all below as "out of the box" so you can visualize what those would look like on a website page. 

Hero Banner


Hero Banner Image + Heading

Rich Text Area


Something Powerful

Tell The Reader More

The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.

Remember:

  • Bullets are great
  • For spelling out benefits and
  • Turning visitors into leads.

Image


placeholder_200x200

Video


Form


Icon


Follow Me



DeLight Theme Modules

The DeLight Theme comes with a few Theme-Specific Modules that will allow you a little more flexibility in your website pages. I've dropped them all here as "out of the box" so you can visualize what those would look like on a website page. 

Content Banner


Contact Us Form


Contact Us Form

Contact Us Subtitle

Address

Ballyogan Road, Leopardstown, Dublin, Ireland, D18 N787

Address

Ballyogan Road, Leopardstown, Dublin, Ireland, D18 N787

Address

Ballyogan Road, Leopardstown, Dublin, Ireland, D18 N787

Address

Ballyogan Road, Leopardstown, Dublin, Ireland, D18 N787

Feature Box View


Feature Box View Title

It is a slider with a special hover effect ( gets vertically bigger with a nice animation ) having three columns view. Each column has two parts as an image on the top and content on the bottom. If desired, CTA or Link can be added, and also it can be increased the number of extra slides.

Feature Box View 2021

Feature Box View 2021

Feature Box View 2021

Feature Box View 2021

FAQ Accordion


Frequently Asked Questions

Why Go HubSpot and Theme DeLight?

HubSpot

You may have heard the term "inbound" before — but what is it, exactly? Inbound is a methodology for growing your organization. It’s based on building meaningful, lasting relationships with your prospects and customers through valuable content and experiences. It’s also about valuing and empowering these people to reach their goals at any stage in their journey with you. Why is that important? Because when your customers succeed, you succeed.

For more information, please visit: https://www.hubspot.com/why-go-hubspot

Theme DeLight

Presenting one of the most powerful and editor-friendly themes in the marketplace.

We've aimed to provide not only free but also a functional & useful theme that keeps being maintained on a regular basis.

That's why we released Delight Theme for you.

  • 100% Customizable with Drag and Drop features.
  • Modern Responsive Design with brand new HS features
  • Versatile Custom Modules with powerful inner controllers.
  • We always do the accessibility & responsiveness checks on the modules.
  • We are aware of what "Fast and Lightweight" means.
  • Monthly updates based on your requests & feedback.

For the time being, we are at your service to beautify your site and make our FREE theme the one in the marketplace.

Please see our website for more: https://freelopers.com/

Contact us via support@freelopers.com

 

Why Go HubSpot and Theme DeLight?

HubSpot

You may have heard the term "inbound" before — but what is it, exactly? Inbound is a methodology for growing your organization. It’s based on building meaningful, lasting relationships with your prospects and customers through valuable content and experiences. It’s also about valuing and empowering these people to reach their goals at any stage in their journey with you. Why is that important? Because when your customers succeed, you succeed.

For more information, please visit: https://www.hubspot.com/why-go-hubspot

Theme DeLight

Presenting one of the most powerful and editor-friendly themes in the marketplace.

We've aimed to provide not only free but also a functional & useful theme that keeps being maintained on a regular basis.

That's why we released Delight Theme for you.

  • 100% Customizable with Drag and Drop features.
  • Modern Responsive Design with brand new HS features
  • Versatile Custom Modules with powerful inner controllers.
  • We always do the accessibility & responsiveness checks on the modules.
  • We are aware of what "Fast and Lightweight" means.
  • Monthly updates based on your requests & feedback.

For the time being, we are at your service to beautify your site and make our FREE theme the one in the marketplace.

Please see our website for more: https://freelopers.com/

Contact us via support@freelopers.com

 

Gallery View


Landing


Help us boost Theme DeLight

Form Title

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Multiple Cards


Pricing Cards


Pricing Table

The Pricing Table module provides two or three-column views having pricing cards with an optional special hover effect that also can be enabled or disabled.
If desired, an extra card can be added.

Monthly

Basic

$ 20 / Mo

1 GB Memory

2 User

2 Website

2 Domain

Unlimited Bandwidth

24/7 Support

Basic

$ 20 / Mo

1 GB Memory

2 User

2 Website

2 Domain

Unlimited Bandwidth

24/7 Support

Basic

$ 20 / Mo

1 GB Memory

2 User

2 Website

2 Domain

Unlimited Bandwidth

24/7 Support

Single Card Item


Team Members


Team Members Module

Department

The team member module provides three or four team members' cards in a row with a special hover effect. If desired, an extra card can be added.
 
 

Employee Name

Employee Position

Employee Name

Employee Position

Employee Name

Employee Position

Employee Name

Employee Position

Testimonial Block


man-1s

Something Powerful With The Light

Name - Surname

Testimonial module can be very powerful for helping to establish trust and encouraging visitors. It may have customer names, quotes, photos, and experiences.

 

Two-Column Image & Text


Two-Column Image And Text Module

What is the purpose of the Two-Column Image-Text Module? This module provides two columns view, having content on the left, the image on the right, CTA, or Link on the bottom. If desired, columns can be reversed.

Two-Column List View


Two-Column List View

What is the purpose of the Two-Column List View Module? In the beginning, this module provides two columns grid, having a logo on the top, content on the middle, CTA or Link on the bottom. The grid view can be adjusted as left or center. Also, if desired, cards can be duplicated by following Two-Column List View Module > Cards > +Add. Moreover, by clicking into the Module Controller, you can edit the font color and the background of the cards & module, changing the background image of each card, you might remove or add the borders, lines, and even arranging the spaces.

seo-report-xs

EXPLORE

What is the purpose of the Two-Column List View Module? This module provides two columns grid, having a logo on the top, content on the middle, CTA or Link on the bottom. The grid view can be adjusted as left or center. Also, if desired, cards can be duplicated by following Two-Column List View Module > Cards > +Add. Moreover, by clicking into the Module Controller, you can edit the font color and the background of the cards & module, changing the background image of each card, you might remove or add the borders, lines, and even arranging the spaces.

seo-report-xs

EXPLORE

What is the purpose of the Two-Column List View Module? This module provides two columns grid, having a logo on the top, content on the middle, CTA or Link on the bottom. The grid view can be adjusted as left or center. Also, if desired, cards can be duplicated by following Two-Column List View Module > Cards > +Add. Moreover, by clicking into the Module Controller, you can edit the font color and the background of the cards & module, changing the background image of each card, you might remove or add the borders, lines, and even arranging the spaces.