Drupal 8 installation and configuration:
an example site


General site layout

When designing a web site, the first thing to do is to write down a general layout and make some schemes of the entire web site. Having, from the beginning, a clear idea of what should be done is essential.
In this example we will show, step by step, the configuration of a simple web site: it's a kind of catalog, with items organized in categories.

Each item will have a page, with some description and images; we will have also a page for each category, with a short summary of the items in the category and links to their pages.We will prepare also some pages with general informations, a general contact form to obtain informations, and menus, with some entries.

The layout will be simple: a main region at top, with the site name; an horizontal menu; a central region to display contents; a simple footer with general informations.
A side bar with a special contact form will be present only in pages for single items.
In the front page three blocks are pointing to the main sections, for the three main categories of items.

As a reference we will use the layout of the site shown in the following images.

front page category page item page
We will define three different roles for site users: a "registered user" role, allowed to insert data, an "editor", controlling all the material, and a "site manager" for site maintenance, with all the privileges. Site visitors are "anonymous users", and can see all the contents, without being authenticated.

Themes

The first thing we do is to choose a theme. The theme selection page is in the image below; there are few themes distributed along with the Drupal core, but hundreds can be downloaded from the Drupal site . The theme defines the regions of the page and all the appearance of the site. Some themes are configurable: often you can choose colors, a logo image, an icon, to be shown in the address bar of the browser.
Building or modifying an existing theme is possible, but is bit complex task; some knowledge if CSS and twig templates is needed: we will only see how to add an user defined CSS class to the theme.
In the theme page you have to click the "update" tab to search for module updates.

Drupal install: site config.

In this example we will use the Danland Drupal theme. It isn't actively maintained (in 2017), has few users, but it is simple, easy to modify and has a simple slideshow.
Many slideshow where available for Drupal 7, but most doesn't work in Drupal 8; the slideshow in Danland is a simple javascript, it can't be configured by the web interface, but works.

To use a theme you have to download its files, eventually in the form of a compressed archive, extract the files from the archive and put them in the "themes" directory of Drupal. You can also use the web interface to copy and extract the theme files from an archive. Once you have done the theme appears in the list of available themes, to activate a theme there is the option: "Set as default".

Drupal theme install
The theme page has also a "Settings" tab for themes; each theme has its own settings, in Danland you can customize only few features, as choosing a "logo image" and an "icon image"; more complex themes expose more features to the user.

Drupal theme install


Modules

The menu for modules in shown in the figure below. There is a log list available modules: the version 8 of Drupal has a very modular structure. This structure is an advantage: you can enable only what you need, but some work is needed to browse the list.

Most modules are activated by default; here we activate also: "statistics", "responsive image", and "telephone", to have a field specific for phone numbers.
Many auxiliary modules can be downloaded from the Drupal site; we will use the auxiliary modules: contact block, token, metatag and taxonomy menu, for an easier management of categories. To add a module you have to put it in the "modules" directory; this can be done using the web interface ( it is similar to adding themes). Installed modules can be activated through the "extend" web page.
In this page you have also to verify if there are updates for modules (the "update" tab).

Drupal install: site config.