Shoreditch – list services icons

  • Unknown's avatar
    gaolatlhe · Member ·

    How do you list services like in the demo, https://shoreditchdemo.wordpress.com/

    Icon/image on the left and then text on the right explaining service for all services. When I tried adding image and aligning text to right, the images and text often misaligned especially with next service

  • staff-zara · Staff ·

    Hi there,

    Please share your site address for us to have a look.

  • kokkieh · Staff ·

    Hi there,

    To do this everything needs to be left-aligned – that page is essentially just leveraging how HTML works to create that layout.

    The images are added inside a HMTL heading tag, and then the content is added immediately below that in the editor. Everything is left-aligned, which causes the paragraph to automatically appear next to the image due to how HTML works in this case.

    The next heading with image is added below that, with the next paragraph below that, etc.

    Here’s how it looks in the HTML editor:

    <h3><img class="alignleft size-thumbnail wp-image-956" src="https://shoreditchdemo.files.wordpress.com/2018/05/icon-managed-hosting.png?w=150" alt="" width="150" height="150" />Managed Hosting</h3>
Shoreditch uses its own software, Shorehost, a fully managed cloud platform for unparalleled scale, security, flexibility, and performance. Optimized to make your site shine, every day.
<h3><img class="alignleft size-thumbnail wp-image-957" src="https://shoreditchdemo.files.wordpress.com/2018/05/icon-implementation-support.png?w=150" alt="" width="150" height="150" />Implementation and Support</h3>
End-to-end guidance and hands-on support, from project consideration through launch and every day thereafter. We offer expert guidance and hands-on partnership every step of the way.
<h3><img class="alignleft size-thumbnail wp-image-958" src="https://shoreditchdemo.files.wordpress.com/2018/05/icon-build-digital-experiences.png?w=150" alt="" width="150" height="150" />Build Your Digital Experiences</h3>
Solutions at the ready. Shorehost powers mission critical enterprise media and marketing systems. It can serve as the entire backbone or a key component of your digital content management infrastructure.

    Something to keep in mind is that in this case the paragraphs are the exact correct length to make this work. If the paragraphs were a lot shorter or longer, it might not look that nice.

    If you want to try replicate this on your site and still can’t get it to look right, let us know the link to the page you’re working on and we can take a look.

  • The topic ‘Shoreditch – list services icons’ is closed to new replies.