Home>Support>Use a grid to show Categories or alternative method

Use a grid to show Categories or alternative method

Hi there, I’m trying to build a grid of my categories.

By using Page Builder and widgets, I’m to recreate a grid I built on this site https://www.howto-ido.com/ (was built with modules only available in that theme) which is basically a grid of images, with text overlay, a hover effect and each image links to a different category (or custom URL).

In Page Builder the closest I got was using the Posts Grid widget (and using CSS I moved the image titles into an overlay position) BUT problem is, the widget only seems to be able to link to pages or posts or media but not categories or custom URLs.

So, please could someone recommend what other widgets I could try that have a grid of images + hover effect + text overlay (or image title display) + custom URL linking?

Many thanks :)

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 2 months, 27 days ago Andrew Misplon Hi, I Work Here

    Hi Uel

    Thanks for reaching out, hopefully, you’ve made progress. You can take a look at the widgets offered by Widgets for SiteOrigin and Livemesh SiteOrigin Widgets. Both add widgets to the SiteOrigin Widgets Bundle. Once activated their widgets will be visible at PluginsSiteOrigin Widgets to activate or deactivate. Unfortunately, I don’t know that there is a widget that can resolve the challenge. Those two plugins are perhaps a starting point in the search.

    https://wordpress.org/plugins/widgets-for-siteorigin/
    https://wordpress.org/plugins/livemesh-siteorigin-widgets/

  2. 2 months, 25 days ago Uel_M

    Hi Andrew,

    Thanks for the reply. Appreciate it.

    I do have both bundles installed. What I did was add 4 rows with each row split into 3. Then I added a Hero Widget in and duplicated it across the 12 sections. In each widget I’d add an image and overlaying text. Next I added CSS for text positioning and CSS for hover effect. All CSS was added to another plugin I have that allows CSS per page.

    Works perfectly and looks identical :)

    What didn’t work at all though was adding a CSS Class in the Attribute section of a row or widget and then adding CSS as you mentioned here Thread: Mouseover opacity on Picture

    Do you by any chance have tutorials of how the Attribute section works?

  3. 2 months, 24 days ago Andrew Misplon Hi, I Work Here

    Awesome, really glad to hear you’ve made progress.

    If you’re feeling motivated, please, try reading my thread here: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles and let me know if I can answer any questions :)

  4. 2 months, 24 days ago Uel_M

    That thread is just what I needed…thanks!

    Will work through it now.

  5. 2 months, 24 days ago Andrew Misplon Hi, I Work Here

    Super, glad that gives you a starting point. If you don’t already, it really helps to have your browser’s developer tool open so you can inspect elements and see what markup is being printed.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More