Creating a custom page on your Springly site

Before starting

Springly lets you create a complete website with customized pages. They allow you to freely arrange pre-formatted blocks (text, images, etc.) on a layout grid.

Find out more in this article:

• How to create a custom page
• Understanding the editing page
  • Drag-and-drop system
  • Options linked to each block
  • Group blocks
  • Page version

How to create a custom page

To create a custom page, go to Site internet > Menus and pages. Then click the button New page, at the top right corner.

This will open a small window, where you can name the page and choose the visibility options:

You'll find the new page in the "drafts" area. There, click on the icon and on Edit page to start editing the page content. 

Once it's ready for publication, simply drag it to the menu of your choice in the center of the screen to put it online.

Understanding the editing page

The editing page features a palette of tools on the left-hand side of the screen. This palette is made up of several blocks that you can easily drag onto the central checkerboard.

It is proposed to insert:

• Text blocks
• Graphic elements : pictures, galleries, dividers, videos
• Redirect buttons
• Files that visitors can download
• Contact forms
• Your organization agenda
• Your social networks
• Blog posts
• Shortcuts to events
• Shortcuts for donations
• And iframe blocks to insert maps or other pages from an external site

Springly also lets you insert backgrounds into your personalized page. These backgrounds will give your content a more professional, dynamic and personalized look.

Drag-and-drop system

Blocks can be easily placed on the checkerboard, to start building your page:

• Take a block and drag it onto the checkerboard:
  • Green squares indicate that it is possible to position the element.
  • Red squares indicate that the space is already occupied by another element. It is not possible to superimpose two elements. Move your element until you find a free space.
• Once the block has been placed on the checkerboard, move and resize by stretching the block edges,
• You can then start working specifically on this block.

Options linked to each block

Each block has options: add frame, background color, delete, etc. These options appear on the left of your screen when the block is selected.

You can therefore manage the options of each block by selecting it: just click on it.

Once you've finished making your changes, click on , in the top left corner, and modifications will be applied immediatly to the public area. You can also see the rendering of the page in question by clicking on Go to website.

Group blocks

To customize the responsive display on cell phones, we'll need to make an adjustment to group the Text block, as well as the Image block, with its correspondent buttons:

1. To group blocks, hold down the Ctrl key on your keyboard
2. Then click on the blocks that belong together. 
3. Once the blocks have been selected, you'll see the option to group blocks in the left-hand menu.

After manipulation, you'll be left with a single block (as shown below). You can unbundle them if necessary.

Here is the final rendering on tablet and cell phone:

Page version

Each time you save a page, Springly saves it as a new version, allowing you to restore a previous one if necessary. Note that you can only access the 5 most recent.

You can go a step further and find out how to manage all blocks:

• Add a text block
• Add an image block
• Add a Facebook / Twitter block
• Add a Contact block
• Add a file block
• Add a video block
• Add a calendar block
• Add an iframe block