Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jul 08 2021
Jul 08

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.

Apr 02 2020
Apr 02

Corporate websites are often large and packed with many different functionalities. This makes building a website very time-consuming and, consequently, expensive. At Droptica, we have developed a way to build a corporate website on Drupal faster and cheaper. From this article, you will learn how we do it.

Your company's Drupal-based website does not have to be expensive

Drupal-based corporate websites are considered costly solutions. Developing high-quality Drupal websites from scratch using Drupal is labour-intensive, and the first effects of such a process are visible only after a few weeks of development works. Until now, only the largest companies could afford such an expense. 

That is why we decided to introduce ready-made Drupal-based implementation packages to our offer. An implementation package is a set of services and products selected so that they guarantee the client can build a complete high-quality website in a few weeks instead of carrying out a process lasting several months in the traditional model of building a website from scratch.

Each of our packages is based on our own Drupal distribution. We call it Droopler. Just moments after its installation, Droopler gives you powerful options and reduces the time it takes to build a website. By choosing our implementation package, you start with an extensive structure of pages, predefined visual elements and multifunctional menus. All of this is based on a professional technological structure, optimised in terms of SEO and speed of operation. 

Droopler 2.0.

Droopler's strength lies with the wealth of available (at the very start) elements 

Imagine that you can build your website just like you build toys from Lego bricks. You have ready-made parts and you just put them together. You do not have to be an HTML, CSS or PHP specialist. That is how Droopler works. Lego bricks are paragraphs. We have created a dozen or so. In addition, each one of them has several uses. So, you have over 100 different blocks to build every single subpage. These blocks fit together in any configuration and look nice whether you see them on a laptop or a phone.

For example, you can add a paragraph with a photo and a title, a paragraph with content, a paragraph with a gallery, and finally – a paragraph with a contact form. The process of creating such a subpage is very fast and intuitive. After selecting a given element, you just need to add the appropriate content, graphics or photos. 

If after some time or during the creation of the subpage you find that the order of the paragraphs used is incorrect, you can easily change their layout. Such a change requires only a few seconds of work. Droopler's capabilities mean that you can create different variants of every subpage. 

Marketers praise the ability of editing content in Droopler. The system saves them a lot of time. They can focus on effective management of corporate content, and not on solving problems with HTML or CSS.

What kind of a website will be created based on our package?

Droopler's capabilities are best seen live. The system's demo is available at https://demo.droopler.com/

This website shows that Droopler is a powerful tool for building large Drupal websites. The extensive main menu, product subpage, search engine and blog are just some of the basic functions available immediately. 

The demo shows a website of a fictitious company that needs a wide range of functionalities and modules on its website. The broad offer, news section, many types of content blocks, or extensive contact subpage, work perfectly on smartphone and laptop screens. 

Advanced features mean that even a company listed on the stock exchange will find here all the elements necessary to create its perfect website.

Droopler Demo

An implementation package is a good basis for a website's growth

Our ready-made implementation packages can be treated as non-expensive website starters, which look good right after the installation. Many small companies will be satisfied with the modern look that Droopler provides from the very first moments of operation – without changing anything in the code.

For medium- and large-sized companies, our Drupal distribution may constitute a great foundation for building unusual and non-standard solutions. 

Saving the costs at the initial stage of creating a website will be attractive for any kind of a business operation. Especially due to the fact that the money saved can be used for non-standard functionalities that are key and distinguishing for a given company.

It is this well-thought-of versatility that makes each of our packages a highest-quality open-source product. 

Droopler is flexible in terms of extension

We thought about the ability to modify Droopler from the very beginning of its development. The structure and nature of our distribution allow you to easily create non-standard and bespoke solutions. 

The developer does not create the code from scratch, but using ready-made elements, he can freely remodel, modify and adapt them to the client's needs. Such an approach saves time and – as a result – money while maintaining high quality.

[embedded content]

Drupal will make your company website the best

When you decide to build a company, website based on our experience with Drupal, you can be sure that we offer a product of the highest quality. The solutions we provide as part of our implementation packages are the work of the best world-class developers specialising in Drupal. 

Our experience gained over the years while working with large global companies is responsible for the fact that today we can provide an open-source product of similar quality, available to a wide group of clients. 

You can find the full offer of our implementation packages here.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web