Get started with DeLight

DeLight is a free HubSpot theme by Freelopers. This guide covers installation, page setup, brand styles and updates. HubSpot tool availability depends on your account; use the tools available in your portal.

1. Install the theme

Open DeLight in the HubSpot Template Marketplace and install it into the account where you will build your website. Confirm the destination account before installing. You need the relevant website/theme permissions in that account.

2. Create your first page

Create a website or landing page and choose a DeLight template. Add your own text and images, then preview the page before publishing. Start with one page to establish your brand styling and navigation.

3. Set your brand styles

Open the theme settings to adjust colors, typography, buttons, spacing and the header. These settings affect pages that use the theme. Check the effect on an existing page before rolling out a site-wide change.

Per-module visual settings appear in the module’s Styles tab where supported. Existing content field names are preserved in the v21 maintenance candidate. Navigation, search, pagination and slideshow control labels follow the page language for English, German and Turkish, with English as the fallback. Search modules also offer an optional suggestions label. Sample page content is not automatically translated.

4. Configure navigation, search and languages

Choose your primary HubSpot navigation menu and update the global header logo and links. Preview desktop and mobile navigation. Configure a HubSpot search results page if you want to use site search. Search suggestions depend on indexed, searchable content; a newly created preview may have no results.

Create translated page variants with HubSpot’s language tools before checking the language switcher. Confirm that every visible language link has a destination.

5. Add reusable sections and modules

The theme includes five reusable sections. Choose the section that matches your layout, then replace its sample content. Use descriptive image alt text. For repeated FAQs, sliders and cards, test more than one instance on a page and verify their controls independently.

6. Connect forms and blog content

Choose your own HubSpot forms and confirm where submissions are stored and who receives notifications. A visible form does not prove notification delivery. Run a clearly labelled test submission before launch.

Select your blog and replace sample cards with your own content. Check the first and last pagination pages, image descriptions and related-post links.

7. Check before publishing

Preview on a small phone, tablet and desktop. Navigate with the keyboard, open and close menus, use Escape, expand FAQs and follow every important link. Check form errors, long headings and pages without navigation. Review mobile performance on the actual published demo; local syntax tests cannot establish a performance score.

8. Prepare for a theme update

Read the release notes first. Record your current theme version and take a source backup if you maintain code. Test the update on a copy or development page. If you have custom code, review the differences and your child-theme overrides before applying the update to production. After updating, repeat the navigation, forms, search, blog and mobile checks.

Do not overwrite a customized parent theme without reviewing your changes. Contact us if you need help planning the upgrade.

Support and project help

For theme issues, email support@freelopers.com. Include your theme version, affected page URL, browser/device and steps to reproduce the issue. Please do not send passwords or API keys.

For a tailored setup, migration, custom modules or ongoing improvement, tell us about your project through the Freelopers project inquiry page. Describe your current website, goal and intended launch date so we can assess the scope.