Acquia Site Studio - Low Code Enterprise-grade, Drupal website building platform.

Low-code platforms have been slowly gaining popularity in the Marketing stack of organisations. Low-code essentially means being able to assemble UI of your Digital experience visually and often without the need for a dedicated Development team. Webflow for Websites and Shopify for e-commerce are among the list of rising low-code platforms. These platforms help organisations become more agile and help enable various functions like Design, Marketing to come on board as Makers on the Digital experience. Today we will talk about Cohesion now renamed as Site Studio, a low code offering for Drupal websites by Acquia, we will discuss benefits and some of the paradigms that make it an effective low code option in Drupal stack.

Drupal has witnessed a healthy growth over these years as a pillar for Enterprise Digital stack, Acquia's Site Studio brings the DIY spirit to this stack. What more and more Marketers are looking for is quicker and cheaper ways to assemble landing pages and work out of a component library of Digital elements that are performant and consistent to the Design systems of the organisation. A low code approach to Drupal will only work if its aware of its capabilities & flexibility, that is what Cohesion brings on the table. Ability to apply Design systems on your Digital Experience built on Drupal, DIY!

Benefits of Acquia's Site Studio

1. Low code 
2. Highly configurable
3. Easy maintainable
4. Easily modifiable 
5. Highly scalable
6. Component-based driven
7. Less developer dependent

Acquia Site Studio

Acquia's Site Studio provides a contributed module and theme which needs to be installed in Drupal, quite similar to the way we install other modules and themes. However, to use this service, it is required to purchase a cohesion package that provides us with an API Key, Agency Key, Site ID, and an API Server URL which needs to be inserted in the Account Settings form.

Here are the settings and key features of Acquia's Site Studio:

1. Website Settings
2. Style Settings
3. Components
4. Templates

Site Studio provides an in-site configuration form which takes care of your branding requirements. You can add your own branding elements like fonts, colours, icons, grid settings, SCSS variables, etc. directly onto the site. And there is absolutely no need to make any changes in the theme folder as well as the theme settings. Doesn’t this sound cool! Your basic frontend settings would be handy to you and you can modify it directly from the site without asking for help from a developer.

Website Settings

Style Settings

It’s not over yet, with Acquia Site Studio you can create/modify styles of a site. Acquia Site Studio provides settings to update the base style or to create custom styles. 

And this is how the default preview and configuration pane looks like.

Now let’s understand what comes under Base styling and Custom styling

Base styling - Styling which is going to be consistent throughout the site, e.g., font-size of body. Font formatting of Headings, Style of a button, style of link, etc.

Custom styling - Styling which will be different for each instance or as a variation of base style. E.g., Big button, Small button, Read More Link, Consistent layout related styles (Padding Top & Bottom Large, Padding Top & Bottom Small), Social icons theming, etc.

Let’s look at the example of CTA link styling.

• CTA style structure
  • Link styling
  • After pseudo-element styling
  • On hover pseudo-element styling
• Style properties required for CTA link and those properties are added in the config form through properties button on the top right corner of the styling pane
• Styling properties required for pseudo-element styling
• Styling properties required for pseudo-element after hover

Component Builder

Now let’s introduce the coolest feature of the Acquia's Site Studio -  a Component Builder. Acquia Site Studio follows a complete component-based development approach. So, what is the component-based development approach? 

Acquia Site Studio provides a list of elements. By using these elements even simple and complex components can be created and be made configurable by creating a component form. The amazing part is that everything can be built by mere drag and drop. Doesn’t it sound super user friendly?

Let’s look at an example of a Hero Component and figure out which elements could be part of this component?  Let’s create a list of elements(atoms).

• Hero Image
• Hero Title
• Hero Description
• CTA button

Let’s consider the below-displayed hero component that we are trying to achieve.

Based on the Hero component design, the hero component structure would look similar as described in the below image.

A component will be created which will have the above-mentioned elements. But what about styling? This is the real beauty of Acquia Site Studio. It allows us to create a base style as well as a custom style and those can be appended to the component. Doesn’t it sound fascinating?

Here would like to take you back to the styling part of the section where we have styled CTA link. Now, here in the above component CTA link element can directly assign the style which has been created under custom style. And as per image, styling can be appended to CTA Link element.

Layout

There are multiple ways to create different layouts. Here, with Acquia Site Studio, the layout can be defined by a Layout Category component and also component dropzone element can be provided to add other components. 

Does it mean? Woah! Yes, it means nesting use of the component is also possible. I won’t provide the screenshot for this example right now.

Template

There are four main templates:

• Master Template
• Content Template
• Views Template
• Menu Template

The template names clearly state the use of each template, but, I am sure you must have some questions related to master templates. 

What will it hold? The thumb rule is, this template should be least modifiable, means, it should not be updated frequently. We can ensure this by using only consistent section/components/regions added to it.

Acquia Site Studio Demo 

Explore how Site Studio enables you to apply design systems on your Digital Experience built on Drupal!

I hope this blog was helpful to understand the basic outline of Acquia Site Studio. Stay tuned! We have an upcoming blog that will talk about the advanced usage of templates. 

P.S - If you want to learn more about Site Studio, Acquia has a training and a full support guide - https://cohesiondocs.acquia.com/6.1 and get access to the free sandbox here - https://www.acquia.com/products-services/acquia-cohesion#create-sandbox.

Interested to read more about Site Studio? Here are some articles for you: