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. Counter
  6. Quote
  7. Fact box & Element
  8. Icon teaser
  9. Downloads
  10. Shortcode
  11. Form
  12. Image
  13. Image slider
  14. Content slider
  15. Teaser boxes
  16. Teaser columns
  17. Teaser news/projects
  18. Text with background image
  19. Button
  20. Donation widget
  21. Donation widget multistep
  22. Donation Shop
  23. CTA: Image & Donation Box
  24. CTA: Image
  25. Map
  26. Legend
  27. Accordion
  28. Social sharing
  29. Video
  30. Team
  31. Podcast
  32. Partners
  33. SDGs

Heading

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

25 ch, 1 line - Heading - H1

35 ch, 2 lines - Heading - H2

45 ch, 2 lines - Heading - H3

Lead

Basically this block is just a text with a larger font size. It can be used e.g. for intros.

450 ch, 4 lines - 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.

35 ch, 2 lines - Heading with lead

Combines heading + lead, but with smaller padding.

450 ch, 4 lines - 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 – 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:

230 ch, 3 lines – 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

230 ch, 3 lines – 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.

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.

30 ch, 1 line - Interesting percentage!

+100%

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

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.

130 ch, 3 lines - 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.

  • 40 ch, 1 line - Fact 1 with a longer title 130 ch, 1 line - Yuccie butcher readymade, mustache blog irony man braid banh mi normcore green juice la croix dreamcatcher taiyaki organic.
  • Fact 2 130 ch, 1 line - 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 130 ch, 1 line - 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. Find out more about the sidebar version on the sidebar page.

First one

75 ch, 2 lines - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Second icon teaser

It has a different background color and a link

20 ch, 1 line

110 ch, 3 lines - 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.

Oops! Wir konnten dein Formular nicht lokalisieren.

Image

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

This is a portrait of a boy

Image slider

Shows images with or without captions in a slider format:

Libanon_Verteilung_2024 (1)

250 ch, 2 lines - Image caption - 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.

Libanon_Verteilung_2024 (1)
Libanon_Verteilung_2024 (3)

Another caption

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

Gewalt an Frauen (6)

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.

15 ch, 1 line

260 ch, 10 lines -This is a Content slider with text left. Lorem ipsum Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum Excepteur sint occaecat cupidatat non proident, sunt sint occaecat cupidatat non.

Internal link

Title 2

Text with centered position.

This is a caption text.

Title 3

Right positioned text - Lorem ipsum Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum Excepteur sint occaecat cupidatat non proident, sunt in culpa sunt in culpa qui officia deserunt mollit.

Support now!

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

150 ch, 3 lines - 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.

35 ch, 1 line - This is a tagline

50 ch, 2 lines - 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.

Internal link
Internal link

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.

Up to first section
Up to first section

3 teasers per row:

35 ch, 1 line - One more tagline

45 ch, 2 lines -Teaser columns 3 per row

145 ch, 3 lines - Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Privacy policy
Privacy policy

Last one for
this type

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.

See welance website
See welance website

Also without link
is possible

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Teaser news / projects

This block uses the same styling as the Teaser columns and can be used to show news or (active) projects. With no additional settings it just shows the most recent entries. Additional checkboxes allow to filter the posts through countries and/or topics.

2 latest projects (2 teaser per row):

Frauenrechte

Nothilfe und neue Perspektiven

CARE unterstützt Vertriebene in Mosambik dabei, sich wieder eine Existenz aufzubauen.

Mehr lesen
Nothilfe und neue Perspektiven

3 latest news posts from countries "Austria" and "Germany" (3 teaser per row):

Wasser, Sanitär und Hygiene

Rückkehr in Trümmer

– Mit dem Regimewechsel in Syrien im Dezember 2024 kehrten Millionen Menschen in ihre Gemeinden zurück. Doch der Wiederaufbau ist alles andere als einfach.

Mehr lesen
Rückkehr in Trümmer

Wasser, Sanitär und Hygiene

Über 120.000 Cholera-Fälle im Sudan

– Der Cholera-Ausbruch im Sudan, wo seit über zwei Jahren Krieg herrscht, verschärft sich dramatisch. CARE und Partner leisten Nothilfe.

Mehr lesen
Über 120.000 Cholera-Fälle im Sudan

Wasser, Sanitär und Hygiene

Cholera-Ausbruch im Tschad

– Im Osten des Tschad breitet sich unter Vertriebenen und lokalen Gemeinschaften Cholera aus. Fehlende Mittel und starke Regenfälle erschweren die Nothilfe.

Mehr lesen
Cholera-Ausbruch im Tschad

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:

55 ch, 3 lines - Lorem ipsum dolor sit amet, consectetur.

100 ch, 3 lines - Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis eiusmod tempor.

Center aligned text with external link:

120 ch, 6 lines - Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

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

Privacy policy

Right aligned text with no link:

130 ch, 7 lines - Ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.

225 ch , 4 lines - Uullamco 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.

welance website

Button

Buttons can link to internal pages, external websites or anchors.

Mehr lesen
25 ch, 1 line - Lorem ipsum

Donation widget

Shows a predefined Dadi 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.

Donation widget multistep

Shows a predefined Dadi 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.

Donation Shop

Shows a predefined Dadi 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.

20 ch, 1 line

180 ch, 6 lines - Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

CTA: Image

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

25 ch, 2 lines - Help us!

55 ch, 3 lines - Be the first to take action and sign our great petition.

Act now

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.

Legend

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

Dark blue square

Dark blue countries

Light blue square

Light blue countries

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

50 ch, 1 line - Ut enim ad minim veniam, quis nostrud exercitation

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

Team

Displays team members in a grid.

Das Icon zeigt einen Verbandskasten.

Another one

Even better position

Podcast

Displays a fashionista podcast player.

75 ch, 3 lines - Wolfgang Bogensberger, Stv. Leiter der EU-Kommission in Wien

400 ch, 5 lines - Andrea Barschdorf-Hager spricht mit dem Stv. Leiter der EU-Kommission in Wien, Wolfgang Bogensberger, über die globale Rolle der Europäischen Union, wie Werte und Ideale die Zusammenarbeit mit Partnern im Globalen Süden beeinflussen, welche Herausforderungen der kommende Wiederaufbau in der Ukraine mit sich bringt und den sehr unterschiedlichen Umgang mit geflüchteten Menschen in Europa.

Partners

Displays (linked) images in a grid.

SDGs

Displays (linked) square images in a grid.