Raw HTML Block
Using the Raw HTML Block
Use the Raw HTML Block to add chunks of HTML, such as embed code for a Wistia or Vimeo video that you want on your page, or an affiliate link that has an embedded image tag, or JavaScript, such as AdSense code. Anything that isn't simple text.
Use the Elements Block to add a YouTube video to your page. All you need is the URL of the video.
- Drag a Raw HTML Block to your page.
- Paste in the HTML, JS, etc. code.
- Or click on Use Overlay To Edit Block and paste in the code. Click on Add Raw HTML to add the code to the block.
After dragging a Raw HTML Block to your page, paste in the code you want to add to the page.
Or, click on the Use Overlay To Edit Block button to open an overlay with a large text box. Paste in the code.
This includes any text that requires HTML tags, such as a blockquote (<blockquote> tag).
If you opened the overlay, click on the Add Raw HTML button to close the overlay and add the code to the block.
You can then edit the code from the block itself, or click on the button in the toolbar to open the overlay again.
Important Note
If you use a Raw HTML Block, text following that block may not wrap around the block's content. For example, text may not wrap around an ad unit (if you use the class="AdSenseBoxLeft" or class="AdSenseBoxRight" CSS styling, it will wrap).
If you want your text to wrap around the content of your Raw HTML Block, you can use one of the AdSense classes...
<div class="AdSenseBoxLeft">your HTML or other code</div> to have text wrap to the right (or use <div class="AdSenseBoxRight"> to have text wrap to the left).
If your site design's AdSense classes add some styling that you don't want, create a new class in Site Designer's Add Custom CSS feature.
For example, if you want to float an image to the left and have text wrap around it on the right with 10 pixels of white space between the image and text, add this code, calling the class lfloat...
.lfloat {
float:left;
margin-right:10px;
}
For an image on the right, with text wrapping to the left...
.rfloat {
float:right;
margin-left:10px;
}
Then, in the Raw HTML Block, use <div class="lfloat">your HTML or other code</div> to have text wrap to the right (or use <div class="rfloat"> to have text wrap to the left).
Lazy Loading Videos
If you activated lazy loading of videos in Site Central's Preferences, then all videos will lazy load unless you turn it off per page (using Page Information) or per video.
All videos using the <video> tag can lazy load. Only YouTube, Wistia or Vimeo videos using the <iframe> tag are lazy loaded. No videos from any other service that uses the iframe tag can lazy load.
To turn it off per video, add this attribute to the <video> or <iframe> tag...
data-lazyload="off"
Here's an example...
<video width="320" height="240" controls data-lazyload="off">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You can create a Reusable Block with one or more Raw HTML Blocks, along with other blocks. Learn how to create a Reusable Block.
You can also use Raw HTML Blocks in a Sitewide Dot. Learn how to create and use a Sitewide Dot.
Click here for a discussion of what to put in each of the 18 Sitewide Dots.