Blocomposer

# Getting Startedbeta

We will now take a tour of the UI along with buillding a new template from scratch to get a better idea of the editor's general workflow.

Testing is only carried out on the latest versions of chrome (opens new window) and edge (opens new window), therefore these are the recomended browsers

# The UI

The current UI may be a bit different from the one shown in this tutorial.

When you open the editor it will open a blank Default page.

The `Default` page is meant to be a placeholder so it's best to avoid using it for important templates.

ui

Editor main sections:

  • Canvas - What more can be said about the canvas, it is the largest and most important section and it is were your website comes together.
  • Main Topbar - This section houses the logo and some action buttons namely:
    • help - Info and help about the editor
    • toggle gridlines - show/hide editor gridlines
    • canvas clear - clear everything from the canvas
    • view code - view and/or export code
    • undo - undo last action
    • redo - redo last undo
    • preview - show preview of the template
    • import - import html and css template
    • save - save and generate thumbnail
  • Device Topbar - Switch between devices to change canvas size for responsive design. Just above this section is a button for showing and hiding all sections
  • Left Sidebar - This is were you'll find the Block Manager for Dragging & Dropping blocks, Layers for managing the site structure, Pages, Assets and Settings for site wide settings
  • Right Sidebar - Mainly for template management related actions, such as deletion, converting page to reusable template, viewing all pages and templates and finally toggling rulers and designer mode

# Creating a new page

Click the folder icon on the Right Sidebar, to open the following modal:

page

Enter page name, select a template then hit the Create button. Done!!!

# Adding blocks

blocks

Blocks can be added by Dragging then from the Block Manager and dropping them onto the canvas.

# Customization(StyleManager)the MVP

blocks

The Style Manager will popup whenever you click a component on the canvas, this will allow you to edit the available style properties for that component. This almost limitless customizations allows you to come up with any site design you can dream of.

# Building a simple website

Now let's try to use the editor to build a simple landing page.

# Basic blocks

Go to the Extra section under the Block Manager and drag the Navbar block onto the canvas:

navbar

navbar-drag

You can also filter blocks by name

2 Columns Text section Button
2col textsec btn
  • Drag and drop the 2 Columns block from the Basic section just after the Navbar block.
  • Inside the first column drag & drop the Text section then the Button block from the Basic section, by now you should have the following results:

snap1

# Layout

This can be more precise when selecting components that are obstructed.

Drag the Text block into the Link in the Navbar, you can drop the Text block anywhere then drag it into the Link from the Layer Manager:

layers

# Rich text editor

You can hide all panels to make it easier to edit in the canvas.

Double clicking on any text element will open the rich text editor, you can use this to make some general modifications to the text element.

Edit text to SOME VERY LONG HEADER CONTENT:

rte1

Highlight HEADER:

rte2

Change color:

rte3

Final results:

rte4

# Styling

The `Style Manager` can be dragged freely to any position on the canvas.

Some elements are resizable directly from the canvas, try making the first Cell cover 2/3 of the Row:

two3rds

then extending the Row to full height:

fullh

Select the Body component and add the following styles:

  • Decorations
    • Background color - #0f071a

bgc

Select the Navbar component and set the following styles:

  • Typography
    • Font family - Helvetica
    • Font size - 18px

fonts

  • Decorations
    • Background color - transparent
    • Box shadow - 0 2px 5px 0 black

boxsh

Select the Row component and set the following styles:

  • Typography
    • Font family - Helvetica
    • Color - white
  • Spacing
    • Padding - 10px 10px 10px 200px

pl

Select the header component and set the following styles:

  • Typography
    • Font size - 50px

Select the paragraph component and set the following styles:

  • Typography
    • Font size - 20px

Select the Button and set the following styles:

  • Spacing
    • Padding - 10px 50px 10px 50px
  • Typography
    • Font size - 25px
    • Color - #8c5ebf
  • Border
    • Border radius - 5px 5px 5px 5px
    • Border - 1px solid #8c5ebf

brd

  • Decorations
    • Background color - transparent
    • Cursor - pointer

crs

With the button still selected set state to Hover, then set the following styles:

  • Typography
    • Letter spacing - 2px

Syncing styles:

This process can help clean up the code a bit.

sync

# Uploding images

During the beta all images/assets will be deleted periodically.

# Responsive design

Cycle through the devices and adjust styles:

devices

Component Tablet Mobile
Row padding: 10px 10px 10px 200px padding: 10px 10px 10px 10px
Header font-size: 45px

Final result:

Desktop Mobile
snap2 snap2m

# Adding scripts

Scripts can add a bit more functionality to your site. You can attach scripts to components by using the script icon:

Script editing modal scriptm

Some examples of what script usage are:

  • adding events to a component:
const el = this;
this.addEventListener('click', function() {
    console.log('clicked')
});
  • Import external library:
const initLib = function() {
    const el = this;
    const myLibOpts = {
      prop1: props.myprop1,
      prop2: props.myprop2,
    };
    someExtLib(el, myLibOpts);
};

if (typeof someExtLib == 'undefined') {
  const script = document.createElement('script');
  script.onload = initLib;
  script.src = 'https://.../somelib.min.js';
  document.body.appendChild(script);
} else {
  initLib();
}

# Settings

Add site wide settings such as title and description

settings

# Exporting Code

Export the project as a .zip file

export

That's all for now 🚀. You can also link to your netlify account and deploy you sites directly to netlify.

←