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.

Check out some examples.

OptionDefaultExampleDescription
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:

  • none
  • left
  • right
  • center
text_align(empty)text_align="textright"Text alignment for elements within your Block. Options:

  • (empty) – Default
  • textleft – Left
  • textcenter – Center
  • textright – Right
text_align_convert(empty)text_align_convert_device="mobile"Change the text alignment for smaller devices? Which devices to use the new alignment:

  • (empty) – None
  • phone – Phones
  • tablet – Tablets
  • mobile – All mobile devices
text_align_convert_align(empty)text_align_convert_align="textcenter"Choose a new text alignment for smaller devices. Options:

  • (empty) – None
  • textleft – Left
  • textcenter – Center
  • textright – Right
rounded(empty)rounded="rounded"Give the block box rounded corners. Options:

  • (empty) – None
  • page-rounded – Page Rounded (page radius)
  • rounded – Rounded (element radius)
shadow(empty)shadow="dropshadow-hover-off"Add a shadow to the block. Options:

  • (empty) – None
  • dropshadow – Drop shadow
  • dropshadow-hover-off – Drop shadow off on hover
  • dropshadow-hover – Drop shadow on hover
  • dropshadow-bottom – Bottom drop shadow
  • dropshadow-bottom-hover-off – Bottom drop shadow off on hover
  • dropshadow-bottom-hover – Bottom drop shadow on hover
  • dropshadow-spread – Spread drop shadow
  • dropshadow-spread-hover-off – Spread drop shadow off on hover
  • dropshadow-spread-hover – Spread drop shadow on hover
arrow(empty)arrow="arrow left"Add an arrow to the block. Options:

  • (empty) – None
  • arrow – Top Center
  • arrow left – Top Left
  • arrow right – Top Right
  • arrow bottom – Bottom Center
  • arrow bottom left – Bottom Left
  • arrow bottom right – Bottom Right
  • arrow on-left – Left Center
  • arrow on-left side-top – Left Top
  • arrow on-left side-bottom – Left Bottom
  • arrow on-right – Right Center
  • arrow on-right side-top – Right Top
  • arrow on-right side-bottom – Right Bottom
border(empty)border="border"Give the Block a border. You can have a top and bottom, left and right or full border. Options:

  • (empty) – None
  • border – Full
  • border b-lr – Left / right only
  • border b-tb – Top / bottom only
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:

  • (empty) – None
  • child-overlay – I am the parent Block
  • child-fixed – Fade me in
  • child-fixed fade-in-down-child – Fade me in down
  • child-fixed fade-in-up-child – Fade me in up
convert(empty)convert="cvt-phone-ldsp"Convert nested block on hover. Options:

  • (empty) – None
  • cvt-phone-ptr – Phone Portrait
  • cvt-phone-ldsp – Phone Landscape
  • cvt-tablet-ptr – Tablet Portrait
  • cvt-tablet-ldsp – Tablet Landscape
width(empty)width="viewport"Options:

  • (empty) – Default (fills the content area)
  • stretched – Stretched to the edges of the content area
  • viewport – Stretched to the edges of the viewport
  • outer – Stretched to the outer edges of the content on Fluid and Box Inner layouts
  • custom – Custom width entered in custom_width attribute.
custom_width(empty)custom_width="200px"Enter a CSS width for the block, also requires width="custom" attribute.
inside_max_width0inside_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_top0margin_top="10"Add a CSS margin-top to the block in pixels.
margin_bottom0margin_bottom="10"Add a CSS margin-bottom to the block in pixels.
padding_top40padding_top="10"Add a CSS padding-top to the block in pixels.
padding_right40padding_right="10"Add a CSS padding-right to the block in pixels.
padding_bottom40padding_bottom="10"Add a CSS padding-bottom to the block in pixels.
padding_left40padding_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_height0use_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_height0use_screen_as_fixed_height="1"The height of the block will be set to the screen height
fixed_height400fixed_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_middle0vertical_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_opacity20texture="50"Set the opacity level of the texture, from 10 to 50 in steps of 10.
texture_fixed0texture_fixed="1"Set the texture to fixed.
texture_large0texture_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_opacity20detail_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?

  • never = Nothing (keep full size image above always)
  • use-main-img = Use the above image at 50%
  • use-new-img = Select a new image to use
  • change-position = Use this image but change position
  • no-image = Show no image at break point
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_retina0image_is_retina="1"Is this a retina ready image?
image_convertbox-widthimage_convert="tablet-ptr"When would you like to start using this image? See the shortcode generator for available options.
image_convert_custom1000image_convert_custom="700"Custom convert with in pixels.
image_positioncenter topimage_position="left top"CSS background-position for the background image.
image_repeatno-repeatimage_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_fixed0image_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_retinacenter topimage_position_retina="left top"CSS background-position for the alternative/retina background image.
image_repeat_retinano-repeatimage_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_retina0image_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_parallax1image_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_offset0image_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:

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large

Examples

[block id="my_block" stretched="1" texture="vert-thick-dk" detail="six-light"]Block content[/block]

Check out more examples

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>
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy