Creating a new page

To create a new page using the Elisity_2025 custom theme:

1. Navigate to the Pages section in HubSpot.
   
   
2. Choose either Landing Pages or Website Pages, depending on your goal:
   1. Landing Pages are typically used for campaigns, gated content, or tracking conversions and may have minimal navigation.
   2. Website Pages are used for core site content like product, platform, or company pages and include global navigation and footer.
      
      
3. Select blank.html as your template,  this will automatically apply the Elisity_2025 theme, including the updated navigation and footer components.

How to confirm the theme is applied:
In the list view of pages, look for the Theme column (furthest right column at the top of the table). This shows which theme each page is using. Make sure your page lists Elisity_2025 as the theme. If it says "No theme" or the theme listed is incorrect, edit the page and reassign the correct template under the Settings > Template section.

⚠️ ALWAYS duplicate and do a test page before moving pages from Act3 Child to Elisity_2025 to test final implementation, layout, and potential bugs. This ensures content integrity and layout accuracy before replacing the live version.

Tip:

The blank.html template provides a clean starting point while maintaining theme styling and functionality. Add prebuilt Saved Sections or Modules to build your layout.

H1 Headlines in Hero

Sometimes H1 headlines can appear hidden under the navigation bar. This usually happens when there's not enough top padding applied on the hero section. 

✅ Fix: Add padding-top: 150px to the top-level container or section, usually accessible in wrapper or styles tabs in the side menu.

⚠️ Always test mobile/tablet view as well! Sticky nav behavior can differ across breakpoints.

Updating Backgrounds

Backgrounds are applied at the section level, not inside individual modules.

To change a background:

• Hover over the section (not the module).
• Click Edit Section.
• Navigate to the Background tab and adjust the color, image, or gradient.

• Recommended size: Minimum 1600px wide for full-width backgrounds (ideal range: 1600–2400px wide).
• File format: Use .jpg or .png (transparent background) for images and .svg for graphics with transparency.
• Compression: Thought Hubspot automatically compressed images, keep file size under 500 KB to reduce load time (use TinyPNG). 
• Focal point: If using photos, place important content (e.g., faces, branding elements) near the center to prevent cropping on different screen sizes.
• Avoid text in background images unless absolutely necessary — use live text for accessibility and responsiveness.

To avoid images looking stretched, cropped, or misaligned, it’s important to use the correct aspect ratio. You can calculate the aspect ratio by dividing the image’s width by its height, then comparing that number to common ratios like 1:1 (square), 3:2 (landscape), or 8:3 (banner).

For recommended image ratios by module, see the Verified Aspect Ratios by Module section.

How to Calculate Aspect Ratios

• Divide the width by the height of an image to get a decimal.
• Compare the result to common ratios (see quick reference below).
• Use this to confirm if your image fits the recommended layout.

Example:

• Image size: 1200 × 800
• 1200 ÷ 800 = 1.5
• 1.5 = 3:2 → This image has a 3:2 aspect ratio

Common Aspect Ratios

• 1:1 = square (e.g. 800 × 800)
• 3:2 = landscape (e.g. 1200 × 800)
• 4:3 = more classic photo ratio (e.g. 1200 × 900)
• 3:4 = portrait (e.g. 900 × 1200)
• 8:3 = wide banner-style (e.g. 1600 × 600)

Tip: In Canva or other design tools, you can set custom dimensions using these ratios directly to create correctly sized images from the start.

This usually happens when there’s too much text in the headline or body. When that happens, the card grows taller and adds extra white space below the image, which throws off the layout balance.

The amount of text you can use depends on two things:

1. Whether the default icon (SVG) is kept or removed
2. How long the headline and body text are

If the icon is removed (more room for text):

• A short headline (up to ~110 characters) and short body (up to ~275 characters) will fit cleanly.

• If the body is long (up to ~325 characters), the headline should stay shorter—around 80 characters or less.

• If the headline is long (up to ~110 characters), the body should stay under ~220 characters.

If the icon is kept (default layout like on the homepage):

• A short headline (up to ~80 characters) and short body (up to ~250 characters) works well.

• If the body is longer (up to ~275), the headline should be kept short, around 60 characters.

• If the headline is long (up to ~100–110 characters), the body should be limited to ~150–200 characters to avoid layout issues.

Quick definitions:

• Short headline = about 70–80 characters (1 line)

• Long headline = about 100–110 characters (2 lines)

• Short body = about 100–150 characters (1–2 lines)

• Long body = about 225–325 characters (3–4 lines)

Removing the icon gives the card more room to grow without forcing white space below the image.

How to Prep Images for Upload - General Best Practices

• Use Canva or a similar tool to create images with consistent dimensions
• Export images at 2x resolution (e.g. 1200×800px for a 600×400px space)
• Keep image file sizes under 500KB when possible
• Use JPG for photos, PNG for transparency, and SVG for icons or logos
• Add alt text to all images for accessibility and SEO
• Use clear, descriptive file names (e.g. resource-card-blog.jpg, compliance-desktop-3x4.jpg)
• Put like-files or page-specific files in folders to keep things organized

Images support brand storytelling across modules like Resources, Featured News, and Product Tour. To keep layouts consistent, it’s important to follow recommended aspect ratios and upload optimized files.

Tip: Many modules display the correct aspect ratio in the right-hand sidebar when you go to upload or replace an image. If no ratio is listed, upload a test image and preview it on both desktop and mobile.

Custom module missing?

If a custom module isn't showing up in the Modules panel:

✅ Ensure the page is using the Elisity_2025 child theme. Custom modules are only available on pages assigned to this theme.

✅ Double-check you're using the correct template, like blank.html, which loads the full theme environment.

✅ Reference Files:
The full theme file structure, including CSS/JS assets and image assets, can be found in the elisity-theme-custom directory.

⚠️ If you don’t see the module after confirming the above, try refreshing the page or reassigning the template. If it still doesn’t appear, contact the dev team to confirm module registration.

To resolve this:

• Remove the background from the module
  Apply the background to the section instead
• This ensures the layout stays clean and aligns with the theme’s spacing rules.

See Section 2.1 – Custom Modules for more detail on this fix.

You can save a group of modules as a custom Saved Section. See full instructions here.

Page Not Styled Correctly?

If the page layout or styles look broken or incorrect:

Quick Troubleshooting Checklist

1. Check the applied theme
   Make sure the page is using the Elisity_2025 theme. In the Pages list view, look at the Theme column to confirm. If it’s blank or incorrect:
   1. Open the page.
   2. Go to Settings > Template.
   3. Reassign the template to blank.html under the Elisity_2025 theme.
2. Clear browser cache or do a hard refresh
   Sometimes outdated CSS is cached. Use Cmd + Shift + R (Mac) or Ctrl + Shift + R (Windows) to reload the page with fresh styles.
3. Check for unpublished theme changes
   If recent theme edits were made in Design Manager, make sure all files have been published.
4. Make sure the right modules and sections are used
   If older modules or sections from ACT3 Child or another theme are still on the page, styling issues can occur. Use modules and saved sections from Elisity_2025 only.
5. Confirm global styles are loading
   If layout or fonts look totally off, CSS may not be loading properly. Check with dev to confirm the theme’s CSS files are linked correctly.