Drupal Tutorial for Beginners - Learn How to Build a Drupal Website (2021)


Mangesh Supe

by Mangesh Supe · Updated August 11 2021

Drupal Tutorial for Beginners - Learn How to Build a Drupal Website (2021)

Drupal is a free, open source, and powerful content management system for creating custom websites, blogs, portals, and more. This step-by-step guide will cover how to launch an online site using the latest Drupal programs.

You get all the must-have features to build a fully functional website quickly.

Drupal is highly customizable, scalable, and completely free. However, it's not as easy as creating a website with WordPress or a site builder. You need to have some basic knowledge of HTML and CSS to put Drupal to good use.

1. Register a domain name and choose a web host

2. Installing and setting up Drupal

3. Familiar with Drupal foundation

4. Change website theme

5. Configuration theme

6. Create a new home page

7. Create another page and add it to the menu

8. Activating and deactivating default extensions

9. Add contribution module

10. Familiarity with blocks

11. Manage existing blocks

12. Create custom blocks

  1. Register a domain name and choose a web host

If you already have a domain name and web hosting, please skip directly to the next step.

Before you can start building a Drupal site, you'll need a domain name and web hosting. If you don't have a clue about this, read our article on how to pick a domain name. In addition to a domain name, you will need web hosting services, and at this point, there are at least 4 main factors to consider.

  1. Uptime: Percentage of website uptime, we recommend you choose a product that exceeds 99.9% of the industry standard
  2. Page loading speed: you should choose a host that loads faster than the current average of 850ms
  3. Customer support: Sometimes you may need the help of a support team, so it's important to choose a hosting provider with high-quality, responsive customer support
  4. Price: The price of hosting services varies greatly, choose a brand that you can afford and are satisfied with the 3 factors mentioned above
  5. We recommend that you get your domain name and web hosting from BlueHost, the world's most popular web hosting company, and which also offers a free domain name for one year.
  6. View Details
  7. With BlueHost, you can quickly launch a Drupal site without having to spend time downloading, uploading and installing software. Of course, you can also use other web hosting providers (click here for more recommendations), just make sure they meet Drupal's system requirements.
  8. install and set up Drupal

First, open the official Drupal website and go to the download page to download the latest version of the zip file to your local computer:.

Drupal download page

Open the Bluehost login page, enter your account number, password, and then click the login button at.

BlueHost login page

In the BlueHost dashboard, click on the Advanced menu on the left, then click on the File Manager icon in the middle of the screen at.

Upload the previously downloaded Drupal installation package to the server at

The specific steps are as follows.

  1. Check if the current location is in the /public_html directory.
  2. Click the Upload button and on the upload page, select the installation package (.zip format) downloaded from Drupal.org.
  3. Return to File Manager and select the uploaded Drupal packages.
  4. Extracting the package by clicking on the Extract button.
  5. After unzipping, you will get a folder named drupal-version-number, double-click the folder icon to enter it, and then move all the files inside to the /public_html directory via the Move button at the top.
  6. Return to the BlueHost dashboard, click on the Advanced menu on the left, then click on the MySQL Databases icon in the middle of the screen to manage the database:.
  7. To create a MySQL database and user in a newly opened page.
  8. The specific steps are as follows.
  9. Create New Database: enter 3 to 8 characters to create a database, in the above example we entered drupal, then click on the Create Database button to complete the creation.
  10. Add New User: Enter 3 to 8 characters to create a database user, the above example we already have a user hhlodjmy_10besty, you do not have to create a new one.
  11. After creating the database and users, to assign database privileges to the users, you can do so in the Add User To Database area.
  12. Just click the Add button, then check all permissions on the next page and click the Make Changes button to make it effective. Returning to the BlueHost dashboard, you will be able to see the database correspondence with the user.
  13. Now, let's start launching the Drupal site by typing http://YOURDOMAIN.com/ into the address bar of your browser.
  14. Tip: If you register your domain with Bluehost, they will automatically create an SSL certificate for you, so it's okay to enter the following link.
  15. https://YOURDOMAIN.com/
  16. The first step is to select the language you want the site to be in, click the button to save and continue to.
  17. After that, you need to determine the so-called configuration file, which will determine whether certain site features are pre-configured or not. Again, make your choice and move on, for this tutorial we use the standard installation, or if you are more experienced, you can use a minimalist installation at
  18. In the next step, the Drupal installer will check that your server environment meets the conditions for operation, and any problems will be displayed as a warning:.
  19. Now, using the database information previously created via the BlueHost dashboard, enter the database name, username and password, save when finished and continue at
  20. If all your database settings are correct, you can see the Drupal installation process at this point.
  21. The last step is to set the basic information of the site.
  22. Site name: the name of your site, which can be changed at any time later, so don't waste too much time here.
  23. Email address of the site: the email address to which the site automatically sends notifications to users.
  24. Username: the username of the webmaster account.
  25. Password: choose a strong password to secure your account and do not forget to confirm it twice.
  26. Email address: the email address associated with the administrator, Drupal will automatically fill this in and you can change it as needed.
  27. Default country/region: the default country/region to which the site belongs.
  28. Default time zone: The time zone in which the date (and similar information) is displayed on the site.
  29. Finally, you need to determine if you want to automatically check for updates and be notified if there are any available updates. Once you are satisfied with all settings, click the Save button to complete the installation.
  30. Familiar with Drupal foundation

After completing the installation process, you will automatically be taken to the newly created Drupal site.

At the top of the screen, you will see menus pointing to all modules in the backend. For the sake of understanding, first a brief description of what each menu item contains.

  1. Content: Here you can create basic content such as articles and pages, as well as handle visitor comments and find the site's media library.
  2. Structure: managing all structural elements of the site, including blocks, forms, menus, views, categories, content types, display modes, etc..
  3. Appearance: contains theme settings and other options related to appearance.
  4. Extensions: installing and uninstalling Drupal extensions.
  5. Configuration: some options for setting up access to the site.
  6. People: contains configuration options for users, roles, and permission levels.
  7. Reports: logs, updates, errors, status, field lists, popular searches, and related reports for other information.
  8. Help: Provides useful information about basic site management, as well as installing any modules.
  9. In addition, under the Shortcuts menu item, you can add some frequently used administrative functions.
  10. Change the theme of the website

Your website has been successfully launched, but the visuals are a bit boring. To improve this, the first thing you need to do is to change the default theme that comes with your website. Click on the Appearance menu item at the top of the screen and you will see the list of installed themes:.

Unlike other content management systems, you can't find themes from the Drupal backend, for that you need to go to the official Drupal theme directory. Alternatively, at the top of the theme list page in the Drupal dashboard, you can find a link to the official theme directory (i.e. the other themes in the image above).

As of today, Drupal offers over 2,900 themes and allows you to filter by several options, so you can easily find the content you need:.

Drupal Theme Catalog

When choosing a theme, make sure it suits your skill level, allows you to create the design vision you want, and is mobile responsive. All themes in the official catalog have detail pages where you can read detailed information and see live demos.

The theme we used for testing -- Bootstrap

Once you find the right theme, you can download it to your local computer or right-click to copy the link to the address at

Next, go to the Appearance panel of the Drupal backend administration and click the Install New Theme button.

Solution for not finding the Install New Theme button

If you cannot find the Install New Theme button in the Appearance panel, go to the Extensions panel, check all the list items in the Kernel area, and then click the Install button at the bottom of the screen. Return to the Appearance panel again and you will see the Install New Theme button appear in the correct location.

You can either install it remotely via URL or upload the theme package locally at

Once you're done, open the Appearance control panel, find the theme you just uploaded, install and activate it, then return to the site frontend where you will see the new theme in use at

  1. Configure the theme

Most themes come with configuration options, which you can access by clicking on the Settings link next to them, or by using the Settings tab at the top and selecting the theme you want to edit:.

Both will take you to the same page:.

Here you can adjust all the configuration options provided by the theme, including changing the color scheme, enabling/disabling user avatars, uploading site logos, setting page backgrounds, setting filters, and more. When you're building a site with Drupal, be sure to double check here to take full advantage of the theme's advanced features.

  1. Create a new home page

Now your website looks better, but it doesn't seem to have any content. First, we need to create a home page so that visitors can see things at first glance. To do this, go to Content → Add Content → Basic Pages.

Here, you can create content using the basic editor:.

  1. At the top is the page title input box
  2. Next is a link to an editorial summary which, when clicked, provides a summary for the article or page
  3. Below this is the main content editing area, where you can enter body text and set formatting, for example, make text bold or italic, add/remove hyperlinks, define block references, create lists, insert images, and use the drop-down menus to adjust the formatting of subheadings
  4. When you switch to full HTML at the bottom, a number of other options are available, including tables, horizontal lines, and more
  5. If you have ever used a word processor or other content management system, the solution can be found quickly and the required content can be easily put together. Once all content has been edited, make sure to set a URL alias on the right side by simply entering text like /front-page:.
  6. After that, click the Save button at the bottom of the page and make sure the Published checkbox is checked.
  7. So far, everything is fine. In order to define the new page as the home page, we go to Configuration → System → Site Basic Configuration and in the text box for the default home page, enter the URL alias just defined for the new page at
  8. After completing and saving the configuration, the home page of your website will take on a new look:.
  9. Create another page and add it to the menu

Next, we're going to create an About Us page and add it as a menu item.

As in the previous steps, first create a basic page, add content, and set up a URL alias (e.g. /about). However, this time, before publishing, click on Menu Settings on the right hand side and then check the box to specify a menu link:.

  1. Menu Link Title: This is the text of the link that the user sees on the navigation menu
  2. Description: Optional description that appears when hovering over a menu link
  3. Parent item: If you already have other menu items, this will allow the creation of child items
  4. Weight: Determine the display order of menu items, the smaller the number, the more forward the position on the site
  5. Once you are satisfied with all the settings, check the Published checkbox at the bottom of the page and click the Save button, Drupal should automatically jump to the front of the site and you will see both the new page and the new menu item at the same time:.
  6. However, if you look closely, you will see a small problem: the menus are not in the correct order. Go to Structure → Menus in Backend Administration and click on the Edit menu button in the row where the main navigation is located, and you will see the following screen.
  7. Simply drag and drop the menu items into the desired order via the icons on the left, and click the Save button when you're done.
  8. Activate and deactivate default extensions

Now, you already know how to use Drupal, but beyond that, the system can do much more and can be extended for any purpose. For this purpose, you will most likely use extensions, which, as mentioned above, are small programs that add various features to a Drupal site, and you can find them in the extensions panel.

By default, not all extensions are installed and active. To change this setting, simply check the box in front of each extension and click the Install button at the bottom of the screen. Instead, when you no longer need some extensions, you can remove them under the Uninstall tab at.

  1. Add contribution module

In addition to the default extensions, Drupal developers offer many other modules, and the process of adding them to your site is similar to installing a theme. First, you need to find the required module in the official directory, identify an option and either download it to your local computer or copy the remote file link, then you can add it to your own site via Extensions → Install New Module.

If you are not sure which modules to install, you can refer to the following options.

  1. Administration Menu: With the default toolbar, you may waste a lot of time loading pages just to get an administration feature. To speed things up, this module provides you with a cool drop-down menu of the entire administration area.
  2. Token: This is a small portion of text placed through a placeholder system. As of now, much of the functionality of Token has been written into the Drupal kernel, but some modules (such as Pathauto) still require it.
  3. Chaos Tools Suite: enables you to create custom modules, forms, dialogs, insertable content types, etc..
  4. Pathauto: Manually creating URL aliases for each post can be cumbersome, Pathauto helps to alleviate this workload. You can assign custom substitution patterns and page paths to make URLs compliant with SEO (search engine optimization) and usability standards.
  5. Quick Tabs: Ever seen cool tabbed boxes on large websites? This module makes it easy to do a lot of things without having to write JavaScript.
  6. Familiarity with the block

Sometimes you may need to add sidebars with different features, and in Drupal this content appears as blocks. You can place them in different areas and adjust the appearance, shape, size, position, and on which pages they appear.

Depending on which themes, modules and other components you use, the blocks that can be accessed will vary, go to Structure → Block Layout at

Blocks are saved by theme, so at the top, you can see a list of installed themes, and below that, a list of regions where blocks can be added. If you are not sure, click on the demo block area button above the list of areas, this will display the site view with the location of each area highlighted as.

To add a block, simply click on the Place Block button in the list of areas, which will provide a list of available options at

When you click on the Place Block button next to the block, you can access the configuration options.

In this case, you can add headers (and determine whether or not to display them) and configure the visibility of the block, for example, you can restrict it to be displayed for certain content types, specific pages, and roles of active users. At the bottom, you can also change the display area (in case the wrong area was previously selected).

  1. Management of existing blocks

Of course, you can also change the blocks already displayed on the site by clicking on the Configure button in the Region list in the Structure → Block Layout panel to make changes to.

If instead you click the arrow icon, you can choose to disable or remove the block.

  1. Create custom blocks

If you want to display various information in different areas of your website, it would make sense to add custom blocks, which could be the company's business hours, or specific news you want visitors to see. Go to Structure → Block Layout → Custom Block Library (top tab).

Click the Add Custom Block button to go to the next page.

Enter the block description and body content, and save it when you are done. This way, you can assign it to other areas of the site in the same way as other blocks.

Share