Übersicht: 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, each one with a style variation. So we have 4 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. Heading with lead
  4. Text (extendable with sidebar)
  5. Quote
  6. Fact box
  7. Icon teaser
  8. Downloads
  9. Shortcode
  10. Form
  11. Image
  12. Image slider
  13. Content slider
  14. Text with image background
  15. Teaser columns
  16. Counter
  17. Button
  18. Donation widget
  19. CTA: Image & Donation Box
  20. CTA: Image
  21. Shopping list
  22. Accordion
  23. Social sharing
  24. Video
  25. Teaser Boxes
  26. Teaser News/Blog
  27. Map
  28. Legend
  29. Petition: Last supporters
  30. Petition: Overview

Heading

This element is simply a headline. It can be styled in three 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.

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.

Text (extendable with sidebar)

This block is a WYSIWYG-editor and should be used for text. It can be extended by a sidebar – 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 some blocks. Find out more about the sidebar version on the sidebar page.

Portrait of a baby

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 with predefined icons, that can be chosen. It can be used as full-width-element and in the sidebar of some blocks. 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

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

Title for the teasers
with highlight

First one

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

Second icon teaser

It has a different background color and 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.

Shortcode

The shortcode element can be used to show all types of registered shortcodes, like the audio-player-shortcode:

Form

The form element can be used to show a specific Gravity form. It can be extended by a sidebar – find out more about the sidebar version on the sidebar page.

Image

Shows an image with or without a caption. Height is variable.

Refugee family

Image caption

Image slider

Shows images with or without captions in a slider format:

A man holding a baby

Image caption

Sportler als Symbolbild für die Spendensammelaktion Bewegung mit Amnesty
Portrait of two kids
Refugees welcome

Another caption

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

Closeup of an eye

This is an image slider with only one image

Content slider

The content slider shows text and an image caption on a full-width background image.

Enamel pin jianbing retro single-origin coffee brooklyn blog coloring book activated charcoal thundercats.

Knausgaard raw denim fam chicharrones single-origin coffee pok pok.

This is a
Content slider

This is an image caption

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.

This is a title

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.

Donate now

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 columns2 per row

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

Highlighted textis 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.

Internal link

And one morewith button/link

Tagline

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.

Up to first section

3 teasers per row:

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 some blocks. 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
Yellow button

Donation widget

Shows a predefined Raisenow donation widget. The whole configuration of the widgets is done globally under Donation widgets. This block makes it possible to choose, which of the predefined widgets you want to show. It can be extended by a sidebar – find out more about the sidebar version on the sidebar page.

CTA: Image & Donation box

This is a donation teaserbox on a background image to link to a predefined donation checkout page, which is showing the Donation widget.

Help us to help!

Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

CTA: Image

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

Shopping list

Multiple teasers with title, image, text, button and amount.

249

First one

Subway tile tattooed pok pok, tbh church-key sartorial gochujang literally swag four dollar toast kombucha beard snackwave narwhal.

Donate this

9999

Another one

Subway tile tattooed pok pok, tbh church-key sartorial gochujang literally swag four dollar toast kombucha beard snackwave narwhal.

Donate that

20

Third one

Lliterally swag four dollar toast kombucha beard snackwave narwhal.

Donate

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.

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.

This is a youtube video

This is a vimeo video

Teaser boxes

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

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):

3 latest news posts (3 teaser per row):

Map

This block can show maps, which are created by the WordPress Plugin MapSVG. Notice: If you click on the USA you will see a popup.

[mapsvg id="9118"]

Legend

The legend block is designed to add explaining information to figures, for example to a map.

Erhobene Faust als Symbol für Spenden für Menschenrechte

One

Händehalten als Symbolbild für das Fördern von Menschenrechten bei Amnesty

Two

Closeup of an eye

Three

Petition: Last Supporters

This block shows the most recent supporters from a petition.

  • Peter
    Vor 240 Tagen
  • Birthe
    Vor 240 Tagen
  • Oliver
    Vor 240 Tagen
  • Marius
    Vor 240 Tagen

Petition: Overview

This block lists and multiple petitions.

Zurück nach oben