Designing a Columns Section BuyEx3.0

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

• Give each card a second layer: with flip cards, the front of a card carries a short headline and icon, and the back reveals the detail, proof point or call to action.

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 separately, including icon images and text settings

• 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 design the text of each column’s title, subtitle and paragraph, such as the font size and type.

To open the columns section editor, click the columns edit button on the section toolbar.

1. To hide the Title, Subtitle, and Button, disable the eye icon next to it.

2. Set the Alignment of the title, subtitle and button.

3. Under Columns, add or delete a column.

4. Under Flip cards, turn on the toggle to give every card a back side. The Editing side selector then appears. See Designing flip cards below.

5. Under Settings, configure the following settings of the columns area:

1. Set the Columns Alignment to align the columns relative to the page.

2. Set the Content Alignment to align the text inside each column.

3. Set the Icon Alignment to align the icon inside each column.

4. Select the maximum number of columns per row.

5. Use the slider to set the size of the icons on the columns from small to large.

6. Select the icon shape. Preferably, choose the circle or square shape for icons.

7. Choose a button style from the dropdown list.

8. Use Show shadows to show or hide shadows if shadows are defined in the theme object.

6. Under Text, configure the following text settings for the columns. These settings apply to all columns.

• For Title, show or hide the title. If you selected to show the title, select the font size and type, and color.

• For Subtitle, show or hide the subtitle. If you selected to show the subtitle, select the font size and type, and color.

• For Paragraph, show or hide the paragraph text. If you selected to show the text, select the font size and type, and color.

7. Choose a Background Color for the columns.

8. To add Animation, select the checkbox.

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.

Designing flip cards

Cards in a Columns section can flip to reveal a back side. Each card has a front and a back. Each side has its own content (icon, title, subtitle, paragraph and button) and its own design settings, so the back can look different from the front. On the live board, visitors flip a card by hovering over it with a mouse or by tapping it on a touch screen.

1. Open the columns section editor.

2. Under Columns, turn on the Flip cards toggle. The Editing side selector (Front / Back) appears below it and stays pinned to the top of the editor while you scroll.

The first time you turn on Flip cards, the back of every card starts as a copy of its front, including its design settings, so nothing looks empty. From then on the two sides are independent.

3. Use Editing side to choose which side you are designing. The selector controls three things at once: which side every card on the canvas shows, which side the Settings group edits, and which side the Text & Background group edits.

4. Design the back side the same way you design the front. These settings are independent for each side:

• Visibility of the icon, title, subtitle, paragraph and button

• Icon size and shape, including the mobile icon size

• Content alignment and icon alignment

• Button style

• Fonts, text colors and background color

These settings are shared by both sides: the section title, subtitle and button; the list of cards (add, delete and reorder); the number of columns per row; the alignment of the row of cards; shadows; and animations.

5. To edit the content of a card’s back side, switch Editing side to Back and open the card editor (see Designing an individual column). A tag at the top of the card editor shows which side you are editing.

Note: While Flip cards is on, the hover-based image animation and card animation options are disabled, because hovering is what flips the card.

Turning Flip cards off returns the canvas to the front side and hides the selector. The back side is kept, so turning it back on restores everything.

How flip cards behave in Preview and on the live board

• Cards flip when a visitor hovers over them with a mouse, and when they are tapped on a touch screen, including touch-screen laptops. With a keyboard, press Enter or Space on a focused card.

• The hover area is the whole card, so the flip does not flicker at the edges.

• Entering Preview always starts from the front side, even if the Designer was showing the back.

• Both sides share the same card height (the taller side wins), so rows stay aligned.

• The hidden side is not read by screen readers, and its button is only clickable while it is showing.

• On a Running Carousel, hovering already pauses the movement, so the flip happens on a still card.

Flip cards are available on the Columns, Multi Tab Columns, Carousel and Running Carousel sections. Content carousel sections, which show content items rather than cards, do not flip.

Designing an individual column

You can design each individual column in the section by adding an icon image, and adjusting its settings. If the logo image does not fit perfectly in the selected icon shape, you can use the Fit/Fill button to resize images to control the position of the image in the shape.

Additionally, you can edit the text for the title, subtitle, short paragraph, and button on each individual column. For example, you can change the color of a title, add a link or add a bullet or numbered list to the paragraph text of one column only.

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.

When Flip cards is on, a Front side or Back side tag at the top of the card editor shows which side you are editing. Text, image and button edits apply to that side only. To switch sides, use the Editing side selector in the columns section editor.

2. To choose an icon image, open the Image gallery. For more details, see the help article Designing Images.

3. Use the Fit/Fill button to automatically adjust the image.

• Fill - adjust the image so that the icon shape is filled and the image ratio is maintained.

• Fit - adjust the image so that the entire image fits in the icon shape.

4. Use the editing toolbar to edit the text for the Title, Subtitle, and Paragraph. For example, you can make a title bold or italic, add a link or change its color.

You can only edit the text if you made them visible in the section widget editor.

5. Enter text for the Button.

6. To choose an action to be taken when clicking the button on the column, click Actions. To configure the button settings, read the article Designing buttons and forms.

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 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.