Drupal

New Theme Features

This section will help find answers to questions regarding new features used on DoCS-B5.

Light/Dark Mode

Masonry Grid Example

Menu Alignment Options

New Scheme on Components Example

Sitemap Location and Page

Sticky Menu Example

Using Image Crop

Using the Parallax Section Layouts Feature

Style Guide

Find tutorials on the usage of classes and view and download the style guide documentation.

DoCS Drupal Style Guide: Example Through Block Classes

DoCS Style Guide

Users have the ability to enhance their website's layout and ensure a visually appealing and functional design across different screen sizes using essential tools such as grid systems, color, padding and margin, and breakpoints. Please view our documentation on usage.

DoCS Style Guide

Basic page

Basic page is a content type in Drupal that you will use to put in basic content that will be displayed as a page on your website, and sometimes used as a page in the main menu. You can have a title, body, and choose various settings and designs when setting up a basic page.

Adding a Button to the CK Editor

Create a Basic Page

Creating Menu Links

How to Edit an Existing Page

Use Section Layout to Design Pages

Blocks and Context

Blocks are pieces of content that can be reused multiple times throughout a website. They are displayed using Context. To learn about blocks for the first time, please follow the tutorial for editing blocks. For a more advanced lesson on blocks, please follow the exercise on creating a block and displaying it on a page using context.

Pre-requisites:

Create a Basic Page

What are Blocks and How to Edit Them

Exercise 1: Creating a Basic Page and a Block

Exercise 2: Using Context to Display a Block

Exercise 3: Reordering and Configuring Your Block

Webforms

Webforms is a useful tool for registration, contact, feedback, and various other communications between website and user. Please follow the below tutorials to learn all about how to create and edit your website forms.

Pre-requisites:

Create a Basic Page, Blocks and Context

Download Form Submissions

List Drupal webforms on my website and their submission results

Exercise 1: How to Create a Basic Webform with 5 Different Fields

Exercise 2: Adding a Webform To a Page

Exercise 3: Adding and Configuring Conditional Fields

Exercise 4a: Change the Layout for a Webform

Exercise 4b: How to Add a Message to a Webform

Exercise 5a: Page Option Submission Confirmation

Exercise 5b: URL Redirect On Submission

Exercise 5c: URL Redirect with Submission Confirmation

Exercise 6a: Webform Submission Email Notification to Yourself

Exercise 6b: Email Confirmation to Users

Exercise 6c: Email Based On Conditional Statement

Exercise 7: Styling Webforms with CSS Classes

Exercise 8: Create a Custom URL Alias for your Webform

Gutenberg

Learn how to use the Gutenberg editor to design content into layouts through dragging and dropping.

Exercise 1: Creating a "Post" Page and Adding a Column Layout

Exercise 2: Add and Adjust Style for a Column Layout

Exercise 3: Grouping Content and Making Reusable Blocks in Gutenberg

Exercise 4: Make Page Full Width and Use List View To Reorder Elements

Exercise 5: How to Add CSS Classes and URL Redirects