ByteEditor Site Builder

Wiki menu

Create layout

By following the steps in this instruction, you will be able to create your custom four-column layout. You can use the code snippets provided in the guide to recreate this layout, or you can modify the steps to tailor the layout to your specific needs.
Screenshot At Oct 29 18 28 28

In order to create a layout, for example, Four Columns Layout, we need a back office view, a controller, and a front view 

Step 1. Basic changes to the code

  1. Open the project folder
  2. Open the “App_Plugins” folder
  3. Create a folder for custom layouts, for example, name “CustomBlockView”
  4. Create a test document named “fourColumnLayout.html”
  5. Please copy the following code and paste it into the file
<section ng-controller="fourColumnLayoutController" data-bs-theme="light" class="three-col-section" ng-style="{
    '--bs-btn-primary-color': '#' + style.button.text,
    '--bs-btn-primary-bg': '#' + style.button.fill,
    '--bs-btn-primary-border-color': '#' + style.button.stroke,
    '--bs-btn-primary-hover-color': '#' + style.button.textHover,
    '--bs-btn-primary-hover-bg': '#' + style.button.fillHover,
    '--bs-btn-primary-hover-border-color': '#' + style.button.strokeHover,



    '--bs-btn-primary-outline-color': '#' + style.buttonSecondary.text,
    '--bs-btn-primary-outline-border-color': '#' + style.buttonSecondary.stroke,
    '--bs-btn-primary-outline-hover-color': '#' + style.buttonSecondary.textHover,
    '--bs-btn-primary-outline-hover-bg': '#' + style.buttonSecondary.fillHover,
    '--bs-btn-primary-outline-hover-border-color': '#' + style.buttonSecondary.strokeHover,

        '--bs-heading-h1-color': '#' + style.content.h1,
        '--bs-heading-h2-color': '#' + style.content.h2,
        '--bs-heading-h3-color': '#' + style.content.h3,
        '--bs-heading-h4-color': '#' + style.content.h4,
        '--bs-heading-h5-color': '#' + style.content.h5,
        '--bs-heading-h6-color': '#' + style.content.h6,
        '--bs-border-color': '#' + style.content.border,
        '--bs-body-color': '#' + style.content.primary,
        '--bs-secondary-rgb': toRgbString(style.content.secondary),
        color: '#' + style.content.primary,
        '--bs-link-color': '#' + style.content.link,
        '--bs-link-hover-color': '#' + style.content.linkHover,
        '--bs-body-bg-rgb': '#' + style.content.background,
        'background-color': '#' + style.content.background, 'background-image': 'url(' + (block.data.backgroundPicture[0].mediaKey | mediaItemResolver).mediaLink + '?rmode=min&width=1920)'}" ng-class="{  
        'pt-5 pt-md-7 pt-lg-8': !block.data.addMarginToTheTop || block.data.addMarginToTheTop == 1,  
        'pt-0': block.data.addMarginToTheTop == 0,  
        'pb-5 pb-md-7 pb-lg-8': !block.data.addMarginToTheBottom || block.data.addMarginToTheBottom == 1,  
        'pb-0': block.data.addMarginToTheBottom == 0  
         }">
<style ng-include="'/App_Plugins/UmbracoBlockGrid/BlockViews/css/design.css'"> </style>
<div class="license-message" ng-if="!licenseIsValid">
<div class="license-block">
<div class="img-holder">
<img src="/App_Plugins/UmbracoBlockGrid/GlobalDesign/img/icon-calendar.svg" alt="...">
</div>
<div ng-bind-html="message | safe_html" class="content-holder"></div>
</div>
</div>
<umb-block-grid-render-area-slots></umb-block-grid-render-area-slots>
</section>

6. Create a test document named “fourColumnLayout.controller.js”
7. Copy the following code and paste it into the file 

angular.module("umbraco").controller("fourColumnLayoutController", function ($scope, licensesService, globalDesignService, editorState) {
    $scope.licenseIsValid = true;
    $scope.message = "";

    licensesService.checkTrialForm().then(function (isSubmitted) {
        if (isSubmitted) {
            licensesService.checkLicense().then(function (isValid) {
                $scope.licenseIsValid = isValid;
                if (!isValid) {
                    $scope.message = licensesService.getExpiredText();
                }
            });
        }
    });

    $scope.toRgbString = function (color) {
        return globalDesignService.hexToRgb(color)?.rgbString
    }

    $scope.styles = ``;

    globalDesignService.getDesignSettings(editorState.getCurrent().id).then(function (design) {
        $scope.design = design;
        $scope.$watch('block.data.backgroundColor', function (newValue) {
            $scope.style = design.getStyle(newValue);
        });
    });
});

8. Go to the Umbraco website
9. Create a test document named “package.manifest” in the “CustomBlockView” folder.
10. Add the following JSON to the package.manifest file:

{
  "javascript": [
    "~/App_Plugins/CustomBlockView/fourColumnLayout.controller.js"    
  ]  
}
Дизайн Без Названия (6)

Step 2. How to create a layout in Umbraco

1. Run your project locally where the “ByteEditor Site Builder 1.X” package is installed.
2. Open the tab “Settings”.
3. Expand the Document Types folder.
4. Hover over the "Blocks" folder in the content tree you will see this icon '...'. Click the icon '...'. 
5. Click the “Create” button.
6. Select “Element type” from the list.
7. Name the "Four Columns Layout" block.
8. Add an icon for the layout.
9. On the right side, next to the “lock” icon, change the text from “fourColumnsLayout” to “fourColumnsLayoutBlock”.
10. Click on the "Add groups" button 
11. Name the group “Content”
12. Click on the "Add property" button 
13. Name the property “Background picture”
14. Click on the "Select editor" button
15. Select “Image Media Picker” from the list
16. Click on the "Submit" button
17. On the right side of the screen, find the “Compositions” button and click on it.
18. Scroll to the “/Blocks/Compositions/” block
19. Select the “Section Margins” and “Section Settings” checkboxes 
20. Click on the "Submit" button
21. Click on the "Save" button

Дизайн Без Названия (7)

Step 3. How to add Layout to the Block Grid

  1. Open the Block Grid page
  2. Click on the “Content” block
  3. Click the "Edit" button for  "Home - Main Grid - Block Grid" 
  4. Click the “Add block” button 
  5. Choose "Four Columns Layout" from the list
  6. Make the “Allow in areas” field inactive 
  7. Click the " Areas" button 
  8. Click the " Add" button for the Areas block 
  9. For the “Alias” field, enter “First”
  10. Click on the "Submit" button
  11. Specify the width of “3 columns”
  12. Click the " Add" button for the Areas block 
  13. For the “Alias” field, enter “Two”
  14. Click on the "Submit" button
  15. Specify the width of “3 columns”
  16. Click the " Add" button for the Areas block 
  17. For the “Alias” field, enter “Three”
  18. Click on the "Submit" button
  19. Specify the width of “3 columns”
  20. Click the " Add" button for the Areas block 
  21. For the “Alias” field, enter “Four”
  22. Click on the "Submit" button
  23. Specify the width of “3 columns”
  24. Click the " Advanced" button 
  25. Add the path to the .html file for the Custom view field 

    ~/App_Plugins/CustomBlockView/fourColumnLayout.html

  26. Add the path to the .css file for the “Custom stylesheet” field 

    ~/css/index.min.css

  27. Save your changes 
Дизайн Без Названия (8)

Step 4. How to create a Layout view on the front end

  1. Expand the "Partial Views" folder.
  2. Expand the "blockgrid" folder.
  3. If you hover over the "Components" folder in the content tree, you will see this icon: '...'. Click the icon.
  4. Select “New empty partial view” from the list.
  5. In the name field, write “fourColumnsLayoutBlock.cshtml”
  6. Please copy the following code and paste it into the file
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<FourColumnsLayoutBlock>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using PageBuilder.Core.Infrastructure.Helpers
@using Umbraco.Cms.Core.Models
@{
    var design = ViewData["Design"] as Design;
    var style = DesignHelper.GetBackgroundColor(Model.Content.BackgroundColor, design?.BaselineColors, design?.Styling);
    var noBackgroundColor = string.IsNullOrEmpty(style.Content.Background);
    var image = Model.Content.BackgroundPicture;
    var paddingTopClass = Model.Content.AddMarginToTheTop ? "pt-5 pt-md-7 pt-lg-8" : "pt-0";
    var paddingBottomClass = Model.Content.AddMarginToTheBottom ? "pb-5 pb-md-7 pb-lg-8" : "pb-0";
}
<section class="@paddingTopClass @paddingBottomClass three-col-section" style="
--bs-btn-primary-color: @style.Button.Text;
--bs-btn-primary-bg: @style.Button.Fill;
--bs-btn-primary-border-color: @style.Button.Stroke;
--bs-btn-primary-hover-color: @style.Button.TextHover;
--bs-btn-primary-hover-bg: @style.Button.FillHover;
--bs-btn-primary-hover-border-color: @style.Button.StrokeHover;



--bs-btn-primary-outline-color: @style.ButtonSecondary.Text;
--bs-btn-primary-outline-border-color: @style.ButtonSecondary.Stroke;
--bs-btn-primary-outline-hover-color: @style.ButtonSecondary.TextHover;
--bs-btn-primary-outline-hover-bg: @style.ButtonSecondary.FillHover;
--bs-btn-primary-outline-hover-border-color: @style.ButtonSecondary.StrokeHover;



--bs-body-color: @style.Content.Primary;
--bs-secondary-rgb: @Html.HexToRgb(style.Content.Secondary)?.RgbString;
--bs-body-bg-rgb:  @style.Content.Background;
--bs-border-color: @style.Content.Border;
--bs-link-color: @style.Content.Link;
--bs-link-hover-color: @style.Content.LinkHover;
--bs-heading-h1-color: @style.Content.H1;
--bs-heading-h2-color: @style.Content.H2;
--bs-heading-h3-color: @style.Content.H3;
--bs-heading-h4-color: @style.Content.H4;
--bs-heading-h5-color: @style.Content.H5;
--bs-heading-h6-color: @style.Content.H6;
color: var(--bs-body-color);
background-color: @style.Content.Background@(image != null ? $"; background-image: url({image.GetCropUrl(imageCropMode: ImageCropMode.Min, width: 1920)});" : "")">
    @await Html.GetBlockGridItemAreasHtmlAsync(Model)
</section>
<style>
    .three-col-section video {
        aspect-ratio: 5/3;
    }
</style>

7. Click on the "Save" button
8. Restart the project 

Congratulations!

You have created your first layouts. Now you can add it to your page and fill with the elements. 

The result of the work done!

Дизайн Без Названия (10)
Previous
Next