Blocks
Overview
Everything in JOeve Builder is about the blocks. It starts with a block, whether from scratch or from our vast premade library of ready-to-use blocks.
This tutorial gives you a quick overview of what Blocks in JOeve Builder are and how to use them.
Everything on JOeve Builder started with blocks, without the blocks, the webpage will be nothing, we will show you what and how to use blocks to edit or build your webpage.
Introduction
When you start building your page with JOeve Builder, there will be a blank page with nothing on it.
Start building your page by clicking on the + sign on the middle of the page.
After you clicked on the + sign a window will pop up on your screen, this is the blocks library to help you starts with your webpage.
Blocks Style & Categories
Lets start with the panel on the left.
This is the blocks style and categories panel, you can choose different type of blocks such as Hero header, Features, Contact, Gallery, Call to action button, blocks with text, your company’s team intro blocks, pricing table blocks, testimonial blocks, website header blocks and website footer blocks. The blocks are also separated into 2 styles, light background options and also dark background options.
Layouts, Blocks, Saved Blocks & Global Blocks
- Layouts tab from the top panel let you choose some ready made webpage template to quick start your webpage design.
- Blocks tab is the default tab when you launch the pop up panel, you can start building your webpage by selecting the blocks from the library.
- Saved Blocks is the library of your saved blocks, you can save the blocks which you edited and use them in other pages in your website.
- Global Blocks are blocks that you wish to appear globally accross your entire website, you can make header and footer blocks as global blocks
Blocks Library
There are wide selections of blocks in the library, they are easy to work with, we will show you how to use and edit your webpage from the blocks.
How to edit from blocks
The image highlighted in light blue is a block, we can also label it as section, a complete webpage was made with multiple blocks, from header, hero,
features to footer, the highlighted section in the picture is Hero’s block. Its the 1st section of the website below the header, usually we will place some slider or
very nice picture here to attract viewer from your website.
Block Toggle Switch / Button
When your mouse cursor hover over a block, the block settings toggle switch will appear on the top right corner of your block
Block settings toggle switch
The 1st icon on the Block settings panel are “Block”, you can set the block to global block
with the toggle and also make the block a slider.
This is the backgrond icon, you can set your block background to picture, video or map
in this setting, the filter tab is for changing the colour effect settings to the background.
Add colour overlay to your background image with this setting
You can save block for use in other pages or sections
Settings tab: set full width or boxed layout to your block with this setting.
Settings tab: You can set the block height in this setting too, custom let you set your own height,
Full height is the whole image covered the screen of your browser.
You can duplicate block with this tab.
You may also delete block from the panel
Create New Block
Create new block by click on the “Add a blank block” template.
Working on New Block
Click on the + to add elements to your block.
Drag & drop the row element to the new block created (This is depend on your preference) This is just a sample.
Drag & drop the Text element to the left column, edit the text (This is based on your preference) This is just a sample.
Change the text by click on the text, drag & drop a Form element under the edited text.
Drag & drop the Map element to the right column of the block. Wholla, a brand new block has been created,
you can edit the address of the map by click on the map element panel.
Remember to click Publish or Update after finish editing.