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