inline text tutorial

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.

  1. Edit your code.
  2. Add a new section and name it 'Inline Text.'
  3. Remove all the code that's already auto-generated and paste in the code below.
  4. Save your code and return back to the theme. Refresh the page to make sure your section is generated.
  5. 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>

More resources