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 different types of sections. See how they look like on the sections page.

For every section there are the following content blocks to choose from:

  1. Heading
  2. Lead
  3. Text (extendable with sidebar)
  4. Quote
  5. Fact box
  6. Icon teaser
  7. Downloads
  8. Shortcode
  9. Image slider
  10. Content slider
  11. Teaser boxes
  12. Teaser columns
  13. Text with background image
  14. Counter
  15. Button
  16. Teaser news/blog
  17. CTA: Image
  18. Accordion
  19. Social sharing
  20. Video
  21. Selected speakers
  22. Featured speakers
  23. Image list
  24. Text with image

Heading

This element is simply a headline. It can be styled in three different ways:

Heading - H1
with highlight

Heading - H2
with highlight

Heading - H3
with highlight

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.

Text (extendable with sidebar)

This block is a WYSIWYG-editor and should be used for text. It can be extended by a sidebar that can show 3 different elements: Quote, Factbox and Counter. Find out more about the sidebar version on the sidebar page.

This is the element “Text (extendable with sidebar), but without a sidebar. Lorem ipsum dolor sit amet, this is bold 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. This is italic and duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur linked text to first section sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a video embedded within the textfield:

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.

This is an H2 heading and now comes an unordered list:

  • This is an unordered list
  • 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.
  • Third item
  • Fourth

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.

This should be centered text.

This should be right aligned text.

This is an H3 heading and now comes an ordered list:

  1. This is an ordered list
  2. 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.
  3. Third item
  4. Fourth

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 the block “Text”. Find out more about the sidebar version on the sidebar page.

»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.«

This is the name And this is the position

Fact box

This block shows multiple facts. It can be used as full-width-element and in the sidebar of the block “Text”. Find out more about the sidebar version on the sidebar page.

Fact 1

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.

First one

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Second icon teaser

It has a link

And one more

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Downloads

Presents downloadable PDF-files.

Title of the pdf-download This is a description of this download. pdf - 2,46 MB

Title 2 Lorem ipsum for the second download. pdf - 2,07 MB

Another title, but no description pdf - 8,57 MB

Shortcode

The shortcode element can be used to show WordPress-Shortcodes, e.g. for Gravity forms:

  • This field is for validation purposes and should be left unchanged.

Image slider

Shows images with or without captions in a slider format:

Image caption

Another caption

It can also be used to present only one image without a slider:

This is an image slider with only one image

Content slider

The content slider shows text (that is positioned left, centered or right) and an image caption on a full-width background image.

This is a Content slider with text left

This is an image caption

Text with centered position.

Right positioned text

Teaser boxes

This block exists of tiles, that can have full or half width of the container. The tiles have two different background colors and text and can be linked.

Teaser box without link

Lorem ipsum

Teaser columns

Teaser columns show multiple items with image, title and text. They can be linked and there are two grids available:

2 teasers per row:

Teaser columns
2 per row

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Highlighted text
is very nice

Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Another one,
now with links

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.

And one more
with button/link

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.

3 teasers 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.

Left aligned text with internal link:

Excepteur sint occaecat cupidatat non

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Privacy policy

Center aligned text with external link:

Ad minim veniam, quis.

Ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

welance website

Right aligned text with no link:

Deserunt mollit anim id est laborum.

Uullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Counter

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 the block “Text”. Find out more about the sidebar version on the sidebar page.

Interesting percentage!
+100%

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 and are available in different styles:

Default button
Blue button
Red button

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.

4 latest news posts (2 teaser per row):

3 latest news posts from categories "Funny" and "Music" (3 teaser per row):

CTA: Image

A textbox on a background image with a specific CTA button. The textbox can be positioned left, right or centered.

Help us to help!

Be the first to take action and donate.

Program

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:

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.

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.

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 video with caption and custom preview image.

This is a video caption

Selected speakers

Displays selected speakers in a grid.

Featured speakers

Displays featured speakers in a grid.

Image list

Displays (linked) images in a grid.

Text with image

Displays text next to an image. The text can be either on the left or the right side of the image.

Text right

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.

Program

Text position left

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.