How to create a landing page?

Undraw Animating


This article shows you how to create a landing page with the markup component

A landing page is a page with big horizontal sections that shows off your product or services.


Choosing the landing template

For your page, you should first choose the landing value as template for your page in the metadata manager.

Landing Template Value

Adding bar sections

Within Combostrap, you can design a landing page by adding one or more bar component.

You can style them with:

Each bar will then create a section of the page where you may add:


<bar hero="lg" height="60vh">
    <background color="light"/>
            <box align="x-center y-center">
{{ :undraw_content_creator.svg?500&nolink |}}
            <box spacing="ps-lg-5">
                 <heading d3 class="text-capitalize">Heading</heading>
                 <text h3 class="text-capitalize" boldness="light">SubHeading</text>
                 <text lead>
                    Lead text

<bar hero="lg" height="60vh">
   <background opacity="0.7">{{:woman-yoga-sunset.jpg|}}</background>
   <box width="300px" align="text-center" color="secondary">
       <heading h1>Section 2</heading>
       <text lead>Lead text </text>
       [[howto:getting_started:getting_started?preview=false|<icon name="bs:play-circle-fill" width="3.75rem" color="secondary"/>]]
Undraw Content Creator


Lead text

Section 2

Lead text


To get a more complete example, you can check the home page of this website.

Advanced Landing Page in HTML

For the advanced user, you can also create a landing page with HTML by creating a handlebars template

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw Website Builder Re Ii6e
A bar - A horizontal region

They are use to slice a page into section
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Hamburger Template

hamburger is a template that show only three layers. The page header The main (header, content and footer) The page footer hamburgerwebsite home pagelanding page The hamburger supports the...
Undraw My Documents

hero is a styling attribute for showcasing hero unit style content. An hero is just a UX design term that refers to an oversized component such as: the section of a landing page a page content header...
Landing Layout
Landing Template

landing is a template that permits to create landing pages. In a landing page layout: The main content is not contained (You need to use bar components to create the purple area) The page header,...
Undraw Website Builder Re Ii6e
Layout Containment

The containment configuration choose if the container-aware components will: position their content at the center limit their horizontal width (adjusted by screen sizes) and add a marge on the horizontal...

Task Runner