How to style a blog page

Guidelines for styling of a blog page, step by step

 
 

1. Textstyles

Headline 2 - Use as headline of the blog-post

Textstyle: Headline 2
Position: centered
text-decoration: none

 

Headline 3 - Use for headlines inline or Taglines above the headline

Textstyle: Headline 3
Position: left
text-decoration: none
 

Headline 4 - Use for less important headlines, for example interview questions

Textstyle: normal
Position: left
text-decoration: bold

 

Introductory Text - Use for the introductory paragraph underneath the headline

Textstyle: normal
Position: left
text-decoration: italic

 

Normale Copy - use for everything else

Textstyle: normal
Position: left
text-decoration: none

Quotes. This is a visual example for one. Use the quote block for this, it will be formated automatically.

 

 

2. Images

Attention! When using an image caption, please hit the space bar 5 times before you start typing, so there will be some space between the caption and the border of the browser window.

 

Possibilities to place images in a blog article:

1Image: portrait format:

Use spacers on the left and on the right side of the image to bring it into a easily consumable size.

 

1 Image: landscape format

Insert it fullscreen without any spacers to the left and right

Bildschirmfoto 2017-08-03 um 16.36.37.png

 

2 Images: portrait format

Place them next to each other without any spacers.

Bildschirmfoto 2017-08-03 um 16.37.21.png

1 Image with text next to it

Use the the card style of the images and write your copy into the inputfields next to the image.

Bildschirmfoto 2017-08-03 um 16.55.49.png

 

3. Link to website & to blog overview

Insert a button to all blog articles and an image of the logo and URL after the article.

Add Links to Button and Image. The image needs to link to www.unumotors.com, whereas the button should link to the article overview of the
language, the article saved in.

 

 

Use Spacers under, above and in between the button and the image.

Bildschirmfoto 2017-08-03 um 17.23.57.png

 

4. Spacers

use

- Above the headline of the article

- under the introductory text

- left and right of portrait format images and card style images

- above and below images

- under the blog article

- between the link to the website and the social icons

 

 

5. Example Post