User Manual

Drupal Page Builder

Internet agency iqual GmbH

Noemi Schütte, 11.01.2018

© Internet agency iqual GmbH | www.iqual.ch

 User Manual – Drupal Page Builder

Table of contents

1. About this Manual ...................................................................... 2

2. Introduction ................................................................................ 3

3. Overview...................................................................................... 4

4. Page Tree ..................................................................................... 5

5. New Page and Site Settings ....................................................... 6

6. Page Builder ................................................................................ 8

6.1. Site Editor ....................................................................................................... 9
6.2. Creating and Editing ................................................................................... 10
6.2.1. Structure Component ............................................................................. 11
6.2.2. Text Component ...................................................................................... 13
6.2.3. Image Component ................................................................................... 14

Date Author Version Change

11.01.2018 Noemi Schütte 1.0 Initial draft

Internetagentur iqual GmbH | www.iqual.ch

 User Manual – Drupal Page Builder

1. About this Manual

This user manual helps to understand and work with the content-man-
agement framework Drupal extended with a page builder developed by
iqual. It describes the interface, functions and work flows for creating re-
sponsive websites with our customized Drupal page builder.

The page builder enables you to easily edit your page in WYSIWYG (what
you see is what you get) mode. That means, the content creator already
sees the content the way it will be displayed to the website visitor – no de-
scriptive codes. You can build your page with defined elements from your
own pattern library. These individual components are extendable and
could range from number of columns, corporate colors and certain but-
tons to specific image galleries. Your website will be based on the popular
Bootstrap’s grid system and thus mobile friendly and consistent.

Generally, Drupal is a great choice for robust or large websites that re-
quire great functionality and flexibility. It’s often said, that Drupal is rather
challenging to use. That’s why iqual developed a Drupal page builder, that
makes it now very easy and intuitive to use for everyone. With our page
builder, you are able to create your corporate website without needing IT
experts.

Drupal is open source and worldwide very popular. The Drupal commu-
nity is composed of more than 1.3 million members, with over 100,000 us-
ers actively developing plugins, themes or other features. It’s configura-
tion based approach enables easy extension and change of functionality.

© Internet agency iqual GmbH 2

 User Manual – Drupal Page Builder

2. Introduction
The page builder aims at facilitating building websites using a drag and
drop interface for creating pages. Pages can be freely created, arranged
and edited with a multitude of elements.

Possibilities of access and action that will be explained in the following

chapters:

▪ Page creation
▪ Page settings
▪ Page arrangement
▪ Layout definition
▪ Content creation
▪ Content editing
▪ Content arrangement
▪ Image database management

© Internet agency iqual GmbH 3

 User Manual – Drupal Page Builder

3. Overview

1 2

1. Click on the menu in the bottom left corner to show and hide the
page tree.
2. Click on the pencil in the bottom right corner to switch to edit
mode.

3 5

3. Click on “Verwalten” to expand the submenu below.

4. Click on “Website anzeigen” to get to the homepage and see the
preview of the whole website.
5. Click on the person icon to edit your account settings or to log
out.

© Internet agency iqual GmbH 4

 User Manual – Drupal Page Builder

4. Page Tree
The page tree shows the structure of the website and gives an overview of
all pages and subpages. The green, orange and red rectangles on the left
indicate, whether the page is live, edited or not live yet.

▪ Green rectangle: The live version is the same as the edit version
of the page. This means, all edits have been published.
▪ Orange rectangle: The edit version is different than the live ver-
sion of the page. This means, not all edits have been published yet.
▪ Red rectangle: There is no live version of this page. This means,
the page hasn’t been published yet.

4
3

1. Click on the small black plus symbols on the left side of the tree to
show the subpages.
2. Click on the big plus symbol in the upper right corner to create a
new page on the main level.
3. Click on the menu of a page on the right side of the tree to show
page options like “New page” and “Settings”.
4. Click on the page name and hold to drag and drop the page to
another location in the structure.

© Internet agency iqual GmbH 5

 User Manual – Drupal Page Builder

5. New Page and Site Settings

After clicking on the menu of a page on the right side of the tree the fol-
lowing options are displayed.

1
2
3
4
5
6

1. Click on “New page” to create a new subpage.

2. Click on “Edit page” to edit the content of the page.
3. Click on “Settings” to alter the page settings.
4. Click on “Publish” to publish the page.
5. Click on “Unpublish” to unpublish the page.
6. Click on “Delete” to delete the page.

© Internet agency iqual GmbH 6

 User Manual – Drupal Page Builder

After clicking “New page” in the menu of a page the following site opens.

7
8
9
10

11
12

13

14

7. Give the new page a link name. This name will be displayed in the
page tree and navigations.
8. Give the new page a title. This title tag will be displayed in the
Google result page and in the browser tab.
9. Choose a template for the new page. The fundamental design of
the page will be based on this template.
10. Open the SEO-Plugin to set a focus keyword, title, URL slug, and
meta description for the new page. The snippet – how the page
looks in Google results – can be previewed right away.
11. Choose a page to copy its layout. Components like columns, text
elements and image container appear on the new page, but they
will all be empty.
12. Select the language in which your new page is or will be written in.
13. Check the box to copy the content of the chosen page too. The
components will all be filled; the new page will look the same as
the chosen page.
14. You can either:
• Save and create a first draft of the new page.
• Save and immediately publish the new page. Therefore,
click on the little arrow to open this alternative option.
• Preview the new page.

After clicking on “Settings” in the option list of the menu (no. 3) in the
page tree these settings described above can be altered.

© Internet agency iqual GmbH 7

 User Manual – Drupal Page Builder

6. Page Builder
The Drupal page builder makes it easy to create and edit responsive con-
tent in WYSIWYG mode. The structure is based on the popular open-
source framework Bootstrap, that is based on a 12-column layout. There-
fore, consistency and support by developers and designers are ensured.

To create or edit the content of a page, either:

1. Click on the pencil in the bottom right corner to switch to edit

mode.
2. Or click on a menu of a page in the page tree and choose the op-
tion “Edit page” to switch to edit mode on this page.

4 3

3. Click on the plus in the bottom right corner to show and hide the
site editor which contains column layouts and content elements
to insert.
4. Click on the eye on the bottom to switch back to preview mode.

© Internet agency iqual GmbH 8

 User Manual – Drupal Page Builder

6.1. Site Editor

The site editor contains previously defined structure elements like column
layouts and CI/CD content elements like text boxes, images or buttons.
Choose the components of your pattern library you need and insert them
into your page by drag and drop.

After clicking on the plus in the bottom right corner the site editor ap-
pears:

1. Structures: Choose a column layout and insert it into your page or

into a column by drag and drop. These are for structuring the con-
tent of the page.
2. Elements: Choose a content element and insert it into a column
by drag and drop. These are containers for the actual content.
3. Blocks: These components are predefined content blocks (e.g. a
form) which can be inserted into the page like content elements.
The blocks are configured in the backend of Drupal and made
available to the user through this section.

© Internet agency iqual GmbH 9

 User Manual – Drupal Page Builder

6.2. Creating and Editing

1 2 3

4 5 6

Edit structure elements like column layouts:

1. Click on the arrow cross to drag and drop the column(s), with all
the content inside it, to another location.
2. Click on the bin to delete the structure element and all the content
elements inside this component (columns).
3. Click on the gear wheel to open the layout settings (margins,
background, device) of this component.

Edit content elements like text or images:

4. Click on the arrow cross to drag and drop the content element to
another location.
5. Click on the bin to delete the element.
6. Click on the pencil to edit the content of the container element.

© Internet agency iqual GmbH 10

 User Manual – Drupal Page Builder

6.2.1. Structure Component

After inserting a structure element and clicking on the gear wheel the lay-
out settings appear:

2 3

1. Set different layouts for different devices. If there are no explicit

settings for smaller devices, they inherit the settings of the bigger
device.
2. Make the columns fullwidth or disable the gutter between the
columns if needed. Set specific heights, widths and margins in
the CSS measurement unit you prefer.
Write i.e. “25px” (screen pixels), “90%” (percentage of enclosing ele-
ment) or “80vh” (percentage of viewport height). For more
information about margins and units consult the next paragraph.
3. Set a background color and/or image.
4. Save or cancel your edits.

© Internet agency iqual GmbH 11

 User Manual – Drupal Page Builder

What exactly is margin, border, padding, width and height?

Source: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

What CSS measurement units may be used and how?

All common CSS units may be used. The following table describes the
most important ones and gives examples of how to write them into the
fields to set margins, border or padding.

Unit Description Example

% Percentage relative to an enclosing element 90%

Height of a font in em spaces 10em

em
If the font is 12pt, 2em is 24pt.

px Screen pixels. 25px

vh 1% of viewport height 80vh

vw 1% of viewport width 50vw

vmin 1vw or 1vh, whichever is smaller 50vmin

Source: https://www.tutorialspoint.com/css/css_measurement_units.htm

© Internet agency iqual GmbH 12

 User Manual – Drupal Page Builder

6.2.2. Text Component

After inserting a text element and clicking on the pencil the text editor
appears and the text can immediately be created, edited and formatted.

© Internet agency iqual GmbH 13

 User Manual – Drupal Page Builder

6.2.3. Image Component

After inserting an image element and clicking on the pencil the image set-
tings appear.

2 2

© Internet agency iqual GmbH 14

 User Manual – Drupal Page Builder

7
6
8

1. Click “Select Image”.

2. Click “media auswählen” if there is no image set yet. If there al-
ready is an image set, click “Entfernen” to delete it and choose a
new one.
3. Choose the image from your database or upload a new one.
4. Always scroll down and click “Select entities” before you save the
image selection.
5. Click “Save Image Selection” to set the image.
6. Now set the title and alternative text of the image.
7. Optionally link the image to a certain page.
8. Save your edits.

© Internet agency iqual GmbH 15