H1 PAGE HEADING IN HERO SECTION

H3 Hero Section Headline. Should contain a Bold Claim value proposition if possible and work with highlight color.

smartmakers header image overlay

Layout & Containers

Building sections with Elementor containers

Important information about the layout control by the containers of a section:

  • Section Container: here normally only the height of the section is set individually as well as the background color of the section. To guarantee whitespace above and below the content of a section, the container has a padding top + bottom set.
  • Align Container: has three functions 1) is used to center align all other content / containers as well as 2) to determine the order in desktop, tablet or mobile view as well as 3) creates a 32px spacing between all containers.
  • Content Container: in these sit all content elements such as headings, texts, lists and other widget.
Contents of this page

Sections are available in five different heights, see examples below this section

320px section

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

480px section

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

640px section

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

800px section

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

960px section

H3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed facilisis sapien. Fusce euismod lobortis. Aliquam pulvinar mi quis ipsum tristique, sit amet luctus dolor lacinia. Aenean non tincidunt justo.

Layout examples for a stylishly elegant user experience

H2 Section Headline

4 x 384px grid

H3 Headline. This is an example section with two-line heading

This is a regular body text with normal line height. There are four different styles of body text:

  • body-01-long is the regular body text with high line spacing
  • body-01-short has a smaller line spacing
  • body-02-long has a larger font size
  • body-02-short has small line spacing with larger font size  

Let a picture speak

8 x 176px grid section

Network your supply chains, internal material flows, warehouses and construction sites

Body-02-Long through state-of-the-art IoT asset tracking technology, the location, condition and status of your carriers, shipments, containers, vehicles and equipment is visible in real time.

Let a picture speak

8 x 176px grid section

Network your supply chains, internal material flows, warehouses and construction sites

Body-02-Long through state-of-the-art IoT asset tracking technology, the location, condition and status of your carriers, shipments, containers, vehicles and equipment is visible in real time.