Drupal is the most structured CMS (Content Management System). Wordpress is very popular and easy, Joomla has some usefull tools, but Drupal is the best. The new Drupal 8 release will become the standard for CMS.

We provide tutorials (drupal8.support) and test hostings to make the exercises

This site contains the 15 exercises to produce a professional webshop from scratch. The exercises and hosting are free. For support (with movies) you need to be member.

Step 1

  • keywords: hosting, domainname, responsive, adaptive, fluid, theme, SEO,...
  • Why Drupal?
  • install Drupal 8
  • maintain the site (control panel and manually)
  • Drupal 8 structure
  • blocks, menus, themes
  • site settings
  • account settings
  • install Admin toolbar
  • confuguration of the Bartik theme
  • content types and fields
  • fields, fields forms, field display settings
  • body-, image- and taxonomy fields and settings
  • configuration CKEditor
  • home page content
  • Pathauto installation and purpose
  • Taxonomy vocabulary and items
  • Paintings content type and fields
  • Default and teaser mode
  • Adding content to the paintings content type
  • Making menu items
  • image styles
  • focal point module (crop module)
  • Making of a simple view with a menulink

Step 2

  • Drupal 8 Zymphonies theme
  • theme settings (social media, contact...)
  • changing banner picture with FTP
  • views slide show
  • third party installation
  • slideshow with focal point
  • taxonomy menu
  • blocks on certain pages
  • @font-your-face
  • Asset injector
  • CSS classes
  • use of responsive tables filter module
  • views table with responsive colums
  • adding CSS on view fields
  • use of min-width CSS (to correct the Chrome display)

Step 3

In this exercise we work with the content type of 'Painters'

  • install the modules field formatter class, image widget crop, chosen (third party) and colorbox (third party)
  • make the content type with the fields
    • body
    • image (multiple)
    • country (list of all countries)
    • date of birth with prefix
    • date of death with prefix
  • add content using the image widget crop for the images
  • use field formatter class to make the text floating
  • make a view of the painters using the unformatted list
  • make it floating
  • set the colorbox on the pictures
  • filter on title, country (use chosen module) and an extended filter on birthyear
  • set the filters in a block
  • set a table in the body (Picasso) and make it responsible with the already installed Responsive tables filter.

Step 4

In this session we are focussing on the 'Museums' content type. Only one node is filled with content: Louvre

We need: Juicebox, IMCE,Video embed, field collection, field group, image field zoom.

The content type has

  • body
  • images (display with Juicebox)
  • closing days (date)
  • opening hours (field collection)
  • video (youtube)
  • link
  • documentation (file upload in pdf)
  • ancient art (image with image field zoom)
  • location (gmap display)

All of these fields are grouped into tabs with the field group module

The document link and the video are also implemented in the body for didactical reasons. We use 2 modules for that.

Step 5

To install above the modules already installed: Draggable views, Views Flipped Table, Views field formatter, Views Split, Fotorama Gallery and PrevNext

Add the nodes to the museums content type that correspond with the paintings. Title and picture are needed, the rest is optional.

Make a view in table display like this using relations for the images of the painter and museum.


Sort with a draggable view.

Make the same view but now flipped (Flipped tables are not responsive). Put some CSS on it to get the pictures displayed properly.


Create a slideshow with the museums images. Paging with the thumbnails. Filter contextual on the node ID. Put some CSS on the thumbnails. Integrate into the content type as a field.


Make a display mode 'big teaser'. Set 2 fields in this mode. Use this big teaser in a view only for the first item. The rest is common teaser mode. Use the summary for showing other content.


Put the fotorama Gallery on the image field. Allow navigating with a previous, next link for the nodes.

Step 6

Modules extra to install: Display suite, Bootstrap layouts.

Set the 'welcome' page as homepage.

Make a view with the estimated value of the paintings with on top the sum of all works. Use an attachement. Add this view to the view of the paintings;


With Display  Suite you change the look of the display of the paintings content type.

At the top you see something like that.. Add CSS to have a similar result.


At the bottom a view with the other paintings is shown. You can not see the thumbnail of the node you are looking at of course...


Add a comment field to the content type. Allow comments on the comment. Don't give access to anonymous visitors.


Step 7

Installation of the image effects, Background images formatter, Responsive theme preview, EVA module,  the Weborm, mail system and Honeypot module

Set a background to the painter nodes. Select their most famous painting as background. Use image effects to set tranparency to the picture.


Set a background to the painters view also with a random image.

painters view

Set no background on small devices. Use the Responsive theme preview module to check.

Use the built in glossary view an set some CSS on it:


Make an EVA field connecting the paintings to the painters. What is the difference between EVA and the viewfield module? Try out.

eva field


There are 3 ways of collecting information.

  1. Using the contact form.
  2. Setting a content type accessible to the public or verified accounts.
  3. Using a webform

We will do all of them in this step.

1. We will extend the contact form with some other fields.

2. We will set open the paintings contact form for verified users and test it.

3. We will set up a quiz about pintings and painters... See the tutorial on drupal8.support. (http://drupal8.support/en/modules/webform)

  • The webform module is a huge one.. More than 20 video's will teach you the possibilities...
  • The webform will send mails with the post content and we will make export possible with csv. Look for the Quiz link.
  • Conditions, handlers, settings...
  • Honeypot wil protect our forms against spam bots.
  • Mail system will mail to the subscribers of the form.

Step 8

This step is about the looks..

The theme has many blocks on the front page, in order to make a one page site. We will do both. The home page shall be turned into a onepage theme. The rest wil stay as it is.

Use the coffee module to turn to the CSS pages.

Explore the possibilities first and reproduce them.

We have blur effects:


Hover effects (painter shows up on hovering)


Transition effects


Rotating effects.


Step 9

You need to install: Paragraphs, Workbench, Workbench Moderation en Workbench Email

This step deals with Paragraphes, Workbenches , translation and permissions.

First we make a some paragraph types , so content can be created in a dynamic way.


We implement this in a content type 'recommendations'. We suppose that team members can reccomend us some content to be put on the site.


After setting the display with DS it could look like this.


We had the choise of these fields.. do you recognize them?


One of the editors proposed a contribution of Rene Margritte.


We set up the workbench for this content type. He/She made it first in a draft, and promoted it to 'needs review'.

We made a mail template that alerts the administrator when content hes to be reviewed.


Now we shall make it translatable.. Make all the settings. Look close to these 2 pictures. Find the differences...


The translation..


The view that shows these reccomendations is also translated.

As well as the link..


We make a role 'translator' in order to translate the museum content.. Do the settings.


Finally... Adapt the content view so that you can see in which language the content is made.


Step 10

A lot to do in this step... first contact with composer... first install calendar, views templates, geofield location, simplenews, simplenews scheduler, swift mailer, address, entity print (PDF!)...

We we let team members to add interesting expositions.

We shall use the address module (composer needed)  to gather the information of the informer. Then we shall use a starting date of the exposition, in order to make a calendar and at last we shall make a newsletter to inform our subscribers that there is an interesting exposition. the location of the exposition will be shown with the geolocate module.

The address module has some 200 countries listed... Look at the Brasilian provinces...


Install putty on your computer. Log in

Go to your root.  Copy paste this code

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '55d6ead61b29c7bdee5cccfb50076874187bd9f21f65d8991d46ec5cc90518f447387fb9f76ebae1fbbacf329e583e30') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

From now on every command needs to start with php composer.phar. 

config repositories.drupal composer https://packages.drupal.org/8


require "drupal/address ~1.0"

Make the content type in order to achieve this..


A part of the calendar... Use some CSS to set it to your wishes..

A view of the geolocation map. It has more possibillities than the simplemap module. You can make views with it too... Do it.


For the module you need a Google Maps API key..


Our newsletter will be sent in HTML, including pictures and CSS using the Swiftmailer module. (Composer needed)

require swiftmailer/swiftmailer


We will create different types of newsletters.


The HTML will be provided with swiftmailer.


Visitors can subscribe to one ore more newsletters.

Newsletters can be sceduled..


Step 11

This step deals with Panels, Masonry, patches and SEO

Needed: Panels, Page Manager, Panilizer, Masonry, Masonry Views, Metatag, XML SiteMap

We will turn the Museum content type into a Panels display. We will show the Page Manager and the Panilizer method to do so.

The Panilizer method is easy...

We choose a layout.


Set the regions...


Set the configuration of the display. Here we use a colorbox display with only one image visible.

Masonry is a css/javascript module that fits in all the images in a grid. It is a heavy third party module. Use te new available dependencies


When changing the screen width the pictures rearrange automatically and with a javascript transition. Cool...


Unfortunally some themes (like ours) do not show the masonry correctly. In the preview no problem (Seven), but in several themes it fails. This is the ideal moment for learning how to patch.

Look at the issue: https://www.drupal.org/node/2716399

Delete all - and add all +. There are 2 files to be changed. Use the patch in the link above.


Now we are setting the SEO. Search engine optimalization.

Teh meta tag module sets descriptions an tags for the search engines. You add this on every page you want.


A second module we shall use is sitemap XML. It makes an index of your content like you wish. You can even upload them to Bing and Google.


Step 12

Bootstrap themes: Tweme and Breeze

Bootstrap Bricks and Bootstrap Paragraphs

Step 13

webshop part 1: products and variations

Needed: commerce module and dependencies (do it  with composer), views field view

  • Product types
  • Product variations
  • Example payment method
  • Display of product type and variations
  • Views display (2 kinds according variations)
  • Show the available variations
  • CSS on the views
  • Cart




Step 14 

Study of automatically populated content: https://drupal8.support/en/contribution/automatically-populate-content


Step 15 Rules, Feeds, Features, Node export, backups, updates, site migration, making of distributions