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.
<!– Example frontend markup for Blox –> | |
<div id="blox_global_1234" class="blox-container blox-content-[content_type] blox-theme-[set_theme] blox-scope-[global_local] [custom_classes]"> | |
<div class="blox-wrap [wrap]"> | |
<!– Additional markup is added here depending on the content_type that is selected –> | |
</div> | |
</div> |
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.
<!– Example frontend markup for a Global raw content block –> | |
<div id="blox_global_1234" class="blox-container blox-content-raw blox-theme-default blox-scope-global"> | |
<div class="blox-wrap"> | |
<div class="blox-raw-container"> | |
<div class="blox-raw-wrap"> | |
<!– The raw content that you entered is printed here –> | |
</div> | |
</div> | |
</div> | |
</div> |
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.
<!– Example frontend markup for a Local static image block –> | |
<div id="blox_local_1234" class="blox-container blox-content-image blox-theme-default blox-scope-local"> | |
<div class="blox-wrap"> | |
<div class="blox-image-container custom"> | |
<div class="blox-image-wrap"> | |
<a href="http://www.example.com" target="_blank" title="The Link Title" class="sample-class" rel="no-follow"> | |
<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image.jpg" alt="The Image Alt Text" title="The Image Title" class="sample-class"> | |
</a> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap">A Sample Caption</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
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.
<!– Example frontend markup for a Local static image block with the image set as a background image –> | |
<div id="blox_local_1234" class="blox-container blox-content-image blox-theme-default blox-scope-local"> | |
<div class="blox-wrap"> | |
<div class="blox-image-container custom"> | |
<div class="blox-image-wrap blox-image-background sample-class" style="background-image: url(https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image.jpg)"> | |
<a href="http://www.example.com" target="_blank" title="The Link Title" class="sample-class" rel="no-follow"></a> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap">A Sample Caption</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
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.
<!– Example frontend markup for a Global editor content block –> | |
<div id="blox_global_1234" class="blox-container blox-content-editor blox-theme-default blox-scope-global"> | |
<div class="blox-wrap"> | |
<div class="blox-editor-container"> | |
<div class="blox-editor-wrap"> | |
<!– The editor content that you entered is printed here –> | |
</div> | |
</div> | |
</div> | |
</div> |
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.
<!– Example frontend markup for a Global slideshow block using the builtin slider –> | |
<div id="blox_global_354" class="blox-container blox-content-slideshow blox-theme-default blox-scope-local "> | |
<div class="blox-wrap"> | |
<div class="blox-slideshow-container builtin slick-initialized slick-slider slick-dotted" role="toolbar"> | |
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button> | |
<div aria-live="polite" class="slick-list draggable"> | |
<div class="slick-track" role="listbox" style="opacity: 1; width: 9144px; transform: translate3d(-6858px, 0px, 0px);"> | |
<!– Slide with just an image –> | |
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300×150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768×384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> | |
</div> | |
<!– Slide with caption –> | |
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300×150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768×384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap"> | |
Sample Image Caption | |
</div> | |
</div> | |
</div> | |
<!– Slide with link and caption –> | |
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<a href="http://www.example.com" target="_blank" title="The Link Title"> | |
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300×150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768×384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> | |
</a> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap"> | |
Sample Image Caption | |
</div> | |
</div> | |
</div> | |
<!– When images are set to background, the markup looks like the following –> | |
<!– Background Enabled – Slide with just an image –> | |
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> | |
</div> | |
</div> | |
<!– Background Enabled – Slide with caption –> | |
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap"> | |
Sample Image Caption | |
</div> | |
</div> | |
</div> | |
</div> | |
<!– Background Enabled – Slide with link and caption –> | |
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> | |
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> | |
<a href="http://www.example.com" target="_blank" title="The Link Title"></a> | |
<div class="blox-caption-container"> | |
<div class="blox-caption-wrap"> | |
Sample Image Caption | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button> | |
<ul class="slick-dots" style="display: block;" role="tablist"> | |
<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00"> | |
<button type="button" data-role="none" role="button" tabindex="0">1</button> | |
</li> | |
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01" class=""> | |
<button type="button" data-role="none" role="button" tabindex="0">2</button> | |
</li> | |
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02" class=""> | |
<button type="button" data-role="none" role="button" tabindex="0">3</button> | |
</li> | |
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03" class=""> | |
<button type="button" data-role="none" role="button" tabindex="0">4</button> | |
</li> | |
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation04" id="slick-slide04" class=""> | |
<button type="button" data-role="none" role="button" tabindex="0">5</button> | |
</li> | |
<li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation05" id="slick-slide05" class="slick-active"> | |
<button type="button" data-role="none" role="button" tabindex="0">6</button> | |
</li> | |
</ul> | |
</div> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($){ | |
$( '#blox_global_354 .blox-slideshow-container.builtin').slick({ | |
adaptiveHeight: false, | |
autoplay: false, | |
autoplaySpeed: 7000, | |
arrows: true, | |
dots: true, | |
fade: false, | |
infinite: true, | |
pauseOnHover: false, | |
speed: 600, | |
}); | |
}); | |
</script> | |
</div> | |
</div> |
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
.
<!– Example frontend markup for a Local slideshow block using a third party option –> | |
<div id="blox_local_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-global"> | |
<div class="blox-wrap"> | |
<div class="blox-slideshow-container [third_party_selector]"> | |
<div class="blox-slideshow-wrap"> | |
<!– The slideshow content generated by the third party plugin is printed here –> | |
</div> | |
</div> | |
</div> | |
</div> |
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
.
<!– Example frontend markup for a Global slideshow block using a slider shortcode –> | |
<div id="blox_global_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-global"> | |
<div class="blox-wrap"> | |
<div class="blox-slideshow-container shortcode"> | |
<div class="blox-slideshow-wrap"> | |
<!– The slideshow content generated by the shortcode is printed here –> | |
</div> | |
</div> | |
</div> | |
</div> |
For more information on implementing slideshow blocks, head to the corresponding documentation page.