Modules¶
Flexoraa Lite has 26 modules. A module is a block you add to a page: a banner, a row of cards, a form. Each one follows the same pattern, so once you know one, you know them all.
The 26 modules¶
| Group | Module | What it is for |
|---|---|---|
| Banners | Single Column Banner - Simple | A centered hero with tag, title, description and buttons. The background can be a color, gradient, image or video. |
| Multi Column Banner - Simple | A hero with text on one side and an image or video on the other, plus a feature list and buttons. | |
| Content | Section Title | A heading block: tag, title, description and buttons. |
| Content Card | Cards with an image, tag, title, description and button, as a grid or a slider. | |
| Content and Media | Text beside one image or video, with a feature list and buttons. | |
| Features | Cards with an icon, title, description and button. | |
| Accordion | Questions that open and close. Good for FAQs. | |
| Tab | Horizontal tabs, each with a title, description and button. | |
| Steps | Numbered steps with an icon, title, description and button. | |
| Counter | Animated numbers with a title and description. | |
| Video Embed | A video with a poster image, play button and caption. | |
| Proof | Testimonial - Slider | Reviews with the author's photo, name and role, in a slider. |
| Logo Slider | A row or slider of logos. | |
| Team | People cards with photo, name, role, bio and social icons. | |
| Portfolio | Project cards with a category filter. | |
| Conversion | Call to Action | One centered block that asks for one action. |
| Pricing | Plan cards with price, feature list and a highlighted plan. | |
| Form | A HubSpot form with a title, in one of two ready-made styles. | |
| Contact Card | Contact method cards: icon, tag, title, description and button. | |
| Blog | Blog Listing | The blog index: tag filter, pagination, author and tag headers. |
| Blog Recent Post | The latest posts of a blog as cards, usable on any page. | |
| Blog Post - Recent Post | More posts shown below a blog post. | |
| Blog layout - Classic | All the settings for the blog post page. | |
| Blog post - Blog Comments | The comment list and comment form under a post. | |
| Header and footer | Simple Navigation | The site header: logo, menu, language switcher, buttons and search. |
| Footer - Classic | The site footer: brand info, link columns and a bottom bar. |
Every module has a short entry on the Module reference page.
How every module is laid out¶
The Content tab¶
Words, images, links and buttons live in Click to update content. Switches such as Show title or Show description turn parts on and off. The Content tab never controls the look.
The Style tab¶
Style groups come in the same order in every section module.
| Group | What it controls |
|---|---|
| Background settings | The section background: a Color or a Gradient. Some banners also offer an image or a video. |
| Spacing settings | Space above, below and at the sides, for large, medium and small screens. The numbers start from your theme settings. |
| Layout settings | Layout type: Full width (the whole screen), Default (the theme's container width) or Custom (your own width in pixels). Modules with columns also have the number of columns and the gap, for each screen size. |
| Card settings | Only on modules that show items as cards. See below. |
| Preset settings | The look of each element: tag, title, description, button, image and so on. |
Card settings¶
Modules that show a row of items, such as Features, Pricing or Blog Listing, have Card effect.
- On: each item becomes a card with a background, optional border, round corner, shadow and padding.
- Off: the items sit plain on the section background. The card options disappear because they no longer apply.
If the items include an image, two more settings appear in the image group when Card effect is off: Spacing below image and Round corner. With a card, the card's own padding and corners are used instead.
Titles¶
Every title has a Show title as choice from H1 to H6. Pick the heading level your page outline needs. The look is the same for the level you pick, so choose by meaning and not by size.
Buttons¶
Buttons use the theme's button styles. Each button has a Style choice: Primary, Secondary, Primary outline, Secondary outline, White or White outline. Change how a style looks once in Theme settings > Buttons.
Widths¶
The section's width comes from Layout settings. Text elements such as a title or description can also have a Maximum content width in pixels. Use 0 for no limit.
Anchors¶
Every section module has a Drag to section name group in the Content tab. A name such as pricing_table lets a button link to #pricing_table.
Sliders¶
Content Card, Logo Slider and Testimonial - Slider can show items in a slider. The slider arrows or dots only appear when there are more items than columns. If you set 3 columns and add 3 items, everything fits and there is nothing to slide. Add a fourth item, or lower the number of columns.