Block

What’s this?

Blocks are one of the most useful shortcodes for React. It can be used to change the colors of elements with in them. It’s really flexible, you can shape it just the way you want it. Add backgrounds, parallax effects and much more. Check out these examples below.

Blocks make it easy to style and organize content

Block is an extremely diverse Shortcode

Get code

[block id="Block_ID_1" rounded="rounded" margin_bottom="20" border="border"]
[/block]

Create any color palette to apply to a block

This will change any theme content within the Block to match it.

Get code

[block id="Block_ID_2" border="border b-tb" width="outer" inside_max_width="1" palette="0" margin_bottom="20"]
[/block]

You can have as many Color Palettes as you like

45 Ready-made Color Palettes are available in the Options.

Get code

[block id="Block_ID_3" border="border b-tb" width="outer" inside_max_width="1" palette="1" margin_bottom="20"]
[/block]

35 different Textures to add

This is an example of the Dark_wood texture

Get code

[block id="Block_ID_4" texture="dark_wood" texture_fixed="1" border="border b-tb" width="outer" inside_max_width="1" palette="6" margin_bottom="20"]
[/block]

22 different Details to add

You can see a darkening towards the edge of the page.

Get code

[block id="Block_ID_5" texture="ps_neutral" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" border="border b-tb" width="outer" inside_max_width="1" palette="6" margin_bottom="20"]
[/block]

You can add a custom background image

Sky’s the limit.

Get code

[block id="Block_ID_6" texture="pinstriped_suit" margin_bottom="20" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" border="border b-tb" width="outer" inside_max_width="1" palette="6" image_background_size="cover" image="2015/08/Dollarphotoclub_48026756-home-image.jpg" image_width="1920" image_height="1031" image_position="center center" image_position_retina="center center" image_fixed_retina="1"] ... [/block]

Add Parallax effects

Notice the image moves in relation to your scrolling of the page.

Get code

[block id="Block_ID_7" texture="pinstriped_suit" margin_bottom="20" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" border="border b-tb" width="outer" inside_max_width="1" palette="6" image="2015/08/Dollarphotoclub_48026756-home-image.jpg" image_width="1920" image_height="1031" image_position="center center" image_fixed="1" image_position_retina="center center" image_fixed_retina="1" image_parallax="1.8"] ... [/block]

Nest Blocks

Add Blocks inside Blocks.

Get code

[block id="Block_ID_8" texture="pinstriped_suit" margin_bottom="20" texture_fixed="1" detail="large-edge-dark" detail_opacity="10" border="border b-tb" width="outer" inside_max_width="1" palette="0" image="2015/08/Dollarphotoclub_48026756-home-image.jpg" image_width="1920" image_height="1031" image_position="center center" image_fixed="1" image_position_retina="center center" image_fixed_retina="1"][block1 palette="0" shadow="dropshadow" rounded="rounded"] ... [/block1][/block]

Add a fixed height

Extra content will be scrollable.

Get code

[block border="border" scroll="1" fixed_height="200"] ... [/block]

Change the dimensions

Mold the Block to fit your design.

Get code

[block id="Block_ID_9" width="70%" padding_bottom="500" padding_right="50" padding_top="50" padding_left="50" min_height="500" texture="shattered" margin_bottom="20" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" palette="3" image="2014/06/7309922936_fcfc10df01_o1.jpg" image_width="1920" image_height="1280" image_position="top right" image_fixed="1" image_position_retina="top right" image_fixed_retina="1"][block1 palette="9" rounded="rounded"]... [/block1][/block]
Blocks are used extensively throughout the demo site pages and the Case Studies, you can check out even more variations there.
X

Variations

Change the Skin for this Case Study

Case Studies

Design demos for React