If you find yourself thinking there’s got to be a faster, simpler way to build webpages, you’re probably looking for a low-code digital experience platform like the Acquia 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 webpages. 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.

Acquia site studio

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 a UI Kit with 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
  • Development process can be accelerated because of the reusability and low-code nature
  • Low code makes it appealing to users with less to no knowledge of building Drupal pages
  • A powerful visual user interface and in-context editor that lets you edit content directly on a live site
  • Empowers users to preview their layout in various devices just 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 images, text, and links 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 with less code by utilizing the Site Studio UI Kit.

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).

Site Studio

 

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.

Components

 

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

Styles

 

Field

 

Create a page

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

Layout

References:

Final Thoughts

Site Studio gives marketers, content creators, and website editors the ability to create content easily by utilizing components from the library. 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!

Contact us

LET'S DISCUSS YOUR IDEAS. 
WE'D LOVE TO HEAR FROM YOU.

CONTACT US