Regardless of the content type and scope, Local or Global, all blocks have the same general markup. Each block has an external
<div> with the block’s unique id, a number of standardized CSS classes, and any custom classes that you have added. Next, there is an internal wrapper
<div>, which can also include the
wrap selector depending on the block’s style settings. Many Genesis themes use
wrap for styling purposes.
For more information on implementing raw content blocks, head to the corresponding documentation page.
The static image option has two markup configurations, one for a standard image and another for an image that has been set as a background image.
If you are using a standard image, your markup will look similar to the example below. In the first image container
<div> you will see the class
custom. This refers to the image type: featured, custom, featured-custom. This selector is convenient for targeting all static image blocks using a specific image type. Finally, in this example we have both a link and a caption. This markup will be removed if no link or caption is set.
When a background image is set, the
blox-image-background selector is added to the image wrapper. The image itself is set directly to the wrapper as a background image. Again, if you have not set an image link or a caption, the corresponding markup in the example below will not be generated.
For more information on implementing static images blocks, head to the corresponding documentation page.
The markup for editor content blocks is similar to raw content. It has no special selectors and is very straightforwards.
For more information on implementing editor content blocks, head to the corresponding documentation page.
The slideshow content type comes with a number of different options. Each have their own slightly different markup.
The first slideshow type is the builtin slideshow. This slider is powered by Slick Slider and the markup example below reflects this. Blox does include some default styling for the builtin slider that differs from the default Slick Slider styling. The default Blox styling can be disabled on each block.
Third Party Slideshows
The slideshow content option also supports a number of third party slideshow plugins: Revolution Slider, Soliloquy, and Meta Slider. If you are using one of these plugins you will be able to easily add them to a content block. The markup for the slideshow itself will be dictated by the slideshow plugin you are using, but the slideshow will be wrapped in container and wrapper divs. The container includes a selector to indicate what type of third pary slideshow plugin that is being used:
Slideshows can also be added via shortcode. If you are using a slideshow plugin that offers shortcodes, you can simply paste it in, and the slideshow will render. The markup for this option is straightforward. There is both a slideshow container and wrapper
<div>. The container includes a selector to indicate the slideshow type that is being used, which in this case is
For more information on implementing slideshow blocks, head to the corresponding documentation page.