Documentation

Section Builder with Backgrounds: Unleash Your Creative Potential

Crafting visually compelling sections for your WordPress site just got an upgrade. With the Section Builder with Backgrounds, you’re not merely adding design elements — you’re orchestrating a symphony of colors, gradients, and images enhanced by parallax effects.

1. Introduction

Transform your website into a canvas of creativity. The Section Builder with Backgrounds empowers you to design captivating sections using solid hues, dynamic gradients, or immersive parallax-enhanced images. Its simplicity and sophistication rolled into one plugin, offering an effortless way to redefine your site’s aesthetic.

2. Features

  • Color Backgrounds: Paint your sections with bold, vivid shades or subtle tones.
  • Gradient Backgrounds: Dive into a spectrum of transitions, from smooth fades to striking color combinations.
  • Image Backgrounds: Enrich your sections with textures, patterns, or photographs.
  • Parallax Effects: Add depth and dimension with scrolling backgrounds that dazzle.
  • Shape Dividers: Add customizable shapes like waves, zigzags, and more to the top or bottom of sections.
  • Content Support: Effortlessly include headings, text, buttons, or images within different sections.
  • User-Friendly Interface: Even beginners will find it intuitive and rewarding.

3. Installation: From Simplicity to Mastery

Using WordPress Admin

  1. Go to your WordPress dashboard. Click on “Plugins,” then select “Add New.”
  2. In the search bar, type “Section Builder with Backgrounds.”
  3. Once the result appears, click “Install Now,” and click “Activate” to complete the installation.

Manual Upload

  1. Download the plugin .zip file from the Plugin Envision website.
  2. Go to Plugins > Add New > Upload Plugin.
  3. Upload the .zip file, click Install Now, and Activate the plugin.

4. Getting Started: Crafting Visual Symphony

Creating a Section

  1. Navigate to the page editor in WordPress.
  2. Add a new Section Builder block to your page.
  3. Customize the section size, scroll animation, and alignment.

Applying Backgrounds

  1. Select your section and open the Background panel.
  2. Choose between:
    • Color: Select a solid color using the color picker.
    • Gradient: Define the gradient direction, colors, and intensity.
    • Image: Upload an image or choose one from a URL.
  3. Save your changes to preview the effect.

Section/Wrapper

  1. Navigate to the Section / Wrapper in your Section Builder block panel.
  2. Adjust the Minimum Height using values in pixels (px), ems (em), or viewport height (vh).
  3. Choose the Parallax effect from the Scroll Animation options.

Shape Dividers

  1. Open the Shape Divider settings under the Section Builder panel.
  2. Choose from shapes like waves, curves, books, and more.
  3. Adjust the height, width, and position (top or bottom of the section).
  4. Customize the divider’s color, or transparency to blend seamlessly with your design.
  5. Transform the image by applying a flip and invert.

Adding Content to Sections

  1. Inside the section, add content blocks such as:
    • Headings: Use the text editor to style titles.
    • Paragraphs: Insert descriptive text or information.
    • Buttons: Add calls-to-action with customizable links and styles.
    • Images: Upload media or use WordPress media library files.
  2. Arrange and align the content for the perfect layout.
  3. Combine content with the background and shape dividers to create cohesive sections.