Use sections on your Drupal website to create full-width containers or to wrap elements with special background effects.
Follow the steps below to start using sections in your website:
Click on the + icon
Click on the Section element
Click on the pencil icon in the section element toolbar to display the general settings
Optionally, switch on the Full Width option to have the elements used within the section in a full width
Optionally, switch on the 100% Height option for the section to fill the entire browser window vertically
Optionally, switch on the Vertical Centering to center the elements within the section
Once you’ve selected your preferred settings, you can click on Save Changes and you're done!
Customizing sections with background effects
- Go to the Background Effects tab
- Select a background effect option
- Simple image: the added background image will flow with the page
- Fixed image: the added background image will stay as you scroll through the page
- Parallax: the added background image stays as the element moves
- Gradient: add a linear gradient to to background
- YouTube video: add a video as a background of an element
Simple Image effect
- Go to the Style tab
- Select the image by the Background settings
- Click on Save Changes
Fixed Image effect
This fixes the backrgound image so that it won't move long with the flow of the page when you scroll.
- Go to the Style tab
- Select the image by the Background settings
- Click on Save Changes
Parallax Image effect
This let's you set a custom scroll speed for your background image. This creates a parallax effect by having the background image move at a different speed compared to other elements on the page.
- Go to the Style tab
- Select the image by the Background settings
- Set the Parallax Speed which will slow down the speed the image will pass as you scroll down
- Select the Parallax Mode between Fixed and Local. Fixed refers to fixing the image to the browser window and local means the images is scrolled when a scrollable container inside the page is scrolled.
- Click on Save Changes
Gradient effect
- Select a Start Color for the gradient effect.
Optionally add transparency to the gradient with the slider under the color chart if you want to reveal a background image - Select an End Color for the gradient effect
- Set the Gradient Direction to set an angle between 0 and 360 degrees for your gradient
- Set the position of the start color, the higher the number the more overpowering the start color will be
- Set the position of the end color, the higher the number the more overpowering the end color will be
- Click on Save Changes
YouTube Video
- Select Video Play Options
- Loop: Repeats the video infinitely
- Unmute: Turns on sound on the video. warning: when using autoplay it is not recomended to Unmute the video because modern browsers will block the video from autoplaying.
- Disable on mobile devices: Prevents the video from streaming and playing on mobile devices
- Show controls: Adds video controls to the background video
- Insert the URL of the YouTube video in the URL field
- Enter the time in seconds from where the video will begin in the Start Time field
- Enter the time in seconds where the video will end in the Stop Time field
- Click on Save Changes