Add Blocks and Elements

Adding Blocks and Elements to the page. This tutorial covers adding blocks and page attributes

What is a block?

A block is some content or functionality you can edit from within a page. Think of legos, these are the actual building blocks that go together to make the page. There are many types of blocks. You can find these blocks in the siderail and drop it in the dropzones. Click on Add Content and you will see a list of available blocks.

Screen Shot 2017-11-12 at 8.12.46 pm.png

All your in-context editing is performed by dragging Blocks into Block Areas. These areas hold the content and functionality blocks that make up your web page.

 

Adding a Block to the page

It's effortless and fun, simply click on the Screen Shot 2017-11-13 at 8.15.42 pm.png from the top bar and you will see a siderail to select the blocks from. Alternatively you can choose the Add Block option in the "Main" area 

Screen Shot 2017-11-13 at 8.34.00 pm.png

Pick a Block of your liking or use and drag and drop into the dropzone. 

-- Below is a dropzone called "Main" which is the body of the page you can add content to. 

Screen Shot 2017-11-13 at 8.32.49 pm.png

-- The edititable area s highlighted with teal colour on hovering on the mouse.

Screen Shot 2017-11-13 at 8.33.05 pm.png

-- Left clicking the mouse, brings up the content menu where you can choose to Edit the Block

Screen Shot 2017-11-13 at 8.38.29 pm.png

-- There is a baked in content block available which can be edited in the Composer as well as Edit mode. In Composer mode, you will see an extra option to use Markdown editor markdown.png

ComposerView

Screen Shot 2017-11-13 at 8.53.56 pm.png

 

Screen Shot 2017-11-13 at 8.33.14 pm.png 

You can also left click and edit this in the Edit mode. 

Screen Shot 2017-11-13 at 8.47.09 pm.png

 

Available Blocks

Content Related

Screen Shot 2017-11-13 at 9.13.52 pm.png

   1. Content - Inline context editing


   2. Image - Add Images  

 
   3. File - Upload files 


   4. Horizontal Rule - used to add a line separator


   5. Code Block - This is used for adding code snippets and is different from the code block available in the Rich Text Editor. This is richer in feature and can be used standalone without needed to have content block. Say, when you just want to share a piece of code. 


 Multimedia Blocks

Screen Shot 2017-11-13 at 9.37.21 pm.png

Try these blocks to add Youtube video, Google Map and drawing from https://www.draw.io

Learn more on how to embed your drawings using Responsively embed Block. 

 

 

 

 


Mixed

Screen Shot 2017-11-13 at 9.37.46 pm.png 

   Food lover? Try adding a recipe using our EZ Recipe Block 

 

   Accordion and Quick Tabs blocks are a couple of extra additions to enrich your content on the page.

 

 


How to use Accordion? 

Drag and drop in the "Main" area which is the dropzone and then edit the dialog window that pops up. 

Screen Shot 2017-11-13 at 9.55.06 pm.png

Keep adding more items by clicking on Screen Shot 2017-11-13 at 9.56.54 pm.png button


How to add Tabs? 

-- Drag a "Quick Tabs" block from the siderail on to the "Main" area. 

-- Fill in the details and click on save. Choose the first one to be an Open one. 

Screen Shot 2017-11-13 at 10.00.12 pm.png

-- Now drag a Content Block below it and fill in the details. This is the content on the tab above. 

Screen Shot 2017-11-13 at 10.01.47 pm.png

-- Drag another Tabs Block just below the above Content Block on the page and repeat the steps. This time make this one and any other subsequent ones Closed in the option to select. 

-- Upon adding two Tabs and two Content Blocks, it will show up like below

Screen Shot 2017-11-13 at 10.05.00 pm.png

 -- Click on  Screen Shot 2017-11-13 at 10.07.20 pm.png on the top bar and then click on Save to preview the tabs. Screen Shot 2017-11-13 at 10.09.28 pm.png

-- Finally it will show up as 

Screen Shot 2017-11-13 at 10.08.39 pm.png

Screen Shot 2017-11-13 at 10.08.46 pm.png

Did you know?

It's fun to use the editor

WYSIWYG.png

 

How?