The full list of custom widgets used in Widget/HTML
Content carousel
<style>
/* <![CDATA[ */
.is-new-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-new-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><!-- ************* new matrix slider ************* -->
<div class="is-matrix-slider is-new-slider owl-carousel owl-theme is-fullwidth__">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide01.jpg" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide-test.jpg?t=1588067569" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-matrix-slider').owlCarousel({
// transitionStyle : "fade",// other options 'fadeUp', 'goDown'
autoPlay: 5000,
slideSpeed:600,
items : 1,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsMobile : [479,1],
navigation : true
});
});
})(jQuery);
//]]>
</script><br />
<div class="matrix-msg invisible">
Edit here your content carousel
</div>
Fullwidth Content Carousel
<style>
/* <![CDATA[ */
.is-new-slider .item {
height:600px!important;
}
@media only screen and (max-width: 459px) {
.is-new-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><!-- ************* new matrix slider ************* -->
<div class="is-matrix-slider is-new-slider owl-carousel owl-theme is-fullwidth">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide01.jpg" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide-test.jpg?t=1588067569" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/s10a4e2f771c7e79d/userlayout/img/m-slide03.jpg" alt="" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.zodiac-framerwork.com" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-matrix-slider').owlCarousel({
// transitionStyle : "fade",// other options 'fadeUp', 'goDown'
autoPlay: 5000,
slideSpeed:600,
items : 1,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsMobile : [479,1],
navigation : true
});
});
})(jQuery);
//]]>
</script><br />
<div class="matrix-msg invisible">
Edit here your content carousel
</div>
Fullwidth section
<div class="is-matrix hs-fullwidth bg-grey cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Fullwidth section 2
<div class="is-matrix hs-fullwidth bg-dark color-white cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6 right-align text-right add-10 cc-box">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Fullwidth section 3
<div class="is-matrix hs-fullwidth bg-primary color-white cc-clearover">
<div class="inner cc-clearover" style="padding:150px 0;">
<div class="col-6 center-align">
<h1>
Your Title
</h1>
<p>
Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl
tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Bold quote 1
<div class="hs-fullwidth bg-primary color-white link-white cc-clearover">
<div class="inner m-padding" style="padding:200px 0;">
<!-- ************* Quote teaser ************* -->
<center>
<div class="fa fa-quote-left fa-3x primary-color-dark">
</div>
<br />
<p class="has-large-text col-6">
Whatever it is, the way you tell your story online can make all the difference
</p>
<a href="https://www.matrix-themes.com/" class="bold-underline">Bold underline link</a>
</center>
<!-- ************* End Quote teaser ************* -->
</div>
</div>
Bold quote 2
<div class="hs-fullwidth bg-dark color-white link-white cc-clearover">
<div class="inner m-padding" style="padding:250px 0;">
<!-- ************* Quote teaser ************* -->
<div class="left-align col-6 animated fadeInUp">
<div class="fa fa-quote-left fa-4x absolute-top-left" style="top:-30px;opacity:0.6;font-size:100px;">
</div>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Elemeivamus)
</p>
</div>
<!-- ************* End Quote teaser ************* -->
</div>
</div>
Parallax
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 center-align">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Parallax 2
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Parallax 3
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/zdc-parallax.jpg') no-repeat center;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 right-align text-right add-10 cc-box">
<h1 class="">
This is a fixed image
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget . Left, right or center aligned.
</p>
<br />
<a class="hs-button" href="http://www.matrix-themes.com/" target="_top">Custom button</a>
</div>
</div>
</div>
Half fullwidth bg
<!-- *** Matrix Widget half fullwidth section *** -->
<div class="is-matrix half-fullwidth is-flex-block">
<div class="mid-box-left bg-primary main-equal col-flex">
<div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
<h2>
This is your heading
</h2>
<p>
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. massa, convallis a pellentesque nec, egestas non nisi.
</p>
<br />
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
<div class="mid-box-right bg-dark equal col-flex">
<div class="hs-description bg-transparent color-white link-white m-padding cc-clearover" style="padding:200px 20px;">
<h2>
This is your heading
</h2>
<p>
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada
feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. P
</p>
<br />
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Content teaser
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix content-teaser is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Content teaser 2
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix content-teaser bg-dark color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align ghost-white" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Content teaser 3
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix content-teaser bg-white has-shadow is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align bg-round" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Content teaser 4
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix bg-primary color-white content-teaser is--flex is-flex-block cc-clearover">
<div class="center-align col-8 add-20 cc-box">
<h3>
Make it stand out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc
</p>
<br />
<a class="hs-button mid-round bg-white mid-round" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Content teaser 5
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix bg-dark color-white content-teaser is--flex is-flex-block cc-clearover white-solid-border" style="border:2px solid;border-radius:0;">
<div class="center-align col-8 add-20 cc-box">
<h3>
Make it stand out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc
</p>
<br />
<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Content teaser 6
<div class="is-matrix is-parallax is--flex rel no-padding mid-round white-solid-border" style=
"background: url('https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341') no-repeat center;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-8 bg-primary">
</div>
<div class="inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<p>
Create a beautiful Jimdo website for your business
</p>
<h3 class="weight-600">
Make it stand out
</h3>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button ghost-white right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
</div>
</div>
Content teaser 7
<div class="is-matrix is-parallax is--flex rel no-padding mid-round" style=
"background: url('https://u.jimcdn.com/cms/o/sb2b5767bd6861c8a/userlayout/img/z-cover.jpg?t=1616195341') no-repeat center;border-radius:1em;padding:auto 0!important;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-8" style="border-radius:1em;">
</div>
<div class="inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<p>
Create a beautiful Jimdo website for your business
</p>
<h3 class="weight-600">
Make it stand out
</h3>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align bg-round bg-white" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
</div>
</div>
Counters
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
<div class="one-third color-white col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
32
</h1>
<p class="hs-center">
Official Jimdo Experts
</p>
</div>
</div>
<div class="one-third color-white opacity-2 col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
52
</h1>
<p class="hs-center">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="one-third color-white opacity-4 col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
18
</h1>
<p class="hs-center">
Countries around the world
</p>
</div>
</div>
</div>
<div class="c">
</div>
Counters 2
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
<div class="one-third color-white col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-diamond fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="one-third color-white opacity-2 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x">
</div>
<p class="hs-center add-top-20">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="one-third color-white opacity-4 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
<div class="c">
</div>
Counters 3
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
<div class="one-fourth color-white col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
32
</h1>
<p class="hs-center">
Jimdo Experts
</p>
</div>
</div>
<div class="one-fourth color-white opacity-2 col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
52
</h1>
<p class="hs-center">
Web Agencies
</p>
</div>
</div>
<div class="one-fourth color-white opacity-4 col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
18
</h1>
<p class="hs-center">
Countries
</p>
</div>
</div>
<div class="one-fourth color-white opacity-6 col-flex">
<div class="gutter-20">
<h1 class="weight-700 center-align">
7
</h1>
<p class="hs-center">
days support
</p>
</div>
</div>
</div>
<div class="c">
</div>
Counters 4
<!-- *** Matrix Widget counters *** -->
<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover">
<div class="one-fourth color-white">
<div class="gutter-20 center-align">
<div class="fa fa-group fa-4x">
</div>
<p class="hs-center add-top-20">
Jimdo Experts
</p>
</div>
</div>
<div class="one-fourth color-white opacity-2 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-paper-plane fa-4x">
</div>
<p class="hs-center add-top-20">
12 Web Agencies
</p>
</div>
</div>
<div class="one-fourth color-white opacity-4 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-check-square-o fa-4x">
</div>
<p class="hs-center add-top-20">
18 Countries
</p>
</div>
</div>
<div class="one-fourth color-white opacity-6 col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Professional support
</p>
</div>
</div>
</div>
<div class="c">
</div>
Tile widget 1
<div class="is-matrix bg-dark">
<div class="is-flex is-flex-block mobile-auto cc-clearover">
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
<div class="mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="color-white" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate tile 1
</h3>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
</div>
</div>
Tile widget 2
<div class="is-matrix bg-grey">
<div class="is-flex is-flex-block mobile-auto cc-clearover">
<div class="mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate Tile 2
</h3>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
</div>
</div>
Fullwidth tile 3
<div class="is-matrix is-fullwidth bg-dark">
<div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
<div class="is--flex h-100 mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="color-white" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate tile 3
</h3>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button ghost-white" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
</div>
</div>
Fullwidth tile 4
<div class="is-matrix is-fullwidth bg-grey">
<div class="is-flex is-flex-block h-100 mobile-auto cc-clearover">
<div class="h-100 is--flex mobile-auto col-6 m-padding cc-box" style="padding:5%;">
<div class="" style="max-width:800px; margin:0 auto;">
<h3>
Ultimate tile 4
</h3>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. no sea takimata sanctus
est Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua.
</p>
<br />
<!-- ************* default button ************* -->
<a class="hs-button" href="https://www.zodiac-framework.com/" target="">Custom button</a>
</div>
</div>
<div class="col-6">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax.jpg?t=1539558175" />
</div>
</div>
</div>
Overlay teaser
<!-- *** Matrix Widget overlay teaser *** -->
<div class="is-matrix cc-clearover">
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="hs-description">
<h3>
Your custom title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
use to add content to your website
</p>
<br />
<a class="hs-button small-btn" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>
</div>
Overlay teaser 2
<!-- *** Matrix Widget overlay teaser *** -->
<div class="is-matrix cc-clearover">
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="hs-description bg-dark color-white">
<h3>
Your custom title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
use to add content to your website
</p>
<br />
<a class="hs-button small-btn ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
</div>
</div>
Overlay teaser 3
<!-- *** Matrix Widget overlay teaser *** -->
<div class="is-matrix rel h-overflow cc-clearover" style="border:1px solid #f0f0f0;">
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="hs-description bg-white">
<h3>
Your custom title
</h3>
<p>
This is an example text, simply click to edit or delete it. Delete example content by clicking on it and using the trash icon on the left. The plus icon lists all of the elements you can
use to add content to your website
</p>
<br />
<div class="line slim-line bg-grey is-fullwidth">
</div>
<br />
<a href="https://www.matrix-themes.com/" class="bold-underline uppercase weight-400">Read more</a>
</div>
</div>
Quote teaser
<!-- *** Matrix Widget quote teaser *** -->
<div class="is-matrix cc-clearover">
<div class="col-6">
<div class="fa fa-quote-left fa-4x absolute-top-left" style="top:-10px;opacity:0.2;font-size:50px;">
</div>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="weight-500 size-11 add-top-5">
( Quote style 1 )
</p>
</div>
</div>
Quote teaser 2
<!-- *** quote widget *** -->
<div class="is-matrix content-teaser is--flex is-flex-block cc-clearover">
<div class="left-align col-12 add-20 cc-box">
<div class="fa fa-quote-left fa-5x" style="margin-top:-30px;opacity:0.6;">
</div>
<p>
Whatever it is, the way you tell your story online can make all the difference
</p>
<p class="add-top-10 size-13">
- Quote ( Style 2 )
</p>
</div>
</div>
<!-- *** end quote widget *** -->
Quote teaser 3
<!-- *** quote widget *** -->
<div class="is-matrix content-teaser bg-primary color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-12 add-20 cc-box">
<div class="fa fa-quote-left fa-5x" style="margin-top:-30px;opacity:0.6;">
</div>
<p>
Whatever it is, the way you tell your story online can make all the difference
</p>
<p class="add-top-10 size-13">
- Quote ( Style 3 )
</p>
</div>
</div>
<!-- *** end quote widget *** -->
Quote teaser 4
<div class="is-matrix bg-grey">
<div class="hs-left-50 col-12">
<div class="image_wrapper resp-img add-10" style="border-radius img: 30px;">
<img src="https://u.jimcdn.com/cms/o/s7f57b782ca2dfcb3/userlayout/img/customer.jpg?t=1524662588" alt="" style="border-radius:20px 0 20px 0;" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<div class="center-align">
<center>
<div class="fa fa-quote-left fa-4x rel" style="color:#888;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference Sed porttitor lectus nibh</span>
<p class="add-top-10">
(Style 4)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</div>
</div>
Quote teaser 5
<div class="is-matrix bg-transparent">
<center>
<div class="col-6">
<div class="image_wrapper resp-img" style="width:120px;">
<img style="margin-top:-10px; border-radius:500px;" src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-4x rel center-align" style="opacity:0.6;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 5)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Quote teaser 6
<div class="is-matrix bg-grey mid-round">
<center>
<div class="col-6">
<div class="image_wrapper resp-img" style="width:120px;">
<img style="margin-top:-10px; border-radius:500px;" src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-3x rel center-align" style="opacity:0.6;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 6)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Quote teaser 7
<div class="is-matrix bg-primary color-white mid-round">
<center>
<div class="col-6">
<div class="image_wrapper resp-img" style="width:120px;">
<img style="margin-top:-10px; border-radius:500px;" src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-3x rel center-align" style="opacity:0.8;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 7)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Quote teaser 8
<div class="is-matrix bg-primary-dark color-white mid-round">
<center>
<div class="col-6">
<div class="image_wrapper resp-img" style="width:120px;">
<img style="margin-top:-10px; border-radius:500px;" src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" />
</div>
</div>
<div class="hs-right-50 col-12 pull-top-50">
<div class="gutter-20 clearover">
<!-- ************** Quote teaser ************** -->
<center>
<div class="fa fa-quote-left fa-3x rel center-align" style="opacity:0.8;">
</div>
</center>
<span style="font-size:19px;">Whatever it is, the way you tell your story online can make all the difference</span>
<p class="add-top-10">
(Quote 8)
</p>
</div>
<!-- ************** End Quote teaser ************** -->
</div>
</center>
</div>
Skills widget 2
<!-- skills big size -->
<div class="skill">
<h3>
<span class="skill_name">Skills big</span>
</h3>
<div class="skill_bar">
<div class="skill_active" style="width: 75%;">
</div>
<span>75%</span>
</div>
</div>
Toggle
<!-- *** Matrix Widget toggle *** -->
<div class="toggle weight-500 size-18">
<a class="switch" href="#"> Your toggle title</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Toggle 2
<!-- *** Matrix Widget toggle *** -->
<div class="toggle weight-500 size-18">
<a class="switch bg-grey add-10" href="#"> Your toggle title</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Tabs
<!-- *** Matrix Widget left-aligned tabs *** -->
<ul class="tabs-nav">
<li class="active">
<a href="#tab1">First</a>
</li>
<li>
<a href="#tab2">Second</a>
</li>
<li>
<a href="#tab3">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab1" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab2" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab3" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs 2
<!-- *** Matrix Widget center-aligned tabs *** -->
<ul class="tabs-nav center-align">
<li class="active">
<a href="#tab4">First</a>
</li>
<li>
<a href="#tab5">Second</a>
</li>
<li>
<a href="#tab6">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab4" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab5" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab6" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs 3
<!-- *** Matrix Widget center-aligned with flexbox tabs *** -->
<ul class="tabs-nav is--flex is-flex-block">
<li class="active w-100 center-align">
<a href="#tab7">First</a>
</li>
<li class="w-100 center-align">
<a href="#tab8">Second</a>
</li>
<li class="w-100 center-align">
<a href="#tab9">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab7" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab8" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab9" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Social Icons 1
<div class="hs-social new-social small-social left-align size-11 is-circle-solid-white is-rounded link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 2
<div class="hs-social left-align new-social small-social size-11 is-circle-border link-dark is-rounded">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 3
<div class="hs-social left-align new-social small-social size-11 is-circle-border link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 4
<div class="hs-social left-align new-social small-social size-11 is-circle-solid link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 5
<div class="hs-social left-align new-social small-social size-11 is-circle-solid is-rounded link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
Pricing tables
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-grey add-30 slide-up-hover h-overflow">
<h1 class="size-20">
Professional
</h1>
<p>
This is professional package design
</p>
<p class="has-large-text weight-500">
€60
</p>
<div class="line slim-line bg-white is-fullwidth">
</div>
<div class="pricing-items add-top-25 add-btm-25 weight-500">
<div class="fa fa-check add-top-20">
</div>
Branding Design<br />
<div class="fa fa-check add-top-20">
</div>
Theme installation<br />
<div class="fa fa-check add-top-20">
</div>
24/7 Support<br />
</div>
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-primary color-white add-30 slide-up-hover h-overflow">
<h1 class="size-20">
Enterprise
</h1>
<p>
This is enterprise package design
</p>
<p class="has-large-text weight-500">
€90
</p>
<div class="line slim-line bg-white is-fullwidth">
</div>
<div class="pricing-items add-top-25 add-btm-25 weight-500">
<div class="fa fa-check add-top-20">
</div>
Branding Design<br />
<div class="fa fa-check add-top-20">
</div>
Theme installation<br />
<div class="fa fa-check add-top-20">
</div>
24/7 Support<br />
<div class="fa fa-check add-top-20">
</div>
Ultimate widgets<br />
<div class="fa fa-check add-top-20">
</div>
Play of columns <span class="opacity-6 add-5">New!</span><br />
</div>
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round ghost-white" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 2
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
<div class="is-matrix bg-grey add-20">
<h1 class="size-20 weight-500">
Professional
</h1>
<div class="pricing-items add-top-25 add-btm-25 weight-500">
<div class="fa fa-check add-top-20">
</div>
Branding Design<br />
<div class="fa fa-check add-top-20">
</div>
Theme installation<br />
<div class="fa fa-check add-top-20">
</div>
24/7 Support<br />
</div>
<p class="has-large-text weight-500">
€60
</p>
</div>
<br />
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 2
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
<div class="is-matrix bg-dark color-white add-20">
<h1 class="size-20 weight-500">
Professional
</h1>
<div class="pricing-items add-top-25 add-btm-25 weight-500">
<div class="fa fa-check add-top-20">
</div>
Branding Design<br />
<div class="fa fa-check add-top-20">
</div>
Theme installation<br />
<div class="fa fa-check add-top-20">
</div>
24/7 Support<br />
</div>
<p class="has-large-text weight-500">
€60
</p>
</div>
<br />
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 2
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-white add-30 h-overflow mid-round" style="border:1px solid #f0f0f0;">
<div class="is-matrix bg-primary color-white add-20">
<h1 class="size-20 weight-500">
Professional
</h1>
<div class="pricing-items add-top-25 add-btm-25 weight-500">
<div class="fa fa-check add-top-20">
</div>
Branding Design<br />
<div class="fa fa-check add-top-20">
</div>
Theme installation<br />
<div class="fa fa-check add-top-20">
</div>
24/7 Support<br />
</div>
<p class="has-large-text weight-500">
€60
</p>
</div>
<br />
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round bg-secondary" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 3
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-grey add-30 mid-round center-align">
<h1 class="size-20 weight-500">
Professional
</h1>
<p class="add-top-20 add-btm-20">
This is professional package design
</p>
<center>
<div class="line small-line bg-secondary">
</div>
</center>
<p class="add-top-20 add-btm-20">
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
</p>
<p class="has-large-text weight-500">
€60
</p>
<!-- ************* rounded button ************* -->
<a class="hs-button bg-round ghost-dark" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 3
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-dark color-white add-30 mid-round center-align">
<h1 class="size-20 weight-500">
Professional
</h1>
<p class="add-top-20 add-btm-20">
This is professional package design
</p>
<center>
<div class="line small-line bg-secondary">
</div>
</center>
<p class="add-top-20 add-btm-20">
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vivamus laoreet. Vestibulum suscipit nulla quis orci.
</p>
<p class="has-large-text weight-500">
€60
</p>
<!-- ************* rounded button ************* -->
<a class="hs-button ghost-white bg-round" href="http://www.matrix-themes.com/" target="">Get started</a>
</div>
Pricing tables 4
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix add-20 bg-dark color-white">
<center>
<h1 class="has-large-text">
€60
</h1>
<p>
Professional package
</p>
</center>
</div>
<div class="pricing-items add-20 bg-grey add-top-25 add-btm-25 weight-400">
<center>
<!-- ************* Custom links style 1 ************* -->
<div class="links">
<ul>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
</ul>
</div>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Get started</a>
</center>
</div>
Pricing tables 4
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix add-20 bg-primary color-white">
<center>
<h1 class="has-large-text">
€60
</h1>
<p>
Professional package
</p>
</center>
</div>
<div class="pricing-items add-20 bg-grey add-top-25 add-btm-25 weight-400">
<center>
<!-- ************* Custom links style 1 ************* -->
<div class="links">
<ul>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
<li>Lorem ipsum dolor sit amet
</li>
</ul>
</div>
<br />
<a class="hs-button bg-round" href="http://www.matrix-themes.com/purchase" target="">Get started</a>
</center>
</div>
Pricing tables 5
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix bg-grey add-20 rel">
<div class="is--flex">
<div class="left-align add-right-20" style="border-right:1px solid;">
<h1>
Basic package
</h1>
<p>
Basic package includes Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras dapibus. Nam pretium turpis et arcu. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem.
</p>
</div>
<div class="is--right add-10">
<p class="add-right-10">
starting from
</p>
<p class="has-large-text weight-500">
€60
</p>
</div>
</div>
<a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Pricing tables 5
<!-- *** Matrix Widget pricing tables *** -->
<div class="is-matrix rel bg-dark color-white add-20">
<div class="is--flex">
<div class="left-align add-right-20" style="border-right:1px solid;">
<h1>
professional package
</h1>
<p>
Basic package includes Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Cras dapibus. Nam pretium turpis et arcu. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem.
</p>
</div>
<div class="is--right add-10">
<p class="add-right-10">
starting from
</p>
<p class="has-large-text weight-500">
€60
</p>
</div>
</div>
<a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Styled links
<!-- ************* Styled links style1 ************* -->
<div class="links">
<ul>
<li>
<a href="https://www.matrix-themes.com/">Theme collection</a>
</li>
<li>
<a href="https://www.matrix-themes.com/">Responsive Jimdo themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/">Awesome and cool design</a>
</li>
<li>
<a href="https://www.matrix-themes.com/">Professional support</a>
</li>
</ul>
</div>
Fa Description
<!-- *** Custom Matrix widget fa description *** -->
<div class="is-matrix bg-grey add-20">
<center>
<div class="fa fa-paper-plane fa-3x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 01
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
</center>
</div>
Fa Description 2
<!-- *** Custom Matrix widget fa description *** -->
<div class="is-matrix bg-dark color-white mid-round add-20">
<center>
<div class="fa fa-paper-plane fa-3x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 01
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
</center>
</div>
Fa Description 3
<!-- *** Custom Matrix widget fa description *** -->
<div class="is-matrix add-20 has-shadow" style="border:1px solid #f0f0f0;">
<center>
<div class="fa fa-paper-plane fa-3x">
</div>
<h3 class="add-top-10 add-btm-10">
Service 01
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In ut quam vitae odio lacinia tincidunt. Quisque malesuada placerat nisl.
</p>
</center>
</div>
Fa Description 4
<!-- *** Matrix Widget service icons *** -->
<div class="is-matrix">
<div class="col-3 left-align">
<div class="fa fa-paper-plane fa-3x add-10">
</div>
</div>
<div class="col-9 right-align add-5 cc-box">
<h3>
Service 04
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
</p>
</div>
</div>
Fa Description 5
<!-- *** Matrix Widget service icons *** -->
<div class="is-matrix bg-dark color-white add-5 mid-round">
<div class="col-3 left-align">
<div class="fa fa-paper-plane fa-3x add-10">
</div>
</div>
<div class="col-9 right-align add-5 cc-box">
<h3>
Service 05
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
</p>
</div>
</div>
Fa Description 6
<!-- *** Matrix Widget service icons *** -->
<div class="is-matrix is--flex">
<div class="col-3 left-align">
<div class="image_wrapper resp-img">
<img src="https://u.jimcdn.com/cms/o/s78356cf833b98043/userlayout/font/09-responsive-design.svg?t=1572342497" alt="" />
</div>
</div>
<div class="col-9 right-align add-5 cc-box">
<h3>
Service 06
</h3>
<p>
Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo
</p>
</div>
</div>
Youtube popup
<!-- ************* Overlay teaser with Youtube video ************* -->
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
<div class="thumbnail-hover">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=gOJnE4svLuY"></a>
</div>
</div>
<!-- ************* End Vimeo video ************* -->
<!-- ************* Start description ************* -->
<div class="hs-description has-shadow">
<h3>
<a href="http://matrix-themes.com/">This is yout title</a>
</h3>
<p>
This is an example text, simply click to edit or delete it.
</p>
</div>
Vimeo popup
<!-- ************* Overlay teaser with Vimeo video ************* -->
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser1.jpg" alt="" />
<div class="thumbnail-hover">
<a class="popup-vimeo" href="https://vimeo.com/122314821"></a>
</div>
</div>
<!-- ************* End Vimeo video ************* -->
<!-- ************* Start description ************* -->
<div class="hs-description has-shadow">
<h3>
<a href="http://matrix-themes.com/">This is your title</a>
</h3>
<p>
This is an example text, simply click to edit or delete it.
</p>
</div>
Google maps popup
<!-- ************* Overlay teaser with Google Maps ************* -->
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/teaser3.jpg" alt="" />
<div class="thumbnail-hover">
<a class="popup-gmaps" href=
"https://maps.google.it/maps?q=milan+italy&ll=45.465458,9.186502&spn=0.016163,0.038452&hnear=Milan,+Lombardy&gl=it&t=m&z=15&iwloc=A"></a>
</div>
</div>
<!-- ************* End Google Maps ************* -->
<!-- ************* Start description ************* -->
<div class="hs-description has-shadow">
<h3>
<a href="http://matrix-themes.com/">Open Google Map</a>
</h3>
<p>
This is an example text, simply click to edit or delete it.
</p>
</div>
Modal popup
<!-- ************* modal popup widget ************* -->
<div class="hs-button round link-white center-align popup-with-zoom-anim" href="#small-dialog">
Modal popup
</div>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide global-colors brand-bg brand-link custom-text">
<h1>
Matrix theme
</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt
</p>
<br />
<div class="fa fa-exclamation-triangle fa-lg primary-color">
<p>
honcus ut, imperdiet a, venenatis vitae
</p>
</div>
</div>
<!-- ************* end modal popup widget ************* -->
Custom line 2
<div class="line bold-line small-line bg-primary">
</div>
Star rating
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 70%">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
Timeline widget
<div class="timeline-item primary-color pull-top-10" date-is="12-02-2016">
<h1>
Single responsive timeline!
</h1>
<p>
I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far...
While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
</p>
</div>
Button midrounded
<a class="hs-button mid-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button rounded
<a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button ghost dark
<a class="hs-button ghost-dark" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button ghost white
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom Button</a>
Button arrow dark
<a class="hs-button weight-500 ghost-dark" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
Button arrow white
<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
Button outlined dark
<a class="link-outlined weight-500" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button outlined white
<a class="link-outlined link-white weight-500" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Service icons
<!-- *** Matrix Widget service icons *** -->
<div class="fa fa-check-circle" style="color:#3544ee;">
</div>
Phasellus a est. Praesent egestas neque eu enim. Maecenas malesuada.
Opening hours
<!-- *** Matrix Widget opening hours *** -->
<ul class="hours">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
<!-- end opening hours widget -->
Opening hours 2
<!-- *** Matrix Widget opening hours *** -->
<ul class="hours bg-primary mid-round color-white add-10">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
<!-- end opening hours widget -->
Bestseller widget
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;">
<div class="hs-description bg-white has-shadow add-20">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-dark is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Bestseller widget 2
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;">
<div class="hs-description bg-primary color-white add-20">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-white is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Bestseller widget 3
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img style="border-radius:10px;" src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;border-radius:10px;">
<div class="hs-description bg-white has-shadow add-2" style="border-radius:10px;">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-dark is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Bestseller widget 4
<div class="is-matrix rel is--flex no-padding">
<div class="col-8 left-align">
<div class="item resp-img">
<img style="border-radius:10px;" src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
</div>
</div>
<div class="col-6 right-align" style="margin-left:-30%;border-radius:10px;">
<div class="hs-description bg-primary color-white add-2" style="border-radius:10px;">
<h3 class="weight-600">
Make it stand out
</h3>
<p class="size-15">
Premium Jimdo theme with a modern design and bundled with powerful plugins for creating versatile online stores
</p>
<br />
<a class="hs-button ghost-white is-outlined" href="http://www.matrix-themes.com/purchase" target="">Learn more</a>
</div>
</div>
</div>
Snip widget 1
<!-- snippet 1581 -->
<figure class="snip1581 color-white">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="matrix-themes" />
<figcaption>
<h3 class="title1">
The
</h3>
<h3 class="title2 big" style="color:#f1c40f;">
Summer
</h3>
<h3 class="title3">
Collection
</h3>
</figcaption>
<a href="https://www.matrix-themes.com/"></a>
</figure>
Snip widget 2
<div class="is-matrix hs-thumbnail cc-clearover">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
<div class="hs-overlay bg-dark white-solid-border">
</div>
<div class="custom-caption left-align color-white link-white" style="bottom:5%; top:auto;width:90%;">
<h1 class="weight-500">
Make it different
</h1>
<p class="size-15">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
</p>
<a href="https://www.matrix-themes.com/" class="bold-underline size-15 weight-500" style="color:#f1c40f;">Bold underline link</a>
</div>
</div>
Snip widget 3
<figure class="snip1560">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="pr-sample23" />
<figcaption>
<h2 class="weight-500 color-white">
Enterprise package
</h2>
<p class="weight-500" style="color:#f1c40f;">
Shop now
</p>
</figcaption>
<a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</figure>
Snip widget 4
<figure class="snip1477">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
<div class="title">
<div>
<h2 class="color-white weight-500">
Matrix Themes
</h2>
</div>
</div>
<figcaption>
<p>
Read more
</p>
</figcaption>
<a href="https://www.matrix-themes.com/"></a>
</figure>
Restaurant Menu
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
Restaurant menu 2
<div class="m-menu-content is-matrix bg-grey add-20">
<div class="m-title-holder">
<h3 class="size-20 weight-600 is-truncate">
French omelette with long title
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
Restaurant menu 3
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex no-padding" style=
"background: url('https://u.jimcdn.com/cms/o/sef6e1f8b3142c48a/userlayout/img/food-parallax.jpg?t=1583071052') no-repeat center;">
<div class="hs-overlay bg-dark">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 center-align cc-box">
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
<!-- menu item -->
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3 class="size-20 weight-600">
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div class="m-price-holder">
<h3 class="weight-600 size-20">
$21
</h3>
</div>
<div class="m-btm-holder text-left">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
</div>
<!-- end menu item -->
</div>
</div>
</div>
Animated Popup
<!-- ************* Content teaser with animated popup ************* -->
<a href="#popup-article" class="hs-button bg-round">article popup</a>
<div id="popup-article" class="popup popup-overlay">
<div class="popup__block lazy">
<div class="max-inner">
<h1 class="big">
This is my title
</h1>
<br />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p>
<br />
<!-- ************** Fa social icons **************** -->
<div class="hs-social left-align link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa fa-instagram fa-2x add-right-5"></a>
</div>
</div>
<a href="#!" class="popup__close">close</a>
</div>
</div>
<!-- ************* End Content teaser ************* -->
Instructions
1. General
Once clicked the copy button, you paste the widget to the module Widget/HTML of your website.
It is important to use the module Widget/HTML because the custom elements here will overwrite the default Jimdo system styles.
Please note that some widgets are not available in preview in edit mode but will be correctly displayed in view mode (fullwidth sections)
2. Customizations
To change the image, you need to upload your own image to Design> Custom> Custom Template> Files. Once uploaded, click the image name which will be opened in a new tab and copy the url of the image from the browser address bar:
Paste it inside the module Widget/HTML replacing the default image of demo site:
...
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/tile09.jpg" alt="" />
</div>
...
Your questions
- Ask your own question here! Please don't use other topics or general questions. This is a page about custom widgets. For any other enquires, please use other pages or form from support page
GET INSPIRED
hide-in-doc-page
draggable-logo
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Matrix themes (Friday, 17 September 2021 16:08)
@Ron the popup widget can be used once on a page.For multiply widgets, you need to add different ID for each popup section
Ron (Friday, 17 September 2021 14:24)
Hello Serhiy,
I think there is a bug with the modal popup because it shows only one text. For example: I have four different topics that I would like to explain individually using the modal popup.
But when I write the texts in the widgets, only the first text is displayed in all popups. Is there a possibility that the individual texts are displayed in the individual popups?
Best regards
Matrix themes (Sunday, 21 March 2021 20:45)
Please get in touch from support page indicating all details.
Thank you.
Steffen (Sunday, 21 March 2021 20:42)
The image alignment doesnt seem to work in my case, I already tried that. The image isn´t displayed at all..
Maybe it hast something to do with fullwidth?
Matrix themes (Sunday, 21 March 2021 20:10)
@Steffen the image alignment allows you to display the text box on the the left or right side.
'The classes 'has padding' and 'h-75' can be used only with other helper classes.
For more details please check the section "helper classes"
Steffen (Sunday, 21 March 2021 20:00)
Hi,
ok, so I will do it with "Text with Photo/Alternative Text"
If I use the white version of "is-overlay" the box is on the left, if I use the black version, it´s on the right. Where can I edit it, so the white box is displayed on the right and also is there any way how to influence it´s size? (All with fullwidth image)
And in your examples there is a tag "has-padding" or "h-75" underneath some pics. What does that do? I tried around a bit, but couldn´t find any differences.
Thanks for any help! :)
Steffen,
Matrix themes (Saturday, 20 March 2021 21:56)
@Steffen it can't be displayed inside the image like in your case. The quote teaser can be displayed inside the hero section ( image) which is hidden with a body class 'no-hero'
Steffen (Saturday, 20 March 2021 20:31)
Hello,
sorry for asking this, because, this should be quite simple, but I wasn´t able to find a solution:
How can I display a quote-teaser on top of a fullwidth image?
If I place a fullwidth image there is no html-code I can work in, right? Only the title and alternative text..
So what would be the way to go?
Thanx for any hint and have a great weekend!
Cheers,
Steffen.
Matrix themes (Thursday, 18 March 2021 14:58)
@Björn please by all means read the documentation as many issues are already explained with further details and tutorials.
01. To hide the hero section, use the body class 'no-hero'
02. Any widget then with the class 'is-header' can be displayed on the top of the content section.
Björn (Thursday, 18 March 2021 14:38)
Thanks,
please can you also tell mw how to hide the background and only use the full widht carousel like:
https://alsten-template2.jimdofree.com/shortcodes/
Matrix themes (Thursday, 18 March 2021 13:45)
@Björn In Matrix themes menu> enterprise package> ultimate widgets
Björn (Thursday, 18 March 2021 12:51)
Hi,
how can I make the tile widget full width? The widget should go from side to side.
Thx and Br
Björn
Matrix themes (Monday, 01 February 2021 20:26)
@Donato there are 2 different widgets: toggles and timeline. The time line steps should be used as a separate widget/HTML. For more details, please contact the support from this page:
https://www.matrix-themes.com/support/
Donato Biasco (Monday, 01 February 2021 20:03)
Dear Support
question the matrix widget toogle, how can i put the different steps tighter together?
thanks and best wishes
Donato
Matrix themes (Tuesday, 01 September 2020 00:16)
@Sascha if the video works in default widget, please check: a) correct url of youtube video b) settings of your youtube video/account
Sascha (Thursday, 27 August 2020 07:27)
hello when I try to put a youtube link in YOUTUBE POP UP there is no video?
Matrix themes (Wednesday, 06 May 2020 17:12)
@Laszlo please check all social icons available in Font Awesome framework:
https://fontawesome.com/v4.7.0/icons/#brand
Laszlo (Wednesday, 06 May 2020 17:09)
Hallo
Kurze Frage: Könntest Du auch ein Icon für Pinterest zu den social media icons hinzufügen?
Matrix themes (Thursday, 09 April 2020 15:19)
@Steffen if you're talking about blog post, Jimdo has "show more" button to display previous blog posts. Regarding the online store,- if you have more than 100 items, probably you need to change the website builder. The option you asked, can be added only by Jimdo itself, no one external widget can do it.
Steffen Dettmann (Thursday, 09 April 2020 12:33)
Hello,
I never found a pagebreak widget od similar, to avoid endless scrolling pages. On desktop computers that is somehow not really necessary, I find, but on moblie devices it would be a benefit. I am talking about article overviews with 100+ items, that are to split in let's say 4 - 5 pages. Is there anything like a widget to avoid to split all items with keywords?
Greetings,
Steffen
Max (Thursday, 02 April 2020 23:58)
Thank you for the fast answer. You are totally right. I made the mistake and used the embed link instead of the regula URL.
Matrix themes (Thursday, 02 April 2020 23:36)
@Max "Access denied by Youtube" is a problem with the video, not with the plugin
Max (Thursday, 02 April 2020 23:35)
Hi, short question: the youtube pop up does not work ("Access denied by Youtube") - it works with the standard jimdo plug-in. Is there an other working matrix solution?
Hope you are healthy. Thanks
Matrix themes (Wednesday, 01 April 2020 12:36)
@Kathrin no, no sense to use opacity since you can't use the background image for the whole block. You can only change the default color in CSS
Kathrin (Wednesday, 01 April 2020 12:24)
Hi, is it possible to change the opacity of "wrap this module"? - If I take changes, the wrap is blank.
Matrix themes (Saturday, 21 March 2020 14:14)
@Kathrin there's no such option in Matrix themes
Kathrin Schierl (Saturday, 21 March 2020 12:36)
I would like to put the ghost-button with hs-magic into the navigation. Is it possible to change automatically the color (like the color of the navigation does?)
If I am on the header image, the navigation font color is white (and you can't see the ghost-dark button). If I scroll down, the navigation font color is dark...
Matrix themes (Tuesday, 03 March 2020 20:56)
@Stephanie there’s no way to add the url but just an option to upload a file.
Stephanie (Tuesday, 03 March 2020 20:54)
I found the download button but I can't find the URL for the PDFs to add to the styled link. Thanks for your help.
Matrix themes (Tuesday, 03 March 2020 20:31)
@Stephanie the download button can be found as default Jimdo module
Stephanie (Tuesday, 03 March 2020 17:38)
Where can I find the download button? Is it listed as a Matrix shortcode? The Jimdo Download buttons don't display a url code.
Thanks!
Stephanie (Tuesday, 03 March 2020 16:47)
Found a solution to the problem.
Stephanie (Tuesday, 03 March 2020 16:26)
Hi!
Is it possible to change the styled link and links in general to a simple black underline (no animation)?
Stephanie (Friday, 14 February 2020 11:18)
Thanks!
Matrix themes (Thursday, 13 February 2020 08:50)
@Stefanie you can add download buttons to the hidden page and then use the url in styled links.
Stephanie (Wednesday, 12 February 2020 16:57)
Hi!
Question for: "Styled Links" Widget
Is there a way to connect the listed links to PDF Downloads (ie. title name = link to PDF file?
I'd like to avoid using the jimdo pdf icon and download button.
Matrix Themes (Tuesday, 21 January 2020 12:37)
@Daniel please fill out the form from support page providing all details. Thank you
Daniel (Tuesday, 21 January 2020 12:35)
Thanks for answer.
but now i screw up the cookie update. can you help? please :)
Matrix themes (Sunday, 12 January 2020 19:59)
@Daniel there's no widget like you asked, so you can add just 2 images using 2 columns.
By the way, please update the cookies message styles ( section "updates" ), - it doesn't work anymore in tablet/mobile device ( check your website )
Daniel (Sunday, 12 January 2020 19:29)
Hej Serhiy
how can I insert 2 photos side by side like "HALF FULLWIDTH BG"?
(i tried columns and the full width widget!?)
Serhiy (Tuesday, 10 December 2019 10:42)
@Tobias for the overlay teaser, pricing tables and many other widgets, you need to add the module "columns" and then the custom widget inside of each row.
Tobias (Tuesday, 10 December 2019 06:11)
I`m not able to get more than one entry in Overlay Teaser.
Any further content gets appended at bottom. The entries are too huge. Each entry captures a whole widgetsize. The given example here has e.g. 3 entries in a row.
How can i get that working?
Serhiy (Tuesday, 05 November 2019 21:59)
@Karlijn the header image should be used in templates that don't support Jimdo Awesome background. For all other templates, it is necessary to use the body class 'no-hero' to hide the jimdo background image to display custom widget "header image" or "header slider"
Karlijn (Tuesday, 05 November 2019 17:31)
HI,
I was wondering if i could add a header image on a second page with the template that i have. I now use a header title but the space is a bit too small and when i add a header image it shows up underneath my normal header.
Thanks Karlyn
Serhiy (Monday, 04 November 2019 12:17)
@Richard all available widgets of Matrix themes can be found in section "shortcodes" and "enterprise package"
Richard (Monday, 04 November 2019 11:44)
Hello Serhiy,
I saw a nice presentation on another website to present their team: https://www.jujotech.com/team-copy/
Is it possible to get something similar in our template shortcodes?
Serhiy (Tuesday, 24 September 2019 23:55)
@Aicha Soro in your template the logo is left-aligned and right-aligned navigation. There's no option to change the position of logo image
Aicha Soro (Tuesday, 24 September 2019 22:41)
Hi,
in my theme the logo( Lemberg theme) is on the side but I would like to put my logo in the middle.
how can I do it ?
Serhiy (Monday, 05 August 2019 13:38)
@Martin please check the section play of columns
Martin Braun (Monday, 05 August 2019 13:30)
Hello :-)
Question for "Overlay Teaser":
Is it possible by clicking the picture to enlarge this one to have a detailed view instead of link to another page?
Would be great :-)
Best regards,
Martin