Once you click the copy button, you paste the widget into the Widget/HTML module of your website
Slider
<style>
/* <![CDATA[ */
.is-matrix-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-matrix-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><div class="is-matrix-slider is-content-slider owl-carousel owl-theme">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide01.jpg" alt="Matrix Themes" />
<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.matrix-themes.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/sba417fe136d7d4a0/userlayout/img/matrix-slide02.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Make dreams come true
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.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/sba417fe136d7d4a0/userlayout/img/matrix-slide03.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Work with the professionals
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.matrix-themes.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-content-slider').owlCarousel({
autoPlay: 5000,
autoplay: true,
items : 1,
nav: true,
loop:true,
navText: ["<i class='fa fa-angle-left'><\/i>", "<i class='fa fa-angle-right'><\/i>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
})(jQuery);
//]]>
</script>
Content teaser
<!-- *** Matrix Widget callout *** -->
<div class="is-matrix content-teaser bg-primary-light 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 center-align 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 center-align cc-clearover">
<div class="one-third color-white col-flex">
<div class="gutter-20 center-align">
<div class="fa fa-rocket 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 center-align 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 center-align cc-clearover">
<div class="one-fourth color-white">
<div class="gutter-20 center-align">
<div class="fa fa-rocket 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-globe 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-primary">
<div class="is-flex is-flex-block mobile-auto cc-clearover">
<div class="col-6 is-anim-block">
<img class="is-img mobile-medium rel-mobile-only" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/bg-parallax01.jpg?t=1668154873" alt="Matrix Themes" />
</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 bg-primary-light is-reverse">
<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="is-anim-block" 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-parallax01.jpg?t=1668154873" alt="Matrix Themes" />
</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="Matrix Themes" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="hs-description bg-primary-light">
<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="Matrix Themes" />
<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="Matrix Themes" />
<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>
<h3>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
</h3>
<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>
<h3>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
</h3>
<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>
<h3>
<span style="font-size:25px;">Whatever it is, the way you tell your story online can make all the difference</span>
</h3>
<p class="add-top-10 size-13">
- Quote ( Style 3 )
</p>
</div>
</div>
<!-- *** end quote widget *** -->
Quote teaser 4
<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="Matrix Themes" />
</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 5
<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="Matrix Themes" />
</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 6
<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="Matrix Themes" />
</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 7
<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="Matrix Themes" />
</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 bg-primary" 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>
CSS Accordion
<div class="is-faqs">
<input type="checkbox" id="f1" />
<h3 style="">
<label for="f1">Fusce convallis metus id felis?</label>
</h3>
<div class="is-faqs__content">
<p>
Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Ut a nisl id ante tempus hendrerit. Praesent venenatis metus at tortor
pulvinar varius. Nam pretium turpis et arcu. Aenean imperdiet. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Praesent egestas tristique nibh. Praesent congue erat at
massa. Vivamus aliquet elit ac nisl. Aenean commodo ligula eget dolor. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Proin pretium, leo ac pellentesque mollis,
felis nunc ultrices eros, sed gravida augue augue mollis justo. Quisque malesuada placerat nisl. Etiam feugiat lorem non metus. Vestibulum ullamcorper mauris at ligula.
</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>
CSS tabs
<div class="tabs">
<input type="radio" name="tabs" id="a" checked="checked" /> <label for="a">First Tab</label>
<div class="tab">
<h3>
First Tab Content
</h3>
<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. 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>
<input type="radio" name="tabs" id="b" /> <label for="b">Second Tab</label>
<div class="tab">
<h3>
Second Tab Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<input type="radio" name="tabs" id="c" /> <label for="c">Third Tab</label>
<div class="tab">
<h3>
Third tab content
</h3>
<p>
hfioezhogehzioghz
</p>
</div>
</div>
Social Icons 1
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 2
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark is-rounded">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 3
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 4
<div class="hs-social text-left new-social small-social size-11 is-circle-solid link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social Icons 5
<div class="hs-social text-left new-social small-social size-11 is-circle-solid is-rounded link-white">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands 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>
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>
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/cms/o/s1aeecbbb2a5865b1/userlayout/img/popup-banner.jpg?t=1634195427" alt="Matrix Themes" />
<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">
<h3>
This is yout title
</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/cms/o/s1aeecbbb2a5865b1/userlayout/img/popup-banner.jpg?t=1634195427" alt="Matrix themes" />
<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 ">
<h3>
This is your title
</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>
Vertical Timeline
<div class="timeline-container alt">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li class="is-green">
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Vertical Timeline
<div class="timeline-container bg-primary-light add-20 mid-round">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Horizontal timeline
<div class="timeline-container is-horizontal">
<ul class="vl">
<li>
<h3>
Step01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti.
</p>
</li>
</ul>
</div>
Horizontal T. (last item)
<div class="timeline-container is-horizontal is-last">
<ul class="vl">
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit.Vestibulum fringilla pede sit amet augue.
</p>
</li>
</ul>
</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="Matrix Themes" />
</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="Matrix Themes" />
</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>
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="Matrix Themes" />
<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 color-white">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="Matrix Themes" />
<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 color-white">
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="Matrix Themes" />
<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>
Page Animations
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.hs-content .j-module').addClass('is-anim');
// wow
wow = new WOW(
{
boxClass: 'is-anim',
animateClass: 'animate__animated animate__fadeInUp',
mobile: true,
offset: 50
}
)
wow.init();
});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
page animations
</div>
Global Animations
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.hs-content .j-hgrid,.hs-content .is-anim-block').addClass('is-anim');
// wow
wow = new WOW(
{
boxClass: 'is-anim',
animateClass: 'animate__animated animate__fadeInUp',
mobile: true,
offset: 50
}
)
wow.init();
});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
global animations
</div>
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
Quick links
hide-in-doc-page
draggable-logo
Main colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template sections
| body | |
| top-header | |
| header | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Other elements
| social icons | |
| navigation color | |
| subnav background |
Mobile navigation
| background color | |
| navigation color |
| Template configurations |
| has-center-nav g-font has-large-header |
| Navigation styles |
| size-15 weight-400 snip-nav --line01 is-uppercase |
| Content styles |
| form-white |
| Footer styles |
| o-form color-white |
|
Typography |
| Heading H1 |
| weight-600 is-uppercase |
| Heading H2 |
| weight-400 is-uppercase |
| Heading H3 |
| weight-600 is-uppercase |
| Buttons |
| weight-600 is-uppercase |
| Animations |
Note: All changes made here will be applied to your entire website.
is-switcher
MATRIX THEMES
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Alan (Monday, 30 January 2023 14:51)
Hey Serhiy,
Unfortunately all my full width images and slider are not working and i can´t get the code from my shortcode section.
Thanks for your help.
Cheers
Alan
Johannes Hauser (Monday, 23 January 2023 18:40)
Ah yes, thank you. Now its fixed.
Matrix Themes (Monday, 23 January 2023 18:15)
@Johannes probably you haven’t updated the shortcodes widget with the latest version of font awesome.
Johannes Hauser (Monday, 23 January 2023 17:57)
Hi, why are the social media icons just showing squares, instead of the Logo?
Stefan (Wednesday, 06 July 2022 13:30)
On your website you mention "Tile Banner 02" (https://www.matrix-themes.com/support/help/matrix-variables/). Where can I find the shortcode for that widget?
Matrix themes (Friday, 01 July 2022 18:24)
@Stefan B.
The cloud tags widget has been removed in the latest themes:
<!-- ************* Tags widget style 01 ************* -->
<div class="tagcloud cc-clearover">
<a href="https://www.matrix-themes.com/">Jimdo</a>
<a href="https://www.matrix-themes.com/">Matrix</a>
<a href="https://www.matrix-themes.com/">Design</a>
<a href="https://www.matrix-themes.com/">Responsive</a>
<a href="https://www.matrix-themes.com/">templates</a>
<a href="https://www.matrix-themes.com/">business</a>
</div>
<!-- ************* end Tags widget style 01 ************* -->
Stefan B. (Friday, 01 July 2022 14:00)
Hi there,
where I can find the code for cloug tags? I saw them on the matrix theme website but can't find them in the shortcodes section.
Matrix themes (Thursday, 28 April 2022 22:26)
@Johannes on youre homepage you're not using the content carousel from this page but the one from add-ons.
Johannes Hauser (Thursday, 28 April 2022 16:04)
The shortcode Content Carousel doesn't slide automatically is this normal/standard or is it a bug?
Matrix themes (Friday, 14 January 2022 21:28)
@Roberto click the Widget/HTML and find the following code of the button to edit it. Replace your own text and link:
<a class="hs-button bg-white " href="https://www.matrix-themes.com" target="" >Custom button</a>
Roberto Jara (Friday, 14 January 2022 21:23)
Hello! I am using the Fullwidth Ultimate Tile 3. I see that it has a custom buttom BUT I don´t know how to add a link in it to use the buttom. May you help me?
Matrix themes (Monday, 20 September 2021)
@Ron:
<a href="#popup-article02" class="hs-button bg-round">article popup</a>
<div id="popup-article02" class="popup popup-overlay">
Ron (Monday, 20 September 2021 14:26)
@Serhiy Ok, but if I add different ID for each popup section and connect them with the "href-tag" of the different buttons, the box in which the text is normally placed for the "small dialog ID" disappears. And you can't read the text because it is shown in grey on a opac background.
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