--- url: 'https://metadrop.net/en/articles/vlsuite-web-pages-in-record-time' title: 'VLSuite: web pages in record time' author: 'Antonio Núñez' date: '2024-11-07T16:10:20+00:00' updated: '2026-08-04T10:59:25+00:00' type: article summary: 'This article introduces VLSuite, a powerful tool for building websites in Drupal quickly and easily. Designed for users of all experience levels.' tags: - 'Drupal Planet' - VLSuite - 'Site building' - 'Layout Builder (Drupal module)' - UX/UI - 'Drupal modules' - Contribution image: 'https://metadrop.net/sites/default/files/styles/full/public/2024-05/visual-layout-suite-vlsuite_0.png.webp?itok=zuCXrrYx' published: true og: determiner: Automatic site_name: Metadrop 'image:url': 'https://metadrop.net/sites/default/files/styles/full/public/2024-05/visual-layout-suite-vlsuite_0.png.webp?itok=zuCXrrYx' 'image:type': image/png 'image:width': '678' 'image:height': '495' 'image:alt': 'VLSuite: web pages in record time' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article '@id': 'https://metadrop.net/en/articles/vlsuite-web-pages-in-record-time#article' name: 'VLSuite: web pages in record time' headline: 'VLSuite: web pages in record time' description: 'This article introduces VLSuite, a powerful tool for building websites in Drupal quickly and easily. Designed for users of all experience levels.' about: - VLSuite - 'Site building' - 'Layout Builder (Drupal module)' - UX/UI - 'Drupal modules' - Contribution image: '@type': ImageObject url: 'https://metadrop.net/sites/default/files/styles/full/public/2024-05/visual-layout-suite-vlsuite_0.png.webp?itok=zuCXrrYx' width: '678' height: '495' datePublished: '2025-03-25T17:00:20+0100' dateModified: '2026-08-04T12:59:25+0200' author: '@type': Person name: 'Antonio Núñez' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/en/articles/vlsuite-web-pages-in-record-time' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/en/articles/vlsuite-web-pages-in-record-time' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://metadrop.net/en' - '@type': ListItem position: 2 name: 'Expert Drupal & Tech Articles' item: 'https://metadrop.net/en/articles' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- 1. [Articles](https://metadrop.net/en/articles) # VLSuite: web pages in record time Tuesday, March 25, 2025 This article introduces VLSuite, a powerful tool for building websites in Drupal quickly and easily. Designed for users of all experience levels. Building a website can be daunting, especially when time is limited or technical knowledge is needed. **VLSuite** comes to solve these difficulties, providing an easy tool that **allows anyone to build quality pages within Drupal**. It offers a features that streamline the process of creating web content, whether you are an experienced developer or new to website creation. ## What is VLSuite and why will it make your life easier? **Visual Layout Builder (VLSuite)** is a *low-code* tool that greatly improves the way Drupal websites are created. Without requiring advanced programming skills, you can build **professional-looking web pages** in just minutes. It's ideal for those who want to **focus on content** without worrying about advanced technical setups. ## The magic of VLSuite Using VLSuite, each content block is fully customisable, which means that adjusting **colours, columns, and layout** is quick and easy by being able to do it directly from the content editing. By avoiding having to make technical settings and being highly visual, you can focus on **building the page without having to deal with technicalities** or trusting that the content will display the way you want it to without seeing it live. Want to add a block? Go for it! Need an extra column? Add it! Change the color? Go ahead! ### Configurable layouts and reusable templates One of the most outstanding features of VLSuite is **its flexibility for page creation**. Users can choose from a variety of configurable templates, with different possibilities. For example, choosing between a one, two, three or four column layout is as simple as selecting the appropriate template. This simplifies and speeds up the use of **visually appealing layouts that can then be fully customised.** Let's look at an **example: a home page** that combines a Hero-like home section, an image gallery, and an opinion or quotes section. With VLSuite you simply add the blocks of each type to build that content: a **Hero** block for the welcome, followed by a **Gallery** block for the images, and the **Statement/Quote block** for the testimonials. Just choose the 3-column layout, place the blocks accordingly, and adjust the sizes and colours. In a few minutes, you will have a structured page ready to use. Creation of a landing page using VLSuite ### Predefined content blocks to speed up your work VLSuite offers blocks such as Image, Text, Icons and Call to Action (CTA), among others. These blocks **allow users to build content by adding these elements as they wish**, depending on the content to be built. In addition, **each block is highly customisable**, allowing you to change colours, fonts, columns, spacing and more with just a few clicks. If you want to add a YouTube video to a product page, just select the Remote Video block, paste the YouTube link, and adjust the size or margins to fit your design perfectly. No need to search for code or use other external tools. That's the advantage of using a *low-code* tool. ### Saving custom templates Another key feature is the ability to **save your own designs as reusable templates**. This allows you to store a structure once created and apply it to other pages, avoiding having to make the same configuration over and over again, optimising the editorial flow, and **avoiding small divergences in the designs** due to not always making the exact same configuration. Let's suppose you have designed an event page with a specific structure: an introduction, a carousel, and a contact section. You can **save this structure as a template and reuse it for future events**, simply by updating the text and images. ## VLSuite in action: installation VLSuite is installed like any other Drupal module. For those using Composer, dependency and patch management is done automatically, making integration easy. Once installed, it is important to check compatibility with your theme and, if necessary, adjust the utility classes for optimal design, especially if you are not using Bootstrap 5. The integration of the **Artisan Drupal SDC theme** with VLSuite ensures a solid design foundation, **improving the design creation process**. For more information, check out [**this related article**](https://metadrop.net/en/articles/artisan-drupal-sdc-theme-what-you-need-to-know). Another option is to use the [Radix](https://www.drupal.org/project/radix) theme, which integrates with VLSuite easily. In addition, **the VLSuite Shuttle submodule takes care of preparing the site to use the suite**, including activating all the necessary submodules, so you don't need to know the suite to have an initial user experience. For those who want to delve deeper into each step, the [**official VLSuite documentation on Drupal**](https://www.drupal.org/project/vlsuite) provides a complete guide. ## VLSuite in action: use cases VLSuite is especially useful in cases where **great flexibility is needed** when it comes to content layout along with **live preview and ease of adding pre-made components**. Cases such as the following: ***Landing*** **Pages**: landing pages are an example of pages with a **complex and changing design**, but at the same time they should be easy to edit and attractive. With VLSuite it is easy to use blocks such as *Card* and Gallery to showcase for example products or services, and it is even possible to add visual effects with the animation function included in the module. ***Portfolios***: artists and content creators can use the Gallery block to **present their work easily without losing attractiveness**. Using the different column and layout options together with the other blocks offered by VLSuite it is possible to create portfolios to showcase projects in a professional manner in just a few minutes. **Product Pages**: an online store can use the *Hero*, *Cards,* and Gallery blocks to highlight a product, adding a Reviews section using the Quotes component, and a Video section underneath (with links to YouTube or Vimeo) with more details about a product. This combination creates a **very complete product page, and is designed on the fly.** ## Is it worth it? Absolutely! VLSuite is a great tool for creating Drupal pages quickly, professionally, and seamlessly, allowing for dynamic design with almost no restrictions. From my experience, once you become familiar with the tool, you will notice a significant improvement in your workflow, increasing **efficiency without sacrificing quality**. Creating websites becomes a much faster, easier and smoother process. You will be amazed at how quickly you can build well-designed and functional pages, effortlessly and smoothly. [VLSuite](https://metadrop.net/en/articles?text=VLSuite) [Site building](https://metadrop.net/en/articles?text=Site%20building) [Layout Builder (Drupal module)](https://metadrop.net/en/articles?text=Layout%20Builder%20%28Drupal%20module%29) [UX/UI](https://metadrop.net/en/articles?text=UX/UI) [Drupal modules](https://metadrop.net/en/articles?text=Drupal%20modules) [Contribution](https://metadrop.net/en/articles?text=Contribution) - Antonio Núñez Junior Developer [UX/UI Design](https://metadrop.net/en/services/digital-strategy-transformation/ux-ui-design " See UX/UI Design") Metadrop designs accessible, data-driven UX/UI systems for enterprise digital platforms — scalable design systems that meet WCAG standards and improve conversion outcomes. See more