Components

Layout

Structure Your Pages with Reusable Flexibility

The Layout component in Vertex Forge gives you the power to wrap your page content with reusable structures, headers, footers, sidebars, overlays, and more, without repeating yourself. Whether you’re building marketing pages, product views, or full enterprise sites with multiple layout variants, the Layout component lets you define these structural wrappers once and reuse them across your project. Choose layouts per page with ease, and manage global structure visually, without any code or friction.

Design different page types and flows confidently, while keeping your setup scalable, organized, and aligned with your brand.

Consistent Structures, Fully Reusable

  1. Top & Bottom Content.
    Ensure consistent navigation and CTAs.

  2. Side Content Flexibility.
    Inject sidebars, menus, or additional nav.

  3. Visual Editing, No Guesswork.
    See your layout instantly in the Visual Editor.

Style Smarter, Not Harder

  1. Layout Themes.
    Ensure consistent design and structure.

  2. Content Theme Layers.
    Style the wrapped content area independently.

  3. Dream It, Build It.
    No restrictions on layout composition.

Use Cases

The Layout component is your go-to solution for managing consistent structural templates across your website or app. Use it to separate core layout responsibilities from page-specific content.

Need a global header with navigation and language switcher? A two-column dashboard layout with sidebar navigation? A special landing page with a hero banner and hidden footer? All possible, and easy to manage through Layouts.

Every page can reference a different Layout without any additional coding, enabling flexible UX patterns. Reusing structured elements also reduces errors, accelerates iteration, and keeps design consistent across large-scale projects.

Typical use cases include:

  • Marketing pages with unique header/footer variants.

  • Blog or article layouts with contextual sidebars.

  • Product pages have different structural needs.

  • Authenticated vs. public views (e.g., dashboard vs. landing).

  • Seasonal or campaign-specific structural changes.

  • Global layout changes rolled out in one update.

Layout components are especially powerful in combination with Theme Presets and Global Components, making them one of the most scalable tools in the Vertex Forge ecosystem.

Configuration Options & Features

The Layout component is what bridges design systems with content structure at scale. It enables flexible, composable web experiences by separating reusable structure from unique content. With intuitive configuration slots, theme support, and page-level reference capabilities, Layouts are a core part of building fast, maintainable, and consistent web projects in Vertex Forge.

Whether you’re launching a microsite, a full-scale app, or just testing a campaign, Layouts let you wrap content your way and reuse it without compromise.

Top Content

Use this slot to place any content that should appear above the main page body — typically your site’s Header, navigation bar, or announcement bar.

Typical uses include Global Navigation, Logo and branding blocks, as well as Multilingual switchers.

Left & Right Side Content

Define side elements for your layout. Perfect for aside menus, filter bars, or secondary navigation panels.

Typical uses include Sidebar menus on blog or shop pages, Filter controls for search or product listings, or Info panels or related content.

Bottom Content

This is your dedicated Footer or bottom CTA area. Add components that appear after the main page content.

Typical uses include Global footers, Trust badges, partner logos, or Reusable calls-to-action.

Overlays

Optional overlay content that appears above all layout slots — great for modals, mobile menus, or announcements.

Typical uses include Slide-in navigation for mobile, Cookie or promo banners, or Interactive overlays like search.

Theme Preset

Choose a Theme Preset to define the overall design styling of the layout structure itself. This affects headers, footers, sidebars, and other elements.

Typical uses include Unified header/footer branding, applying consistent spacing and color systems, or Dark/light mode layout variants.

Content Theme

Define a Component Theme Preset specifically for the page content inside the layout. Allows styling of the content independently from the layout structure.

Typical uses include Distinct visual styles between page groups, Campaign-specific content design, and styling handoff between teams.