Behind the scenes of building our new Blastic website with Umbraco

We moved! Or well, at least our website did. Recently, we migrated our Blastic website to a new platform. After thorough research and evaluation, we decided on Umbraco. A lightweight and highly flexible CMS that has been gaining popularity in recent years.

In this blog post, we share our experiences and insights on how we created our all-new platform in Umbraco using the new Block Grid introduced in Umbraco 10.4. And hopefully we’ll get you interested in its power as well!

In short: what is Umbraco?

Created in 2005 by Niels Hartvig, Umbraco is an open source .NET CMS - or content management system – with a high level of flexibility, security, and scalability. Since it gives users and content editors an intuitive editing experience and an easy-to-use interface, it’s generally known as “the friendly CMS”. The Umbraco community is very active and has over 220.000 members.

What is Umbraco Block Grid?

Before we delve into the practical side of things, let's start off with the basics.

The Umbraco Block Grid is a versatile tool within the Umbraco CMS. It enables users to design and arrange content blocks in a grid layout. This lets you structure, organize, and present content on webpages in a visually appealing way.

The Block Grid consists of individual content blocks. A content block contains a specific type of content or media, for example text, images, videos, or custom code. You can easily arrange and customize these blocks, allowing you to create unique and engaging web layouts. The Block Grid empowers both developers and content editors to collaborate seamlessly. Which results in dynamic and visually striking web pages.

The 5 Key Features of Umbraco Block Grid

1. Drag-and-Drop Interface

Umbraco Block Grid offers a user-friendly, drag-and-drop interface that simplifies the process of arranging and reordering content blocks. This intuitive approach makes it easy for content editors to create and maintain complex layouts without needing extensive technical knowledge.

2. Content Reusability

One of the Block Grid's most significant advantages is the ability to reuse content blocks across multiple pages. This feature streamlines content management by ensuring consistency throughout your website. Any updates made to a shared content block are automatically reflected across all pages where it's used.

One of my favorite blocks that we use is our Content Block which allows for a rich text body and optional buttons for which the editors can pick the color that suits them best.

3. Customization Options

With the extensive customization options that the Block Grid provides, you tailor each content block to your specific needs. Adjust the layout, styling, and content within each block to perfectly match your website's branding and design requirements. These options can be specific to the content block, or they can be general “Settings” that are applied to every block that requires it.

For example, on most of our blocks we applied the option for editors to add some extra padding.

4. Seamless Integration

Umbraco Block Grid seamlessly integrates with other Umbraco features and extensions. This makes it a versatile tool that can be extended further through the Umbraco community's contributions.

5. SEO-Friendly

Umbraco's SEO capabilities remain intact while using the Block Grid. You can optimize each content block individually for search engines. This way, you make sure your website ranks well in search results.

Conclusion

Umbraco Block Grid is a powerful tool that empowers you to create dynamic and visually appealing web content, with ease. Its intuitive drag-and-drop interface, content reusability, customization options, and responsiveness make it a valuable functionality in the Umbraco CMS toolkit.

By leveraging the Umbraco Block Grid, you can unleash your creative potential and build websites that captivate your audience and drive results. Whether you're working on a blog, e-commerce site, landing page, or portfolio, this tool offers the flexibility and functionality needed to bring your web projects to life. So, dive into the world of Umbraco Block Grid and watch your web creations flourish.

Need a hand? We’re here to help. Plan a free call to discuss your next project.