How to create "Our services section"

Support
#1

Hi,
Have not worked with this theme and web design for a long while, so I thought to ask for some help since Im stuck.

So basically what I want to do, is to create a “Our Services section” right, but there is a lot of information that does not present well.
Then I thought to add Accordion element, but that does not look to what I have in mind.

Basically I want something like this:

  • Pictures with heading, when hoover = change overlay color
  • When clicked = expand like accordion but full width and in specific background and text colors

If you go to a inspiration site, you can fully understand what i mean: https://cityhemservice.se/
Check section “Våra tjänster”.

How can I achieve this? What Element, What CSS?
Thank you in advance!

#2

Hi Haris,

Thank you for writing in, unfortunately, there is no one element that does your example here. I think a Modal Element is better than what that example has (jumping and stacking the content).

So here’s what you’re going to do, structure your section layout like this:

A four-column row. Then inside each of that Column, add the Modal Element, Then inside that Modal element add your Headline, Text/blurb, and CTA buttons these are the content that will show on pop up.

That background image you see is set on the column.
That Lorem Ipsum Dolor phrase is the label of the Modal Toggle. By default, a modal toggle look is a circle with a hamburger icon. So you need to configure that to have Text label instead of icon, and set this toggle width and height to 100% so it will take up the entire column its in, also set the background color of this toggle to transparent so the background-image behind it will show.

Do that to all columns and you’ll have your Our Services Section.

Hope it helps,
Cheers!

#3

Yep, thats exactly what I was looking for.
I was deep in the CSS jungle, glad you could assist me with such an easy way.

Thank you for quick help @friech - I greatly appriciate it!
Will definitely return if I have more questions.

/Haris

#4

Glad to hear that, Haris.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.