Droptica: How to Create a Services Page in Droopler

Service page in Droopler

Together with the contact page, the services page is one of the key parts of a website. It’s also one of the basic elements of an effective business website. Presenting the scope of services is usually the main purpose of its existence. We’ll show you step by step how to create a services page in Droopler – a Drupal distribution.

Pages created using ready-made components

Droopler is a website builder based on predefined components. Thanks to a set of ready-made parts, it’s good for building company websites for organisations of all sizes. We can easily create with it a home page and each subpage. Depending on the needs and preferences, we can use photo and text components, a gallery, a contact form, emphasise some significant numbers or direct the users to other subpages with more detailed information, such as the offered services.

Building a services page from scratch

We’ll start building a services page by creating a new subpage. To do this, after logging in, select Add content from the Content menu and then Content page.

Creating a services page from scratch in Droopler, a Drupal distribution

In the displayed view, we enter the title of the page. It’ll be Services in our case. We also add “Teaser Image” and “Teaser text”. In the options on the right, we select Provide a menu link, which will make the link to the new subpage appear in the top menu. We also enter the text that should appear as a link in the menu. It’ll also be Services in our case. After filling in these fields, we deselect the Published checkbox so that our subpage isn’t visible to visitors for this moment. We’ll only publish it when it’s finished.

Adding a title, teaser image, and teaser text for a new website in Droopler

Finally, we click Save and see this:

A view after creating a new services page in Droopler

 

Sidebar Image

Now we can start adding components. To access the library of available items, we click the “+” in a circle button. We’ll see a menu with the available options. The first item we choose will be Sidebar Image.

The library of components available in Droopler

 

We select this paragraph and start filling in the fields. First, we enter the header (this will be the title of our subpage) and choose its type – H1.

Filling in the fields of the new paragraph Sidebar Image in Droopler

 

We add a photo and enter the text describing the subpage.

Adding a photo to a new services pageAdding a text describing a new services page

 

In the options found in the right tab, we choose which side the picture will be on. We select Right and click Save. The first component (section) of our services page is ready!

In the paragraph settings, we select where our image should be displayed on our services pageThe look of the ready Sidebar Image component

 

The next section will consist of links to individual services. To add this section, we’ll start by selecting the Group of text blocks component.

Selecting the Group of text blocks component in Droopler

 

As in the case of the previous component, we enter the title and select the header type (this time it’ll be H2).

Filing in the title and selecting the header type for the Group of text blocks

 

Below, we also enter the text that describes the given section:

The text describing a particular section of the Group of text blocks component in Droopler

 

The next step is adding the 4 tiles which are the links to individual subcategories of the subpage. In order to create them, we select the second Items tab and click Add single block text.

Adding the tiles which will serve as the links to the specific subcategories of the page

 

We enter the title of the tile and select the photo which will be its background.

Filing in the title of a tile which will be in the Group of text blocks paragraphChoosing a background for the tile from the Group of text blocks paragraph in Droopler

 

In the Call To Action subsection we enter the subpage which the tile should link to (in the format “/” plus “subpage name”, e.g. /boats), as well as the link’s text.

Filing in the URL address of a subpage to which a new tile has to link to, and a text which will be displayed on a link

 

We prepare the other 3 tiles in a similar way. When it’s ready, we click Save and we see this:

The ready tiles in the Group of text blocks component in Droopler

 

Now it’s time to embellish this section. Therefore we go to the paragraph’s settings by clicking on the pencil button:

After clicking on the pencil button, we'll go to the Edit paragraph page

 

In the settings, we change a few fields:

Embellishing the Group of text blocks component

 

In the options for each of the tiles, we select:

Selecting the options for each of the tiles

 

We click Save and we have a ready section with subcategories for the services we offer.

The ready section with subcategories of an offer on a website built in Droopler

 

Group of counters

We move on to the next section of the page, that is a counter with interesting figures regarding the company. We’ll use the Group of counters component.

Adding the Group of counters paragraph to the services page

 

Similarly to the previous sections, we choose the title, header type and background photo.

Setting the title, header type and the background photo for the Group of counters paragraph

 

In the Items tab, we add individual values by clicking Add single counter and entering a digit and a text. We create 4 such elements and click Save.

Adding individual values to the Group of counters component in Droopler

 

The finished section should look like this:

The ready section Group of counters on the services page

 

Text page

The last element that we’ll add to the services page will be a call to action. We add this simple section using the Text page component.

Adding the Text page component to the website in Droopler

 

As in the case of the previous steps, we select the header, “long text” and define the button.

Defining the details of the button that will be in the Text page paragraph

 

A ready services page in Droopler

The services page is finished. We only have to select Published in the selection field in the main options of the subpage. Now everything is ready and available online for the visitors of our website.

Publishing of a new services page

The whole Services subpage should look like this:

The ready services page in Droopler

 

You can see the created subpage in the Droopler demo. We build other subpages in a similar way. We encourage you to experiment with the options and different components. The multitude of available possibilities allows for personalising the page in a simple and quick way, without the need for coding.


Go to Source
Author: