Hi everyone! I’m designing a “Skills” section for a website I’m putting together and I’m looking for a specific layout.
I want the skills to be arranged in a single horizontal row that users can scroll through (swipe on mobile, scroll on desktop). I am using the “Latest Blogs” section of this site as a reference: https://ebrucoffeeco.com (screenshot below)
A few specific requirements:
No Lightboxes: I don’t want the image to pop up; I need each item to link directly to a new page.
Multi-Item View: I tried using the Image Gallery function, but it seems to only show one image at a time. I need to be able to show multiple images/cards in the view at once, with the next ones “peeking” in from the side.
Is there a specific widget I can use instead or a setting in the gallery/slider tools that allows for multi-item visibility and custom external links?
You can get close @TomJr to what you have shown as an example…
You can use a Sitely Image/Video Grid widget, with the setting Layout / Slider-Gallery. This will allow a User to scroll (click & hold drag) plus have your image/cards appear from off screen, but of course you will need more than 3 or 4 (based on how wide these images/cards are) to have the ones off screen “peep in”.
You won’t be able to manually slide the gallery with left & right toggles like what you have on your example. You will also need to introduce a Button, placing it over the image/card, to allow for a User to click so to be sent off to where you want them to go.
@FlaminFig, You don’t have to add a button - You can select the actual image itself within the grid and use the “On click” option in the style panel. You can also disable the lightbox function so that the cell content doesn’t get enlarged when clicked.
True, by tuning off the Lightbox you are able to have an image on-click event.
The reason for the Button was the ability to communicate the on-click event (like “open PDF”), other than hover animation that gives no clue!
Below is where I’m at right now, and as @Stephie said, the image will be used to create a link to a popup or a new page. I may also use an animated button (see first image in grid) to do just that.
FYI, there will be a total of 9 skills.
I’m just going to assume the end user will know to scroll to advance the skills.
