Table of Content
A sticky Table of Content for long-form pages: active-section highlighting, collapsible list, numbered or dot markers, and full color/style control.
Getting Started with Flexoraa
Flexoraa is built to get a new site off the ground in an afternoon, not a week. Before you touch a single module, spend ten minutes here: connect your HubSpot account, confirm your domain is pointed correctly, and skim the theme settings panel so you know where global colors, fonts, and spacing live. Everything you set at the theme level cascades down to every page and module automatically, so getting it right once here saves you from re-styling forty pages later.
Creating Your Account
Sign up through the HubSpot Marketplace and Flexoraa installs directly into your portal's Design Manager — no separate login, no external dashboard to juggle. Once installed, you'll find the theme folder alongside your other assets, with every module, template, and global partial already wired together and ready to drag onto a page.
Choosing the Right Template
Flexoraa ships with templates for landing pages, blog listings, blog posts, and a handful of system pages like 404 and password-protected content. Pick a starting template close to what you need — a SaaS homepage, a service page, a long-form guide like this one — and treat it as a skeleton, not a finished product. Every section on it is swappable.
Customizing Your Design
This is where most of your time will go, and it's also where Flexoraa saves you the most of it. Instead of hand-editing CSS on every page, you make one decision in Theme Settings — a color, a font pairing, a corner radius — and it ripples through every module on every page that references that token. The result is a site that stays visually consistent even as five different people edit five different pages over five different weeks.
Working with the Theme Settings
Open Theme Settings and you'll find your brand colors, typography scale, spacing system, and card/shadow defaults all in one place. Change your primary color once here and every button, link, and accent across the site updates with it — you never need to hunt down a hard-coded hex value in a module again.
Building Custom Sections
Beyond the global settings, each module carries its own Style tab with dozens of fields for that specific section — background type, card treatment, spacing, and more. Stack a few modules together, adjust their individual settings, and you can build a genuinely custom-looking page without writing a line of code.
Using the Module Library
Flexoraa's module library covers the sections most sites actually need: hero banners, pricing tables, testimonial sliders, FAQ accordions, and this Table of Contents module among them. Every module is designed to be dropped in, configured through its own fields, and left alone — no template editing required for day-to-day content changes.
Adding Your Content
With your design locked in, content is just filling in fields — a headline here, a paragraph there, an image upload on a card. Because every module's content lives in its own Content tab, separate from its styling, marketing team members can update copy and swap images without ever touching a setting that could break the page's look.
Optimizing for SEO and Performance
Every Flexoraa template ships with clean semantic markup, lazy-loaded images, and a single heading outline per page, so most of the SEO groundwork is already done before you write a word. Your job is to fill in the gaps: a meta title and description per page, descriptive alt text on every image, and anchor ids on your headings if you're using this Table of Contents module in nav-only mode against content built elsewhere.
Making the Site Accessible
Accessibility isn't a separate pass you run at the end — it's built into the modules themselves. Headings render in a valid outline order (h1 through h4, never skipping a level), interactive elements carry the right ARIA attributes out of the box, and color contrast is checked against the theme's own palette. Your main responsibility is content-side: write alt text that describes the image, not just names the file, and keep link text meaningful on its own.
Publishing and Going Live
Before you flip a page live, preview it at mobile, tablet, and desktop widths — Flexoraa's modules are responsive by default, but it's worth confirming your specific content (long headlines, tall images) behaves the way you expect at every breakpoint. Once you're happy, publish, and HubSpot's CDN takes care of the rest.
Maintaining Your Site After Launch
A launched site isn't a finished site. Revisit your Theme Settings every quarter or so as your brand evolves, keep an eye on new modules Flexoraa adds to the library, and don't be afraid to swap a section out entirely if it's not converting the way you'd hoped — that's the whole point of a modular theme.
Getting Support When You're Stuck
If a module isn't behaving the way you expect, start with its own Content and Style tabs — most surprises turn out to be a field set differently than you remembered, not a bug. Beyond that, the theme's documentation covers every module field by name, and the support team can look at your specific page if the docs don't cover it.