Feeds

Author

Upgrade Your Drupal Skills

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

See Advanced Courses NAH, I know Enough
Aug 20 2021
Aug 20

Creating a website is a very labour-consuming process. It requires quite a lot of time and resources. However, the people involved in building webpages and applications noticed that some elements repeat at times. In order not to reinvent the wheel, they began to isolate the repeating elements as components. In this text, I'll present how the components can be used based on the example of the Drupal distribution Droopler and the Bootstrap library.

What are components?

Components are elements that are reusable in different parts of the website. They allow for fairly quick creation and easy maintenance of pages and applications. The additional advantage of components is that if a change is required, you don't have to modify every element of the page, you only need to make the correction in one place. The change will automatically appear in other parts of the site that contain this component.

Bootstrap library

Bootstrap is a set of tools and components that simplify the creation of websites and applications. Using this library may speed up your site building as Bootstrap includes ready-made solutions for creating adaptive templates, forms, tables, navigations, etc.

This library mainly contains the CSS and JavaScript files that implement various ready-to-use components. After connecting the library, by using specific CSS classes you can quickly and easily modify the elements on a page.

There are several ways to use the Bootstrap library in Drupal. One of them is to use a base theme on which you can build your own. The most popular base themes are Bootstrap – which is based on the third version of the library, and Barrio – which was built on the basis of Bootstrap 4/5.

Bootstrap components in Droopler

Droopler is a Drupal distribution designed to quickly build webpages. It differs from other distributions in that it provides a ready-made website out of the box. You just need to add your own content to it.

Droopler is built on the basis of the Barrio theme, so it has all the benefits of Bootstrap. There are several ways to use the components of this library in Droopler. The first and easiest is adding the necessary elements to the content of the blocks.

When adding a new block, you should place the HTML code with the classes specified by the Bootstrap documentation in the section for entering the content. In order for the entered code to be recognised by Drupal as HTML, before entering the content you must activate the "Source" mode using the button in the field panel. After adding the HTML code, you need to turn off the given mode.

Adding the HTML code with the classes defined in the Bootstrap documentation

 

In this case, after saving the block, we get two buttons. The shape of the given buttons was determined using the "btn" class, while the background and text colours were assigned using the "btn-primary" and "btn-secondary" classes.

The buttons that are created after saving blocks with a new HTML code in Droopler

 

The second way to use Bootstrap components in Droopler is more difficult. It consists of adding your own theme based on the Droopler theme and modifying the source code. To do this, you need to use one of the starter kits found in the Droopler base theme directory, and then you can create your own solutions using the Bootstrap components.

I've shown you how to add basic buttons using the Bootstrap library. Now I'll present a few more examples of advanced components.

Dropdown menu

A dropdown menu is a very useful component for a website. It allows you to store and display information and links in a fairly compact block, which makes it possible to efficiently use the web page's space and allows you to include more information. This component consists of two parts: a block with elements, which is hidden by default, and a button, which – when pressed – makes a particular block appear.

A dropdown menu - a Bootstrap component in Droopler

 

In the block itself, you can put headers, links, which in turn can be active or disabled. These parameters can be set using CSS classes provided by the Bootstrap library.

Progress bar

A progress bar is another useful element of a website. It allows the user to immediately see the progress of the performed activity, which improves the user experience.

A progress bar, a Bootstrap element that shows a progress of some activity

 

As with other components, you can modify the style, colour and other parameters of a progress bar.

Tabs

Bookmarks are one of the menu types used on a website. They are useful for switching between the contents of pages, allowing the user to see more information in a smaller space.

The tabs are a Bootstrap component which allows switching between content on a page

 

The bookmarks created with the Bootstrap library may contain active and disabled links, as well as the already mentioned dropdown menu.

Bootstrap Components - summary

Using the Bootstrap library components to build a webpage is a very effective approach, because it allows you to easily build and maintain the pages. I've shown a few examples of using components in Droopler, a Drupal CMS distribution. You can find more information about the available components in the documentation on the Droopler demo page.

May 21 2021
May 21

The homepage is the most important element of a website. The first impression of the user depends on it – whether they'll stay on the website, whether they'll be interested in the company's offer and the company itself. In just a few simple steps, we'll show you how to create a homepage that will help you keep your visitors' attention.

 

What elements should a homepage contain?

A prospect enters the homepage. You have a few seconds to interest them and make them continue to check out your offer. How can you do that? You need to correctly convey the most important information that will immediately answer the customer's questions.

Banner with a call to action

First of all, you need to briefly describe what your company does. This type of information is often displayed in a banner at the top of the page. In this section, you can add a CTA (Call to Action). It's a link which when clicked redirects the user the destination area, e.g. to the next section of a page or to a contact form.

Blocks with content

You should also put blocks that contain information about what your company can offer to a potential customer and why they should choose your offer. Various types of representing information are suitable for these purposes: from simple text blocks to advanced interactive carousels that allow you to put more content into a fairly tight framework of one block.

Once you know what elements to put on the home page, the matter of creating the page in a fairly quick and easy way arises. Website builders – one of which is Droopler – are suitable for solving such a problem.

 

Create a homepage in Droopler

Droopler is an open source website builder based on CMS/CMF Drupal. It contains ready-made components and tools that allow you to quickly create modern webpages. Droopler is simple to edit and easy to expand. Let's try to create the most important elements of a homepage with its help.

Banner paragraph

As we've already mentioned, one of the most important elements of a homepage is a banner with brief information about the company at the top of the page. In order to add a block of this type, press the “Paragraph overlay” button on the top right of the page.

The Paragraph overlay button is located on the top right of the page in Droopler

 

Next, you have the option to add a new block in the selected area. After pressing the "Add" button, select the "Banner" component in the pop-up window.

Adding a new block on the homepageIn the pop-up window, select the Banner component to add it to the homepage

 

In the next window, you need to add a banner background. Additionally, you can add a title, subtitle, icon that appears at the top of the block and some brief text. It’s also possible to add the already mentioned Call to Action button and configure its main attributes.

Configuring a new paragraph for a homepage in Droopler

 

In the "Settings" tab, you can choose the shape of the block: placing the text in the central part of the banner or on the left side with a translucent background. It’s also possible to set different colour versions of a paragraph and define your own colours to ensure good readability of the text. Additional options include configuring the margins and padding, as well as adding additional classes for the block.

In the Settings tab, we can configure more settings for a particular paragraph

 

After pressing the "Save" button, the first block of the main page will be put in the lower right corner of the window:

The block with a banner on a homepage in Droopler

 

Carousel paragraph

A carousel is a type of block that contains a looped slideshow that can be controlled by the user. In order to create such a block in Droopler, select "Carousel" in the component list window.

Selecting a Carousel component to add it to the homepage

 

As in the case of a banner, you can add a title, icon, description and CTA. In the "Settings" tab, it’s also possible to set the margins. In addition, you can define the number of columns - how many elements should be displayed in this block.

Configuring the settings for a Carousel paragraph

 

The carousel items are added in the "Items" tab. You can choose your own title, image, description and link for each of them. The same as for the entire paragraph, for every element, you can set separate graphic themes - change the colour of the background or text. The next picture shows a finished carousel.

A finished carousel with graphic and text elements in Droopler

 

About Us section

You can create a block with information about the company using the "Text page" paragraph type. It's a simple section where you can enter a title, subtitle, add an icon, text and link. The available settings are the same as for a banner and carousel. After all the fields are filled in, the section will look like this:

The About Us section on the homepage, created using Text page paragraph

 

Summary

In this article, we explained how to create the most important elements of a homepage in a fairly easy and quick way. We used Droopler – a modern website builder, which not only allows you to build websites without coding, but also facilitates Drupal development.

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