Blox Frontend Markup Examples

blox_markup.html

<!-- 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>

blox_markup_editor.html

<!-- 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>

blox_markup_image.html

<!-- 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>

blox_markup_image_background.html

<!-- 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>

blox_markup_raw.html

<!-- 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>

blox_markup_slideshow_builtin.html

<!-- Example frontend markup for a Local slideshow block using the builtin slider -->

<div id="blox_local_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-local ">
	<div class="blox-wrap">
		<div class="blox-slideshow-container builtin flexslider">
			<div class="flex-viewport" style="overflow: hidden; position: relative;">
				<ul class="blox-slideshow-wrap slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
          
          				<!-- Slide with link and caption -->
					<li id="slide_k96g" class="blox-slideshow-item image demo-class flex-active-slide" style="width: 1511px; float: left; display: block;">
						<a href="http://www.example.com" target="_blank" title="The Link Title">
							<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image_1.jpg" alt="Some Alt Text" title="Sample Image 1" draggable="false">
						</a>
						<div class="blox-caption-container">
							<div class="blox-caption-wrap">
								Sample Image Caption										
							</div>
						</div>
					</li>
					
					<!-- Slide with caption -->
					<li id="slide_ui4p" class="blox-slideshow-item image" style="width: 1511px; float: left; display: block;">
						<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image_2.jpg" alt="Some Alt Text" title="Sample Image 2" draggable="false">
						<div class="blox-caption-container">
							<div class="blox-caption-wrap">
								Sample Image Caption										
							</div>
						</div>
					</li>
					
					<!-- Slide with just an image -->
					<li id="slide_j9mp" class="blox-slideshow-item image" style="width: 1511px; float: left; display: block;">
						<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image_3.jpg" alt="Some Alt Text" title="Sample Image 3" draggable="false">
					</li>

				</ul>
			</div>
			<ol class="flex-control-nav flex-control-paging">
				<li><a class="flex-active">1</a></li>
				<li><a>2</a></li>
				<li><a>3</a></li>
			</ol>
			<ul class="flex-direction-nav">
				<li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
				<li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
			</ul>
		</div>

		<script type="text/javascript">
			jQuery(document).ready(function($){

				// Set all of our slider settings
				$(window).load(function() {
					$('#blox_local_5420 .blox-slideshow-container.builtin').flexslider({
						animation: "slide",
						animationLoop: false,
						slideshow: false,
						pauseOnHover: false,
						directionNav: true,
						controlNav: true,
						slideshowSpeed: 7000,
						animationSpeed: 600,
						smoothHeight: false,
					});
				});
			});
		</script>
	</div>
</div>

blox_markup_slideshow_builtin_slick.html

<!-- 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-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.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-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.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-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.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>

blox_markup_slideshow_shortcode.html

<!-- 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>

blox_markup_slideshow_thirdparty.html

<!-- 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>

blox_markup_widgets.html

<!-- Example frontend markup for a Global widgets block -->