Magento 2. Jumbotrons customization on homepage.

Back

Jumbotrons — are the wide colorful blocks on the homepage of Flat, Force, Home and Luxury themes.

Markup examples

<div class="jumbotron jumbotron-image no-padding">
    <!-- "Cover" will be rendered at the bottom of current element and will partially cover its content -->
    <div class="cover"><div class="left triangle"></div><div class="right triangle"></div></div>
    <div class="container">
        <!-- Content goes here -->
    </div>
</div>
<div class="jumbotron hero">
    <div class="container">
        <!-- Content goes here -->
    </div>
</div>
<div class="jumbotron hero">
    <!-- "Stub" will be rendered at the top of current element -->
    <div class="stub"></div>
    <div class="container">
        <!-- Content goes here -->
    </div>
</div>

Class modifiers

Type Class name Description
Background jumbotron-image Use image as a jumbotron background
Background jumbotron-pastel Use pastel background color
Background jumbotron-pastel-alt Use alternative pastel background color
Background jumbotron-pattern Use pattern background
Background jumbotron-bright Use bright background
Background jumbotron-dark Use dark background
Text hero Use large titles inside jumbotron
Text jumbotron-inverse Use white text and title colors
Layout no-padding Do not use default paddings
Layout no-padding-top Do not use default top padding
Layout no-padding-bottom Do not use default bottom padding

Less variables

See the paragraph below on how to use these variables.

Variable Variable name Default value
Spacing @jumbotron__padding 25px 0 20px
Background @jumbotron__background #fff
Background @jumbotron-bright__background #f15922
Background @jumbotron-pastel__background #229392
Background @jumbotron-pastel-alt__background #a5205f
Background @jumbotron-pattern__background url(../images/pattern.jpg) 50% 0
Background @jumbotron-image__background url(../images/bkg_sky.jpg) 50% 0
Background @jumbotron-dark__background #222337
Text @jumbotron-dark__text-color lighten(@jumbotron-dark__background, 60%)
Text @jumbotron-inverse__text-color #fff
Misc @jumbotron-cover-triangle__z-index 2

Customization example

Let’s change default colors. Scroll down to see results.

  • You have to create _argento_custom.less inside app/design/frontend/Swissup/argento-flat/web/css/source folder.
  • Add your custom styles:
@jumbotron__background: #fff;
@jumbotron-bright__background: #22a0f1;
@jumbotron-pastel__background: #842293;
@jumbotron-pastel-alt__background: #6820a5;
@jumbotron-dark__background: #222;
@jumbotron-pattern__background: url(../images/custom/seigaiha.png) 50% 0;
@jumbotron-image__background: url(../images/custom/noisy.png) 50% 0;

Note: If you want to replace pattern or image backgrounds, please place them into app/design/frontend/Swissup/argento-flat/web/images/custom folder.

  • Save the file and run the following bash commands to regenerate compiled styles
    • cd magento/root/folder
rm -rf var/view_preprocessed
bin/magento setup:static-content:deploy

    Please check the results.

    magento 2 customization