Introduction to Blocks

One of the web design concepts employed by GroovePages is the use of "Blocks". Blocks are entire sections of a web page; ie a header, a footer, a contact form, an image gallery, etc.

In GroovePages, blocks are always horizontally oriented and expand across the full with the browsers viewport. When used inside a web page, blocks are stacked on top of one another, hence it's impossible to have multiple blocks next to another.

You will find all available blocks in the sidebar on the left side of the page builder:

There are no limitations on the number of blocks that can be placed within a web page.

To use a block in one of your page, simply choose the block you want to use, click and drag it into the canvas. Release the mouse button to the drop the block on the desired location (you will see a grey place holder on the canvas to indicate where the block will appear). Alternatively, you can simply click any block in the sidebar to place it at the top of the page you're currently editing on the canvas.

Block ordering on the canvas

It is possible to change the order in which blocks appear on the canvas. When hovering over a block on the canvas, you will notice a white button, with a "drag" icon appear in the top right corner of the block:

Click on the drag icon and keep the mouse button pressed as you drag the entire block over to its new location on the canvas (again, you'll see a place holder to indicate where the block will appear once released) and release the mouse button to drop the block in its new location.