9.7. Sections Overview
Sections Overview
Sections are the building blocks used to create the content and layout of your azzapp Website.
Most sections are also available in Card Advanced Design, allowing the same content-building system to be used across Cards and Websites.
Section designs and colors
Each section is available in several design variants, allowing you to choose the layout that best suits your content.
Sections also offer a range of color schemes based on the color triptych defined in the Website Builder. These schemes combine your Primary, Dark, and Light colors in different ways across backgrounds, text, buttons, and other section elements.
This allows individual sections to use different color combinations while maintaining a consistent visual identity throughout the Website.
9.7.1 Website Menu
Available in: Website only
The Website Menu provides the main navigation between your Website pages.
It can include:
Website pages
A logo
An optional CTA button
The Menu is available in several design variants.
The Menu configuration is Website-wide. Changes to its content or layout are automatically reflected in Menu sections across the Website.
Individual Menu sections can, however, use different color schemes. This allows the same Menu to adapt visually to the design of different pages or sections.
Page names, order, and visibility in the Menu are managed through the Pages menu. See 8.5 Pages and Navigation.
9.7.2 Header
Available in: Card Advanced Design and Website
The Header creates a prominent visual introduction to your page.
It can combine:
Images
Videos
Logo
Overlaid text
CTA
The Header supports up to 5 media items, including up to 3 videos, which can be displayed as a media slider.
Several layouts and color schemes are available to adapt the Header to your design.
9.7.3 Media
Available in: Card Advanced Design and Website
The Media section allows you to showcase images and videos without accompanying text content.
A Media section can contain up to 10 media items, including up to 3 videos.
Several display variants and color schemes are available.
9.7.4 Media with Text
Available in: Card Advanced Design and Website
This section combines images or videos with accompanying text, making it useful for presenting services, products, projects, team members, or other visual content that requires additional explanation.
Each section can contain up to 10 media items, including up to 3 videos, with accompanying text content for each item.
Several layouts and color schemes are available.
9.7.5 Media with Text and Link
Available in: Card Advanced Design and Website
This section combines media, descriptive text, and a CTA, allowing visitors to continue to related content or take an action.
Each section can contain up to 10 media items, including up to 3 videos, with accompanying text and CTA content.
Several layouts and color schemes are available.
9.7.6 Title and Text
Available in: Card Advanced Design and Website
The Title and Text section provides a flexible way to add written content to your page.
It can be used for introductions, descriptions, explanations, company information, or other text-based content.
Several text layouts and color schemes are available.
9.7.7 Key Numbers
Available in: Card Advanced Design and Website
Key Numbers highlights important figures, statistics, or achievements.
Each item combines a Key with a Legend, for example:
10
Projects completed
This section is useful for presenting important information in a quick, visually prominent format.
Several layouts and color schemes are available.
9.7.8 Google Review
Available in: Card Advanced Design and Website
The Google Review section displays the overall Google rating associated with a business.
Enter the relevant Google Business ID, and azzapp automatically retrieves and displays the overall rating.
Several layouts and color schemes are available.
9.7.9 Form
Available in: Card Advanced Design and Website
The Form section allows visitors to send information or enquiries directly from your page.
You can:
Configure the form fields
Customize the CTA
Specify the email address that should receive submitted forms
When a visitor submits the form, its contents are sent to the email address configured in the section.
Several layouts and color schemes are available.
9.7.10 Map
Available in: Card Advanced Design and Website
The Map section displays a location based on an address entered in the section settings.
The location is displayed using a MapLibre-based map.
When a visitor clicks the map, Google Maps opens using the location coordinates.
Several layouts and color schemes are available.
9.7.11 Separation
Available in: Card Advanced Design and Website
Separation is a visual design element used to create distinction or spacing between adjacent sections.
It can help divide content, introduce visual rhythm, or make transitions between different parts of a page clearer.
Several design variants and color schemes are available.
9.7.12 Links
Available in: Card Advanced Design and Website
The Links section allows you to display links to your social profiles using recognizable platform icons.
You can select from a predefined list of 30+ supported social platforms and add links to the corresponding profiles.
Several layouts and color schemes are available.
9.7.13 Buttons
Available in: Card Advanced Design and Website
The Buttons section allows you to add prominent CTA buttons to your content.
Buttons can link to:
Phone
Email
URL
When used on an azzapp Website, buttons can also link directly to another Website page.
Several layouts and color schemes are available.
9.7.14 Footer
Available in: Website only
The Footer provides additional navigation and information at the bottom of Website pages.
It can include:
Logo
Social links
Groups of Website pages
Page groups allow you to organize navigation links under custom titles. For example:
Company
About Us
Our Team
Careers
Support
Contact
FAQ
The Footer configuration is Website-wide. Changes to its content or layout are automatically reflected in Footer sections throughout the Website.
Individual Footer sections can use different color schemes, allowing the Footer to match the visual design of each page.
Several design variants are available.