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]
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.