Add an element of interest to any page with this section tutorial. Add up to 3 images and 4 lines of text to create a dynamic headline. A simple way to captivate audiences.
- Edit your code.
- Add a new section and name it 'Inline Text.'
- Remove all the code that's already auto-generated and paste in the code below.
- Save your code and return back to the theme. Refresh the page to make sure your section is generated.
- Have fun customising the section!
<div class="inline-container container color-{{ section.settings.color_scheme }}">
<div class="page-width container color-{{ section.settings.color_scheme }}">
<h1 class="heading1">
{{section.settings.text1}}
<span class="img1"> ooo </span>
{{section.settings.text2}}
<span class="img2"> 000 </span>
{{section.settings.text3}}
<span class="img3"> 000 </span>
{{section.settings.text4}}
</h1>
</div>
</div>
{% schema %}
{
"name": "Inline Text",
"tag": "section",
"settings": [
{
"type": "text",
"id": "text1",
"label": "Text 1"
},
{
"type": "text",
"id": "text2",
"label": "Text 2"
},
{
"type": "text",
"id": "text3",
"label": "Text 3"
},
{
"type": "text",
"id": "text4",
"label": "Text 4"
},
{
"type": "image_picker",
"id": "image1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image2",
"label": "Image 2"
},
{
"type": "image_picker",
"id": "image3",
"label": "Image 3"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
}
],
"presets": [
{"name": "Inline Text" }
]
}
{% endschema %}
<style>
.inline-container {
padding-top: 8rem;
padding-bottom: 8rem;
width: 100vw;
}
.heading1 {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
line-height: 150%;
}
.img1 {
margin-right: 10px;
color: transparent;
background-size: cover;
background-repeat:no-repeat;
background-image: url("{{ section.settings.image1 | image_url }}");
}
.img2 {
margin-right: 10px;
color: transparent;
background-size: cover;
background-repeat:no-repeat;
background-image: url("{{section.settings.image2 | image_url }}");
}
.img3 {
margin-right: 10px;
padding-right: 13px;
color: transparent;
background-size: cover;
background-repeat:no-repeat;
background-image: url("{{section.settings.image3 | image_url }}");
}
</style>
