LogoLogo
9.0.x
9.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase with DDEV
      • Installing Varbase with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Total Control Dashboard
        • Vartheme Claro
        • Vartheme BS4
      • Optional Components
        • Varbase API
        • Varbase Internationalization
        • Varbase Media Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Varbase Style Guide
        • Reroute Email
        • Varbase Updates Helper
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
        • Configure Swift Mailer
        • Switch From Swift Mailer to Symfony Mailer
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
    • Theme Development with Varbase
      • Understanding The Vartheme Base Theme
      • Creating Your Own Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Switch From Node SASS to Dart SASS for Old Sub-Themes
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Switch from CKEditor 4 to CKEditor 5 in Varbase ~9.1.0
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Creating A Sub Profile From Varbase
        • Varbase Sub Profile Generator
        • Varbase Sub Profile Basic Template
        • Varbase Sub Profile Basic Project Template
      • Install Needed YARN and Gulp Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Terminology
    • Accessing the Administration Area
      • Website Environments
    • User Management
      • Allow Email/Username Login & Registration
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
      • Add User
      • Edit User
      • Masquerading as another user
    • Dashboard
      • Reports
    • Content Structure
      • EntityQueues
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • Manage Vocabulary
        • Edit Vocabulary
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
      • Webforms
        • Setting up Emails Handler Conditions
        • Setting up Confirmations Message Settings Types
    • Content Management
      • Create Content
        • Add a Basic page
        • Add a Landing page
        • Add Blog
        • Add Media
          • Image
          • Remote video
          • Video
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Content Moderation
      • Publish Content
      • URL Alias
    • About Layout Builder
      • Section
      • Custom Blocks
        • Heading Block
        • Basic Block
        • Media Block(Image/Video)
        • Rich-Text Editor “WYSIWYG”
      • Managing Blocks
    • Search Engine Optimization
      • XML Sitemap
      • Meta Tags in Varbase
      • URL Redirects
      • Domain Redirects
      • Prevent a Single Content From Being Indexed
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google analytics
        • Mail templates
      • User interface
      • Development
      • Varbase settings
      • Web services
    • Common Error Handling Tips
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • How to Add Section
  • How to Edit/Delete Section
  1. Content Designers
  2. About Layout Builder

Section

PreviousAbout Layout BuilderNextCustom Blocks

Last updated 2 years ago

How to Add Section

When we are creating a new section, it is required to choose a specific section layout. Here are some common section layouts:

  • Content Area - Full Width.

  • Content Area - Bounded.

  • Content Area - Two columns (50/50).

  • Content Area - Three columns (33/33/33).

Section Layouts like “Content Area - Two columns” helps users to divide the section into two (or more) blocks. However, using Section Layouts above limits the user with the number of columns per section. There is another method to put columns in the sections manually, which is to use the block “Columnized Static Content”.

We could also add styling to each section by assigning the section to different CSS Class. In order to add a section to a specific page on the site, follow these steps:

1- Open the desired page e.g.(Landing Page).

2- Click on the Layout tab at the top of the page.

3- Click on Tasks / Layout.

4- Click on + ADD SECTION.

5- Choose a layout for this section e.g.( Bootstrap 1 Col).

6- Choose from the Container Types options e.g. (Full).

7- Choose from the Gutters options e.g. (No Gutters).

8- When you finish all the needed updates click on Add Section button.

9- Click on Save Layout to save the added section.

How to Edit/Delete Section

In order to edit a section to a specific page on the site, follow these steps:

1- Click on “Configure section” icon.

2- Update the Configure Bootstrap Column section.

In order to delete a section to a specific page on the site, follow these steps:

1. Go to the section to be deleted and click the "X" icon.

2. Confirm to delete the section by clicking Remove button.

Edit Landing Page - Layout Builder
Edit Landing Page - Tasks - Layout
Edit Landing Page - Add Section
Edit Landing Page - Configure Bootstrap 1 Col section
Edit Landing Page - Save Layout
Edit Landing Page - Edit Section
Edit Landing Page - Remove Section