Cafe Delight HubSpot Theme

• Fast food restaurant theme with responsive & interactive designs 
• SEO-friendly, lightweight, clean & modern HubSpot CMS website theme
• HubSpot homepages for bakery/pastry shop, food delivery & cafe
• Easy-to-use DIY theme settings that are highly customizable  
• Fully responsive multiple image option. Gallery 
• Lazy loading & elegant animation functions

We bring you continuous updates with our premium HubSpot themes, so you stay updated on your online font. Cafe Delight has multiple HubSpot website pages and landing page templates that help you in getting started with creating highly interactive & converting pages for your inbound website. 

This documentation gives you an idea about working with HubSpot themes. It helps you to configure modules and sections on your HubSpot CMS.

You can request for a free demo of our → Cafe DelightDemo to see how well it suits your interest. Additionally, we’re certified HubSpot developers. So, we’ll customize this theme perfect for your beauty website according to your needs. 

For purchasing the Cafe DelightHubSpot theme, you can directly navigate to the HubSpot theme marketplace from your HubSpot portal. HubSpot theme marketplace allows you to download free themes and buy premium HubSpot templates from different HubSpot-approved agencies.  

• Log in to your HubSpot portal > Click on Marketplace icon > Select asset marketplace > insert ‘Glambiz’ in the search portal > Click Buy button on the upper right > insert your email address > fill in your billing information > Click Payment Info

HubSpot marketplace accepts payments via credit cards and the preferred payment gateway is Stripe or Paypal. After your transaction is processed and completed, the Cafe Delighttheme assets are added to your HubSpot design manager.  

The templates and modules will appear for use in your HubSpot content under the same name as mentioned on the theme listing page.

After you purchase the theme, you need to install it and set it as your active HubSpot CMS theme.

Read More:  How To Install HubSpot CMS Themes or Change It? 

We highly recommend you create a child theme of the Cafe Delightbeauty & cosmetic HubSpot theme. As soon as you buy the theme HubSpot will prompt you to start editing the page templates of the CMS theme. However, before rushing into starting your newly designed pages, consider creating a child theme. 

Please Note
Setting up a child theme preserves the ability of the updates to be applied to the parent theme. This way you can customize the child theme on your portal as much as you want without affecting parent theme styles.

Once the theme has been purchased, you can  build up to 5 child themes with separate branding under the same account. Users of CMS Hub Enterprise can set up as many as 10 child themes.

• Open your HubSpot account > navigate to marketing > choose files and templates > select design tools
• Find the @marketplace folder for the Cafe Delighttheme > right-click on the Cafe Delighttheme folder > select create child theme > name the child theme
• If you want to change the child theme location, do so by clicking change in the File location section. Select a folder > click select
  

For making changes in the look and feel of your cosmetic & beauty HubSpot CMS website, you can directly edit the theme settings. These settings are a centralized location to make changes that reflect all over your website and landing pages. 

You can access the theme settings on the Cafe Delight theme in two ways:

• Settings  → Website → Themes → Cafe Delight child theme ( In case you’re just getting started and haven’t yet created any pages access the theme setting from the settings option)
• Marketing → Landing Pages → Page Editor  → Theme → Edit Theme Settings

Check out the theme settings added in the Cafe Delight Theme.

From the colors option of edit theme settings, you can change the global display of colors on your website. You must have a brand that follows a particular color scheme. This is the place where you can experiment and decide on your brand colors.

• Primary colors are a very important part of color theory. Red, yellow & blue are highly preferred primary colors. You can choose from the color palette provided.  
• Accent colors make certain sections louder and different than others. These usually complement the primary colors.
• Heading colors that will show up on different headings on your website pages like h1,h2,h3, etc.
• Body background colors are added behind the elements as backgrounds. The white body background color is highly recommended.
• Link colors appear as you see the hyperlinked text on your landing pages.  
• Links hover color is visible when you hover over a hypertext. Basically, the hover link color is visible only if the user will hover over the text.

Fonts are different types of writing styles. It helps you separate headlines and content just by looking at them. There are more than 100 fonts than can be used on your HubSpot CMS website. With Cafe Delight you can choose between google fonts or external fonts.

Besides, you can select different fonts for mini titles, headings, and body along with their colors.

You can arrange the letters of the text in such a fashion that the user can read it clearly and find it visually appealing. 

Colors and fonts are one way to make it so. However, typography on your website also involves selecting fonts, adjusting letter spacing, and line height for desktops, mobiles, and tabs. 

These settings will be added over to the h1,h2,h3,h4,h5,h6, body, mini title, etc.

Buttons are a crucial element on your website landing pages. For users, it is an action point. You need to make buttons highly convertible. We have added buttons in different sections so you don’t have to worry.

We have added a dark and light variant of outlined and filled buttons. From the buttons option of the theme settings, you can edit the font text & color, and change the background & border color for various states of buttons like active, hover & normal.

Forms are essential for the collection of customer data. Big or small, your food business benefits highly from this collected data. While using forms on the Cafe Delight theme, you can edit the title, background, border style, and corner radius for various form elements like title, help text, form fields, labels, error messages, etc.

Adding tables on your website helps you organize data clearly and helps users differentiate between things mentioned. If you’re adding tables to your landing pages, you can edit the text & background color of the table header, footer, cells, and body.

Website header options from the theme settings let you change a series of stuff like enabling header top and header bottom through a toggle button.

You can change the header menu background color, header background color, menu container background, and menu item border color. You can also add box shadow.

The header menu is also editable. While you will find additional settings on the header module. But, from the theme settings, you can change the menu items text font type and font color.

The website footer is at the bottom of any website page. The Cafe Delight theme offers easy customization of the footer. You can change the footer background color.

Other settings include changing the text font, color, line height & text transformation on the website footer for desktop.

For mobile devices, you can change the font size and line height of the website footer.

Website footer also has an editable menu. Plus you can alter text and color settings too.

Spacing settings deal with the spacing on your website pages in terms of containers of the content width, and horizontal & vertical spacings of sections on mobile, tablets, and desktops.

You can adjust the maximum content width of your website page. All the changes you make here will reflect on your website pages.

Certain global settings on your blog page can change the user experience considerably. You can enable, disable, and edit the blog sidebar. 

Cafe delight sidebar widgets includes topics, subscription form  and popular posts. Enabling or disabling them is under your control.

The blog post option is generally for changing settings on the blog page. You can change the blockquote border & text color and enable or disable either of these anytime:

• Author name
• Timestamp
• Tags
• Related posts
• Comment form 

System pages are automatically displayed pages that carry out common tasks like event registration and login. By placing modules on the page or editing already-existing content, system pages can be made more unique.

From the theme settings, you can change the general look of the system pages. For example, for every system page present on your website you can enable or disable its error image, remove or replace the same, edit alt text, and change the image loading style from browser default, eager, or lazy. 

Note: “Lazy” loading defers loading this element until it’s visible on the page. This may help improve site performance. “Eager” loading loads the element right away.   

The scroll-to-top feature allows users to easily and quickly get back to the top of the page by using a button.

You can enable or disable the scroll to the top button anytime. Besides you can set the icon color, icon background color, and adjust the icon corner radius of the scroll to top button.

As you must have read above, theme settings have options to make changes in the header and header menu. However, there are certain modules that you can add and make navigation on your website easier via header.

• From the edit page menu > go to content tab > website header > click on it > select open in global content editor. 

All used global content modules will appear on this page. We have used, a logo, menu, header toggler, and header controls in our website pages template. Simply select the global content module one by one and edit its settings accordingly.

A website footer is at the end of a landing page. It is also a global element that affects all the assets on different web pages when changes are applied to it. 

To edit your website footer, navigate in the following way:

• edit page menu > go to content tab > website header > click on it > select open in global content editor.

All used global content modules will appear on this page. You can use logo, social follow labels, social links, footer navigation, copyright, and scroll to top on your website page template. Simply select the global content module one by one and edit its settings accordingly. You can edit the styles of these modules too.   

Read More: How to edit global modules?

The Cafe Delightbeauty, spa, and cosmetic HubSpot theme has 34 highly customizable drag-and-drop modules. You can experiment with any module the way you like. Each module has styling options too. Keep reading to find out about each module.

Read more: What are HubSpot modules & templates?

To show vast sections of text like displaying content in form of questions and answers, you can use the accordion module. You can edit the accordion module as you wish like modifying the heading & background colors, borders and shadows, adjusting the height for different devices, etc.

As the name suggests, this module lets you add an animated image to your website pages. You can replace or remove any image you like and further adjust its dimensions.

The first thing that the users notice when they land on your website page. You can use it on your home page or about us page to inform visitors about your marketing or other services. You can select the layout you want from the different options available. Make the most of its style tab settings.

    (a) Banner with Image

(b) Background Image

(b) Background Color