• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog
  1. Support

PArallax issue

Guides

Last Updated: 15.02.2023

Parallax or parallax scrolling is a web site trend where the background content (for example, an image) is moved at a different speed than the foreground content while scrolling. The Matrix Themes include more than one js plugin to achieve such effect. This support page include all options.

 

01. Shortcodes

The shortcodes of Parallax widget can be found in Matrix Themes admin menu > Add-ons> Parallax.

Here you will find  the following versions of Parallax widget:

  • simple full width image
  • jarallax
  • enllax
  • universal parallax

 

Full width image

This is a fullwidth image

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.


Custom button

Jarallax

Matrix themes

Make things happen

Look around and catch opportunities everywhere in order to clear your mind and take your abilities to the next level.


Read more

Enllax 1

This is enllax parallax 1

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.


Custom button

Enllax 2

This is enllax parallax 2

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.


Custom button

Universal parallax

This is Universal Parallax

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.


Custom button

02. How to edit

To ensure the best results when using our parallax widgets, please note the following:

 

  • All parallax widgets can only be edited in Widget/HTML, and certain widgets may have varying effects in admin mode. For the final result, please check your page in view mode to ensure optimal functionality.
  • When adding the Universal parallax widget to your website, you may notice that images do not display immediately. In this case, it may be necessary to refresh the page to achieve the desired effect. Please note that some mobile browsers may display a fixed image instead of the full parallax effect.

03. Options

Overlay

The parallax widgets include the background image and the text on it. To ensure that the text is clearly visible, the background image has the dark overlay. You can remove it or simply add any other classes for the background overlay color:

 


<div class="hs-overlay opacity-8">
  </div>
  • opacity-8
  • opacity-6
  • opacity-4
  • bg-primary
  • bg-red
  • ...

Image size

The background image size is defined by the class h-100 ( min-height:100vh;) or inline style  that can be easy customized for your needs:


<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">

The same line includes some useful helper classes:

  • color-white - makes your text white, otherwise the color will be the same as the global text of your website
  • m-padding - this class applies the value: padding-top:100px; padding-bottom:100px; for mobile devices which overwrites the inline styles ( in order to avoid too big images)

Caption styles

The whole block of the text can be customized with the following options:


<div class="col-6 center-align">
  • col-6 - width 50%
  • .
  • .
  • .
  • col-12 - width 100%
  • left-align
  • center-align
  • right-align

 

Support

  • Docs
  • Guides
  • Style Editor
  • Global Updates
  • Theme Updates
  • Common support issues

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
  • Matrix Themes for Agencies
  • Matrix Themes for Web Designers
  • Small Business websites
  • Create a new website
  • 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