Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  1. Support

Old widgets

Archive

Feedback widget

<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">
                    (Quote 1)
                </p>
            </div>
            <!-- ************** End Quote teaser ************** -->
        </div>
    </div>
</div>

Feedback widget 2

<div class="is-matrix bg-dark color-white">
    <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</span>
                <p class="add-top-10">
                    (Quote 2)
                </p>
            </div>
            <!-- ************** End Quote teaser ************** -->
        </div>
    </div>
</div>


Feedback widget 3

<div class="is-matrix bg-grey">
    <center>
        <div class="col-6">
            <div class="image_wrapper resp-img add-10">
                <img src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" style="border-radius:500px;" />
            </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="color:#888;">
                    </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 3)
                </p>
            </div>
            <!-- ************** End Quote teaser ************** -->
        </div>
    </center>
</div>

Feedback widget 4

<div class="is-matrix bg-transparent">
    <center>
        <div class="col-6">
            <div class="image_wrapper resp-img add-10">
                <img src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="" style="border-radius:500px;" />
            </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="color:#888;">
                    </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 2

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix col-6 center-align cc-clearover">
    <center>
        <div class="fa fa-quote-left fa-4x" style="top:10px;opacity:0.2;font-size:50px;">
        </div>
        <br />
        <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">
            ( Quote style 2 )
        </p>
    </center>
</div>

Quote teaser 3

<!-- *** Matrix Widget quote teaser *** -->

<div class="is-matrix cc-clearover">
    <div class="col-6 right-align text-right">
        <div class="fa fa-quote-left fa-4x absolute-top-right" 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 3 )
        </p>
    </div>
</div>


Bestseller widget

<div class="is-matrix rel">
    <div class="col-8">
        <div class="item resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="absolute-top-right col-6 rel-mobile-only" style="margin-top:30px;">
        <div class="hs-description bg-white has-shadow add-20">
            <h3 class="big add-top-10">
                Make it loud
            </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="">Purchase now</a>
        </div>
    </div>
</div>

Bestseller widget 2

<div class="is-matrix rel">
    <div class="col-8 right-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="absolute-top-left col-6 rel-mobile-only" style="margin-top:30px;">
        <div class="hs-description bg-dark add-20 color-white">
            <h3 class="big add-top-10">
                Make it loud
            </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="">Purchase now</a>
        </div>
    </div>
</div>


Accordion 1

<!-- toggle style 1 -->

<ul class="accordeon">
    <li class="accordeon_item">
        <h3 class="accordeon_title">
            Title
        </h3>

        <div class="accordeon_content">
            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>

            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quibusdam?
            </p>
        </div>
    </li>
</ul>

Accordion 2

<!-- toggle style 2 -->

<ul class="accordeon">
    <li class="accordeon_item">
        <h3 class="accordeon_title bg-dark color-white mid-round size-14">
            Title
        </h3>

        <div class="accordeon_content">
            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>

            <p class="text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, quibusdam?
            </p>
        </div>
    </li>
</ul>


Tile widget

<!-- *** Matrix Widget tile widget *** -->

<div class="is-matrix bg-primary cc-clearover">
    <div class="hs-right-50">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="hs-left-50 color-white">
        <div class="gutter-20 clearover">
            <h1>
                Your title
            </h1>

            <p>
                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
                Pellentesque in ipsum id orci porta dapibus.
            </p>
            <br />
            <a class="hs-button ghost-white" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="c">
</div>

Tile widget 2

<!-- *** Matrix Widget tile widget *** -->

<div class="is-matrix bg-grey cc-clearover">
    <div class="hs-left-50">
        <div class="image_wrapper resp-img">
            <img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg" alt="" />
        </div>
    </div>

    <div class="hs-right-50">
        <div class="gutter-20 clearover">
            <h1>
                Your title
            </h1>

            <p>
                Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
                Pellentesque in ipsum id orci porta dapibus.
            </p>
            <br />
            <a class="hs-button" href="http://www.matrix-themes.com/purchase" target="">Custom button</a>
        </div>
    </div>
</div>

<div class="c">
</div>


Hero title

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Hero title 2

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6  center-align color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>


Hero title 3

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6  right-align text-right add-10 cc-box color-white">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>
            <!-- ************* mid-rounded button ************* -->
            <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

Hero title 4

<!-- hero caption -->

<div class="bg-caption g-font animated fadeInUp">
    <div class="inner">
        <div class="col-6 color-white center-align">
            <h1 class="weight-600 big__ super-big__">
                Stand out with a professional Jimdo website
            </h1>

            <center>
                <!-- ************* mid-rounded button ************* -->
                <a class="hs-button small-btn" href="https://www.zodiac-framerwork.com" target="">Read more</a> <a class="hs-button bg-white small-btn" href="https://www.zodiac-framerwork.com"
                target="">Read more</a>
            </center>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your hero title
</div>

SUPPORT

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
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
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

Note:
All changes made here will be applied to your entire website.
is-switcher admin-only

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close