How To Make Whole Featurebox Clickable - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

How To Make Whole Featurebox Clickable

R

Remco

SP Page Builder 4 years ago

Good morning all,

I have a question. I have a page with functionalities on it. They all link to their own pages. Now only the icon and title are clickable. I would like the entire area to be clickable. See also the image below. How do I get this done? I hope someone can help me with this soon? Thank you in advance.

This is the page: https://www.huisstijlmanager.nl/functionaliteiten

Best regards, Remco

0
13 Answers
Order by
Oldest Newest Votes
R
Remco
Accepted Answer
4 years ago #9931

I solved it with custom html and css:

<a href="/functionaliteiten/templates" class="panel">
<i class="fas fa-edit"></i>
<h4>Templates</h4>
<p>In de Huisstijlmanager kun je talloze templates opnemen.</p>
</a>
.panel {
    box-sizing: border-box;
    padding: 20px 20px 10px 20px;
    background-color: white;
    border-radius: 0px;
    display: block;
    text-align: center;

}

.panel:hover {
    background: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
}

.panel .fa, .fas:hover {
    color: #5c79ba !important;
}

.panel h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: #0b3754;
}

.panel h4:hover {
    color: #5c79ba;
}

.panel p {
    color: #0b3754;
}

.panel i {
    font-size: 48px;
    color: #e84277;
}

Pretty time consuming, so hopefully this functionality will be included in a future update.

Regards, Remco

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #9889

Hello Remco

You can customize the addon to do this. Or use Raw HTML addon to make the feature box by yourself. Sorry, we do not provide customization support.

Best regards

0
R
Remco
Accepted Answer
4 years ago #9893

Hi,

I know, but this is a forum. So there are also other people on it and not just you as support employees. Maybe someone else has an idea how I can do this with css or custom html, because I don't know.

Best regards, Remco

0
R
Remco
Accepted Answer
4 years ago #9894

By the way... It might be a good idea to include this as a feature request in a future update. Because in terms of usability and UX, it is in many cases desirable to make a complete block clickable ;)

Let me know what you think.

Best regards, Remco

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #9918

Sure, any user can help here. Okay, I will share the idea with the developers as a feature request.

0
Pavel
Pavel
Accepted Answer
4 years ago #9925

Hi Remco. Add class and custom style button with link. Use the following code.

.whole-link {
    position: relative;
}
.whole-link .sppb-btn-custom {
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0 !important;
}
0
A
Al
Accepted Answer
4 years ago #34120

Hi, please tell, where this code has to be placed exactly. Thanks in advance. Regards

0
D
Dishon
Accepted Answer
3 years ago #45758

Hi, Pavel. But Feature box addon is without button or am I miss something?

0
Pavel
Pavel
Accepted Answer
3 years ago #45808

Hi. Start type something and you will see button and its settings

0
D
Drew
Accepted Answer
3 years ago #57401

@Pavel

Thanks for this. Exactly what i needed!

I am having difficulty removing (what i think is focus) the blue line arround the feature box when it is clicked (dont think this is active link as it remains after release).

Any ideas on how to achieve this would be appreciated!

0
D
Drew
Accepted Answer
3 years ago #57412

Found a solution! Not sure if this is the right way but it seems to work!

.whole-link .sppb-btn-custom{
    background-color: transparent !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0 !important;
}

.whole-link .sppb-btn-custom:focus {
  outline: none;
  box-shadow: none;
}
0
Pavel
Pavel
Accepted Answer
3 years ago #57559

Not sure if this is the right way but it seems to work!

Hi. It is correct to delete ":focus" style. But the removal of ":focus" style is not correct in terms of accessibility. Therefore, it is better to create your own design for "focus", but not to delete it at all.

0