← Back to Sections
3 Column and Image
A versatile 3-column content section featuring a prominent image or video alongside organized text content. Perfect for showcasing product details, service features, team highlights, or any content that benefits from a visual-text combination layout.
Key Features:
- Split layout with large media area (45%) and organized content columns (55%)
- Video support with autoplay, loop, and muted playback - video takes precedence over images
- Three equal-width columns for subheadings and descriptive paragraphs
- Comprehensive responsive typography with clamp() scaling for perfect mobile display
- Rich text support for all content areas with full formatting control
- Flexible color system: inherit theme colors or apply custom background/text colors
- Mobile-responsive design that stacks media above content and converts columns to vertical layout
- Extensive spacing and layout controls for precise visual adjustment
- Image opacity controls and lazy loading options for performance optimization
Perfect for: Product ingredient breakdowns, service feature highlights, team member showcases, process explanations, benefit comparisons, or any content requiring visual impact alongside organized informational columns.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding: {{ section.settings.section_padding_top }}px {{ section.settings.section_padding_horizontal }}px {{ section.settings.section_padding_bottom }}px;
}
.section-{{ section.id }} .bc-3-column-section {
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-3-column-inner-div {
max-width: 95%;
gap: {{ section.settings.content_gap }}px;
justify-content: center;
align-items: center;
display: flex;
}
.section-{{ section.id }} .bc-3-column-image {
width: 40%;
aspect-ratio: 1 / 1;
object-fit: cover;
opacity: {{ section.settings.image_opacity }}%;
}
.section-{{ section.id }} .bc-3-column-video {
width: 45%;
aspect-ratio: 1 / 1;
object-fit: cover;
opacity: {{ section.settings.video_opacity }}%;
}
.section-{{ section.id }} .bc-3-column-right-div {
width: 55%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: {{ section.settings.content_vertical_offset }}px;
display: flex;
}
.section-{{ section.id }} .bc-3-column-heading * {
font-size: {{ section.settings.heading_size_fallback }}rem;
font-size: clamp({{ section.settings.heading_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.heading_size }}rem) !important;
line-height: {{ section.settings.heading_line_height }};
max-width: {{ section.settings.heading_max_width }}ch;
margin-bottom: {{ section.settings.heading_bottom_margin }}px;
text-align: {{ section.settings.heading_alignment }};
}
.section-{{ section.id }} .bc-3-column-subheading * {
font-size: {{ section.settings.subheading_size_fallback }}rem;
font-size: clamp({{ section.settings.subheading_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.subheading_size }}rem) !important;
line-height: {{ section.settings.subheading_line_height }};
max-width: {{ section.settings.subheading_max_width }}ch;
text-transform: uppercase;
margin-bottom: {{ section.settings.subheading_bottom_margin }}px;
}
.section-{{ section.id }} .bc-3-column-paragraph * {
font-size: {{ section.settings.paragraph_size_fallback }}rem;
font-size: clamp({{ section.settings.paragraph_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.paragraph_size }}rem) !important;
line-height: {{ section.settings.paragraph_line_height }};
max-width: {{ section.settings.paragraph_max_width }}ch;
}
.section-{{ section.id }} .bc-3-column-left-column,
.section-{{ section.id }} .bc-3-column-right-column {
width: 33%;
}
.section-{{ section.id }} .bc-3-column-center-column {
width: 34%;
}
.section-{{ section.id }} .bc-3-column-right-div-columns {
gap: {{ section.settings.columns_gap }}px;
display: flex;
}
@media screen and (max-width: 1200px) {
.section-{{ section.id }} .bc-3-column-inner-div {
max-width: 100%;
flex-direction: column;
}
.section-{{ section.id }} .bc-3-column-right-div {
width: 100%;
}
.section-{{ section.id }} .bc-3-column-heading * {
text-align: center;
margin-top: {{ section.settings.heading_top_margin_tablet }}px;
}
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding: {{ section.settings.section_padding_top_tablet }}px {{ section.settings.section_padding_horizontal_tablet }}px {{ section.settings.section_padding_bottom_tablet }}px;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding: {{ section.settings.section_padding_top_mobile }}px {{ section.settings.section_padding_horizontal_mobile }}px {{ section.settings.section_padding_bottom_mobile }}px;
}
.section-{{ section.id }} .bc-3-column-image,
.section-{{ section.id }} .bc-3-column-video {
width: {{ section.settings.media_width_mobile }}%;
}
.section-{{ section.id }} .bc-3-column-left-column,
.section-{{ section.id }} .bc-3-column-right-column,
.section-{{ section.id }} .bc-3-column-center-column {
width: 100%;
}
.section-{{ section.id }} .bc-3-column-right-div-columns {
gap: {{ section.settings.columns_gap_mobile }}px;
flex-direction: column;
}
}
{%- endstyle -%}
<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-3-column-section">
<div class="bc-3-column-inner-div">
{% if section.settings.media_video != blank %}
{{
section.settings.media_video
| video_tag:
controls: false,
autoplay: true,
loop: true,
muted: true,
preload: 'auto',
class: 'bc-3-column-video'
}}
{% elsif section.settings.media_image != blank %}
<img
src="{{ section.settings.media_image | img_url: 'master' }}"
loading="{{ section.settings.image_loading }}"
alt="{{ section.settings.media_image_alt | default: 'Content image' }}"
class="bc-3-column-image"
>
{% else %}
<div
class="bc-3-column-image"
style="background-color: #f5f5f5; display: flex; align-items: center; justify-content: center;"
>
<p style="color: #666; text-align: center;">Upload an image or video</p>
</div>
{% endif %}
<div class="bc-3-column-right-div">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="bc-3-column-heading">
{{ section.settings.heading | default: '<h2>Your Main Heading</h2>' }}
</div>
<div class="bc-3-column-right-div-columns">
<div class="bc-3-column-left-column">
<div class="bc-3-column-subheading">
{{ section.settings.column_1_subheading | default: '<p>Subheading 1</p>' }}
</div>
<div class="bc-3-column-paragraph">
{{
section.settings.column_1_paragraph
| default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
}}
</div>
</div>
<div class="bc-3-column-center-column">
<div class="bc-3-column-subheading">
{{ section.settings.column_2_subheading | default: '<p>Subheading 2</p>' }}
</div>
<div class="bc-3-column-paragraph">
{{
section.settings.column_2_paragraph
| default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
}}
</div>
</div>
<div class="bc-3-column-right-column">
<div class="bc-3-column-subheading">
{{ section.settings.column_3_subheading | default: '<p>Subheading 3</p>' }}
</div>
<div class="bc-3-column-paragraph">
{{
section.settings.column_3_paragraph
| default: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
}}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "BC 3 Column and Image",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "section_padding_top",
"label": "Section Padding Top",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_bottom",
"label": "Section Padding Bottom",
"min": 0,
"max": 150,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_horizontal",
"label": "Section Padding Horizontal",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_top_tablet",
"label": "Section Padding Top (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_bottom_tablet",
"label": "Section Padding Bottom (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_horizontal_tablet",
"label": "Section Padding Horizontal (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_top_mobile",
"label": "Section Padding Top (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_bottom_mobile",
"label": "Section Padding Bottom (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "section_padding_horizontal_mobile",
"label": "Section Padding Horizontal (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 10,
"unit": "px"
},
{
"type": "range",
"id": "content_gap",
"label": "Content Gap",
"min": 10,
"max": 100,
"step": 5,
"default": 60,
"unit": "px"
},
{
"type": "range",
"id": "content_vertical_offset",
"label": "Content Vertical Offset",
"min": -100,
"max": 100,
"step": 5,
"default": -30,
"unit": "px"
},
{
"type": "range",
"id": "columns_gap",
"label": "Columns Gap",
"min": 5,
"max": 50,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "columns_gap_mobile",
"label": "Columns Gap (Mobile)",
"min": 10,
"max": 80,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "header",
"content": "Text Content"
},
{
"type": "richtext",
"id": "heading",
"label": "Heading",
"default": "<h2>Your Heading Goes Here</h2>"
},
{
"type": "richtext",
"id": "column_1_subheading",
"label": "Column 1 Subheading",
"default": "<p>Subheading 1</p>"
},
{
"type": "richtext",
"id": "column_1_paragraph",
"label": "Column 1 Paragraph",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"type": "richtext",
"id": "column_2_subheading",
"label": "Column 2 Subheading",
"default": "<p>Subheading 2</p>"
},
{
"type": "richtext",
"id": "column_2_paragraph",
"label": "Column 2 Paragraph",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"type": "richtext",
"id": "column_3_subheading",
"label": "Column 3 Subheading",
"default": "<p>Subheading 3</p>"
},
{
"type": "richtext",
"id": "column_3_paragraph",
"label": "Column 3 Paragraph",
"default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
},
{
"type": "header",
"content": "Typography - Heading"
},
{
"type": "range",
"id": "heading_size",
"label": "Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 4.5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "heading_size_fallback",
"label": "Heading Font Size Fallback",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 4.5,
"unit": "rem",
"info": "Fallback font size for older browsers"
},
{
"type": "range",
"id": "heading_line_height",
"label": "Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "heading_max_width",
"label": "Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 28,
"unit": "ch"
},
{
"type": "range",
"id": "heading_bottom_margin",
"label": "Heading Bottom Margin",
"min": 0,
"max": 100,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "heading_top_margin_tablet",
"label": "Heading Top Margin (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 100,
"unit": "px"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "left"
},
{
"type": "header",
"content": "Typography - Subheadings"
},
{
"type": "range",
"id": "subheading_size",
"label": "Subheading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.8,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "subheading_size_fallback",
"label": "Subheading Font Size Fallback",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.8,
"unit": "rem",
"info": "Fallback font size for older browsers"
},
{
"type": "range",
"id": "subheading_line_height",
"label": "Subheading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "subheading_max_width",
"label": "Subheading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "subheading_bottom_margin",
"label": "Subheading Bottom Margin",
"min": 0,
"max": 50,
"step": 5,
"default": 20,
"unit": "px"
},
{
"type": "header",
"content": "Typography - Paragraphs"
},
{
"type": "range",
"id": "paragraph_size",
"label": "Paragraph Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "paragraph_size_fallback",
"label": "Paragraph Font Size Fallback",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Fallback font size for older browsers"
},
{
"type": "range",
"id": "paragraph_line_height",
"label": "Paragraph Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.5
},
{
"type": "range",
"id": "paragraph_max_width",
"label": "Paragraph Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "mobile_scale_ratio",
"label": "Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.8,
"unit": "×",
"info": "Controls how much ALL text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "media_image",
"label": "Image"
},
{
"type": "video",
"id": "media_video",
"label": "Video (takes precedence over image)"
},
{
"type": "text",
"id": "media_image_alt",
"label": "Image Alt Text",
"placeholder": "e.g. Content illustration"
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_opacity",
"label": "Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{ "value": "lazy", "label": "Lazy" },
{ "value": "eager", "label": "Eager" }
],
"default": "lazy"
},
{
"type": "range",
"id": "media_width_mobile",
"label": "Media Width (Mobile)",
"min": 30,
"max": 100,
"step": 5,
"default": 65,
"unit": "%"
}
],
"presets": [
{
"name": "BC 3 Column and Image"
}
]
}
{% endschema %}
