Custom Section

About Custom Section

If you want to create a special layout that is not available in Blum, Custom Section can help! This is a powerful section that allows you to design your own layout by adding and arranging individual blocks. No page builder needed.

This article will guide you through using the Custom Section, with a real example included at the end.

Accessing Custom Section

From any page, please click on ‘Add Section’ in the left side bar, then select ‘Custom Section’.

By default, one Heading block and one Description block are added.

Adding Blocks

Under the Custom Section, click Add block to open a list of available block types:

• Basic: Button, Button Group, Countdown Timer, Icon, Static Page

• Custom: Custom HTML, Custom Liquid – add HTML or Liquid code

• Layout: Group – groups multiple single blocks (e.g., button, heading, video, custom HTML). Blocks inside a Group inherit the Group’s settings instead of the parent Custom Section

• Media: Image, Video

• Typography: Description, Heading, Subheading

Configure Custom Section

General

You can choose the color scheme for the custom section, set an overlay opacity, and enable fullwidth content.

Media

Add a background to the section

• None: Uses the color background from the selected color scheme
• Image
• Video: There is an option to enable video loop

Layout

Separate settings are available for desktop and mobile layouts:

• Height: Set the section height

• Direction: Choose Vertical or Horizontal for arranging blocks

• Content Alignment: Choose Left, Center, Right, or Space Between (only available when direction is horizontal)

• Content Position: Set the position of content in the section

• Gap: Adjust spacing between blocks

Example: Below are variations of a custom section with a heading, description, and button, each using different layout settings.

You can create multiple layout variations using a single Custom Section.

Padding

Adjust the top and bottom padding of the section (0px minimum, 100px maximum).

Prominent badge

Add an interactive badge to the Custom Section, just like in any other section in the Blum theme.

Configure Group block

The Group block is a special block within the Custom Section that allows you to create more complex layouts.
A Group can contain other blocks, and all blocks inside it inherit the Group’s settings instead of the Custom Section’s settings.

Similar to the Custom Section, the Group block includes General, Media, and Layout settings. Additionally, there are specific parameters to note:

Size

Adjust the width and height of the Group: Fill, Fit, or Custom.

Padding

Change the padding inside the Group: Top, Bottom, Left, and Right

Link

Add a link to the Group, which will apply to the entire Group. If a Button block is added inside the Group, this link will be inactive.

Real example of using Custom Section

Example: A section with an image on the left and content on the right. The content includes a heading, a description, and a button, with a video placed below them.

Step 1: Design the layout and define the blocks you need

We have two main blocks arranged horizontally:

• Image on the left

• Content and video on the right that are arranged vertically

To achieve this, we will need a Group block for the right side, and set its direction to Vertical.

Step 2: Add blocks inside the Custom Section

The direction is vertical by default.

Step 3: Adjust the content direction

In this case, the direction of Custom Section is Horizontal and the direction of Group is Vertical.

Step 4: Adjust the content alignment, position, gap, and spacing

Set these properties according to your design requirements.

Step 5: Add your content

Upload the image and video, update text content, and add any necessary links.

Step 6: Check the mobile view

Preview the section on mobile to make sure it displays properly.