Content block shortcode example:
This is an example of a content block. You may insert any content you’d like, text, images, video, etc.
Also, you may change the background and set various other options to make it fit your design needs.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.[/content_block]
[code language=”php” gutter=”false” tabsize=”4″ toolbar=”true”]
[[content_block bg_image=”your background image goes here…” max_bg_width=”yes” bg_fixed=”yes” bg_position=”center top” bg_repeat=”repeat-x” bg_size=”auto” parallax_scroll=”yes” bg_color=”#969696″ content_padding=”60px 0″ font_color=”#FFFFFF” class=”class-name”] …your content goes here… [/content_block]]
[/code]
Here’s a break down of all the content block shortcode options:
- bg_image → the link to a background image (where “bg” stands for “background”), if no image is specified the fallback would be bg_color option
- max_bg_width → whether to extend the background to its maximum width and only limited by the width of the browser window – (possible values: “yes” and “no”)
- bg_fixed → as the name suggests, the background will stay fixed, will not scroll along with the page (possible values: “yes” and “no”)
- bg_position → use the CSS “background-position” property (read under “Property Values” here)
- bg_repeat → use the CSS “background-repeat” property (read under “Property Values” here)
- bg_size → use the CSS “background-size” property (read under “Property Values” here)
- parallax_scroll → enables and disables parallax scrolling respectively (possible values: “yes” and “no”)
- bg_color → self explanatory (possible values: whatever CSS acceptable value for color is, more)
- font_color → content text color (possible values: whatever CSS acceptable value for color is, more)
- content_padding → you may use the shorthand notation of CSS padding property (more)
- class → advanced option for those who know how to work with CSS. They could pass a unique class that will apply specifically to this instance of the content_block and thus can be used to apply some custom styling specifically to this instance if so desired
