Skip to content

Build your first page

You will create a page from a template, add sections, and replace the sample words with yours.

1. Create the page

  1. In HubSpot, open Content > Website Pages and click Create > Website page.
  2. In the template list, choose a Flexoraa Lite template. Home, About and Services are good starting points.
  3. Name the page and click Create.

The page opens in the editor, already filled with sections and sample text.

2. Edit the words

  1. Click a section on the page. The left panel opens with two tabs.
  2. Content holds the words, images, links and buttons. Open Click to update content and type.
  3. Style holds the look: background, spacing, width and the look of each element.
  4. Click Save often. Use Preview to see the live result.

Why a setting seems to do nothing

Many style settings only show when a related switch is on. For example, the card border options only appear when Card effect is on. Look for the switch just above the setting.

3. Add a ready-made section

  1. Hover between two sections and click Add section.
  2. Open All sections and pick one. The Lite sections are: Accordion, Blog Recent Post, Call to Action, Contact Card, Content and Media, Content Card, Counter, Features, Form, Logo Slider, Multi Column Banner - Simple, Portfolio, Pricing, Section Title, Single Column Banner - Simple, Steps, Tab, Team, Testimonial - Slider and Video Embed.
  3. The section arrives with sample content. Replace it in the Content tab.

You can also drag any module from the Add panel on the left. A section is a module that arrives pre-filled.

4. Move, copy and delete

Hover a section to see its toolbar. Use the arrows to move it, the copy icon to duplicate it and the bin to delete it.

Every section module (everything except the header and footer) has a Drag to section name group in the Content tab. Type a name made of lowercase letters and underscores, for example pricing_table. Then, on a button, set Type to Drag to section and enter the same name. The page scrolls to that section. A normal Link button can also point to #pricing_table.

6. Publish

  1. Click Publish, or Schedule.
  2. Open the live page on a phone and a laptop. Check the text, the buttons and the form.

Next

  • Modules: what each module does.
  • Theme settings: change colors, fonts and spacing for the whole site.
  • FAQ: fixes for common problems.