Home › Updates

Updates

New design feature: predefined content block styles

 June 11, 2017
by Flavio Mester

Predefined content block classes

The Your Web Department platform comes with several predefined content block styles that let you override its default settings and even apply a whole new look to a block without the need to write a single line of code. To apply a predefined style, switch to the block’s Advanced options and then simply select the class from the list. The currently available classes are described below.

Predefined content block styles
Applying a predefined style to a content block

 

NoImgOnMob

Will hide any images in the content content block from mobile i.e. when the window is 480 pixels wide or smaller. Useful for instance if you have a very large image that you would rather simply hide from phones.

 

WhiteText

Renders all text in the block – normal paragraphs as well H1-H6 – in white, regardless of the website’s design settings. Links and buttons are not affected.

 

BlackText

Same as above, but for black text.

 

AnimZoomIn

Applies an animation effect to the content block. It will fade in and zoom until it reaches its normal size. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideLeft

Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideRight

Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimFlip

Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

CardReg

Applies a style similar to a Google Material Design card component to the block.

Card component
A CardReg-styled content block

To build a block with this appearance, edit your content block this way:

1. Select Normal (DIV) as the Paragraph Format for the image, as opposed to the default Normal setting.

Card component editing

2. Type/paste the rest of the content as a heading (typically H3 or H4) and the rest of the copy as a regular paragraph.

3. Set the content block width e.g. 320px for a row with 3 callouts side by side, with some margin between the callout and the next, if applicable.

Box style

4. Set the block’s Custom CSS class to CardReg.

 

CardHeader

This style is similar to CardReg above and you should set the content up the same way. However, here the style sheet will position the heading text overlaid on the image, and in white. Make sure you keep the heading text very short, as it needs to fit within a single line.

Card with a reverse header
A CardHeader-styled content block

 

MaxText500 – MaxText900

These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 


  

 

 
Top of page