The block shortcode allows you to completely change the color scheme of any elements used within the Block. You can also add styling to the Block such as custom backgrounds (with parallax) or texture effects, and there are plenty of layout options available.
| Option | Default | Example | Description |
|---|---|---|---|
| id | (empty) | id="block_one" | Add an ID attribute (required if you want to anchor link to the block). |
| class | (empty) | class="my-class" | Add additional classes to the Block outer wrapper. |
| align | (empty) | align="left" | Change the alignment to one of the following:
|
| text_align | (empty) | text_align="textright" | Text alignment for elements within your Block. Options:
|
| text_align_convert | (empty) | text_align_convert_device="mobile" | Change the text alignment for smaller devices? Which devices to use the new alignment:
|
| text_align_convert_align | (empty) | text_align_convert_align="textcenter" | Choose a new text alignment for smaller devices. Options:
|
| rounded | (empty) | rounded="rounded" | Give the block box rounded corners. Options:
|
| shadow | (empty) | shadow="dropshadow-hover-off" | Add a shadow to the block. Options:
|
| arrow | (empty) | arrow="arrow left" | Add an arrow to the block. Options:
|
| border | (empty) | border="border" | Give the Block a border. You can have a top and bottom, left and right or full border. Options:
|
| palette | (empty) | palette="[your_palette_id]" | First create a color palette in Theme Options – Design – Color. Once created you can assign the palette to this shortcode, this will means all content within it will be assigned the new colors. |
| hover_animation | (empty) | hover_animation="hvr-shrink" | Add an animation when the block is hovered, use the shortcode generator to see available options. |
| animation | (empty) | animation="fadeIn" | Add an animation when the block comes into view, use the shortcode generator to see available options. |
| animation_delay | (empty) | animation_delay="1500" | The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second). |
| animation_offset | (empty) | animation_offset="200" | If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport. |
| child_hover | (empty) | child_hover="child-fixed fade-in-down-child" | Show nested block on hover. Options:
|
| convert | (empty) | convert="cvt-phone-ldsp" | Convert nested block on hover. Options:
|
| width | (empty) | width="viewport" | Options:
|
| custom_width | (empty) | custom_width="200px" | Enter a CSS width for the block, also requires width="custom" attribute. |
| inside_max_width | 0 | inside_max_width="1" | Adds the page max width to the content of the block. This will allow the Block to be fluid but with a fixed width content area. |
| margin_top | 0 | margin_top="10" | Add a CSS margin-top to the block in pixels. |
| margin_bottom | 0 | margin_bottom="10" | Add a CSS margin-bottom to the block in pixels. |
| padding_top | 40 | padding_top="10" | Add a CSS padding-top to the block in pixels. |
| padding_right | 40 | padding_right="10" | Add a CSS padding-right to the block in pixels. |
| padding_bottom | 40 | padding_bottom="10" | Add a CSS padding-bottom to the block in pixels. |
| padding_left | 40 | padding_left="10" | Add a CSS padding-left to the block in pixels. |
| padding_top_tablet | (empty) | padding_top_tablet="10" | Override the CSS padding-top for the block in pixels for tablet devices. |
| padding_right_tablet | (empty) | padding_right_tablet="10" | Override the CSS padding-right for the block in pixels for tablet devices. |
| padding_bottom_tablet | (empty) | padding_bottom_tablet="10" | Override the CSS padding-bottom for the block in pixels for tablet devices. |
| padding_left_tablet | (empty) | padding_left_tablet="10" | Override the CSS padding-left for the block in pixels for tablet devices. |
| padding_top_phone | (empty) | padding_top_phone="10" | Override the CSS padding-top for the block in pixels for phone devices. |
| padding_right_phone | (empty) | padding_right_phone="10" | Override the CSS padding-right for the block in pixels for phone devices. |
| padding_bottom_phone | (empty) | padding_bottom_phone="10" | Override the CSS padding-bottom for the block in pixels for phone devices. |
| padding_left_phone | (empty) | padding_left_phone="10" | Override the CSS padding-left for the block in pixels for phone devices. |
| use_screen_as_min_height | 0 | use_screen_as_min_height="1" | The minimum height of the block will automatically be set to the device height. |
| min_height | (empty) | min_height="300" | Add a custom min-height attribute to a value of your choice. |
| scroll | (empty) | scroll="1" | Set a fixed height and overflowing content will be set to scroll. |
| use_screen_as_fixed_height | 0 | use_screen_as_fixed_height="1" | The height of the block will be set to the screen height |
| fixed_height | 400 | fixed_height="600" | If using a the scroll option you will need to set a Fixed pixel height for the Block. |
| fixed_height_tablet | (empty) | fixed_height_tablet="500" | Override the fixed height for tablet devices. If empty the block will inherit the fixed_height value above. |
| fixed_height_phone | (empty) | fixed_height_phone="400" | Override the fixed height for phone devices. If empty the block will inherit the fixed_height_tablet value above. |
| vertical_align_middle | 0 | vertical_align_middle="1" | This will make the content align in the middle of the fixed height block. Requires scroll=”1″. |
| texture | (empty) | texture="" | Choose a texture image for use on the block, see the shortcode generator for available options. |
| texture_opacity | 20 | texture="50" | Set the opacity level of the texture, from 10 to 50 in steps of 10. |
| texture_fixed | 0 | texture_fixed="1" | Set the texture to fixed. |
| texture_large | 0 | texture_large="1" | Use double size for non retina displays. |
| detail | (empty) | detail="" | Choose a detail image for use on the block, see the shortcode generator for available options. |
| detail_opacity | 20 | detail_opacity="50" | Set the opacity level of the detail, from 10 to 50 in steps of 10. |
| image | (empty) | image="http://www.example.com/example.png" | The URL of a custom background image for the block. |
| image_width | (empty) | image_width="400" | The width of the above image. |
| image_height | (empty) | image_height="300" | The height of the above image. |
| image_retina_use_main_img | (empty) | image_retina_use_main_img="300" | What would you like to do for smaller screens and/or Retina devices?
|
| image_retina | (empty) | image_retina="http://www.example.com/example-retina.png" | Alternative or Retina image URL. |
| image_retina_width | (empty) | image_retina_width="400" | The width of the above image. |
| image_retina_height | (empty) | image_retina_height="300" | The height of the above image. |
| image_is_retina | 0 | image_is_retina="1" | Is this a retina ready image? |
| image_convert | box-width | image_convert="tablet-ptr" | When would you like to start using this image? See the shortcode generator for available options. |
| image_convert_custom | 1000 | image_convert_custom="700" | Custom convert with in pixels. |
| image_position | center top | image_position="left top" | CSS background-position for the background image. |
| image_repeat | no-repeat | image_repeat="repeat" | CSS background-repeat for the background image. |
| image_position_custom | (empty) | image_position_custom="95% 95%" | Set a custom CSS background-position for the background image. |
| image_fixed | 0 | image_fixed="1" | Fixed position background image. |
| image_background_size | (empty) | image_background_size="300px 500px" | The background-size property specifies the size of the background image. Examples: “100% auto” or “300px 500px” |
| image_position_retina | center top | image_position_retina="left top" | CSS background-position for the alternative/retina background image. |
| image_repeat_retina | no-repeat | image_repeat_retina="repeat" | CSS background-repeat for the alternative/retina background image. |
| image_position_custom_retina | (empty) | image_position_custom_retina="95% 95%" | Set a custom CSS background-position for the alternative/retina background image. |
| image_fixed_retina | 0 | image_fixed="1" | Fixed position alternative/retina background image. |
| image_background_size_retina | (empty) | image_background_size_retina="300px 500px" | The background-size property specifies the size of the alternative/retina background image. Examples: “100% auto” or “300px 500px” |
| image_parallax | 1 | image_parallax="0.75" | If you set this to anything other than 1, the background image will scroll at a different speed than the page, creating a parallax effect. Setting it to 0.5 will make it scroll at half the speed, setting it to 2 will make it scroll at twice the speed. |
| image_parallax_offset | 0 | image_parallax_offset="200" | This number determines when the background image will be visible, it is the number of pixels from the top of the viewport that the top of background image should be at the top of the block. Experiment with different numbers. |
| hide | (empty) | hide="hide-phone" | This gives you the ability to hide this shortcode on the devices you select:
|
Examples
[block id="my_block" stretched="1" texture="vert-thick-dk" detail="six-light"]Block content[/block]
Nested Block shortcodes
Nested Block shortcodes will not work using the same block shortcodes as the outer blocks, due to limitations of the WordPress shortcode parsing system. However, we have added the duplicate shortcodes block1, block2, block3, block4, and block5, that you can use for the inner blocks. Only use one shortcode of each type within a nested group.
Example
<div id="outer_block" class="tcs-block-outer tcs-block-1 tcs-clearfix"><style type="text/css" scoped>@media only screen and (max-width: 568px) { .tcs-block-1 > .tcs-block-inner > .tcs-block-wrap { padding-right:20px;padding-left:20px; }}
</style><div class="tcs-block-inner tcs-clearfix"><div style="" class="tcs-block-wrap tcs-clearfix">
<div id="inner_block" class="tcs-block-outer tcs-block-2 tcs-clearfix"><style type="text/css" scoped>@media only screen and (max-width: 568px) { .tcs-block-2 > .tcs-block-inner > .tcs-block-wrap { padding-right:20px;padding-left:20px; }}
</style><div class="tcs-block-inner tcs-clearfix"><div style="" class="tcs-block-wrap tcs-clearfix">
</div></div></div>
<div id="another_inner_block" class="tcs-block-outer tcs-block-3 tcs-clearfix"><style type="text/css" scoped>@media only screen and (max-width: 568px) { .tcs-block-3 > .tcs-block-inner > .tcs-block-wrap { padding-right:20px;padding-left:20px; }}
</style><div class="tcs-block-inner tcs-clearfix"><div style="" class="tcs-block-wrap tcs-clearfix">
<div id="in_an_inner_block" class="tcs-block-outer tcs-block-4 tcs-clearfix"><style type="text/css" scoped>@media only screen and (max-width: 568px) { .tcs-block-4 > .tcs-block-inner > .tcs-block-wrap { padding-right:20px;padding-left:20px; }}
</style><div class="tcs-block-inner tcs-clearfix"><div style="" class="tcs-block-wrap tcs-clearfix">
</div></div></div>
</div></div></div>
</div></div></div>