Basic Site Settings & Creating a New Front Page

This basic site settings page is something that gets populated on install and you won't really need to visit it much. One of the main reasons you will probably want to visit it is to change the default front page.

Image
how to set the homepage of a drupal 9 website

Other settings you may change on this page are listed below. If you can't find the setting you need then you can also check the theme settings page which can be found by using the appearance link in the admin toolbar and then using the settings link associated with the theme.

The Basic site setting page can be found in the configuration section.
Manage > Configuration > Basic site settings
 /admin/config/system/site-information

Below are the settings found on this page.

Site Details

  • Site name
  • Slogan
  • Email Address

Site name and slogan used in the theme usually but if you design a custom theme you may in fact leave them out. The email address is used for automated emails from the system and should be the same as the domain name.

Front page

  • Default front page
    Optionally, specify a relative URL to display as the front page. Leave blank to display the default front page.

Error Pages

  • Default 403 (access denied) page
  • Default 404 (not found) page

These can be left blank and a generic page will be served.

All in all the settings are self-explanatory but let's go over changing the front page and then look at some quick ways you can modify the front page of your Drupal site.

Change the Frontpage

To change the front page you can add any URL from your site. You need to add a path that starts with a slash. Since this will be your homepage and the path will be stripped from the URL you can either use a node URL such as /node/3 or a pretty URL, such as /my-custom-front-page.

Pretty URLs and Drupal
To generate pretty URLs automatically you need to have all the path modules installed and set up. To find more about setting up paths and redirects please read Drupal SEO modules.

Okay, so now you know how to change the front page let's look at a few quick ways to create a new front page.

Building a new Frontpage

There are many ways to create a new front page but I will first look at the default front page.

The default front page

The default front page is in fact built using views and the front page view feeds any content that is promoted to the front page in the content's individual setting. You can find out more about node settings on creating your first article page if you haven't already read it.

Change the default front page

One of the quickest ways to change this is to add a header to the view and/or add a block to the content top region.

Add a header to the view

By adding a header to the view you can write an introduction to your site and this will be displayed above the list of articles or blogs that feed onto your homepage. To add a header to the view follow these steps.

  1. Hover over the view section on the homepage and click on the small pencil icon.
  2. Click on Edit view
  3. Click on Add in the Header section
  4. Check Text area Global.
  5. Apply all displays. You could override the display using the For select menu at the top and select This page (override)
     
  6. Check Display even if view has no result.
  7. Add your text to the Content text area.
    You can change the text format from Basic HTML to Full HTML if you like.
    You can't load images here but you can use images that are hosted on your site.
     
  8. Click Apply (all displays) or (this display)
  9. Save the view.

Even though this is a nice quick solution it is limited in the fact you need to work with HTML, so in the end, you will probably want to find a more permanent solution.

To access the Frontpage view you can also use the views admin page at
Manage > Structure > Views
/admin/structure/views

Add a block to the content top region

I have written about blocks and regions but to do this you can visit the block layout page and click place block and then add custom block, add an image and you are done.
For more on blocks layouts and custom blocks the below resources.

As nice as these quick solutions are in the end you will probably want to create a better homepage.

Create a New Frontpage

If you want to take things further then you will probably want to create an entirely new front page and one of the best ways to do that is to use a node and use some advanced built-in layout techniques such as adding fields and managing the display of the fields. You can even use layout builder to easily layout pages without any need to code. You will need to have the theme or CSS written to style it nicely but if you keep things simple and keep some basic design rules such as spacing and consistency you can get something quite complex put together without needing to have custom CSS written.

Even though I say complex please don't overdo it as having one message and one call to action will always be the best solution above the fold but adding supporting information lower on the page is a good idea.

I have written more about adding fields and configuring them on the create a field page and you can get more information about creating a new content type on this page.

Check back shortly for more ideas and no-code solutions using built-in modules and also well-supported contributed modules.

Once you have a new page ready to use as a front page you can add the URL to the Front page field on the basic site settings page.

Conclusion

In this article, we have looked at the basic site setting and then looked at a few ways to use views and blocks to modify the default homepage. We then discussed how we can use a node and more advanced layout and display tools that Drupal provides. Hope you enjoyed it and if you want more tips on front-end development and design including using technologies such a Drupal and Vue.js be sure to sign up for my newsletter.

Tags