Table of Contents
Lunar Theme Documentation
Introduction to Lunar
Welcome to Lunar, a HubSpot theme tailored for creating dynamic and visually engaging websites. Designed with a focus on simplicity and functionality, Lunar is well-suited for businesses and individuals aiming to enhance their online presence.
Theme Overview
Lunar offers a comprehensive toolkit for website creation on the HubSpot platform. It features a mix of speed, user-friendly design, and customization options. With 17 modules, 13 sections, and 6 website templates, Lunar is adaptable to various design needs and functional requirements.
Key Features
- Speed and Performance: Lunar is optimized for quick loading, contributing to a smooth user experience and potentially improving SEO rankings.
- Easy Customization: The theme’s modules and sections are designed for easy customization, allowing for personalization while maintaining a coherent style.
- Responsive Design: Lunar ensures an optimal display on various devices, providing a consistent viewing experience on both desktops and mobile devices.
- Pre-built Sections and Modules: The theme includes pre-built sections for different purposes, ranging from hero banners to testimonials, all customizable for seamless integration.
Installation
To install the theme from the HubSpot Asset Marketplace, simply click on the “Install for free” button located on the theme’s page and proceed by following the given instructions.
Theme Settings
Overview
In Lunar theme, we offer a suite of global settings that ensure consistency and brand alignment across your entire website. These settings are designed to be intuitive, inheriting values from your HubSpot portal’s brand settings and allowing for granular customization to suit your specific needs.
These settings are designed to be easy to use, offering both default configurations and extensive customization options. By understanding and utilizing these settings, you can ensure that your website not only reflects your brand but also offers a consistent and engaging user experience.
Below is a detailed guide to each setting:
Global Colors
Overview: Define the core color palette of your website with four key colors: primary, secondary, tertiary, and accent. These colors are inherited from your HubSpot portal’s brand settings, ensuring brand consistency.
Application: Used globally across the website for elements like text, backgrounds, and borders.
Global Fonts
Overview: Set the tone of your site with two primary fonts and two color options. These fonts complement the design of the theme and inherit colors from the global color settings.
Details: Includes settings for default fonts and options to customize font colors.
Spacing
Overview: Control the vertical spacing within page sections for a clean, structured look. Includes a ‘Maximum Content Width’ setting to define the overall content width.
Customization: Adjust the padding to enhance the readability and visual appeal of your content.
Text
Overview: Customize typography from H1 to H6, including body and link fonts. Inherits settings from Global Fonts for a coherent look.
Flexibility: Fine-tune font sizes, styles, and colors for different text elements.
Buttons
Overview: Offers four button styles: primary, primary reversed, secondary, and secondary reversed. Inherits fonts and colors from previous settings for consistency.
Customization: Adjust text properties, background color, border, rounded corners, and spacing. Includes hover state settings for dynamic interaction.
Forms
Overview: Settings applied globally to forms, impacting elements like titles, labels, fields/inputs, and buttons.
Details: Customize typography for various form elements and button styles for a cohesive user experience.
Tables
Overview: Customize table designs, including settings for headers, body, footer, and cells.
Application: Ensures tables are not only functional but also aesthetically aligned with your site’s design.
Blog Post
Overview: Tailor the appearance of individual blog posts with settings for padding, background, and typography.
Additional Features: Includes options for related posts, allowing for background and title typography customization.
Website Header
Overview: Settings for the website header, including options for a sticky header, menu, and dropdowns.
Customization: Adjust color and background settings to ensure the header complements the overall site design.
Website Footer
Overview: Customize the footer with settings for text colors and background.
Details: Ensures that the footer maintains the aesthetic and functional coherence with the rest of the site.
Lunar Theme Modules
Customization and Flexibility
The Lunar theme offers a range of user-friendly modules, designed for both consistency and customization. Initially, each module aligns with the theme’s global settings, maintaining a uniform look across your site. Yet, they are flexible enough to be individually customized through the Content and Styles tabs. This setup makes it easy for you to adapt each module’s content and style according to your specific needs, ensuring your website is both well-branded and personalized.
Content Modules
Buttons
Content Tab: This feature allows you to craft and tailor buttons to your specific needs, offering options to set the text, choose its functionality as a link or a CTA, and select from a variety of button styles.
Styles Tab: Dive deeper into customization by overriding the global color and typography settings, and adjusting button dimensions to fit your design vision perfectly.
Card
Content Tab: Build an engaging card element complete with an icon, an attention-grabbing subtitle, descriptive text, and a clickable button.
Styles Tab: Personalize the card’s look with adjustable typography, colors, padding, and borders. Fine-tune rounded corners and background to make each card a unique component of your site.
CTA Simple
Content Tab: Easily configure essential elements like title, subtitle, descriptive text, and action-inducing buttons.
Styles Tab: Tailor the CTA’s visual impact with customizable padding, margins, content width, alignment, typography, and color palette.
Form
Content Tab: Choose from a variety of forms available in your portal to engage with your audience effectively.
Styles Tab: Style the form to align with your site’s aesthetics, including adjustments in spacing, background, and typography for inputs and buttons.
Hero Simple
Content Tab: Create striking hero sections with compelling text and buttons, with an added option to use a video as the background for a dynamic touch.
Styles Tab: Offers extensive styling options, similar to CTA Simple, plus additional features for setting up a captivating video background.
Logo
Content Tab: Select either the default portal logo or upload a custom logo, complete with a hyperlink option.
Styles Tab: Adjust the logo’s size and placement to ensure it fits seamlessly into your header’s design.
Logos Listing
Content Tab: Compile a neat display of logos, ideal for showcasing partnerships or affiliations.
Styles Tab: Control the content width to ensure that the logos are displayed neatly and align with the overall site layout.
Member Card
Content Tab: Feature team members with their photos, names, roles, and social media links.
Styles Tab: Customize the typography and color settings to present your team’s information in a visually appealing way.
Pricing Card
Content Tab: Detail your pricing plans including features, and incorporate customizable buttons for calls to action.
Styles Tab: Adjust background, spacing, alignment, and typography for a clear presentation of your pricing strategies.
Social Follow
Content Tab: Set up an array of social media icons, complete with corresponding links to enhance your online presence.
Styles Tab: Modify icon sizes, colors, alignment, and spacing to create an interactive and engaging social media section.
Testimonial Card
Content Tab: Add genuine testimonials, including author images, names, and roles, to build trust with your audience.
Styles Tab: Style the card with customizable background, padding, border, and text styles to showcase client feedback elegantly.
Title Pack
Content Tab: Combine titles, subtitles, descriptions, and buttons for an impactful content introduction or section header.
Styles Tab: Align content, adjust width, typography, and color settings, and fine-tune margins and spacing for a striking visual arrangement.
Toggles
Content Tab: Integrate toggles with titles and descriptions for an interactive content display, ideal for FAQs.
Styles Tab: Customize the width, border, and typography of the toggles to match your site’s design ethos.
Header Modules
Menu
Content Tab: Manage and organize your site’s navigation links to improve user experience.
Styles Tab: Style the menu to align with the overall aesthetic of your website for a cohesive look.
Menu CTA
Content Tab: Add a standout call-to-action within your menu to draw attention to key actions or pages.
Styles Tab: Customize the CTA’s design to either prominently stand out or subtly blend with your menu’s theme.
Menu Socials
Content Tab: Incorporate social media icons in your header for enhanced connectivity and user engagement.
Styles Tab: Tailor the icons’ design and layout to complement your header’s overall style.
Footer Modules
Footer Module
Content Tab: Assemble a comprehensive footer with a logo, descriptive text, menu options.
Utilizing Pre-built Sections
Sections overview:
The Lunar theme includes a variety of sections, each tailored for specific use cases. These sections are designed to enhance user engagement, communicate information effectively, and showcase key aspects of your website.
Each section in the Lunar theme is crafted to meet specific needs while maintaining ease of use and customization, ensuring your website is both functional and visually appealing.
Sections:
Benefits Section
Description: This section starts with a subtitle, title, and description, leading into two rows of benefit cards. Each card features an icon, title, description, and button.
Use Case: Ideal for outlining benefits or features, this section provides a clear and structured presentation of your key selling points.
CTA Section
Description: Comprising a title, description, and buttons, this section is designed to engage visitors actively.
Use Case: Perfect for capturing attention and directing users to other pages, this section acts as a dynamic call to action on your site.
FAQ Section
Description: Includes a subtitle, title, description, and a series of toggles for FAQs.
Use Case: Use this section to provide answers to common questions, enhancing user understanding and engagement.
Hero Banner
Description: Features a two-column layout with one column for text (title, description, buttons) and another for an image.
Use Case: Acts as an impactful introduction to your website pages, setting the tone and providing key information at a glance.
Hero Text
Description: Similar to the Hero Banner but solely focused on text content.
Use Case: Offers an alternative hero section for pages where text is the primary focus, making a strong statement.
Image & Text
Description: A straightforward section with one column for an image and another for text (subtitle, title, description, and buttons).
Use Case: Versatile for various content types, it’s perfect for conveying company information, features, or any relevant details.
Offices Section
Description: Contains a subtitle, title, and a row of three columns, each with an image, subtitle, description, and button.
Use Case: Great for showcasing company locations or any other content that suits the layout, like service areas or branch details.
Partners Simple Listing
Description: Features a subtitle followed by a logo listing.
Use Case: Ideal for displaying partnerships or collaborations, reinforcing trust and credibility.
Pricing Section
Description: Starts with text elements followed by a row of three pricing cards.
Use Case: Clearly display product pricing, features, and benefits, helping customers make informed decisions.
Team Section
Description: Includes a subtitle, title, description, and four member cards, each detailing a team member’s photo, name, role, and social links.
Use Case: Excellent for humanizing your brand by showcasing the people behind your company.
Testimonials Section
Description: Comprises a text row and four testimonial cards, each featuring a testimonial and author information.
Use Case: Build trust and credibility by highlighting positive feedback and reviews from clients or customers.
Text & Form Section
Description: A two-column layout with one for text and the other for a form.
Use Case: Perfect for lead generation or contact purposes, allowing visitors to easily submit their information or inquiries.
Video Background Section
Description: Similar to the CTA Section but enhanced with a background video.
Use Case: Engage users with dynamic content while providing essential information or calls to action, leveraging the visual appeal of video.
Working with Website Templates
Creating a website page using the Lunar theme’s templates is a streamlined process, designed to cater to various needs and preferences. Here’s a guide on how to work with these website templates:
Working with Website Templates
1. Creating a Website Page:
- To begin, navigate to the page creation section in your HubSpot portal.
- Click on the option to create a new page. You’ll be prompted to choose a template as the foundation for your new page.
2. Choosing a Template:
- Lunar theme comes with a variety of pre-designed templates, including:
- Homepage: The first impression of your website, containing sections that summarize your business.
- About Us: Tailored to tell your company’s story and values.
- Our Team: Designed to showcase your team members and their roles.
- Our Services: Highlighting the services or products you offer.
- Resources: Ideal for blogs, news, or educational content.
- Contact: For customer inquiries and contact information.
Select a template that best fits the purpose of your new page.
3. Editing Content:
- Once a template is chosen, you’ll enter the page editor.
- Here, you can edit the content in each section. This involves updating text, images, and other elements to reflect your specific content.
4. Customizing Sections and Modules:
- Each template is built using a collection of sections and modules, tailored for the page’s use case.
- You can add, remove, or change sections and modules as needed. This might involve inserting a new testimonial section on your homepage or adding a new service detail in the ‘Our Services’ template.
5. Personalization:
- Beyond just editing existing content, you have the freedom to personalize each section.
- This can be done through the ‘Styles’ tab (for the modules) where you can adjust colors, fonts, and other design elements to match your brand and Section settings to adjust the spacing for the Sections.
6. Finalizing Your Page:
- After editing and customizing, review your page to ensure all content aligns with your brand and message.
- Once satisfied, save your changes and publish your page.
Tips for Effective Page Creation:
- Consistency is Key: Ensure that the changes you make align with your overall branding and website style.
- Content Quality: Pay attention to the quality of text and images used. Engaging and relevant content is crucial for a successful page.
- Navigation and Flow: Ensure that the sections flow logically and the navigation is intuitive.
Optimizing Website Performance
1. Compress and Convert Images
- Description: Use compressed images to reduce file sizes, which speeds up page loading. Convert images to formats like WebP, which offer good quality at smaller file sizes.
- How to Apply: Before uploading images to your website, use image compression tools. HubSpot’s CMS also offers built-in tools to resize images, so leverage these features to serve optimized images.
2. Compress Video Content
- Description: Large video files can significantly slow down your website. Compressing these files reduces their size without substantially affecting quality.
- How to Apply: Use video editing software or online tools to compress video files before uploading them to your site. Aim for a balance between quality and file size.
3. Implement Lazy Loading
- Description: Lazy loading delays the loading of images and videos until they are about to enter the viewport. This reduces initial load time.
- How to Apply: Use HubSpot’s built-in lazy loading feature for images and videos. Ensure that images below the fold (not immediately visible on page load) are set to lazy load.
Responsive Design in the Lunar Theme
In the Lunar theme, we focus on making sure your website looks good and works well on any device. Here’s a simple breakdown of how we do this:
Modules and Their Responsiveness:
- Built-in Flexibility: Our modules automatically adjust their size and layout based on the device. This means your website will look neat and organized whether it’s viewed on a big desktop screen or a small phone.
- Extra Settings for Some Modules: A few modules have special settings for smaller screens. These are handy when you want to tweak how certain things look on phones or tablets.
Adjusting Spacings for Different Devices:
When customizing your website with new sections and content, it’s important to consider how spacings will look on different devices. Here’s a quick guide on how to manage this:
- Personalized Spacing Adjustments: As you add new sections or modify existing ones, you may find that the default spacings don’t always fit your vision, especially when viewed on different devices. This is where your personal touch comes in.
- Responsive Editing Tools: Use the responsive editing features to tailor spacings for various screen sizes. In the page editor, simply select the section you’re working on and click the responsive icon (it usually looks like a mobile phone or tablet). This lets you set specific margins and paddings for different devices – ensuring that your layout looks great whether it’s on a desktop, tablet, or mobile.
- Why It’s Important: Custom spacing adjustments ensure that any new content or sections you add integrate seamlessly into the overall design of your site, providing a consistent and aesthetically pleasing experience across all devices.
Remember, a little adjustment can go a long way in making your site look professional and easy to navigate, no matter how or where it’s being viewed.
The Big Picture:
- Better Experience for Everyone: A website that adjusts to different screens makes it easier for everyone to use, no matter what device they’re on.
- Good for Search Engines: Websites that work well on mobile devices are also favored by search engines like Google. This can help more people find your site.
By using these features, you’re making sure your site is user-friendly and looks great, whether it’s on a computer, tablet, or phone. It’s all about giving everyone who visits your site a good experience.
