> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://doc.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Blum 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. Custom Section is available across all eComX themes (Blum, Normcore, Shine, and Electro) with consistent functionality and setup procedures. For demonstration purposes, this article uses the Blum theme as an example. ## Accessing Custom Section From any page, please click on ‘**Add Section**’ in the left side bar, then select ‘**Custom Section**’. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900957972/ee9cc46cd3e243859c6347dbe463/SalesHunterThemess-Themes-3.png?expires=1792401300&signature=5e6fd5378544409458b19a482dd0524099a179fb785a8de73d5dbd4a557c093d&req=dSknFsB7mohYW%2FMW1HO4zQyfFz0FfBtvX%2FmW1d5x7Hgo1B2l%2Bn74%2BZYlCajb%0Ay6JcDBEqZ2s75oqM1do%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/3/f/4/2/3f425f9502365800/281ca79f-c3c1-4e6f-b109-492e20_1xwlcon.png) 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 [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900957977/607837b75b389db5c75797db4ca3/5.png?expires=1792401300&signature=c33bedf906992ddba669493b95795850bcab209e254181eef6b8c40e36da76b9&req=dSknFsB7mohYXvMW1HO4zZnZR3uYcKzQ%2BiX9OGzH7msm0SEwZZxYAOicd7FX%0A8SzYgb4%2FoPJorZze8RE%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/2/3/0/4/23044b440d7ea200/ad74fd91-d160-4c3e-9b81-e59a95_1wfrqkv.png) ## 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 simple custom section with a heading, description, and button, each using different layout settings. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900957983/b0c84923554eea208307e6c515bd/6.png?expires=1792401300&signature=3f629057ec0aeea21fe2413cd1e2bda522bdbbdf5641d751e131f58c6bcd57d6&req=dSknFsB7mohXWvMW1HO4zRaM72EY6p4w2aCWjcI0uGBKBFg5ltXgfBT6S2Ev%0A3G7saeJ759%2BkGQ60uuo%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/d/3/3/f/d33f9ad90c8f1800/ce7fbbea-b796-41e9-8296-c049c8_1fxs7hw.png) [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900957989/c38eb7a817b26ef605ea7f135994/7.png?expires=1792401300&signature=293cc80b89736a3da1dd1d8e6418c4437a5053ed106765a25fc609790b3ca471&req=dSknFsB7mohXUPMW1HO4zTlgwRyfWyUhZ8fLUIG872beLatiF1gSl%2B6FtMdV%0AhdgtAsuztlBfaOiUKWQ%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/1/e/3/2/1e32996c838b7b00/ac906433-5d14-4e21-bcaf-d03002_161y204.png) [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900957999/5f4b4a61b6b5b622ef50f6a77ce6/9.png?expires=1792401300&signature=718cbf4aadbe393406d8cddebd828809ad92af71cbc94664974f6840fab1e1d2&req=dSknFsB7mohWUPMW1HO4zbfB73vEvkFzE%2FATJ7PStmeGYUL7t%2Fb5ZCHy8XqC%0A12Ea0P%2BGvscOmWcmBWE%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/f/0/d/0/f0d014c995f06000/83ecc9b3-6515-41dc-93c5-95347b_151rkid.png) 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. You can add up to 7 levels of Group inside the Custom Section [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958001/4e3f3ca0253edfa6fd81324a264f/SalesHunterThemess-Themes-6.png?expires=1792401300&signature=f5fe6a5bdef1b76ce5ad0e4deca8e243c53f743695891442df59149a68f12b6d&req=dSknFsB7lYFfWPMW1HO4zWMTmb4SMcrtBcAm5BLwQXsiO9wZUaod818vPxby%0Af%2BwYwPb5KRAhhVYEhE8%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/8/4/4/f/844fb1215126a000/2ad1ba29-0d2b-4d16-8fe9-b719c0_1cv6u0g.png) _(An example of a section with 4 levels of Group)_ 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**. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958007/ccf669c33ce6a5de622cd6ae4861/8.png?expires=1792401300&signature=e0c165c19182c21029f061b3877a7dae58d13f70f0ae9c27987ab4e8f57a521e&req=dSknFsB7lYFfXvMW1HO4zW58BbX151LtGYz7B4RvSrY3O9CxgIJ%2Feg3tdwjB%0A%2F06i7I%2F4KR2SfTbTGBI%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/5/0/0/2/5002625845314800/b872845b-8892-433f-9fcc-71f9e1_f1v09i.png) ### Padding Change the padding inside the Group: **Top**, **Bottom**, **Left**, and **Right** (0px minimum, 100px maximum) [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958015/c70d0ef3a97d318eca09a8c1cf20/SalesHunterThemess-Themes-7.png?expires=1792401300&signature=4e3b625b12e6929d6223b59cfe226b6f31dfcedc7fcb526e239e5dd69d863228&req=dSknFsB7lYFeXPMW1HO4zYnXDCPhzRtgR43SNkyxhltirPBulNiydz5YfsDv%0AwlPMADhqf3Q8qQ%2FYQpE%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958015/c70d0ef3a97d318eca09a8c1cf20/SalesHunterThemess-Themes-7.png?expires=1766544300&signature=3118f83b55db03ce92674ba300501ae0417475285011e0d5b92a0ae9f32ab342&req=dSknFsB7lYFeXPMW1HO4zYnXAyfgyR5gR43SLEi3j2FzxaGGFEauBwJ%2BBIn3%0A3TNs%0A) ### 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** [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958021/0f101cb3744f3f1e3faf8fa4648f/9-1.png?expires=1792401300&signature=ed46ca4c33a8436c5cc6db718be7f4a0f71e9e3f93d0d8d483d945794cb592d0&req=dSknFsB7lYFdWPMW1HO4zSUutGgYHakX4zLq%2BV3hU6Lk3FxLhS55rtOrIU9e%0ANVNbW1WsvSUGb2xLrvE%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958021/0f101cb3744f3f1e3faf8fa4648f/9-1.png?expires=1766544300&signature=31098e252926ecb05ee429b9c6bb961fa6d6dce6e2a479aab775bc8adf8ee1a8&req=dSknFsB7lYFdWPMW1HO4zSUuu2wZGawX4zLq41nnWpggMv1GWveugk6Cz1Be%0A8pqa%0A) 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** [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958026/904bb015780ac8e1078ab6466d2b/10.png?expires=1792401300&signature=74eec7c0a1611bb3cabd7827d7bc9f77f1a99956ffe1aa797aef34208d3f5632&req=dSknFsB7lYFdX%2FMW1HO4zcKRSET2NWTy%2FTf%2BMC6VuCY6dCiRmX%2FM3gd%2Bth8i%0A8q1W2oDFVjcRL0B4H6A%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958026/904bb015780ac8e1078ab6466d2b/10.png?expires=1766544300&signature=1874d637c54c911360f42e2c1b8587f3f155594cc072d0db83f583c01f197f3a&req=dSknFsB7lYFdX%2FMW1HO4zcKRR0D3MWHy%2FTf%2BKiqTsRzgcGz%2F%2FYxiIehAX%2FTV%0Al9C5%0A) 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**. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958029/f16a712e9ce829dcdf42b9160fa0/11.png?expires=1792401300&signature=9a238ed2dbd9bfaae11665461e8b8d36a4076b292bea3bbebc3ef7a89937dede&req=dSknFsB7lYFdUPMW1HO4zdsyMW8JcgKQnuC77qRsNHkgxXHFuHy33Vf9UKH8%0ACFDO%2BbmRMbsJS2I1nYI%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958029/f16a712e9ce829dcdf42b9160fa0/11.png?expires=1766544300&signature=044c4ecaf21b64737ad111c5fc98d905fe4de7bb74f6fd00d5c679719d06d58b&req=dSknFsB7lYFdUPMW1HO4zdsyPmsIdgeQnuC79KBqPUPnhN8WIGN9hbtL7kZ6%0ASkP%2B%0A) **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. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958042/7260688b2b487152127faab98f4d/SalesHunterThemess-Themes-5.png?expires=1792401300&signature=188c16e8b0eedebec6d5efb7bd45d743a1e29a0e8e040661983f40513a4b5920&req=dSknFsB7lYFbW%2FMW1HO4zaOOJxzyjs8tp6veBLcCzNR8s%2BjWrGizvlxD6H%2B1%0A6mVJq80ZEbAOJ5kSZds%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958042/7260688b2b487152127faab98f4d/SalesHunterThemess-Themes-5.png?expires=1766544300&signature=f9e278c118abfcdcdb2dafe41806d292949ef4d2328a92fb716cce02924f86d5&req=dSknFsB7lYFbW%2FMW1HO4zaOOKBjzisotp6veHrMExe4lAeUpF19QkLlLVObl%0AqyBz%0A) Another example of using Custom Section: [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958044/dbb2abbaf0c216a16c68247935a5/SalesHunterThemess-Themes-8.png?expires=1792401300&signature=b5063b03685d8783281aaacde2770046b60cf78fefe99476ad14afaede61a0f9&req=dSknFsB7lYFbXfMW1HO4zTcKqjQ2m2w47S4Q%2BCPFRtDWbdGOQXqV4yFXsHHw%0AxlrfJGtMBfphAndIwx8%3D%0A)](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1900958044/dbb2abbaf0c216a16c68247935a5/SalesHunterThemess-Themes-8.png?expires=1766544300&signature=a21dc01d7ea381e13893011168eb768b74c8d2b17e22029dd15239b289c3d9af&req=dSknFsB7lYFbXfMW1HO4zTcKpTA3n2k47S4Q4ifDT%2BrpMRso8ZJAt9vcXO59%0AbfjM%0A)