Before you begin: This article demonstrates the complete set of compose styles available in GenXora v1.0. Standard text, headings, lists, and images can be created in Blogger's writing view, while interactive blocks should be inserted from HTML view.
Image with Caption
Use a figure when an image needs a description that remains visually connected to it. The caption is displayed below the image and is not treated as part of the main article paragraph.
Image with Grid Layout
The grid layout is suitable for portfolios, product screenshots, before-and-after comparisons, and visual step-by-step guides.
Image with Show All Function
This layout keeps the first images visible while hiding the remaining gallery until the reader selects Show All. It is useful when a post contains many screenshots but should remain compact at first glance.
Image with Scroll Layout
On smaller screens, this gallery becomes horizontally scrollable. It keeps every image large enough to inspect without forcing the page into a narrow multi-column layout.
Manual Related Post
This block is added manually, allowing you to place relevant links exactly where readers need them. It can contain any number of internal articles and its heading can be customized.
Post Break
A decorative break separates major discussions, creates breathing room, or marks a change in subject without adding another heading.
The article continues here with a fresh section while maintaining a consistent reading rhythm.
Paragraph with Text Indent
This paragraph begins with a first-line indent. The style works especially well for essays, reviews, editorial writing, and longer narrative articles where a traditional reading format is preferred.
The same class can be applied to several paragraphs when the article requires consistent indentation throughout a section.
Paragraph with Drop Cap
GenXora includes a decorative drop cap for feature stories and magazine-style introductions. It enlarges the first letter while allowing the remaining text to flow naturally beside it.
Blockquote
Good interface design helps readers focus on information instead of noticing the interface itself.
— GenTemplates
A second quote style can be used for longer statements, lists, or highlighted explanations.
A flexible Blogger theme should remain easy to manage after installation.
- Widgets should stay editable from the Layout page.
- Theme colors and widths should remain configurable.
- Article components should adapt to mobile screens.
Table
Tables are responsive. When the content becomes wider than the available space, the table area can be scrolled without breaking the article layout.
| No. | Feature | Location | Editable From | Responsive | Dark Mode |
|---|---|---|---|---|---|
| 1 | Hero posts | Homepage | Layout widget | Yes | Yes |
| 2 | Popular Posts | Sidebar | Blogger widget | Yes | Yes |
| 3 | Search popup | Header | Template settings | Yes | Yes |
| 4 | Footer columns | Footer | Layout widget | Yes | Yes |
Manual Table of Content
A manual table of contents gives you complete control over which headings are included. Add an id to each destination heading and connect it with an anchor link.
Contents
Semi Automatic Table of Content
The semi-automatic option is designed for long tutorials with many headings. It is faster to prepare, although a carefully structured heading order is still recommended.
Table of Contents
Syntax Highlighter
Code blocks are useful for tutorials, template documentation, and configuration examples. The language label is shown automatically by the selected class.
<section class="feature-card"> <h2>Build with GenXora</h2> <p>A responsive Blogger interface.</p> </section>
Inline code can also appear inside a sentence, for example <div class="note">.
MultiTabs Syntax Highlighter
Use syntax tabs when one example requires HTML, CSS, and JavaScript in the same section.
<button class="button">Open Demo</button>
.button { padding: 12px 18px; border-radius: 8px; }document.querySelector('.button').addEventListener('click', function () { console.log('Demo opened'); });Show Hide Button
A compact spoiler block can hide optional instructions, answers, or supporting details until the reader chooses to open it.
Optional configuration details
Open Blogger Layout to replace hero article URLs, reorder sidebar widgets, edit footer links, and update social profiles without rebuilding the template structure.
Accordion / Toggle Menu
How do I change the main content width?
Open Theme, choose Customize, then adjust the supported width variables in the Advanced section.
How do I select posts for the hero banner?
Open each hero HTML widget from Layout and replace the URL stored in the data-post-url attribute.
How is dark mode activated?
Readers can use the header toggle. The selected preference is preserved by the template script.
Which areas remain Blogger widgets?
The sidebar, footer columns, labels, Popular Posts, profile, advertisements, and hero URL containers remain manageable through Layout.
Note Block
Information blocks highlight helpful context without interrupting the article flow.
Tip: Create a backup before editing the XML template, even when the change appears small.
Warning: Do not rename trigger labels such as Sponsored or Fullpage unless the matching template conditions are updated too.
External Link
Use the external-link style to show that a destination opens outside the current blog: Visit GenTemplates.
Button Link
Primary and alternative buttons can be used for calls to action, documentation links, previews, and downloads.
Standard Button Alternative StyleButtons can include built-in icons:
Download Live DemoTwo actions can also share one centered bar:
Download Link
Lazy YouTube
The lazy YouTube component delays loading the video iframe until it is needed, helping the initial article load remain lighter.
Post Reference
Reference:
GenXora v1.0 template classes and widget structure
GenTemplates