header logo
Services

Services
Cloud Solutions
Computing
Storage
Backup
AI Integrations
Machine Learning
Natural Language Processing
Computer Vision
Software development
Web Development
Mobile Development
Desktop Applications
Databases
Technologies

Technologies
Microsoft stack
ASP.NET
.Net Core
Azure
Entity Framework
WCF
Web/Frontend
React
Vue.js
HTML
CSS
JavaScript
TypeScript
jQuery
Angular
Backend
C#
Node.js
Python
Ruby
PHP
CMS
Umbraco
Wordpress
Solutions

Solutions
Industry
Healthcare
Facility management
Finance
E-commerce Retail
Energy Platform
Traveling Platform
E-commerce FMCG
Use Cases
Tutor Pro
Support system
Saas ETL Platform
ERP System
CRM System
Tracking Application
Task Manager
Integration and Management Cases
Progressive Web Apps
API integration
Desktop Applications
Website Development
Integrated AI
About Us

About Us
Our Company
Blog
Job opportunities
Internship
language_icon
EN
ET
Contact us
  • OSKI digital agency/
  • Articles and news/
  • Umbraco 11 Block Grid

Umbraco 11 Block Grid Editor

Umbraco.Cms.Core.Models.Membership.User!=null? Kyrylo Osadchuk: author avatar
By Kyrylo Osadchuk
Published: March 10, 2023
3 min read
  • Copy link
  • Facebook
  • LinkedIn
  • Twitter

Umbraco 11 Block Grid Editor is a powerful tool that provides several benefits for website developers and editors. Here are some reasons why it's considered good:

  1. User-Friendly: The block grid editor provides a user-friendly interface that allows editors to create and manage content with ease. The editor provides a simple drag-and-drop interface that lets editors easily arrange and configure content blocks.

  2. Flexible: The block grid editor is incredibly flexible, allowing editors to create complex layouts quickly. Editors can add new content blocks to a page, customize the layout, and even create custom blocks if necessary.

  3. Responsive: With the block grid editor, editors can easily create responsive layouts that work on any device. The editor provides an intuitive way to manage breakpoints, allowing editors to adjust the layout for different screen sizes.

  4. Modular: The block grid editor promotes a modular approach to content creation, where editors can create reusable content blocks that can be used across multiple pages. This approach makes it easier to maintain consistency across the website and reduces the amount of work required to create new pages.

  5. SEO-Friendly: The block grid editor provides excellent support for search engine optimization (SEO). Editors can easily add metadata, alt text, and other SEO-related information to their content blocks, helping to improve the website's search engine rankings.

Overall, the block grid editor in Umbraco 11 is a powerful and flexible tool that makes it easier for editors to create and manage content on their website.

We add support for Umbraco 11 block editor to our OSKI starter kit and here is quick example how it can be used:

 

How to Use the Block Grid Editor

Using the Block Grid Editor in Umbraco 11 is easy and intuitive. Here are the basic steps:

Step 1: Create a new page in Umbraco and open it in the back end editor.

Step 2: Press on "Add content" button and choose a block that you want to add.

We will take "Rich text editor" as an example.

 

Then we will add "Half" block and add "Rich text editor" and "Block Image" as its content. And after a few seconds we have the following result:

 

 

Step 3: Fill each cell with your desired content, using any of the available content elements.

Step 4: Customize the layout of your grid by adjusting the width and height of each block, as well as the padding and margins between the blocks.

Step 5: Preview your grid and make any necessary adjustments.

Step 6: Publish your page and enjoy your custom grid layout!

 

Just try OSKI starter kit with implemented block grid editor.

https://marketplace.umbraco.com/package/oskistarterkit

Tags: Umbraco Block Grid

Don’t forget to share this post!

From Our Blog

  • Importance of UI and UX in Creating Modern Solutions
  • Published: April 18, 2025
  • Why API-First Design is the Future of Application
  • Published: January 27, 2025

About Us

Our agency delivers tailored solutions with clean code and attention to detail. We specialize in Umbraco, Vue.js/React.js/Angular, and .NET/Core. Staying current with trends, we provide innovative, future-proof software to drive your business success.

Kaupmehe tn 7-120, Tallinn, Estonia

2025 - This site is running Umbraco version 10.4.0.0. Privacy Policy