Working with blocks

Blocks are the base for every page. Columns and elements can only be added to a page if there is a block on the page to put them in. In this article, you'll learn how you can add blocks and manage them.

How to add a block to your page

Each page is built using blocks. Blocks hold columns, which contain elements. Blocks and their settings are purple in the editor. You’ll find the Blocks button on the left-hand side of your screen.

The blocks section will open all the templates you can choose from. The foleon templates are divided into a couple of categories to help you find what you are looking for. If you want to see all the block templates, select All and scroll down.

Click on the block of your choice, hold, and drag it onto the page. You will see a purple bar where you can drop the block. You can just drop it wherever you see this purple bar, and it will be added to your page.

You can also select from team templates, where you can find the templates that you have saved.

Moving a block

Blocks can be moved by clicking on the drag icon (4 dots) and dragging it to another spot on the same page. The block can be moved to where the page is showing a purple horizontal bar.

All block settings explained

Every block has its own settings. They can be edited by hovering over the block and clicking on the gear icon in the purple settings bar in the top left corner of the block.

• General Settings

  From the general settings, you have a few options that are important for the general behavior of your block.

  💡 The full-height and full-width options are widely used for modern designs.

  

   

  • Block name - By default, the block name will be "block" followed by a numerical value. Here you can change the block's name, which could be handy when you are linking to the block. A hyphenated version will be shown in the URL.

    💡 Please note that existing links to this block will no longer work when you change its name.

  • Full-height - This option will set the block to the full height of the browser you are viewing the Foleon Doc in. Regardless of the size of this browser, the block will always be fullscreen. The full height option is mostly used on cover pages or pages that contain fullscreen videos, for instance.

  • Full-width - When activated, the columns within the block will be displayed over the full width of the block. When deactivated, the columns will have spacing on the left and right sides.

  • Spacing between columns - This is the space between the columns within a block. We have a set default margin between columns, which you can change here.

     

• Background

  The background of a block can be set in the Background settings. Here you have 5 different settings that style your background.

  

   

  • Background color - Here, you can set a background color that will display for your entire block.

  • Background type - You can choose between a background image and a background video. When you click on the thumbnail, you will be taken to the media library where you can select your desired media.

    If you have control over the dimensions of your background image or background video, we recommend the following resolutions for each view mode:

    - Desktop: 1920x1080 px
    - Tablet: 768x1024 px
    - Mobile: 525x934 px

    These dimensions will ensure that your video aligns in the best way possible with the responsiveness of the different screen sizes.

    ⚠️ When both a background color and a background image have been added, it can happen that the color shows quickly before the image is displayed. We advise choosing only one of the options to avoid this.

  • Background focus - With this functionality, you can control the focus of the background image. This will make sure that you can show the right part of the image on every device.

  • Background color overlay - This gives the background image a nice effect and is very useful when you have text on top of a background image. With a background color overlay, the text will probably be read more easily.

  • Background scroll speed - Changing the background scroll speed allows you to put focus on a certain area of the page, whether it's the background image itself or the element that sits on top of the image. Having a moving image is engaging to the viewer to break up lengthy content on a page. Learn more about this option in our article All About Background Scroll.

• Border

  A border can be set around the whole block or, when you turn all sides at once off, a border can be placed at all sides separately. The color and thickness of the border can be set here as well. 

  

• Visibility
  Do you want to create a block that is not visible on another device? In the visibility settings, you can turn off the visibility for desktop, tablet, or mobile.

  Want to learn more about the different view modes? Read our article Using view modes.

  

• Spacing
  Here you can set the spacing of the block. If you add more spacing, the columns will be further away from the borders of the block. You can choose to set all sides at once, or set every side separately.

  

• Animation

  With the Animation setting, you can use animations to make your block and its contents fly in, zoom in, fade in, etc. You can choose whether you want the block to animate once, or every time it appears on the screen.

  💡 We recommend to not overdoing it with animations. Your audience will have too much to look at and can’t focus on what is really important.

  

Change background

With change background, you can replace the background image of the block. Once you click it, a pop-up will appear that shows the Background section of the block settings. We have discussed these block settings in more detail above.

Add column

Each block contains up to 7 columns with your content elements. To add columns in a block, click on the +Add column icon below the purple block settings bar.

When adding columns to your block, you can’t always have them with an equal width. The grid has 24 compartments, which means you can have 2, 3, 4, or 6 equal columns by duplicating the column. This also means that having 5 or 7 columns with an equal width is not possible.

When you click to add a column, you’ll see an orange outline on your page and the Orange columns settings bar.

Read more about columns in our article Working with columns.

Save a block as a template

Saving a block as a template allows you to use that block across pages and overlays in all of the Foleon Docs in your account. For example, you can use the same header blocks on different spots in your Foleon Doc or reuse certain blocks in multiple Docs. To save a block, click on Save as template in the purple block settings bar.

Clicking the Save as template icon will open a pop-up screen where you can name, categorize, and set the availability of your template. We go over these options in detail below. Read all about templates in our article Save time and stay on-brand with templates.

Duplicate a block

A block can be duplicated by clicking on the Duplicate icon of the block settings. The copy will then appear on the same page.

Delete a block

When a block needs to be deleted, click on the trash can icon with the Remove label in the purple settings bar. A small pop-up will appear in which you are asked if you are sure you want to delete the entire block.