Hi there,
The Pricing Table widget didn’t meet my requirements because I couldn’t clearly align categories and services.
The FAQ widget in the accordion layout was a viable option.
The question section contains the categories, and the answer section provides an overview of the services.
Extensive custom CSS and JS were used.
In the answer section, custom DIV containers were placed above the code editor. These containers contain not only the service description but also images and buttons.
Responsibility was taken into account.
Custom CSS
/* Container */
.eapps-faq-container {
max-width: 600px;
margin: 0 auto;
}
/* --- Kategorie Header Styles --- */
.eapps-faq-content-category-title {
color: transparent;
width: 100%;
display: block;
opacity: 1;
height: 110px;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
margin-bottom: 0px;
}
.eapps-faq-content-category-herren .eapps-faq-content-category-title {
background-image: url("../img_herren.png");
background-position: center;
height: 120px;
border: 1px solid rgba(160, 79, 7, 0.47);
}
.eapps-faq-content-category-damen .eapps-faq-content-category-title {
background-image: url("../img_damen.png");
background-position: right;
}
.eapps-faq-content-category-kids .eapps-faq-content-category-title {
background-image: url("../img_kids.png");
background-position: center;
}
.eapps-faq-content-category-kosmetik .eapps-faq-content-category-title {
background-image: url("../img_kosmetik.png");
background-position: center;
}
.eapps-faq-content-category-kur .eapps-faq-content-category-title {
background-image: url("../img_kur.png");
background-position: center;
}
/* --- Suchleiste --- */
.eapps-faq-layout-accordion .eapps-faq-search-bar-input,
.global-styles .eapps-faq-search-bar-input {
border-radius: 4px !important;
padding: 10px;
background: #eee !important;
}
.eapps-faq-search-bar-input::placeholder {
color: #000;
}
.eapps-faq-search-bar-container {
max-width: 100% !important;
height: 40px;
}
/* --- FAQ Items allgemein --- */
.eapps-faq-content-category-item {
border-radius: 5px;
margin-bottom: 2px;
border: 1px solid rgba(160, 79, 7, 0.47);
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
}
/* Hover Panels */
.eapps-faq-content-category-herren,
.eapps-faq-content-category-damen,
.eapps-faq-content-category-kids,
.eapps-faq-content-category-kosmetik,
.eapps-faq-content-category-kur {
.eapps-faq-content-category-item:nth-child(n) .panel:not(:first-child):hover {
background: #f5e9dd;
}
}
/* Kategorie Überschrift Text */
.eapps-faq-content-category-title-text {
font-size: 22px !important;
}
/* Frage */
.eapps-faq-content-category-item-question {
font-size: 18px !important;
font-weight: normal;
background: rgba(160, 79, 7, 0.47);
padding: 10px;
}
/* Antwort */
.eapps-faq-content-category-item-answer {
padding-left: 0.5rem;
padding-right: 0.5rem;
overflow: visible !important;
}
/* Fragetext innerhalb Item */
.eapps-faq-content-category-item-question-text {
display: flex;
gap: 10px;
align-items: center;
}
/* Panel Layout */
.panel {
display: grid;
grid-template-columns: 1fr auto;
column-gap: .5rem;
row-gap: .02rem !important;
padding: 0.5rem 0.5rem 0.5rem 0;
font-size: 15px !important;
border-bottom: 1px solid #D9DBE4;
}
/* Kategorie Container */
.eapps-faq-content-category {
margin-top: -20px !important;
box-shadow: 4px 4px 8px rgba(34, 60, 80, 0.2);
}
/* Titel & Preisspalte */
.title {
grid-column: 1 / 2;
padding-left: 0.4rem;
line-height: 1.3rem;
word-wrap: break-word;
white-space: normal;
}
.preis {
display: flex;
color: #70768D;
grid-column: 2 / 3;
width: 100%;
padding-bottom: 5px;
column-gap: 5px;
flex-wrap: wrap;
}
.preis a:link,
.preis a:visited {
background-color: #cb9254;
color: white;
padding: 0 3px;
text-align: center;
min-width: 50px;
text-decoration: none;
display: block;
margin-top: -1px;
border-radius: 4px;
border: 1px solid rgba(160, 79, 7, 0.67) !important;
box-shadow: 5px 3px 4px rgba(34, 60, 80, 0.2);
}
.preis a[href="#"] {
display: none;
}
/* Beschreibung */
.description {
color: #70768D;
font-size: 14px;
line-height: 1.2rem;
padding-left: 0.4rem;
grid-column: 1 / 3;
}
/* Bild */
.imglengh {
display: flex;
align-items: center;
min-width: 100px;
overflow: visible !important;
}
.imglengh img {
display: block;
position: relative;
transition: transform 0.8s ease;
will-change: transform;
transform-origin: center center;
}
.imglengh img:hover {
transform: scale(1.8);
z-index: 9999;
}
.imglengh span {
margin-left: 50px;
}
/* Mobile Optimierungen */
@media (max-width: 500px) {
.eapps-faq-content-category-item-answer {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.preis {
flex-direction: column;
align-items: center;
max-height: 55px;
}
.title {
grid-column: 1 / 2;
display: flex;
align-items: center !important;
}
}
/* Suchergebnis leer – übersetzt */
[class*="eapps-faq-search-bar-no-results"] {
font-size: 0 !important;
}
[class*="eapps-faq-search-bar-no-results"]::after {
content: "Keine Ergebnisse gefunden" !important;
font-size: 1rem;
display: block;
text-align: center;
padding: 1rem;
}
Custom JS
/* search box */
const interval = setInterval(() => {
const input = document.querySelector('.eapps-faq-search-bar-input');
if (input) {
input.placeholder = "Leistung suchen...";
clearInterval(interval);
}
}, 300);
document.querySelectorAll('.panel a[href="#"]').forEach(link => {
link.addEventListener('mouseenter', function() {
this.closest('.panel').style.backgroundColor = '#fff';
});
link.addEventListener('mouseleave', function() {
this.closest('.panel').style.backgroundColor = ''; // reset
});
});
/* scroll opened question into view */
const topBannerHeight = 37;
document.addEventListener('click', (e) => {
const faqItem = e.target.closest('.eapps-faq-content-category-item');
if (faqItem) {
setTimeout(() => {
const faqItemRect = faqItem.getBoundingClientRect();
window.scrollTo({
top: faqItemRect.top + window.scrollY - topBannerHeight,
behavior: 'smooth',
});
}, 300);
}
});
