Designing a Columns Section

The Columns sections allows you to give your board more value by adding additional information, links and updates in a clear, concise and visual presentation.  

Here are a few ways to use the Columns section:

• Add your company’s value proposition

• Introduce your team members

Before you begin:

• Choose images to use in your Columns section. 
• The maximum file size for images is 25 MB.
• The following image file types are supported: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
• For icons, we recommend using circles or squares, because rectangles may cut the icon. 
• The recommended sizes for your Column section images are:  

Rectangle: Ratio 3:2; image size no smaller than 750px*500px (preferably this exact size)

Circle/Square: Ratio 1:1; image size no smaller than 750px*750px (preferably this exact size).    

• See the Image Size Guidelines for more details on image sizing.   

Designing a Columns section 

You can design the different elements of the Columns section to suit your own personal style. 

1. Select the board on which you wish to add a Columns section and open the Designer tab.   
2. Hover over the border between sections where you want to add the section and click Add Section. The Section Gallery opens and displays the section types.  
3. Select Feature from the section menu. Then, select the Columns template.
4. Click Add Section. The new Columns section appears on your board for you to design.
5. To design the Columns section, choose one of the section editors. 

• • Columns section editor - design the overall look of the section. 
  • Background editor - edit background settings, including images and padding
  • Text editor - edit the title and subtitle
  • Columns editor - design each column in the section 
  • Button editor - design the button style and settings 

Using the columns section editor 

Using the columns section editor, you can design the overall look of the section, such as the number of columns displayed, as well as the icon shape and size. You can also hide some elements using the visibility icons.

1. To open the columns section editor, click the columns edit button on the section toolbar.  
2. To hide the Title, Subtitle, and Button, disable the eye icon next to it. 
3. Set the Alignment of the title, subtitle and button.  
4. Under Columns, add or delete a column.                                                                   
5. Under Settings, configure the following settings of the columns area: 

• • Set the alignment of text in the column.
  • Select the number of columns per row.
  • Use the slider to set the size of the icons on the columns from small to large.
  • Select the icon shape. Preferably, choose the circle or square shape for icons.  
  • Choose a button style from the dropdown list. 

Note: By default, there is no cropping and the middle of the image is displayed. 

When choosing to crop an image, you can preview how the cropping will look in the Image Studio. In case you want to change the shape of an icon, the cropping is reset and you can start from scratch.

For example, if an icon is set to a circle, and you cropped it to change the default to focus on a specific detail in the image. If later you want to change it to a square, the cropping is reset as if you did not crop at all and you can see the whole picture and not the cropped picture. 

     6. Under Text, configure the following text settings for the columns:

• • Show or hide the title, subtitle, paragraph and background color.
  • If you selected to show the text, choose a color for the piece of text.  
  • Choose a Background Color for the columns.      

     7. To add Animation, select the checkbox. 

Designing the section background 

You can design the background with a unique background color, image or video and update padding settings. 

1. To open the background editor, click the background edit button on the Columns section toolbar.   
2. To edit the background elements, see the article Using the Background Editor.  

Editing the Columns section title and subtitle  

You can use the text editor to edit the Columns section title and subtitle.  

1. To open the text editor, hover over the text of the title or subtitle in the Columns section and click the text edit button.    
2. To format the text elements, see the article Using the Text Editor.

Designing a column 

You can design each individual column in the section by adding an icon image, and adjusting its settings. You can also enter text for the title, subtitle, short paragraph, and button on each column.   

1. To edit a column, hover over the column you wish to design and click the columns edit button or double-click on the column. 
2. To choose an icon image, open the Image gallery. For more details, see the help article Designing Images.  
3. Enter text for the Title, Subtitle. Paragraph and Button. You can only enter text for these if you made them visible in the widget editor. 
4. To choose an action to be taken when clicking the button, click Actions. To configure the button settings, read the article Designing buttons and forms.   

Designing a call-to-action (CTA) button  

You can design the CTA button displayed on the Columns section, including the button style and the type of action taken when it is used.  

1. Hover over the CTA button and click the edit button or double-click on the button.  
2. To style the button elements, see the article Designing buttons and forms.