Types of
content blocks
Basic information
The content of pages is divided into „Sections„. Those sections can have different background colors and contain all single elements, called „Blocks“. The margin between blocks within a section is always the same and smaller than the margin between different sections.
There are basically 2 different types of section.
For every section there are the following content blocks to choose from:
- Heading
- Lead
- Heading with lead
- Text (extendable with sidebar)
- Quote
- Fact box
- Icon teaser
- Downloads
- Shortcode
- Image
- Image slider
- Content slider
- Teaser boxes
- Teaser columns
- Text with background image
- Counter
- Button
- Teaser news/blog
- CTA: Image & Donation Box
- CTA: Image
- CTA: Image & configurator
- Accordion
- Social sharing
- Video
- Text with image
- Legend
- Team
- Project teaser
- Text in Column
Heading
This element is simply a headline. It can be styled in different ways:
Heading - H1
Heading - H2
Heading - H3
Lead
Basically this block is just a text with a larger font size. It can be used e.g. for intros.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Basically this block is just a text with a larger font size. It can be used e.g. for intros.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading with lead
The element combines the elements "heading" and "lead" into one. The only difference to the single elements is the (smaller) margin between the headline and the lead.
Quote
The text for quote itself is the only mandatory field, but the block can also have an image, a name and a position. It can be used as full-width-element and in the sidebar of some blocks.
This is a the "Quote" element. This text is the only mandatory field, but it can also have an image, a name and a position.
Fact box
This block shows multiple facts with predefined icons, that can be chosen. It can be used as full-width-element and in the sidebar of some blocks.
- 2020 Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
- Fact 2 with a longer title Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
- Fact 3 is good, but without description
- Fact 4 Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
Icon teaser
It shows a title, a text (with possible links) combined with an image/icon. It can be used as full-width-element and in the sidebar of some blocks.
Downloads
Presents downloadable PDF-files.
Shortcode
The shortcode element can be used to show all types of registered shortcodes, like the audio-player-shortcode:
The form element can be used to show a specific Gravity form. It can be extended by a sidebar.
Oops! Wir konnten dein Formular nicht lokalisieren.
Image
Shows an image with or without a caption. Height is variable.
Image slider
Shows images with or without captions in a slider format:
It can also be used to present only one image without a slider:
Content slider
The content slider shows text (that is positioned left, centered or right) and an image caption on a full-width background image.
Teaser boxes
This block exists of tiles, that can have full, half or quarter width of the container. The tiles have a background image and text and can be linked.
Teaser columns
Teaser columns show multiple items with image, title and text. They can be linked and there are three grids available:
2 teasers per row:
3 teasers per row:
1 teaser per row:
Text with background image
As the name says it is showing text on a (full-width) background-image. The text can be aligned left, centered or right and a link/button can be added.
Centered text with internal link:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Find out moreCounter
This block counts from a starting figure to an ending figure, when scrolled into viewpoint. Also a title, text, a prefix and a suffix can be added. It can be used as full-width-element and in the sidebar of some blocks.
Interesting percentage!
+2000%
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button
Buttons can link to internal pages, external websites or anchors:
Teaser news/blog
This block uses the same styling as the Teaser columns and can be used to show news/blog entries. With no additional settings it just shows the most recent posts. Additional checkboxes allow to filter the posts through categories and/or tags.
2 latest news posts (2 teaser per row):
CTA: Image & Donation box
This is a donation teaserbox on a background image to link to a predefined donation checkout page.
CTA: Image
A textbox on a background image with a specific CTA button.
CTA: Configurator
A textbox on a background image with a filter and a link to the sponsorship page.
Accordion
This block shows multiple items with title + text. The text is hidden and can be shown, when you click on the title or the open-icon:
First accordion item
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Second one, this is the title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
One with hyperlink
Adding a hyperlink is also possible
And one more
Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in.
Social sharing
Adds social sharing buttons to the page (WhatsApp, Twitter, Facebook, E-Mail):
Video
Displays a Youtube or Vimeo video with caption and custom preview image.
Text with image
This block shows text next to an image. It can be extended with a button/link and the image/text position can be reversed.
Hoodie authentic banjo, vaporware gluten-free synth freegan tilde small batch chia VHS vegan readymade art party lyft. Readymade iPhone ugh gochujang iceland tilde. Tattooed selfies letterpress, locavore bicycle rights fanny pack intelligentsia bespoke humblebrag echo park helvetica deep v yuccie.
Bicycle rights authentic freegan live-edge 8-bit lomo franzen locavore single-origin coffee occupy squid raclette intelligentsia enamel pin raw denim. Mlkshk succulents forage, venmo keffiyeh whatever leggings 3 wolf moon meh hammock sustainable flexitarian tbh. Schlitz asymmetrical bicycle rights, farm-to-table enamel pin tumeric forage fixie affogato.
Legend
The legend block is designed to add explaining information to figures, for example to a map.
Dark blue countries
Light blue countries
Team
Displays team members in a grid.
Another one
Position
Another one
Position
I am a name
And I am a position
Project teaser
Displays project teasers next to a map image.
Text in Column
Displays Text with a title and a arrow (if linked)