tGymm: Insert Text Effect Items as Custom HTML

If you use our tGymm Theme, you probably have noticed the Class Items. They include images as background for the items and fancy hover effect. In case you want to insert such items as custom content it can be easily achieved. Here are all of the necessary steps:

1. Add New or Open existing Post or Page for Edit

2. Insert Custom HTML Gutenberg Block

3. Insert the following content:

<section id="classes" class="clearfix">
 <div class="container pt-md-3">
  <div class="row classes-container">

   <div class="col-6 col-md-4 mb-1 class-item">
    <div class="tishonator-img-effect19">
      <img width="1280" height="850"
       src="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg"
       class="attachment-full size-full wp-post-image" alt="" loading="lazy" />
          <div class="caption">
	    <h3>Item #1 Title</h3>
            <p>Item #1 Description</p>
	  </div>
	  <div class="link-wrap">
	    <a href="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg" data-lightbox='image-gallery'>
	     <i class="fa fa-search"></i>
            </a>
	    <a href="https://tishonator.com/themepreview/tgymm/class/boxing/">
              <i class="fa fa-link"></i>
            </a>
	  </div>
	 </div>
  </div>

  <div class="col-6 col-md-4 mb-1 class-item">
    <div class="tishonator-img-effect19">
      <img width="1280" height="850"
       src="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg"
       class="attachment-full size-full wp-post-image" alt="" loading="lazy" />
          <div class="caption">
      <h3>Item #2 Title</h3>
            <p>Item #2 Description</p>
    </div>
    <div class="link-wrap">
      <a href="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg" data-lightbox='image-gallery'>
       <i class="fa fa-search"></i>
            </a>
      <a href="https://tishonator.com/themepreview/tgymm/class/boxing/">
              <i class="fa fa-link"></i>
            </a>
    </div>
   </div>
  </div>

  <div class="col-6 col-md-4 mb-1 class-item">
    <div class="tishonator-img-effect19">
      <img width="1280" height="850"
       src="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg"
       class="attachment-full size-full wp-post-image" alt="" loading="lazy" />
          <div class="caption">
      <h3>Item #3 Title</h3>
            <p>Item #3 Description</p>
    </div>
    <div class="link-wrap">
      <a href="https://tishonator.com/themepreview/tgymm/wp-content/uploads/sites/2/2016/01/classes1.jpg" data-lightbox='image-gallery'>
       <i class="fa fa-search"></i>
            </a>
      <a href="https://tishonator.com/themepreview/tgymm/class/boxing/">
              <i class="fa fa-link"></i>
            </a>
    </div>
   </div>
  </div>

  </div>
 </div>
</section>

4. Update ‘img src’ values to URL of your site images, titles and descriptions and Save changes