How to add a three column image box with links to a page?

  • [ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

    Hello everyone,

    I’m looking at redesigning my site and have run into a snag.
    I want a relatively simple layout, and I’ve got most of it down.
    What I’m stuck on, as from the title, is in creating three image boxes (about 200×250 each) with a custom image and the ability to make the box a link to another page.

    I thought I could achieve this with a slideshow plugin, creating a one-image slideshow, specifying the size, and dropping it in the page. Problem being, I can’t get 3 slideshows to be left, center, and right on the post.

    I wanted to upload an image here, but I’d have to upload one (and my site is down as I’m working on it. For a visual, look at the Parabola theme layout, you’ll see a header and three image boxes beneath. I want to recreate the boxes beneath.

    I honestly just don’t know what the term for what I’m looking for is, so I can’t really do a plugin search to find what I need. I know there’s probably a hundred ways for me to do this.

    I appreciate the help!

    Thanks,

    Adveniat

    • This topic was modified 7 years, 8 months ago by Adveniat.
    • This topic was modified 7 years, 8 months ago by Jan Dembowski.
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    FYI, image embeds only work here if they are from certain well know photo sharing sites such as imgur.com.

    You mainly just create 3 HTML containers in sequence. Each container contains the link and img tags. Style the containers to float: left and to be 33% in width. Specify borders, margins, padding as desired. Style the images to be 100% wide within the container with an auto height. This way the images will be responsive. At some point, the screen/window width will be too narrow to justify 3 across containers. Add a media query for screens smaller than this where the 3 container widths change to 100% (or close to that). They will then stack vertically on small screens.

    Obviously not a plugin, but this is a basic HTML/CSS problem well worth learning. It’ll keep coming up once you find how easy it is. This can even be done in the post editor using the text view, provided you have unfiltered_html capability.

Viewing 1 replies (of 1 total)
  • The topic ‘How to add a three column image box with links to a page?’ is closed to new replies.