• Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Altona
    • Hafen
    • Enkel
    • Horten
    • Agen
    • Hisingen
    • Tjörn
    • Lacksund
    • Öland
  • Page builder
  • Support
  • Blog
  1. Support

This page has been archived by Matrix Themes. It is now read-only and valid only for the templates installed before 2022.

Click the button to select the gradient

Gradients

Gradients

The helper class bg-gradient can be used  to add gradient color effect to your images in slideshows and single fullscreen image. There are 5 options that you can use ( from bg-graident to bg-gradient5 ). Here's an example:


<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

How to use

If non of 5 styles in CSS aren't good for your website, you can change them for your own ones by clicking the button 'gradients'.

Just change the default styles in CSS or add others  for example bg-gradient6, bg-gradient7 etc


<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

The alternative way is to use inline style, so the code  of gradient color will be added directly to the Widget/HTML.  Please check an example below:


<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient" style=" <!-- the code is placed here --> ">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

<!-- ************* Single image Carousel ************* -->

<div id="image-fullwidth">
    <div class="item">
        <div class="hs-overlay bg-gradient" style=" 

background: #4568DC; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4568DC , #B06AB3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4568DC , #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
         ">
        </div>
        <img src="https://u.jimcdn.com/e/o/s1aeecbbb2a5865b1/userlayout/img/header.jpg" alt="" />
            <div class="carousel-caption animated fadeInLeft">
               <div class="inner">
                <h1 class="color-white big weight-600 left-align">
                    It's time for custom design
               </h1>
                <br />
            </div>
        </div>
    </div>
</div>

<div class="matrix-msg invisible">
    Edit here your fullwidth image
</div>

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Helper classes
  • Common support issues
  • Contact

Features

  • Templates
  • Page Builder
  • Add-ons
  • Landing pages
  • Alt Classes
  • Matrix variables

Get inspired

  • Most popular templates
  • Website examples
  • Custom widgets
  • Block Elements
  • Fluid Sections

Quick links

  • Marketplace
  • Pricing
hide-in-doc-page

draggable-logo

Showcase

 

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

About | Privacy Policy | Cookie Policy | Sitemap
Created with Jimdo
Log in Log out | Edit
  • Scroll to top
Close