I have noticed in many pictures of websites (theme demo pages) that generally text is below picture not beside. Is there any reason why many websites are using that kind of design?

Examples of wp themes: Herald, The Voux ...

Example of rare wp theme where text and picture are side by side and without any glitter: Iconic One, ...

What design decisions might be behind phenomenon that articles does not contain summary any more, only headings inside or below image in homepage?

  • Could you post the screenshots showing what you mean?
    – Alvaro
    Commented Jan 2, 2017 at 8:30

5 Answers 5


The reason behind keeping the text beside and blow the image is to play around with the utilisation of space in a website.

The wp example Herald is a magazine kind of website where the frequency of the articles will be higher and to showcase a maximum number articles on a page the text is placed below the image. Also, the title is more important here in a magazine kind of website which will make the reader click the article by reading the title itself.

But the wp example Iconic One is a blog kind of website where the posts will not be frequent and the description also plays an important role in making the reader read the article.

The conclusion is to keep the content below the image if lots of articles to be displayed in a website else go for the content on the side of the image. Using both kinds of approach in a website also increase the user experience.


I think this answer is relevant to this question, even it is different. It is common to place the text below.

  • Why it is common to place the text below? Commented Jan 4, 2017 at 20:38

There is no specific reason or research to put text in a specific position on an Image. It has been placed as per the requirement of the project. So don't need to think too much in this scenario.


In my experience, it doesn't matter where the text goes unless you frame the design choices in terms of responsiveness and clutter.

Text below images works far better on mobile websites, because the relatively narrow viewport doesn't allow much content to be squeezed in side-by-side. To free up space, the summary may be collapsed or the text placed below the image. On larger screens, it shouldn't matter too much, but some designers may prefer side-by-side placement if they don't have a large body of text for the summary.

It all comes down to using or freeing up space so the viewport isn't cluttered.


You can also place the summary below the image too, but that should be done smartly, so that your design must not kill the space with out reason. You can display summary on hover of image. On the other hand text beside the image is more suitable for the internal listing pages or if there is more summary displayed upfront.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.