Custom HTML Block Snippets

This article demonstrates how to use the Custom HTML block and provides several samples of custom code that can be used within this block. This article includes a video tutorial. 

Video tutorial

Overview

Pages created on Teachable are built with components called page blocks. Page blocks are pre-made “building blocks” used to construct pages and design layouts for your site. One available page block is the Custom HTML block.

The Custom HTML block places a blank template on your page, which can then be filled with custom HTML. This block provides an opportunity to customize your page beyond the provided templates and blocks that come with the page editor.

To see some examples of what can be accomplished with the Custom HTML block, we have provided several custom HTML snippets below. 

The Custom HTML block snippets provided here were created and optimized for Page Editor 2.0. To learn more about the different page editor experiences, you can review our Knowledge Base article here.

How to add custom HTML snippets

To add an example custom HTML snippet to your Custom HTML block, open the desired page and add a Custom HTML block. Then, copy the custom HTML snippet provided in this article and paste it into the body of a Custom HTML block on your page editor. In the example below, we're adding a hover effect to the Featured Products block:

The custom HTML snippets provided in this article have several areas highlighted in  green . These are tooltips to guide you in using the snippets.

To understand what each green highlighted element controls, hover your mouse over the  green  text for a definition.

You can replace any of the green highlighted text in the HTML snippet to further customize the element to your needs. While working within the Custom HTML block, you can click and drag the right side of the block to expand your working area.

To see what your changes look like, Preview your page.

Once you are happy with the changes, be sure to click Update on the page editor to save your code.

Snippet 1: Embedded video with text overlay

This custom HTML snippet displays a selected video with overlaying text.

To add this element to your page, copy and paste the below code into a Custom HTML block on your page:

<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
}

.video-text {
font-size:   Sets the size of the font, in pixels, for the text overlaying the video. 48px   ;
position: absolute;
z-index: 10;
color:  Sets the color of the font for the text overlaying the video. This is known as a color hex code. You can find the hex code for different colors using any HTML color picker.#ffffff  ;
font-weight: bold;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}

.video-frame {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>

<div class="video-container">
<h4 class="video-text">  The text that displays over the video.Your journey starts here.  </h4>
<iframe class="video-frame" src="//player.vimeo.com/video/   The ID number of a video uploaded to Vimeo. Vimeo is a third-party software where you can create an account and upload videos. See below for more information.440771564  ?title=0&portrait=0&byline=0&autoplay=1&loop=1"
allowfullscreen></iframe>
</div> 

To find your Vimeo video ID number:

• Go to your desired video page in Vimeo
• Find the URL at the top of the page that follows this format: https://vimeo.com/440771564
• In the example above, the video ID number is 440771564

Snippet 2: Featured Products hover effect

This code is a hover effect--when you hover or move your mouse over the courses listed in a Featured Products block, the course boxes will tilt slightly.

To add this effect to your page, copy and paste the below code into a Custom HTML block on your page:

<style>
.featured-product-card {
transition: transform 0.2s ease-in-out;
}
.featured-product-card:hover {
transform: rotate(  The degree to which the course box is rotated.5  deg);
}
</style>

Snippet 3: Button hover effect

This custom HTML snippet adds a hover effect to all buttons on the page. The effect will expand the size and change the color of the buttons when they are hovered over by a cursor.

To add this effect to your page, copy and paste the below code into a Custom HTML block on your page:

<style>
button {
transition-duration: 0.4s;
}

button:hover {
background-color: #  Sets the color of the button when hovered over by a cursor. You can find the hex code for different colors using any HTML color picker.#4287f5  ;
transform: scale(1.5);
}
</style>

Snippet 4: Social media buttons

If you want to increase your brand's visibility, you can add social media buttons for any of the socials to which you subscribe. The snippet below will add various social media icons to the bottom-center of your pages.

To add this effect to your page, copy and paste the code below into a Custom HTML block on your page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<style>
.center {
text-align: center ;
}
.fab {
padding: 15px ;
font-size: 15px ;
width: 43px;
height: 43px;
text-align: center;
text-decoration: none;
margin: 15px 10px ;
}
.fab:hover {
opacity: 0.7 ;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-tiktok {
background: #bb0000;
color: white;
}
</style>
<div class='center'>
<a href= "#" ; class="fab fa-facebook"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-google"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-pinterest"></a>
<a href="#" class="fab fa-tiktok"></a>
</a>

You can learn more about how to add social media icons and get more examples at w3schools.com.

Snippet 5: Embedding forms in HTML blocks

You can also use custom HTML blocks to embed forms. Follow these steps to embed your form:

1. Go to your form's site and copy the embed HTML.
2. In your school admin, add a Custom HTML  block to your site, sales, or thank you page.
3. Paste in the embed code from your form's site. 
4. Publish your page.