Creating Tiles/Grid Images that link to Categories in Sela theme

  • Resolved kejolliffe

    (@kejolliffe)


    9 years, 6 months ago

    Hello,

    I am using the sela theme for a food blog and trying to create tiles like the links below:

    https://sallysbakingaddiction.com/recipe-index/

    Currently, all my posts immediately go to my “blog” page, and then I have created a custom menu organized by pages and categories, so that the blog posts go to a specific category page as well.

    For example: Blog page is considered a page. Then there is a Recipe page with child/sub pages that are technically “Category” pages.

    On my Recipe page, I would like to have tiles or a grid that looks like the link above. So basically I would like the recipe page to have an image of an appetizer with an appetizer link so that when you click on the image and the word, it goes to the Appetizer category page. What is the best way to go about this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Sela doesn’t come with a built-in way to create a grid that’s connected to blog categories.

    What it comes with is a grid template that allows you to link to sub-pages (aka child pages), but those the sub-pages you can link to are pages and not blog categories.

    You could certainly build your own grid manually, but it’s not something built into the theme.

    Just let me know if you need further help.

    Thread Starter kejolliffe

    (@kejolliffe)

    Thank you, Kathryn! Do you have any ideas on how to build your own grid manually by chance or what resources I could employ to do this?

    Thanks so much!

    Moderator Kathryn Presner

    (@zoonini)

    You could build a grid using div tags within a post or page – here’s some very rough CSS. In the real world you’d want to create classes and add the CSS to a custom CSS plugin instead of putting it inline, but this is to just give you an idea of how to do it:

    <div style="width:30%;float:left;">
Column 1 info here
Column 1 info here
Column 1 info here
</div>

<div style="width:30%;float:left;">
Column 2 info here
Column 2 info here
Column 2 info here
</div>

<div style="width:30%;float:right;">
Column 3 info here
Column 3 info here
Column 3 info here
</div>

    In each column you’d add thumbnail images with a link to the category page.

    Of course this is also possible to do dynamically using a custom page template in a child theme, but that gets a lot more comfortable and would require some custom coding.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Creating Tiles/Grid Images that link to Categories in Sela theme’ is closed to new replies.