Skip to content

Setup of WYSIWG Block Grid Elements

Jump to bottom
Dirk Seefeld edited this page Mar 1, 2026 · 6 revisions

Setup of WYSIWG Block Grid Elements

Installation

Add the package to an existing Umbraco website (v15+) from nuget:

dotnet add package Umbraco.Community.wysiwgUmbracoCommunityExtensions

Setup

Start (Debug) the website and login to the backoffice. Go to the settings section and you should find a new dashboard WYSIWG.

wysiwg-dashboard

Setup WYSIWG by clicking the button, wait until the success notification and refresh the page.
Now you should find new Document and Data types:

doc-data-types

Finally create a document type with template, name it Simple Page and add a property named Grid. Enable Vary by Culture even if you do not support multiple languages. Otherwise you have to disable Vary by Culture for the three Wysiwg65_Content Elements > Block Elements: Headline, Paragraph and Cropped Picture
Before you proceed in your IDE, you should create the page model with ModelsBuilder.

Otherwise you will get an complie time error regarding 'Umbraco.Cms.Web.Common.PublishedModels.SimplePage' when you use the following markup.

CSS & HTLM

Place the Datatype "wysiwg65_BlockGrid" on a document type and create a new content node. You should see the new Block Grid view in the backoffice!

An example markup for the page could be:

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<SimplePage>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Simple Page</title>

    <link rel="shortcut icon" type="image/png" href="/favicon.png" />

    <link href="~/styles/wysiwyg-blockgrid.min.css" rel="stylesheet" />

    <style>
        figure{
            margin: 0
        }
        figure img{
            width: 100%;
        }
        body, html{
            margin: 0;
        }
        #canvas{
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
<body id="top">
    <div id="canvas">
        @await Html.GetBlockGridHtmlAsync(Model.Grid)

        <footer>
            <a href="/umbraco" target="_blank">backoffice</a>
        </footer>

    </div>
</body>
</html>

The referenced ~/styles/wysiwyg-blockgrid.min.css is already installed and linked to data type: blockgrid-css In the screenshot you still see the previous name /wwwroot/styles/customblockgrid.min.css.

Read more about CSS variables.

Clone this wiki locally