How do I achieve the layout in the promotional image?

  • I was really drawn to the promotional image used for the Longevity theme, the one with four small pictures in a row. But I haven’t figured out yet how to get that look. Any tips?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    No worries…I actually plan on writing a tutorial about creating a front page like the live demo. But to help you get started, the images you see on the demo are done with a text widget in sidebar positions 1, 2, 3, and 4.

    Here is a code snippet of the first one that you can use as a template.

    <div class="animated bounceInLeft">
<img src="https://demos.shapedpixels.com/longevity/wp-content/uploads/sites/3/2015/07/fp1.jpg">
<h3 style="font-size: 1.25rem; text-align:center">Several Colour Choices</h3><p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece.</p><p style="text-align:center"><a class="btn btn-sm blue" href="#">See More</a></p>
</div>

    You will need to change the image though and the other content parts such as the text and also replace the # symbol with an actual link.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    A quick follow up….Were you able to get your image column widgets in place based on my snippet?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I achieve the layout in the promotional image?’ is closed to new replies.