What is it?
The custom landing page HTML configuration is one of two options to design the home page of your application. The HTML configuration provides you with the ultimate flexibility to create the landing page you want to have. Below, you will find one example and the corresponding code snippets.
More inspirations are available under the article on how to help users navigate the platform from their first second.
How does it work?
For full flexibility on the landing page, you can create a custom widget using HTML code and enhance it with basic CSS. Within the Widget Configurator, you can split your homepage into different sections.
In this example, the homepage consists of 7 sections that are defined within 7 HTML-widgets:
- 01_Section--Header
- 02_Section--Text-Block
- 03_Section--Grid-1x2
- 04_Section--Grid-2x1
- 05_Section--Call-To-Action
- 06_Section--Cards
- 07_Section-Footer
Let's look at each section and how to change the provided layout, to suit your needs.
01_Section--Header
The header section contains 2 components:
- Hero image (banner) - You can add an image that is uploaded to your system as either a profile image of an Element, or as a reference attachment to an Element. In both cases you can access the image address by the right click, then copy the address and paste it in the background: url() property. Make sure your image is 3x1 ratio (three times as wide as it is tall).
Headline - You can change the text color from the h1 style properties.
<head>
<style>
h1 {
line-height: 1.35;
color: #ff3399;
font-size: 70px;
font-weight: bold;
}
</style>
</head>
<body>
<div style="padding: 200px 60px; text-align: center; background: url(###);
background-repeat: no-repeat; background-size: cover; height: 500px;">
<h1>Innovation Software for Everyone</h1>
</div>
</body>
02_Section--Text-Block
The text block section is a plain text container. There you can configure a heading h5 and paragraph p.
<head>
<style>
.text-container--content {
font-size: 17px;
max-width: 1175px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<section
style="position: relative; padding-bottom: 0px;
background-color: #fff">
<div class="text-container--content">
<h5
style="font-size: 21px; font-weight: bold; align-self: center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
</body>
03_Section--Grid-1x2
This grid section represents the pair of an image and a text box on the 1x2 dimension. (It means that the space for image img is two times less than the space for text).
- You can add an image that is uploaded to your system as either a profile image of an Element, or as a reference attachment to an Element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
- Text box contains two child Elements h5 and p
- The section also includes a button button that can be linked to any other location in the system. This could also be used for external URLs. To do this, you can paste it in the a href="”.
<head>
<style>
.grid__layout-1x2 {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
max-width: 1175px;
margin-left: auto;
margin-right: auto;
}
.grid-img {
width: 100%;
border-radius: 3px;
}
.grid__text {
align-self: center;
justify-self: center;
width: 70%;
font-size: 14px;
}
.grid__text-title {
font-size: 21px;
margin-bottom: 15px;
}
.btn__grid-CTA {
display: inline-block;
background-color: #fff;
color: #ff3399;
font-family: inherit;
border: 2px solid #ff3399;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 3px 5px 0 #d5dbe1;
}
.btn__grid-CTA:hover {
border: none;
background-color: #ff3399;
color: #fff;
}
</style>
</head>
<body>
<div
style="
position: relative;
padding-bottom: 0px;
background: #f7f7f7;
padding: 30px 30px;">
<div class="grid__layout-1x2">
<!-- Text - right; Image - left -->
<img src="###" class="grid-img" />
<div class="grid__text" style="width: 100%;">
<h5 class="grid__text-title">Something to highlight</h5>
<p style="margin-bottom: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Unde alias sint quos? Accusantium a fugiat porro reiciendis
saepe quibusdam debitis ducimus.
</p>
<button
class="btn__grid-CTA"
style="font-size: 17px; height: 40px; padding-left: 16px;
padding-right: 16px; ">
<a
href="##”
target="_blank" style="text-decoration: none; color: inherit;
font-size: 14px;">View more</a>
</button>
</div>
</div>
</div>
</body>
04_Section--Grid-2x1
This grid section represents the pair of an image and a text box on the 2x1 dimension. (It means that the space for image img is two times greater than the space for text).
- You can add an image that is uploaded into the system as either a profile image of an Element, or as a reference attachment to an Element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
- Text box contains two child elements h5 and p
The section also includes a button button that can be linked to any other location into the system, could be also used for external URLs, paste it in the a href="”.
<head>
<style>
.grid__layout-2x1 {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
max-width: 1175px;
margin-left: auto;
margin-right: auto;
}
.grid__text {
align-self: center;
justify-self: center;
width: 70%;
font-size: 14px;
}
.grid__text-title {
font-size: 21px;
margin-bottom: 15px;
}
.btn__grid-CTA {
display: inline-block;
background-color: #fff;
color: #ff3399;
font-family: inherit;
border: 2px solid #ff3399;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 3px 5px 0 #d5dbe1;
}
.btn__grid-CTA:hover {
border: none;
background-color: #ff3399;
color: #fff;
}
.grid-img {
width: 100%;
border-radius: 3px;
box-shadow: 0 3px 5px 0 #d5dbe1;
}
</style>
</head>
<body>
<div
style="
position: relative;
padding-bottom: 0px;
background: #f7f7f7;
padding: 30px 30px;">
<div class="grid__layout-2x1" style="margin-top: 30px;">
<div class="grid__text" style=" width: 100%;">
<h5 class="grid__text-title">Something to highlight</h5>
<p style="margin-bottom: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Undealias sint quos? Accusantium a fugiat porro reiciendis
saepe quibusdam debitis ducimus. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Unde alias sint quos?
Accusantium a fugiat porro reiciendis saepe quibusdam
debitis ducimus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Unde alias sint quos? Accusantium a fugiat
porro reiciendis saepe quibusdam debitis ducimus.
</p>
<button
class="btn__grid-CTA"
style="font-size: 17px; height: 40px; padding-left: 16px;
padding-right: 16px; ">
<a
href="###”
target="_blank" style="text-decoration: none; color: inherit;
font-size: 14px; ">View more</a>
</button>
</div>
<img src="###” alt="Grid Image" class="grid-img" />
</div>
</div>
</body>
05_Section--Call-To-Action
This section contains 2 components:
- Headline h3
- CTA button button that can be linked to any other location into the system, could be also used for external URLs, paste it in the a href="”
<head>
<style>
.section__text-CTA {
background-color: #fff;
border-top: none;
border-bottom: none;
text-align: center;
padding: 30px 30px;
}
.btn__text-CTA {
display: inline-block;
background-color: #ff3399;
color: #f7f7f7;
font-family: inherit;
font-weight: 500;
border: none;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 3px 5px 0 #d5dbe1;
}
.btn__text-CTA:hover {
border: 2px solid #ff3399;
background-color: white;
color: #ff3399;
}
</style>
</head>
<body>
<div
style="
position: relative;
padding-bottom: 0px;
background: #f7f7f7;">
<section class="section__text-CTA">
<div>
<h3
style="
font-size: 36px;
line-height: 1.3;
font-weight: 500;
margin-bottom: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit nunc.
</h3>
</div>
<button
class="btn__text-CTA"
style="font-size: 14px; height: 40px; padding-right: 16px;
padding-left: 16px;">
<a
href="###" target="_blank" style="text-decoration: none;
color: inherit;">Submit idea!</a>
</button>
</section>
</div>
</body>
06_Section--Cards
This section has three identical cards and the card itself contains of the following components:
- Background div class="card__layout"
- Image img. You can add an image that is uploaded into the system as either a profile image of an Element, or as a reference attachment to an Element. In both cases you can access the image address by the right click, then copy address and paste it in the img src="” property.
- Title h4
- Paragraph text p
You can link cards to any location in the system, or to any external pages. Paste the URL in the a href="” tag at the beginning of each card, right after <!-- Card #N -->
<head>
<style>
.grid__layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 48px;
max-width: 1175px;
margin-left: auto;
margin-right: auto;
}
.card__layout {
border-radius: 3px;
background-color: rgb(255, 255, 255);
display: grid;
box-shadow: 0 3px 5px 0 #d5dbe1;
}
.card__layout:hover {
border: 1px solid #ff3399;
}
.card-img {
width: 100%;
height: auto;
border-radius: 3px;
}
h4 {
font-size: 17px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<div
style="
position: relative;
padding-bottom: 0px;
background: #f7f7f7;
padding: 30px 30px;">
<div class="grid__layout">
<!-- Card #1 -->
<a
href="###”
target="_blank" style="text-decoration: none; color: inherit;">
<div class="card__layout" style="height: 400px">
<img
src="###”
alt="Card Image"
class="card-img"
style="height: 250px"/>
<div style="padding: 20px;"">
<h4 style="color: #ff3399">Trend-Box</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</a>
<!-- Card #2 -->
<a
href="###”
target="_blank" style="text-decoration: none; color: inherit;">
<div class="card__layout" style="height: 400px">
<img
src="###”
alt="Card Image"
class="card-img"
style="height: 250px"/>
<div style="padding:20px;">
<h4 style="color: #ff3399"">Trend-Box</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</a>
<!-- Card #3 -->
<a
href="###”
target="_blank" style="text-decoration: none; color: inherit;"">
<div class="card__layout" style="height: 400px">
<img
src="###”
alt="Card Image"
class="card-img"
style="height: 250px"/>
<div style="padding:20px;">
<h4 style="color: #ff3399"">Trend-Box</h4>
<p >
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</a>
</div>
</div>
</body>
07_Section-Footer
You can change the background color of the footer section by pasting a proper color property background-color:
<body>
<footer style="padding: 20px 20px; background-color: #333">
<p style="font-size: 14px; color: #aaa; text-align: center">
© Copyright by
<a
target="_blank"
href="https://www.itonics-innovation.com/”
style="color: #eee; text-decoration: none; font-size: 14px;"
>ITONICS GmbH
</a>
</p>
</footer>
</body>