> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/multitab-image.md). # Multitab Image **Multitab Image** is a section that allows you to display image galleries in tab format, with customizable grid layout and detailed styling options for the tab headers. This section automatically loads images based on the navigation menu and displays them in a responsive grid.
## There are 2 ways to add a Section to your store ### **1. Add a pre-made section from our demo?** [Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md) ### **2. Add the Multitab Image section** manually**?** * From your Shopify admin, go to **Online Store ->** **Themes**. * Find the theme that you want to edit, and then click **Customize**. * In the **Templates ->** **Add section ->** choose **Multitab Image.**
## Multitab Image - Settings Guide This guide explains all available settings for the **Multitab Image** in order from top to bottom as they appear in the Theme Editor. ### Block Types Supported * `multitab-image-row` - Tab row blocks (max 6 blocks)
### Settings Guide
Multitab Image - Settings Guide #### Layout Settings | Setting | Type | Default | Options | Description | | ----------------- | --------------- | ------------ | ---------------------- | ----------------------------- | | `section_width` | select | "page-width" | page-width, full-width | Section container width | | `columns_desktop` | range | 4 | 1-6 (step: 1) | Number of columns on desktop | | `columns_mobile` | select | "2" | 1, 2 | Number of columns on mobile | | `rows_gap` | range | 8 | 0-100px (step: 1) | Vertical gap between tab rows | | `alignment` | text\_alignment | "center" | left, center, right | Content alignment | #### Tab Header Settings | Setting | Type | Default | Options | Visibility | Description | | ------------------ | --------------- | --------- | ------------------------------ | ----------------------- | ----------------------- | | `button_alignment` | text\_alignment | "center" | left, center, right | - | Tab buttons alignment | | `button_gap` | range | 8 | 0-100px (step: 1) | - | Gap between tab buttons | | `style_class` | select | "button" | button, button-secondary, link | - | Tab button style type | | `button_style` | select | "default" | default, outline, custom | `style_class != 'link'` | Button style variant | #### Custom Button Styling (Button/Button-Secondary) | Setting | Type | Default | Range/Options | Visibility | Description | | ---------------------- | ------ | -------------------------- | --------------------------------------------------- | --------------------------------------------------- | ------------- | | `button_border_width` | range | 1 | 0-4px (step: 1) | `button_style == 'custom' && style_class != 'link'` | Border width | | `button_border_radius` | range | 100 | 0-100px (step: 1) | `button_style == 'custom' && style_class != 'link'` | Border radius | | `button_type_font` | select | "var(--font-body--family)" | body, subheading, heading | `button_style == 'custom' && style_class != 'link'` | Font family | | `button_type_size` | select | "1.2rem" | 10px-28px | `button_style == 'custom' && style_class != 'link'` | Font size | | `button_font_weight` | select | "default" | thin, light, regular, medium, semibold, bold, black | `button_style == 'custom' && style_class != 'link'` | Font weight | | `button_text_case` | select | "default" | default, uppercase | `button_style == 'custom' && style_class != 'link'` | Text case | #### Button Shadow Settings | Setting | Type | Default | Range | Visibility | Description | | ---------------------------------- | ----- | ------- | --------------------- | --------------------------------------------------- | ------------------------ | | `buttons_shadow_horizontal_offset` | range | 0 | -12 to 12px (step: 1) | `button_style == 'custom' && style_class != 'link'` | Horizontal shadow offset | | `buttons_shadow_vertical_offset` | range | 0 | -12 to 12px (step: 1) | `button_style == 'custom' && style_class != 'link'` | Vertical shadow offset | | `buttons_shadow_blur` | range | 0 | 0-20px (step: 2) | `button_style == 'custom' && style_class != 'link'` | Shadow blur radius | #### Link Style Settings | Setting | Type | Default | Options | Visibility | Description | | ------------------------- | -------- | --------- | --------------------------------------------------- | ------------------------------------------------- | -------------------------- | | `button_type_size_link` | select | "1.2rem" | 10px-28px | `style_class == 'link'` | Link font size | | `button_font_weight_link` | select | "default" | thin, light, regular, medium, semibold, bold, black | `style_class == 'link'` | Link font weight | | `case` | select | "none" | none, uppercase, capitalize | `style_class == 'link'` | Link text case | | `wrap` | select | "pretty" | pretty, balance, nowrap | `style_class == 'link'` | Link text wrapping | | `font_style` | select | "normal" | normal, italic, oblique | `style_class == 'link'` | Link font style | | `link_underline` | checkbox | false | - | `style_class == 'link'` | Show underline | | `link_hover_underline` | checkbox | true | - | `style_class == 'link'` | Show underline on hover | | `link_reveal` | checkbox | false | - | `style_class == 'link'` | Reveal effect on hover | | `custom_color_underline` | checkbox | false | - | `style_class == 'link'` | Use custom underline color | | `link_underline_color` | color | "#000000" | - | `custom_color_underline && style_class == 'link'` | Custom underline color | #### Content Settings | Setting | Type | Default | Range | Visibility | Description | | --------------------------------- | -------- | --------- | ----------------- | ----------------------- | --------------------------------- | | `content_horizontal_gap` | range | 8 | 0-100px (step: 1) | - | Horizontal gap between grid items | | `content_vertical_gap` | range | 8 | 0-100px (step: 1) | - | Vertical gap between grid items | | `show_tab_item_content` | checkbox | true | - | - | Show item titles below images | | `button_type_size_link_content` | select | "1.2rem" | 10px-28px | `show_tab_item_content` | Item title font size | | `button_font_weight_link_content` | select | "default" | thin-black | `show_tab_item_content` | Item title font weight | #### Image Padding Settings | Setting | Type | Default | Description | | -------------------------- | ----- | ------- | ------------------------------ | | `padding-block-start-img` | range | 0 | Image top padding (0-100px) | | `padding-block-end-img` | range | 0 | Image bottom padding (0-100px) | | `padding-inline-start-img` | range | 0 | Image left padding (0-100px) | | `padding-inline-end-img` | range | 0 | Image right padding (0-100px) | #### Border Settings | Setting | Type | Default | Options | Visibility | Description | | ---------------- | ------ | ------- | ------------------ | ------------------ | -------------- | | `border` | select | "none" | none, solid | - | Border style | | `border_width` | range | 1 | 0-10px (step: 0.5) | `border != 'none'` | Border width | | `border_opacity` | range | 100 | 0-100% (step: 1) | `border != 'none'` | Border opacity | | `border_radius` | range | 0 | 0-100px (step: 1) | - | Border radius | #### Appearance Settings | Setting | Type | Default | Description | | -------------- | ------------- | ---------- | -------------------- | | `color_scheme` | color\_scheme | "scheme-1" | Section color scheme | #### Section Padding Settings | Setting | Type | Default | Description | | --------------------- | ----- | ------- | -------------------------------- | | `padding-block-start` | range | 0 | Section top padding (0-100px) | | `padding-block-end` | range | 0 | Section bottom padding (0-100px) |
## Multitab Image Row This block can only be added within this section. It allows users to select a title and a menu to display the items inside.
Multitab Image Row - Settings Guide #### Multitab Image Row Block | Setting | Type | Description | | -------------- | ---------- | -------------------------------------- | | `title_header` | text | Tab header title/label | | `menu` | link\_list | Navigation menu containing image links |
#### **Zero design skills? Create professional mockups, logos & videos for your store in seconds.** [Create... in seconds](https://1.envato.market/c/3093631/3323999/4662)**​**
## Need More Help? If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — we’ll get back to you within 24 hours. Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Halothemes Community
Join HaloThemes Community