Specbee: Building component-based websites on Drupal using Acquia Site Studio

If you find yourself thinking there’s got to be a better way to build a website than hiring a full time developer, you’re probably looking for something like Acquia’s Site Studio. It’s that perfect blend of robustness and usability that lets non-technical users like content editors, designers, marketers, and site owners build brand-compliant, unique websites. Formerly known as Cohesion, Site Studio provides the ability to create elegant and more powerful sites in half the time. Read more about Site studio and how to implement and use it for building beautiful Drupal sites.

Why use Acquia Site Studio?

As we said earlier, Site studio makes it really easy to build component-based websites. 

Think of components as lego blocks and your website as a house you want to build with these blocks. As a builder, you are assembling various blocks in a way that helps you build your design. So in website terms, a component can be a block of text, an image, a featured snippet, a live Twitter feed, a header, a footer or so much more! All those components together help you complete your house/website design.

Benefits of using Site Studio

• Site Studio provides around 50 predefined components which you can start using immediately like Text, Image, Slider, Accordion, etc. Users can also use custom-built components that have been created by developers.
• It provides an excellent content editing user interface for adding components or templates in the layout by simply dragging and dropping
• It does not require as much time and effort
• Low code makes it appealing to users with less to no knowledge of building pages
• A powerful visual user interface and in-context editor that let’s you edit content directly on a live site
• Empowers users to preview their layout in various devices jus by changing the settings of the device aspect ratios
• Easy to maintain

How does it work?

Normally, to create a block type or paragraph type in Drupal 9, you need to have a specific Twig file for the markup. Then, based on the markup and design, you would write the CSS rules to create a card component. 

However, when building a card component in Site Studio, you use a template of the card that already includes the CSS properties within the component. Then, using its drag-and-drop feature, you can use predefined elements like image, text, and link to create a layout for the card. Each component has a ‘Properties’ tab, where you can control the look of the component. The best part is that all this is done without writing a single line of code.

Getting Started with Site Studio

Let’s get started by first installing and enabling the module and theme.

Installing

• Download them with the help of Composer or manually

• composer require acquia/cohesion:6.8.0

• composer require acquia/cohesion-theme:6.8.0

• Enable the modules
• Install the Acquia Cohesion minimal theme from the UI

Once you have successfully installed the module and theme, you will see a new menu item on the admin toolbar called Site Studio. Here’s where you will be playing around with Components, Templates, Styles, Packages, etc (see below).

Components

You can now create a component by navigating to the Components page. You can also see a list of components that are already available on the site.

Customizing your components

You can add styles to the Component elements by editing or double-clicking the element and then clicking on the Styles tab. Here you can see all the available styles. You can now add the CSS Styles by clicking on Properties Tab

Create a page

You can create a page and add your components to the page by just dragging and dropping them into your layout.

References:

You can refer to the official Site studio documentation here

• https://sitestudiodocs.acquia.com/6.9

Final Thoughts

Site Studio gives you the ability to build websites faster and is useful for everyone – from developers to marketers and even end users. Site managers, Content editors or Marketers can easily add entirely new sections to the website without needing the help of a designer or Drupal development team. They can simply reuse the assets that are available and then add new sections to the website or rearrange existing ones. As a Drupal development company, we can help build custom components to enable you to project your unique brand effectively. Thank you for reading!