Drupal

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

Use Section Layout to Design Pages

Uploading

How to properly upload files and images to your website.

How to Replace Images Using Files Replace Feature

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