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.
Learn more about:
- Creating a custom widget,
- Example HTML code widgets,
- Placing your widgets in the view configurator,
-
Using images on the landing page
How does it work?
Creating a custom widget
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. You will find the Widget Configurator, if activated by your Customer Innovation Success Manager, from the Settings Wheel > System Administration > Landing Page > Widget Configuration.
You will first land on the "Landing Page Configuration" tab. Click on Add Widget to create a new widget.
Define a widget title, set a tooltip, select the widget type "Custom," and enter your HTML code fragment.
Example HTML code widgets
In this example, the homepage consists of 7 sections made up of 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 take a look at each section and how you can customize the default layout to suit your needs.
01_Section--Header
The header section contains 2 components:
1. Hero image (banner) - You can add an image that has been uploaded to your system either as 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).
2. 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 has been uploaded to your system either as 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 has been uploaded to your system either as 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:
1. Headline h3
2. CTA 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 has been uploaded to your system either as 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 inserting a suitable 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>
Placing your widgets in the view configurator
After creating your widgets, you need to position them according to your needs within the View Configurator. Please note that you can place a single widget full-width, or place two widgets next to each other. Widgets placed on the sidebar to the right are not displayed on the landing page.
Using images on the landing page
To make your landing page attractive, it might make sense to include images on your landing page. To reflect the images on your landing page, you will need to set the address of such images in your HTML code, e.g.,
Background-image URL:
To find the address of an image, you have different options:
1. Use public web images: If you want to embed an image from another website, go to that website and copy the exact URL of the image. You can then paste the image URL into your HTML code snippet.
2. Add an image to your system from an element's reference section: If you want to reference to an image that is stored in your ITONICS system, hit the create button in the main navigation menu and select any entity. Scroll down to the "References or URL" section and upload your image. Once the image is uploaded, it will be stored in your application and an image URL will be created, even though you do not finish the creation of the element.
Use a right mouse click and extract the image URL.
3. Add an image to your system from the login background page:
Similar to option 2, you can upload a respective image from the Settings Wheel > System Administration > Login Page Background. Use the Add-button and upload the respective image(s) to your application. Set the status to inactive (otherwise the picture will be used as your login page background. Click right on the image to get the image URL in the system.
You can then paste the image URL into your HTML code snippet.