Typography and Paragraphs Demo

Header images

The site will crop images automatically but for best results upload images with 1980 x 800

That's a fairly wide cinemascope-type crop akin to 16:9. It does not do so well with portraits but is better suited to landscapes and pics of groups of people / animals.

This is a single column with sidebar paragraph

This is a normal paragraph text showing you the different formatting options you have. You can emphasize text using bold or italics. If something is very important you can also underline it or use a combination of bold and underline. You can also hyperlink to external web pages by clicking on the chain button and inserting the hyperlink. You can also use superscript and subscript on your text by selecting text and clicking on the appropriate button.
You can go to new line by simply holding the SHIFT key and pressing ENTER key. 

Otherwise you can create a new paragraph by simply pressing the ENTER key, just remember that each paragraph leaves a bit of white space below while the newline feature doesn't.

Before paragraphs of text you can use titles as shown below:

Heading 2 (use this only if you left the Title field empty)

Heading 3 (use this for main titles inside the single column)

Heading 4 (use for subtitles of a section that starts with an Heading 3)

This is an Heading 5 (use for subtitles of a section that starts with an Heading 4)

You have also the ability to create unordered lists:

  • unordered item 1
  • unordered item 2
  • unordered item 3
  • unordered item 4

as well as ordered lists

  1. ordered item 1
  2. ordered item 2
  3. ordered item 3
  4. ordered item 4

For ordered list you have the ability to select the starting number and also the order (normal/reverse)

  1. ordered item 5 (continues from previous list)
  2. ordered item 6

You can embed images by uploading them from your computer and decide alignment. Remeber to always set Alternative text to improve accessibility for blind people. You can also change the size of the image by simply using the drag point on the bottom left corner and eventually hyperlink it.

Remember to always add alternative text
You can add also caption to images

You can also embed videos from YouTube by copying and pasting the youtube URL (ex: https://www.youtube.com/watch?v=pmdTVb8hiA4&t=2s). Please remember to set it as responsive so that it will be automatically resized also on mobile devices while avoid to use the autoplay functionality (except for particular cases) since it reduces usability and it's not a good practice.

If you want to highlight some text or include a citation you can use the blockquote functionality as shown below

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.

– Macaronibros

Another way of formatting text differently is using the CODE button (<>):

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.

Use it with responsibility and only to highlight something, always prefer the blockquote functionality.

You can include also tables using the proper button, just remember that tables are always full width and have alternate colours for rows

This is a table caption
col 1
row 1
col 2
row 1
col 3
row 1
col 1
row 2
col 2
row 2
col 3
row 2

This is a single column with image paragraph

Use this widget if you want a big image on one side of the page and text on the other side. You can use all the formatting options described above and you have also the ability to add an optional call to action:

This is a single column with image paragraph

Use this widget if you want a big image on one side of the page and text on the other side. You can use all the formatting options described above and you have also the ability to add an optional call to action:

One column with form widget

Use this widget if you want to embed a webform. You can put some text above and remember that the form should be created first by administrators while the status of the form should be set to Open to allow website viewers to submit it.

Two columns widget

Use this widget to put text in two columns:

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.

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.

Related media widget

Milking dairy opportunities

Milking dairy opportunities: youth in Kenya

Milking dairy opportunities

Milking dairy opportunities: youth in Kenya

Changing climate, changing cattle farming - Part 1

Full width Image widget with Style 1

You can put credits
You can use caption to describe the image

You can put some text on the right box and optionally add also a call to action button using the link field below.

External link

Full width Image widget with Style 2

You can put credits
You can use caption to describe the image

You can put some text on the right box and optionally add also a call to action button using the link field below.

External link

Full width embed widget

A young man in Macahakos
Slide 1 credits
Men holding a small plant in their hands
Slide 2 credits

Banners widget (Style 1)

Banners widget (Style 2)

Testimonials widget

The full name of testimonial

The full name of testimonial

The position of testimonial

Her you can put the quote text using some formatting options.

The full name of testimonial

The full name of testimonial

The position of testimonial

You can add as many testimonials as you want. If you insert more than one a slideshow formatting is applied.

Abdrahmane Wane

Abdrahmane Wane

Regional Representative for West Africa

Alessandra Galiè

Alessandra Galiè

Team leader: Gender

Ben Lukuyu

Ben Lukuyu

Senior Scientist, Animal Nutrition

Bernhard Hack

Bernhard Hack

Digital ecosystems manager

Daniel Hailemichael

Daniel Hailemichael

Web Projects Manager

Organizations widget

Biovision

Australian Aid

Gates Foundation

Gates Foundation

CGIAR Trust Fund

Accordions widget

Collapsed text

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.

Collapsed text

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.

Raw HTML widget

This is similar to the raw HTML widget you have on the sidebar but its shown on the left side of the page.

In some particular scenarios you may need to add raw HTML. Please not that using this kind of functionality allows you to put any kind of HTML markup and filters to clean up the code and make it safe will not be applied. Use with care and mainly to embed code from third party providers (Ex: soundcloud embed, etc)

First tab

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 tab

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. 

Third tab

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