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.

CAUTION: If you choose to write your own custom HTML and/or edit the samples below, please keep in mind that this is an unsupported feature—we cannot guarantee the functionality of your custom code and will not be able to offer support.

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. 

NOTE: 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 blockThen, 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:


custom_html_hover.gif

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.

sweet_shop_custom_html_hover_help.gif

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.

sweet_shop_custom_html_change_card_degrees.gif

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

sweet_shop_custom_html_change_card_preview.gif

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

TIP: Custom HTML is an advanced featured. While we cannot troubleshoot Custom HTML issues at Teachable Customer Care, we encourage you to test and preview different changes to your HTML before saving to ensure your custom code is functioning as desired.

Snippet 1: Embedded video with text overlay

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

videotextdemo.gif

To add this element to your page, copy and paste the below code into a Custom HTML block on your page. Click Expand Code to reveal the code snippet.

<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

vimeourl.png

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.

NOTE: For this custom HTML snippet to work correctly, you will also need to have a Featured Products block placed on the same page. If you're using a Featured Courses block, this code will not work. Consider updating your blocks to Featured Products for a better overall experience. 

hovereffects.gif

To add this effect to your page, copy and paste the below code into a Custom HTML block on your page. Click Expand Code to reveal the code snippet.

<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.5deg);
}
</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.

buttonhover.gif

To add this effect to your page, copy and paste the below code into a Custom HTML block on your page. Click Expand Code to reveal the code snippet.

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

social_icons_displayed.gif

To add this effect to your page, copy and paste the code below into a Custom HTML block on your page. Click Expand Code to reveal the code snippet.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.center {
text-align:Aligns social media icons to your page. Can be left, center, or right aligned.center;
}
.fa {
padding: Increases the icons' sizes to give more space between them and other elements.15px;
font-size: Increases icon text size.15px;
text-align: center;
text-decoration: none;
margin: Changes the spacing above, below and between the icons.15px 10px;
}
.fa:hover {
opacity: Adds more or less opacity to the icons when hovered on.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;
}
</style>
<div class='center'>
<a href=Your social media URL goes here, in between the quotes."#"; class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
</div>

TIP: You can add border-radius:50%; to the <style> .fa { section to create circles instead of squares. Decreasing the % value will give you rounded corners. Play around and experiment!


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

Was this article helpful?
1 out of 1 found this helpful
thanks_illustration

Can't find what you're looking for?

Contact us
thanks_illustration