[box type="custom-boxed-item" align="center" text_align="textcenter"]
[fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header]
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.
[icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"]
[/box]
[section_break type="blank" margin_bottom="30" /]
[block id="Block_ID_1" rounded="rounded" margin_bottom="20" border="border"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-magic" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Blocks make it easy to style and organize content[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Block is an extremely diverse Shortcode[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_2" text_align="textright"]Link to next block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_6" text_align="textright"]Middle block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_9" text_align="textright"]Last block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[block id="Block_ID_1" rounded="rounded" margin_bottom="20" border="border"]
[/block]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_2" border="border b-tb" width="outer" inside_max_width="1" palette="1" margin_bottom="20" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-paint-brush" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Create any color palette to apply to a block[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]This will change any theme content within the Block to match it.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_3" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[block id="Block_ID_2" border="border b-tb" width="outer" inside_max_width="1" palette="0" margin_bottom="20"]
[/block]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_3" border="border b-tb" width="outer" inside_max_width="1" palette="4" margin_bottom="20" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-paint-brush" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]You can have as many Color Palettes as you like[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]45 Ready-made Color Palettes are available in the Options.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_4" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[block id="Block_ID_3" border="border b-tb" width="outer" inside_max_width="1" palette="1" margin_bottom="20"]
[/block]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_4" texture="dark_wood" texture_fixed="1" border="border b-tb" width="outer" inside_max_width="1" palette="1" margin_bottom="20" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-leaf" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]35 different Textures to add[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]This is an example of the Dark_wood texture[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_5" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[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="1" margin_bottom="20" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-eyedropper" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]22 different Details to add[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]You can see a darkening towards the edge of the page.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_6" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_6" border="border b-tb" width="outer" inside_max_width="1" margin_bottom="20" palette="1" texture="pinstriped_suit" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" image="2015/08/Dollarphotoclub_48026756-home-image.jpg" image_width="1920" image_height="1031" image_background_size="cover" image_position="center center" image_position_retina="center center" image_fixed_retina="1" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-photo" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]You can add a custom background image[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Sky's the limit.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_7" text_align="textright"]Link to next block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_1" text_align="textright"]First block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_9" text_align="textright"]Last block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_7" border="border b-tb" width="outer" inside_max_width="1" margin_bottom="20" margin_top="120" palette="1" texture="pinstriped_suit" texture_fixed="1" detail="large-edge-dark" detail_opacity="50" image="2015/08/Dollarphotoclub_48026756-home-image.jpg" image_width="1920" image_height="1031" image_position="top center" image_fixed="1" image_background_size="cover" image_position_retina="top center" image_fixed_retina="1" image_parallax="0.3" image_parallax_offset="100"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-arrows-v" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Add Parallax effects[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Notice the image moves in relation to your scrolling of the page.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_8" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_8" border="border b-tb" width="outer" inside_max_width="1" palette="0" margin_bottom="20" margin_top="120" texture="pinstriped_suit" texture_fixed="1" detail="large-edge-dark" detail_opacity="10" 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="3" rounded="rounded" shadow="dropshadow"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-trello" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Nest Blocks[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Add Blocks inside Blocks.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_9" text_align="textright"]Link to next block[/button][/col]
[/row]
[/block1]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[block border="border" scroll="1" fixed_height="250" margin_bottom="20" margin_top="120"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-cube" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Add a fixed height[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Extra content will be scrollable.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_9" text_align="textright"]Link to next block[/button]
[/col]
[/row]
[/block]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[block border="border" scroll="1" fixed_height="200"] ... [/block]
[/accordion_toggle]
[/accordion]
[block id="Block_ID_9" palette="3" width="viewport" inside_max_width="1" margin_top="50" margin_bottom="20" scroll="1" use_screen_as_fixed_height="1" vertical_align_middle="1" texture="pinstriped_suit" texture_opacity="10" detail="large-edge-dark" image="2014/08/blue-coated-penguin.jpg" image_width="1920" image_height="1290" image_fixed="1" image_fixed_retina="1"]
[block1 align="center" rounded="rounded" shadow="dropshadow" palette="3" width="custom" custom_width="690px"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]
[icon icon="fa-cube" font_size="80" color="style-inherit" gradient="gradient" animation="fadeInUp" animation_offset="300" position="center" margin_top="40px"]
[/col]
[col width="80"]
[fancy_header type="prime-line fixed-width" bold="1"]Change the dimensions[/fancy_header]
[fancy_header tag="h4" margin_top="10" margin_bottom="10"]Mold the Block to fit your design.[/fancy_header]
[button convert="cvt-phone-ldsp" href="#Block_ID_9" text_align="textright"]Link to next block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_1" text_align="textright"]First block[/button]
[button convert="cvt-phone-ldsp" href="#Block_ID_6" text_align="textright"]Middle block[/button]
[/col]
[/row]
[/block1]
[/block]
[accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion]
[box type="info"]Blocks are used extensively throughout the demo site pages and the Case Studies, you can check out even more variations there. [/box]
