Help Center / Documentation Index / Learn dxpr builder / Drag and drop elements

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:

  1. Click on the + icon

  2. Click on the Section element

  3. Click on the pencil icon in the section element toolbar to display the general settings

  4. Optionally, switch on the Full Width option to have the elements used within the section in a full width

  5. Optionally, switch on the 100% Height option for the section to fill the entire browser window vertically

  6. Optionally, switch on the Vertical Centering to center the elements within the section 

  7. Once you’ve selected your preferred settings, you can click on Save Changes and you're done!

Customizing sections with background effects 

  1. Go to the Background Effects tab
  2. 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

  1. Go to the Style tab 
  2. Select the image by the Background settings 
  3. 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. 

  1. Go to the Style tab 
  2. Select the image by the Background settings 
  3. 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.

  1. Go to the Style tab 
  2. Select the image by the Background settings 
  3. Set the Parallax Speed which will slow down the speed the image will pass as you scroll down 
  4. 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. 
  5. Click on Save Changes 

Gradient effect 

  1. 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 
  2. Select an End Color for the gradient effect
  3. Set the Gradient Direction to set an angle between 0 and 360 degrees for your gradient
  4. Set the position of the start color, the higher the number the more overpowering the start color will be
  5. Set the position of the end color, the higher the number the more overpowering the end color will be
  6. Click on Save Changes 

YouTube Video 

  1. 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
  2. Insert the URL of the YouTube video in the URL field 
  3. Enter the time in seconds from where the video will begin in the Start Time field  
  4. Enter the time in seconds where the video will end in the Stop Time field 
  5. Click on Save Changes