Parallax section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt elit et eros commodo, laoreet iaculis risus lobortis. Ut eget cursus nisi. Maecenas egestas, nunc gravida rutrum porttitor, ante ligula luctus erat, non vehicula massa mauris et ante. Mauris a vulputate sapien. Aenean sagittis tellus vitae mi viverra, sed venenatis nibh fringilla. Suspendisse vel suscipit elit, vel ultricies sem. Suspendisse elementum risus ut efficitur feugiat.
[su_section image="https://getshortcodes.com/wp-content/uploads/2017/08/section-bg.jpg" border="none" text_align="center"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt elit et eros commodo, laoreet iaculis risus lobortis. Ut eget cursus nisi. Maecenas egestas, nunc gravida rutrum porttitor, ante ligula luctus erat, non vehicula massa mauris et ante. Mauris a vulputate sapien. Aenean sagittis tellus vitae mi viverra, sed venenatis nibh fringilla. Suspendisse vel suscipit elit, vel ultricies sem. Suspendisse elementum risus ut efficitur feugiat.[/su_section]

This shortcode is available in Shortcodes Ultimate Pro

Description

This shortcode allows you to create content sections with parallax effect.

Options

Option namePossible valuesDefault value
background
Section background color
#HEX color#ffffff
image
Select background image for this section. Example value: http://lorempixel.com/1200/600/abstract/
The URL of uploaded file– none –
background_position
This option determines position of the background image
left top (Left Top)
center top (Center Top)
right top (Right Top)
left center (Left Center)
center center (Center Center)
right center (Right Center)
left bottom (Left Bottom)
center bottom (Center Bottom)
right bottom (Right Bottom)
left top
fullwidth
Set this option to Yes to stretch section to full page width (not just content part). This option requires single-column page template.
yes or nono
parallax
Enable parallax effect. Parallax effect may not work in Live preview mode
yes or noyes
cover
Enable cover mode for background image. Image will fit into the section
yes or noyes
max_width
Maximum width for this section content (px)
Number from 0 to 1600960
margin
Section margin (px), [top right bottom left]
Any text value0px 0px 0px 0px
padding
Section padding (px), [top right bottom left]
Any text value30px 0px 30px 0px
border
Top and bottom section borders
CSS border shorthand property1px solid #cccccc
color
Section text color
#HEX color#333333
text_align
Text alignment for panel content
left (Left)
center (Center)
right (Right)
left
text_shadow
Pick a shadow for section text
CSS box/text-shadow shorthand property0 1px 10px #ffffff
url
You can type here any hyperlink to make this section clickable
Any text value– none –
target
Choose link target
self (Open link in same window/tab)
blank (Open link in new window/tab)
blank
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

Photo by Neven Krcmarek

Helpful?
🤝 Thank you!