fb-pixel

Drupal tutorial: learn this CMS from scratch

Drupal is a powerful open source CMS that you can use to build your project on the web. In this Drupal tutorial we will discover how to get started with it.

This article aims to be a real introductory manual for those who are preparing to create their first site with Drupal. If you already have experience with this CMS, our guide may still reserve you some pleasant surprises because we will see several suggestions that will help us create a site quickly and manage it in every respect.

Let’s start immediately with the installation methods.

Drupal Tutorial

Install Drupal

To create a site with Drupal, the first thing to do is install the CMS.

Let’s start with the quickest option: choosing Drupal hosting allows you to have the CMS already pre-installed and be able to create your site without wasting time.

There are other possibilities as well. For example you can install the CMS locally (on your PC). In our guide on how to install Drupal we have detailed all the steps to:

  • install the CMS locally with XAMPP;
  • install it on the server with an autoinstaller;
  • install it manually.
Drupal Official Icon Logo

If you’ve already installed it, you’re ready to go.

In this Drupal tutorial we have used Drupal 9.4.8 as a reference so if your version doesn’t match we suggest you update Drupal so you don’t have problems following the guide.

Drupal tutorial: how to access the backend

After installing Drupal, the first thing to do is access the administration area of ​​the CMS, also called the backend.

To do this, just go to the following address:

https://domain.com/user/login

Just replace “domain.com” with the domain name you chose during installation.

You will find yourself in front of a login page like this where you just need to enter the login details you set up during installation.

Drupal Login Page

Initial Drupal configurations

Before we get into this Drupal guide, let’s start with the basic configurations. If you installed Drupal with an auto-installer like Softaculous it is possible that the default language is English.

For this reason, the first thing I’m going to explain to you is how to change the Drupal language.

Changing the default language of Drupal

First, we need to activate the module that will allow us to view the user interface in other languages.

Go to Extend and search the page for the “Interface Translation” module, then activate it: just select it and click Install.

Drupal Enable Interface Translation Module

We will also be asked to activate the “Language” module, click on Continue to confirm.

Let’s go to Configuration and scroll down to the “Regional and language” section, here we will find the Languages ​​item from which it is possible to change the language used:

Drupal Languages Configuration

In the next screen, click on the “Add language” button, like this:

Drupal Tutorial Add Language

Then we just need to choose the language and click on “Add language”:

Drupal Tutorial Add Additional Language

We wait for the new language to be installed and then it will be possible to set it as default by selecting it from this list and clicking on Save configuration:

Drupal Set Default Language

In doing so, the interface of the Drupal administration area will be in the language we have chosen, in our example in Italian.

Drupal user interface overview

Now that we’ve changed the user interface language, we’re ready to see a brief overview of the features. During our Drupal tutorial we will then go into the details and learn how to perform the main operations with the CMS.

The top bar contains the following buttons:

  • Back to site
  • Manage
  • Shortcuts
  • Username.
Drupal Main Top Bar

Let’s see what they are for.

When we are in the administration area we can move to the front-end by clicking on “Back to site“.

By clicking on “Manage” at the top left we can show or hide the main bar.

Drupal Manage Top Bar

From here we can to different sections.

  • Content: it is the section that we will use to create pages and articles. From here we can also manage comments and files uploaded to the site.
  • Structure: this area will allow us to manage menus, contact forms, site taxonomy and to configure blocks.
  • Appearance: From here, you will be able to manage your installed themes or add new ones.
  • Extend: This section is dedicated to Drupal modules.
  • Configuration: the site settings menu from which you can also change some aspects useful for Drupal SEO.
  • People: from here we can manage the users who have access to our site.
  • Reports: this area of ​​the administration panel allows us to access the logs, check if there are any updates or other problems encountered on the site.
  • Help: you can use this section to quickly access the help of the Drupal.org site.

Next to “Manage” we see two other items.

Shortcuts: We can add links to this menu to quickly access certain areas of the administration interface.

Drupal Edit Shortcut Topbar Links

Username: we can edit the current user profile.

Create pages with Drupal

To create a website, one of the first things you need to know how to do is create the pages that will make up the site.

Drupal, like other CMS, allows you to create pages through a simplified interface.

To add a new page, click on Manage > Content and then on “Add content”:

Drupal Tutorial Add Contents

We can choose between two options, for the pages we click on “Basic page”:

Drupal Tutorial Add Basic Page

At this point it is sufficient to fill in all the important fields. Let’s see together how.

Title: enter the title of the page.

Body: we use the editor to insert the page content, we can format the text and insert images.

Publication box: on the right we find several options that allow us to add the page to the menu, modify the URL, change the author and the publication date.

When we are satisfied with the changes we can click on “Save”.

Tip: if we want to save the page as a draft without publishing it, just remove the check next to “Published”.

Drupal Save Page In Draft

By following these steps we can create our home page, like in this example:

Drupal Tutorial Create A New Page

Now let’s see how to set the page we just created as the site’s home page.

Set the home page

After we have created a page with Drupal we can set it as the home page. Let’s go to Configuration > System > Basic settings:

Drupal Base Site Settings

Here we will see the “Default Home Page” section and we will be able to enter the URL of the page we want to use as home. In our example above, we created a home page, so now we just need to enter the URL we set earlier.

At this point, click on “Save Configuration”:

Drupal Tutorial Set Custom Homepage

Create a website menu with Drupal

After creating the different pages of our site, we can move on to creating the menu.

As we have seen before we can insert pages into the menu directly when we create or edit them. We just need to check the option “Provides a menu item” and then fill in the other fields that I show you here:

Drupal Tutorial Add Page To Menu

We can also create and manage the site menus from another section. Let’s go to Manage > Structure > Menu:

Manage Drupal Menu

By default, the system automatically creates the main menu of the site and inserts a link to the home. To change it, click on Change menu next to the “main navigation” menu:

Drupal Edit Main Navigation Menu

From this section we can change the title and language of the menu and then add new items. For example, let’s add the “About Us” page by following these steps:

1. Click on “Add link”.

Drupal Tutorial Add Links To Main Navigation Menu

2. Enter the title to display in the menu, for example “About us”.

Add About Us Page To Drupal Menu

3. Enter the URL in the Links section. You can also type the page name to search the site without having to enter the full URL.

4. If you want to create the menu item as a sub-item of another, select it from the “Parent link” option.

Drupal Menu Parent Link

5. Click on “Save”.

The menu we created will look like this:

Drupal Menu Example

We can change the order of the items in the menu by dragging them from one position to another, as I show you here:

Drupal Tutorial Reorder Menu Items

Drupal guide: how to create a blog

In this chapter of our Drupal guide you will learn how to create a blog.

We will see how to:

  • create articles;
  • generate a blog page to display articles;
  • manage tags.

How to use Drupal to create articles

Let’s start with creating the articles.

Like WordPress, Drupal has two distinct sections for creating site pages and posts. We saw earlier how to do it for pages.

To create an article, go to Manage > Content and then to “Add content”:

Drupal Tutorial Add Contents

This time we click on “Article”:

Drupal Tutorial Add Article

The interface that will be shown to us is very similar to that of creating pages.

In this case, there are additional settings that are only for articles.

1. When we create an article we can insert tags in the “Tags” section.

Drupal Tutorial Add Article Tags

2. From the appropriate section we can set an image that will be used as the featured image of the article.

Drupal Tutorial Add Article Featured Image

3. From the box on the right we can manage the comment settings and choose whether to allow them or not.

Drupal Article Comments Settings

Create a blog page with Drupal

To create a blog with Drupal we can use a form or create a view. In this case we will use the second method.

Drupal views allow us to create lists in which to display content and sort them, for example, by creation date starting from the most recent. This function is therefore ideal for creating a “Blog” page on our site in which to show the list of articles.

Creating one is very simple.

Go to Manage > Structure > Views.

Drupal Manage Views

Click on “Add view”.

Drupal Tutorial Add View Mode

We must therefore set all the fields. First, we enter the name of the view, for example “Blog”.

Drupal Add View Basic Settings

We then choose which contents to show, in our case only the contents of the Article type. Let’s set the sort order, for example “Most recent first”. By doing so, the latest articles will be shown first on the blog page.

Drupal Add View Settings

From the “Page settings” we choose the Create a page option. Then we also fill in the other fields to set the title and path of our blog page. From here we can also choose how many elements to display, for example “5”.

Drupal Add View Page Settings

This section also allows us to create a menu item for the page we are creating. We can use it to add the blog link to the main menu.

Drupal Add A View To Menu

When you have chosen all the settings, just click on Save and modify.

Depending on the settings you’ve chosen, the appearance of the list will vary. You can tweak the options until you find the ones that fit your project best.

In our case we have created a view to generate a “Blog” page with an unformatted list showing the previews of the articles.

Drupal Blow View Example

Manage tags with Drupal

Now that we have seen how to create articles with Drupal and how to display them on the site in a blog page, let’s move on to the taxonomy.

With Drupal we can manage the taxonomy by going to Manage > Structure > Taxonomy.

Drupal Tutorial Manage Structure Taxonomy

By default, Drupal creates a vocabulary for tags.

Drupal Manage Taxonomy

From this section we can view the terms we have added, add new ones or change the settings.

Drupal Tutorial Manage Taxonomy

Note that you can create a new tag directly from the post creation screen. Just type it in the “Labels” section, as we saw earlier.

How to manage forms with Drupal

Drupal modules are extensions that allow us to add new functions to our site. Some of these modules, called core modules, are already integrated and to make them work you just need to activate them.

For example, at the beginning of this guide we saw how to activate the modules to change the language of the administration interface.

In addition to the core modules, we find third-party modules that are called “contributed“. In this section we will see how to install this type of module.

Advanced tip: there are also custom modules, in this case to install them it is better to use Drush, the command line application that allows us to manage Drupal.

Access the list of installed modules

To see which modules we have installed on our site, just go to Manage > Extend. Here we will find three tabs that allow us to manage the modules.

Drupal Extend Module List

Using the “List” tab we can view the list of modules present.

The “Update” tab allows us to check for updates.

Finally, the “Uninstall” tab allows us to manage the modules and uninstall them.

Installing a module with Drupal

To install a third-party module:

Go to Manage > Extend and click on “Add new module”:

Drupal Add A New Module

We can then enter the URL of the module to install or upload the module archive.

The fastest way is to get the URL without having to download the form and then upload it to the site.

If the module is present in the Drupal.org directory, we just need to do this:

1. Open the module tab, for example “Redirect”, and click on the version number.

Drupal Tutorial Install Drupal Module Step 1

2. Copy the download link of the tar.gz archive as I show you here:

Drupal Tutorial Install Drupal Module Step 2

3. Paste it into the “add from a URL” field of the Drupal interface and then click Continue.

Drupal Tutorial Install Drupal Module Step 3

An alert like the one I show you here will let you know that the operation was successful.

Drupal Tutorial Install Drupal Module Step 4

Activate a form

After installing a new module, we can activate it by going to Manage > Extend and looking for it in the list.

At this point we select the extensions and then click on the “Install” button at the bottom of the page.

Drupal Enable Redirect Module

Drupal Guide: Managing Themes and Appearance

In this chapter of our Drupal tutorial, we will see how to:

  • change the backend theme;
  • change and install new front-end themes;
  • change the theme and add a logo;
  • customize the look of the site by adding blocks.

First, let’s start with the topics.

The default theme of Drupal changes according to the version we are using. With the latest version currently available, Drupal 9.4.8, we have the Olivero theme available.

We can manage and configure Drupal themes from the Manage > Appearance panel. In this section we will find the installed themes and the available ones.

Drupal Theme Settings

As you can see there are two themes installed by default:

  • Default theme – it is the theme that determines the appearance of the front-end.
  • Administration theme – allows us to define the appearance of the administration panel (back-end).

Let’s first see how to change the admin panel theme. In the next paragraph, however, we will focus on front-end issues.

Change the admin theme

To change the admin theme go to Manage > Appearance and scroll down to the Admin theme section.

We can choose from those available by selecting it from the drop-down menu and then clicking on “Save configuration”.

Drupal Change Administration Theme

Install a new theme (front end)

Drupal themes are installed from the Manage > Appearance panel.

To install a new theme we can choose from the available and uninstalled themes, or add a new theme.

If there are themes available we will find them in the “Uninstalled Themes” section which I show you here:

Drupal Uninstalled Themes

In this case we can click on Install or Install and set as default to activate them on the site.

To add a new theme, click on the Add new theme button at the top.

Just as we have seen for the installation of modules, we can install a new theme by entering the URL of the archive or by loading the archive that we have previously downloaded on our computer.

If the theme we are interested in is in the Drupal directory, we can quickly retrieve the URL in the way we saw before and then paste it into the Add from a URL field as I show you here:

Drupal Tutorial Add Bootstrap Theme From Url

The following screen will confirm that the theme has been added. Click on Install the added themes to proceed with the installation.

Bootstrap Theme Installed Successfully

We will be redirected to the themes section and we will be able to find the newly added theme among the “Uninstalled themes”.

In our case we have added “Bootstrap” one of the free themes available in the official directory. To install it, just click on Install or Install and set as default to apply it directly.

Drupal Install New Added Theme

After choosing the theme to use, we can change some settings. To do this, go to Manage > Appearance and then open the Settings tab.

Drupal Appearance Settings

In the tab we will see global site settings as well as specific ones for back-end and front-end themes. The latter will have the name of the theme, in our case “Claro” and “Olivero”.

From the settings we can customize the logo and favicon.

Click on Logo image and deselect the Use the logo supplied by the theme optio. In this way we will be able to upload the image with our logo.

Drupal Tutorial Add Custom Logo

We can repeat the same procedure for the favicon:

Drupal Add Favicon To Theme

Note that the location of the logo may change based on the theme. Here I show you an example with the “Olivero” theme:

Drupal Front End Logo Example

The header you see in this example is a block. Drupal blocks are elements that allow us to display certain content on the page. Let’s open a new chapter of this tutorial to see how to create and manage them.

How to use blocks to change the look of your site

As we said, the blocks allow us to show some elements in certain areas of the page.

Through a block we can insert search bars, boxes with recent comments and so on.

Let’s see how to use this Drupal feature.

First we go to Manage > Structure > Block Layout.

Drupal Tutorial Block Layout

This panel shows us the blocks present and allows us to change their order. Remember that the available blocks and their placement depend on the theme you are using.

Let’s take an example with a block to see what functions are available.

The “Site branding” block that we see in the Header is the one in which the logo and the name of the site are shown. Next to each block we have operations available: we can configure, deactivate, or delete the elements.

Drupal Block Configure Settings

By clicking on Configure we can modify the block options. In this specific case, we can choose which elements to show: logo, name and slogan.

Drupal Tutorial Configure Blocks

Scrolling through the following sections we can change the visibility of the block, for example to make it visible only to logged in users.

Drupal Tutorial Set Block Visibility

Finally, from the “Region” item, we can change the position of the block.

Drupal Edit Block Region Settings

Add a new block

We have seen how to change the settings of an existing block. Now let’s see how to add a new block.

Go to Manage > Structure > Block Layout.

  1. Let’s scroll to the region that interests us, for example “Footer Top” and click on the Place block button:
  2. Then we choose from the list the type of block we want to add, for example “Online Users”.

Here I show you the steps just described:

Drupal Tutorial Add A Block In A Section

A modal window will open from which we can directly configure the block. The configuration settings depend on the type of block. In our case we want to make it visible only to authenticated users, so let’s change the visibility options and then click on “Save block”.

Drupal Configure Block Options

This will look like the block we created:

Drupal Whos Online Block

Other resources

In this guide to Drupal we have tried to touch on the most important aspects for those approaching to use the CMS for the first time. From content management to customizing the look and feel of your site.

Now it’s your turn to continue exploring all the features Drupal has to offer.

If you have difficulty performing any operation, remember that you can consult the user guide available on Drupal.org. This resource will allow you to learn more advanced operations including how to create a multilingual site or manage users on the site.

Conclusion

We’ve seen what it takes to start building a site with Drupal. We started from the general settings and how to change the language to then get to the heart of the Drupal guide and see how to manage the contents.

As you have seen, creating pages and menus with Drupal is quite simple. This CMS is also an excellent tool for creating a blog, which is why in the guide we focused on how to create articles, manage the taxonomy and create a blog page in which to show recent articles.

Like any CMS Drupal can be extended thanks to modules and its appearance can be customized thanks to the use of themes and their customization.

Now you have everything you need to get started with Drupal and create a website from scratch.

What is your experience with this CMS? What do you think are the strengths compared to other open-source platforms? Let us know in the comments.


Try one of our hosting plans for free and without obligation for 14 days. No payment information required!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *