Two Columns

First Column
Second Column
Copy
<div class="row">
  <div class="col-sm-6">
    First Column
  </div>
  <div class="col-sm-6">
    Second Column
  </div>
</div>

Three Columns

First Column
Second Column
Third Column
Copy
<div class="row">
  <div class="col-sm-4">
    First Column
  </div>
  <div class="col-sm-4">
    Second Column
  </div>
  <div class="col-sm-4">
    Third Column
  </div>
</div>

Four Columns

First Column
Second Column
Third Column
Fourth Column
Copy
<div class="row">
  <div class="col-sm-3">
    First Column
  </div>
  <div class="col-sm-3">
    Second Column
  </div>
  <div class="col-sm-3">
    Third Column
  </div>
  <div class="col-sm-3">
    Fourth Column
  </div>
</div>

Two Columns with Images, Titles, and Content

 
First Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Second Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
<div class="row">
  <div class="col-sm-6">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>First Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-6">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Second Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
</div>

Three Columns with Images, Titles, and Content

 
First Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Second Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Third Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
<div class="row">
  <div class="col-sm-4">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>First Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-4">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Second Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-4">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/triple_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Third Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
</div>

Four Columns with Images, Titles, and Content

 
First Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Second Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Third Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
Fourth Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
<div class="row">
  <div class="col-sm-3">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>First Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-3">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Second Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-3">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/triple_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Third Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
    <div class="col-sm-3">
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/double_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
    <div>&nbsp;</div>
    <h5>Fourth Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="//www.samplehotel.net">Read More</a></div>
  </div>
</div>

Embed Image

  • Upload the image to an Image Content Block
  • Open the image in a new tab, and copy the url
  • Go to where you want to put the image, and edit the HTML
  • Create or edit an <img> element, and paste the image url into the source field, like below:
    Copy
    <img src="//myguestdiary-cdn-uploads.azureedge.net/uploads/1708/__page__carnabaygolfsm.jpg?width=0&height=0" class="img-fluid" />
  • Click the Save button on the HTML box, and also save the page.

Using Icons

 
 
 
First Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
 
Second Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
 
 
Third Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
<div class="row" style="text-align: center;">
  <div class="col-sm-4">
    <em class="icon_set_2_icon-104" style="font-size: 60px;"><span style="display: none;">&nbsp;</span></em>
    <div>&nbsp;</div>
    <h5>First Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-4">
    <em class="icon_set_1_icon-60" style="font-size: 60px;"><span style="display: none;">&nbsp;</span></em>
    <div>&nbsp;</div>
    <h5>Second Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded" href="//www.samplehotel.net">Read More</a></div>
  </div>
  <div class="col-sm-4">
    <em class="icon_set_1_icon-58" style="font-size: 60px;"><span style="display: none;">&nbsp;</span></em>
    <div>&nbsp;</div>
    <h5>Third Column</h5>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div><a class="ql-ms-button btn btn-primary btn-rounded" href="//www.samplehotel.net">Read More</a></div>
  </div>
</div>

Embed Video

Create a Code/Embed Content Block and paste in all the code below.
I have underlined the parts that you can edit. Hover over them for more info.
  • First is the background image.
  • Second and third is the Title and a short description.
  • Fourth is the link to the video. You can put either a youtube link or a vimeo link there.
 

Video Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
<div class="vid-bg" style="background-image: url(//myguestdiary-cdn-uploads.azureedge.net/uploads/1292/__page__header-aerial.jpg?width=0&height=0);">
  <div class="container">
    <h2 style="opacity: 0.999;">Video Title</h2>
    <div style="opacity: 0.999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
    <div>&nbsp;</div>
    <div class="icon-play-wrapper magnific">
    <a href="https://youtu.be/V89QbUL4pI0" class="video"><svg width="100%" height="100%"><polygon fill="#fff" points="32,25 32,58 60,42"></polygon></svg></a>
    </div>
  </div>
</div>

<style>
.vid-bg { padding: 100px 0; background-attachment: fixed; background-position: center; text-align: center; position: relative; }
.vid-bg:before { content: ''; display: block; position: absolute; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); }
.icon-play-wrapper { display: inline-block; border: 4px solid #fff; border-radius: 50%; font-size: 60px; padding: 0; opacity: 0.75; transition: 0.3s ease all; height: 90px; width: 90px; }
.icon-play-wrapper:hover { transform: scale(1.1); opacity: 1; }
.vid-bg * { color: #FFF !important; }
.icon-play-wrapper i::before, .icon-play-wrapper em::before { margin: 7.5px 5px 7.5px 10px; }
.vid-bg span { display: inline-block; position: relative; top: 30px; left: 5px; }
.YouTubePopUp-Wrap { position: fixed; width: 100%; height: 100%; background-color: #000; background-color: rgba(0, 0, 0, .8); top: 0; left: 0; z-index: 9999999999999; }
.YouTubePopUp-animation { opacity: 0; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: YouTubePopUp; animation-name: YouTubePopUp; }
@-webkit-keyframes YouTubePopUp { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes YouTubePopUp { 0% { opacity: 0 } 100% { opacity: 1 } }
body.logged-in .YouTubePopUp-Wrap { top: 32px; z-index: 99998; }
.YouTubePopUp-Content { max-width: 853px; display: block; margin: 0 auto; height: 100%; position: relative; }
.YouTubePopUp-Content iframe { max-width: 100% !important; width: 100% !important; display: block !important; height: 480px !important; border: none !important; position: absolute; top: 0; bottom: 0; margin: auto 0; }
.YouTubePopUp-Hide { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: YouTubePopUpHide; animation-name: YouTubePopUpHide; }
@-webkit-keyframes YouTubePopUpHide { 0% { opacity: 1 } 100% { opacity: 0 } }
@keyframes YouTubePopUpHide { 0% { opacity: 1 } 100% { opacity: 0 } }
.YouTubePopUp-Close { position: absolute; top: 0; cursor: pointer; bottom: 528px; right: 0; margin: auto 0; width: 24px; height: 24px; background-size: 24px 24px; -webkit-background-size: 24px 24px; -moz-background-size: 24px 24px; -o-background-size: 24px 24px; font-size: 40px; color: #fff; transition: 0.3s ease all; }
.YouTubePopUp-Close:hover { opacity: .5; }
@media all and (max-width:768px) and (min-width:10px) { .YouTubePopUp-Content { max-width: 90%; } }
@media all and (max-width:600px) and (min-width:10px) { .YouTubePopUp-Content iframe { height: 320px !important; } .YouTubePopUp-Close { bottom: 362px; } }
@media all and (max-width:480px) and (min-width:10px) { .YouTubePopUp-Content iframe { height: 220px !important; } .YouTubePopUp-Close { bottom: 262px; } }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  ! function(c) {
    c.fn.YouTubePopUp = function(o) {
      var i = c.extend({
        autoplay: 1
      }, o);
      c(this).on("click", function(o) {
        var e = c(this).attr("href");
        if (e.match(/(youtube.com)/)) var u = "v=",
          a = 1;
        if (e.match(/(youtu.be)/) || e.match(/(vimeo.com\/)+[0-9]/)) u = "/", a = 3;
        if (e.match(/(vimeo.com\/)+[a-zA-Z]/)) u = "/", a = 5;
        var p = e.split(u)[a].replace(/(&)+(.*)/, "");
        if (e.match(/(youtu.be)/) || e.match(/(youtube.com)/)) var t = "https://www.youtube.com/embed/" + p + "?autoplay=" + i.autoplay + "&loop=1&playlist=" + p;
        if (e.match(/(vimeo.com\/)+[0-9]/) || e.match(/(vimeo.com\/)+[a-zA-Z]/)) t = "https://player.vimeo.com/video/" + p + "?autoplay=" + i.autoplay;
        c("body").append('<div class="YouTubePopUp-Wrap YouTubePopUp-animation"><div class="YouTubePopUp-Content"><span class="YouTubePopUp-Close">×</span><i' + 'frame src="' + t + '" allowfullscreen></i' + 'frame></div></div>'); 
        c(".YouTubePopUp-Wrap").hasClass("YouTubePopUp-animation") && setTimeout(function() {
          c(".YouTubePopUp-Wrap").removeClass("YouTubePopUp-animation")
        }, 600), c(".YouTubePopUp-Wrap, .YouTubePopUp-Close").click(function() {
          c(".YouTubePopUp-Wrap").addClass("YouTubePopUp-Hide").delay(515).queue(function() {
            c(this).remove()
          })
        }), o.preventDefault()
      }), c(document).keyup(function(o) {
        27 == o.keyCode && c(".YouTubePopUp-Wrap, .YouTubePopUp-Close").click()
      })
    }
  }(jQuery);
  $(".video").YouTubePopUp();
});
</script>

Split Element

An image labelled Property building

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
 
Copy
/* Create an Image Content Block, and put this in it */
<div class="split-element">
  <h4>Title</h4>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
  <div>&nbsp;</div>
  <div><a class="ql-ms-button btn btn-primary btn-rounded mr-3" href="/rooms">Read More</a></div>
</div>
Copy
/* Put this in Custom Style */
.split-element, .split-element-half { padding: 15px; }
.container .split-element, .container .split-element-half { padding: 0 1.5rem; }
@media screen and (min-width: 992px) { .split-element, .split-element-half { padding: 0 15%; } }
.cb_img-inline .cb_text-wrapper.col-md-6 { background: #f6f6f6; }
.cb_img-inline [cblock_content_image].col-md-6 .cb_img { width: 100%; height: 100%; object-fit: cover; object-position: center; max-height: 500px; min-height: 100%; }
Copy
/* Put this in a Code/Embed Content Block in the Footer */
<script>
document.addEventListener('DOMContentLoaded', function() {
  $(".cb_img-inline").has(".split-element").find("[cblock_content_image]").removeClass("col-md-5 col-lg-4").addClass("col-md-6 col-lg-6 split-element-img");
  $(".cb_img-inline").has(".split-element").find(".cb_text-wrapper").removeClass("col-md-7 col-lg-8").addClass("col-md-6 col-lg-6");
  $(".cb_img-inline").has(".split-element").find(".cb_text-wrapper + [cblock_content_image]").addClass("order-1 order-md-2").prev().addClass("order-2 order-md-1");
});
</script>

Snow Effect

Select a setting below, then copy paste the code into a Code/Embed Content Block. Put into the Website Footer to display the snow effect on every page of a website.
 
Copy
<script>
document.addEventListener('DOMContentLoaded', function(e) {

  var snow_script = document.createElement('script');
  snow_script.setAttribute('src','https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js');
  snow_script.setAttribute('crossorigin','anonymous');
  document.body.appendChild(snow_script);
  
  $(window).on('load', function() {
    $('body').append('<div class="snowfall-window" style="position: fixed; left: 0; top: 0; width: 100%; height: 105%; z-index: 100000; pointer-events: none;"></div>');
    $('.snowfall-window').snowfall({shadow: true, flakeCount: 200});$('.snowfall-window').snowfall({shadow: true, round: true, minSize: 5, maxSize: 10, flakeCount: 50});$('.snowfall-window').snowfall({shadow: true, round: true, minSize: 10, maxSize: 25, flakeCount: 50});$('.snowfall-window').snowfall({image: "//myguestdiary-cdn-uploads.azureedge.net/uploads/1038/__page__flake.png?width=0&height=0", minSize: 10, maxSize: 32, flakeCount: 50});
  });
    
});
</script>

Customer Reviews

Create an Image Content Block*, edit the text section and paste in the code below. I have underlined the parts to edit. Hover over them for more info.
* Don't forget to set the Image Alignment to Cover Image, and activate the Parallax effect.
 

What Our Customers Say

Read what customers say about The Sample Hotel
         
Review 1 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
C
Customer 1 Name
Reviewed 1 January 2020
         
Review 2 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
C
Customer 2 Name
Reviewed 2 February 2020
         
Review 3 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
C
Customer 3 Name
Reviewed 3 March 2020
Copy
/* Create an Image Content Block, and put this in it */
<div class="container review-box-wrapper">
  <div class="text-center mb-4">
    <h2>What Our Customers Say</h2>
    <div>Read what customers say about The Sample Hotel</div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="review-box">
        <div class="review-rating mb-2">
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em>
        </div>
        <h5>Review 1 Title</h5>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
      </div>
      <div class="review-box-author flex-box">
        <div class="review-box-icon">C</div>
        <div>
          <h5 class="m-0">Customer 1 Name</h5>
          <div>Reviewed 1 January 2020</div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="review-box">
        <div class="review-rating mb-2">
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star-half-alt"><span class="d-none">&nbsp;</span></em>
        </div>
        <h5>Review 2 Title</h5>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
      </div>
      <div class="review-box-author flex-box">
        <div class="review-box-icon">C</div>
        <div>
          <h5 class="m-0">Customer 2 Name</h5>
          <div>Reviewed 2 February 2020</div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="review-box">
        <div class="review-rating mb-2">
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star-half-alt"><span class="d-none">&nbsp;</span></em> 
          <em class="icon-star-empty"><span class="d-none">&nbsp;</span></em>
        </div>
        <h5>Review 3 Title</h5>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
      </div>
      <div class="review-box-author flex-box">
        <div class="review-box-icon">C</div>
        <div>
          <h5 class="m-0">Customer 3 Name</h5>
          <div>Reviewed 3 March 2020</div>
        </div>
      </div>
    </div>
  </div>
</div>
Copy
/* Put this in Custom Style */
.review-box { padding: 20px; margin-bottom: 20px; color: #555; background: #fff; position: relative; border-radius: 5px; }
.review-rating i, .review-rating em { color: #E4BD5D !important; }
.review-box-icon { width: 60px; height: 60px; background-color: #19a89c; padding: 20px; text-align: center; border-radius: 50%; margin-right: 15px; font-size: 20px; }
.review-box-author { text-align: left; }
@media (max-width: 991px) { .review-box-author { margin-bottom: 30px; } }
.review-box:after { top: 100%; left: 30px; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border: 7px solid transparent; border-top: 7px solid #fff; margin-left: -7px; transition: all .2s ease; }
.flex-box { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }

Select language

An image labelled Google Translate Logo
Cookie Settings
Cookies are used to ensure you get the best experience on our website. This includes showing information in your local language where available, and e-commerce analytics.
Necessary Cookies

Necessary cookies are essential for the website to work. Disabling these cookies means that you will not be able to use this website.

Preference Cookies

Preference cookies are used to keep track of your preferences, e.g. the language you have chosen for the website. Disabling these cookies means that your preferences won't be remembered on your next visit.

Analytical Cookies

We use analytical cookies to help us understand the process that users go through from visiting our website to booking with us. This helps us make informed business decisions and offer the best possible prices.

Cookies are used to ensure you get the best experience on our website. This includes showing information in your local language where available, and e-commerce analytics.
Cookie Policy