Understanding Blocks and Elements

Understanding Blocks and Elements

Jan 17, 2023

GroovePages websites are built on "Blocks" and "Elements". An element is any single item you see on the page from a headline, to a button, to a video. A block is a single layout of those elements.

Elements are found in the sidebar (top icon as shown clicked below). Once you find an element you want on the page, simply click and drag it to the canvas.

If the element ends up in the wrong spot, use the Drag icon (shown below) to move it to a different spot.

Every element has different features, but after selecting one on the canvas, the most important settings can be found right above it. Some elements in particular, like the video shown below, need to be configured by clicking the gear icon.

Blocks are added in two ways: directly in the canvas or by designing a Global Block first. The quickest way to get a new block is by selecting an existing block (click anywhere on the canvas, then at the bottom click "Block" marked #1 below). Then click the [+] button below or above that block (marked #2 below) to add a new one in that space.

Next you can choose from many available templates (as shown below), or an empty block. If you choose to start from scratch, the block you just added will not have any content in it. Instead, you will need to drag in elements (just as before) to create your new block. 

Global Blocks are blocks that you can save for use later. These are helpful if you plan on using the content within the block on more than one page. This could be contact information, footers, menus, or other features that are useful in multiple places. Click the Blocks icon in the sidebar (marked 1 below) and then the + icon (marked 2 below) to create a new one.

Your first option is whether to create a block from scratch (in the same way you would create on on the main canvas) or choose from one of Groove's many templates. Finally, edit the block to suit your needs (as shown below) and navigate back to the page you want it on by clicking Save & Exit (pointed out below).

Here you will choose to add a block again, but this time click the Global Blocks category (shown below). There, your new block will be waiting for you.

If at any time you need to edit your global block, go back to the Blocks icon and select to edit your block. Any updates made here will update the block on every page you already placed it.