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.
Applying a predefined style to a content block
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.
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.
Same as above, but for black text.
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.
Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Applies a style similar to a Google Material Design card component to the block.
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.
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.
4. Set the block’s Custom CSS class to CardReg.
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.
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.