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
Copy
<div class="row">
<div class="col-sm-6">
<img src="//cdn.myguestdiary.com/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>First Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Second Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>First Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Second Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/triple_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Third Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/double_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>First Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/triple_room.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Second Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/triple_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Third Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/uploads/1038/double_room2.jpg?width=600&height=200&mode=crop" class="img-fluid" />
<div> </div>
<h5>Fourth Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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="//cdn.myguestdiary.com/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
Icons are available at the links below:
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;"> </span></em>
<div> </div>
<h5>First Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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;"> </span></em>
<div> </div>
<h5>Second Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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;"> </span></em>
<div> </div>
<h5>Third Column</h5>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.</div>
<div> </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.
Copy
<div class="vid-bg" style="background-image: url(//cdn.myguestdiary.com/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> </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

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> </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: "//cdn.myguestdiary.com/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.
Review 2 Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu rhoncus libero.
Review 3 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="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"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </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"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star-half-alt"><span class="d-none"> </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"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star"><span class="d-none"> </span></em>
<em class="icon-star-half-alt"><span class="d-none"> </span></em>
<em class="icon-star-empty"><span class="d-none"> </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; }