Theme Overview
What This Page Covers
- Available page templates and when to use each one
- How modules work and the types available
- Global theme settings that affect all pages
Available Templates
Templates are pre-designed page layouts. When you create a new page, you choose a template as your starting point. Each template is built for a specific purpose.
Page Templates
| Template | Best Used For | Key Features |
|---|---|---|
| Standard Page V2 | Most website pages | Full navigation header, flexible layout with Top, Main, and Bottom sections |
| Standard Page | General content pages | Similar to V2, classic navigation style |
| Home | Homepage only | Multiple sections (Hero, Proof, Services, About, Articles, CTA) |
| Landing Page | Marketing campaigns, promotions | Simplified header (no navigation), no footer - keeps visitors focused |
| Service Page | Service or product descriptions | Clean single-section layout for focused content |
Blog Templates
| Template | Best Used For |
|---|---|
| Blog Index | Blog listing page (shows all posts) |
| Blog Post | Individual blog article pages |
| Blog Post Modern | Blog articles with updated styling |
How to Choose a Template
Ask yourself:
-
Does this page need navigation?
- Yes: Use Standard Page or Standard Page V2
- No (campaign/landing): Use Landing Page
-
Is this the homepage?
- Yes: Use Home template
- No: Use Standard Page V2
-
Is this a blog post or listing?
- Yes: Use the appropriate Blog template
-
Is this a focused service/product page?
- Consider Service Page for clean layouts
Quick Tips
- Standard Page V2 is the recommended default for most new pages
- Landing Page removes distractions - great for ads and email campaigns
- You cannot change a page's template after creation (you would need to create a new page)
How Modules Work
Modules are the building blocks of your pages. Think of them as content containers that you fill with your text, images, and other content.
The Module Workflow
Step-by-Step
- Drag a module from the left panel onto your page
- Configure the module's content (text, images, links)
- Style the module's appearance (colors, spacing, alignment)
- Position the module by dragging it to the right spot
What You Will See
When you click on a module:
- Content tab - Where you enter your actual content
- Styles tab - Visual options like colors and spacing
- The settings vary based on the module type
Types of Modules
Theme Modules (VN Custom)
These modules are built specifically for the Viral Nation theme:
| Module | What It Does |
|---|---|
| VN Button | Styled buttons with multiple design options |
| VN Image | Images with consistent styling and options |
| VN Video | Embedded video with custom player styling |
| VN Intro | Section introductions with heading and text |
| VN Icon Heading | Headings paired with icons |
| VN Testimonials Slider | Rotating customer testimonials |
| VN Logo Slider | Scrolling display of partner/client logos |
| VN Services Slider | Showcase services in a carousel format |
| VN Process Cards | Step-by-step process visualization |
| VN Toggle | Expandable/collapsible content sections |
| Hero Cards | Featured content cards for hero sections |
| Featured Card Group | Multiple feature cards in a grid |
| Counter Section | Animated number statistics |
| Process Timeline Split | Timeline-style process display |
| Two Column | Side-by-side content layout |
| Testimonials Slider | Another style of testimonial carousel |
Blog Modules
| Module | What It Does |
|---|---|
| Blog Category Section | Displays posts by category |
| Blog Featured Spotlight | Highlights featured blog posts |
| Blog Latest Articles | Shows recent blog posts |
| Recent Articles Grid | Blog posts in a grid layout |
HubSpot Default Modules
You also have access to standard HubSpot modules:
| Module | What It Does |
|---|---|
| Rich Text | Basic text editing with formatting |
| Image | Standard image display |
| Form | HubSpot forms for lead capture |
| CTA | Call-to-action buttons |
| Menu | Navigation menus |
| Video | Video embeds |
Quick Tips
- Look for modules starting with "VN" for theme-specific options
- Most VN modules have more design options than default HubSpot modules
- Use the search bar in the module panel to find modules quickly
Global Theme Settings
Global settings apply across your entire website. These ensure consistency without setting the same options on every page.
Accessing Global Settings
Step-by-Step
- Open any page in the editor
- Click the Design tab in the left sidebar
- Look for "Theme Settings" or similar option
- Adjust settings - changes apply site-wide
What You Can Control
Global Colors
| Setting | What It Controls |
|---|---|
| Primary Color | Main brand color used throughout the site |
| Secondary Color | Supporting brand color |
| Accent Color | Highlight color for special elements |
These colors automatically apply to buttons, links, and styled elements across all pages.
Spacing
| Setting | What It Controls |
|---|---|
| Maximum Content Width | How wide your content area can be (default: 1630px) |
Quick Tips
- Changing global colors updates all pages using those colors
- Talk to your team before changing global settings - it affects everyone
- Global changes take effect immediately on save
Understanding Page Structure
Sections and Drop Zones
Most templates divide the page into sections:
- Top Section - Area below the header, often used for hero content
- Main Section - Primary content area
- Bottom Section - Lower content, often calls-to-action
What You Will See
When editing, each section shows:
- A label indicating the section name
- Drag-and-drop zones where you can add modules
- Visual boundaries between sections
Working with Sections
Step-by-Step
- Identify sections - Look for section labels as you scroll
- Click within a section - To add modules to that area
- Drag modules between sections - To reorganize content
- Use section settings - Click the section itself for background colors, spacing, etc.
Design Consistency
The VN theme is designed to keep your pages looking professional and consistent. Here is how:
Built-in Styling
- Typography - Fonts and text sizes are pre-defined
- Colors - Brand colors are set globally and applied consistently
- Spacing - Consistent margins and padding throughout
- Responsive - All elements adjust for mobile automatically
Your Responsibility
To maintain consistency:
- Use theme modules (VN-prefixed) when available
- Avoid custom colors unless necessary
- Follow the established patterns you see on existing pages
- Use the style options provided rather than custom code
Next Steps
Now that you understand the theme structure:
- Explore the Modules section to learn how to use each module
- Check Common Tasks for step-by-step guides on specific editing tasks
- Use Reference for quick lookups while editing