1. Home
  2. Docs
  3. Supreme Shortcodes
  4. Shortcodes
  5. Sections and Container

Sections and Container

Sections

If you want to have the same look as on our Home Pages, use Full width Page template and Supreme Shortcode named: Section Image. Image can be used as fixed to the page, it can scroll with page or you can apply famous parallax effect. If you want that parallax effect, simply select image type: parallax.

There are two options:

  • Image
  • Color
Supreme Shortcodes - Section Image  Supreme Shortcodes - Section Colour

Options – image

  • Image ID: Your image ID you can select from media library (opens in a same popup window)
  • Image Type: parallax, fixed or scroll
  • Image Repeat: repeat, no repeat, repeat horizontally, repeat vertically
  • Image Position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.
  • Background Colour: #ffffff

        [st_section_image image_id='YOU IMAGE ID' bg_color='#ffffff' type='fixed' position='left top' repeat='repeat']Content goes here[/st_section_image]
    


        [st_section_color color='#e74c3c']Content goes here[/st_section_color]
    

Note: Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

 

Container

This shortcode is intended for narrowing/following the default website responsive width of the main content. It is used to center the content on all of our demo pages (mainly Home Page variations – can be found in main navigation dropdown) which use Page Template named: 100% Full width. In Container shortcode you can put rows and columns for even more responsive behaviour if needed.

Supreme Shortcodes - Container Back End  Supreme Shortcodes - Container Front End

        [st_container]Content goes here[/st_container]