Frontend Markup

General Markup

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.

Raw Content

The raw content option includes very basic markup. A standard example is depicted below. Raw content is unique in that it provides you with the option to remove all markup, including the general markup. This feature is useful when you are adding very specific HTML or if the inclusion of markup would not make sense, such as when adding CSS, javascript, or PHP.

For more information on implementing raw content blocks, head to the corresponding documentation page.

Static Image

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.

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

Background Image

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.

Editor Content

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.

Slideshow

The slideshow content type comes with a number of different options. Each have their own slightly different markup.

Builtin Slideshow

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: revolution, soliloquy, or metaslider.

Shortcode Slideshow

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

For more information on implementing slideshow blocks, head to the corresponding documentation page.