De forma predeterminada, los packs se muestran en un carrusel. Si prefieres que aparezcan como tarjetas de precios estándar, en una cuadrícula junto al resto de tus precios, puedes cambiar esto con CSS personalizado.
De esto:
A esto:
1. Ve a la sección de CSS personalizado
Encontrarás la sección de CSS en Ajustes > Widgets > CSS personalizado. Si no has usado esta sección antes, consulta Cómo personalizar un widget de bsport con CSS personalizado.
2. Selecciona la pestaña Común
Te recomendamos usar la pestaña Común.
3. Pega el CSS
Pega las siguientes reglas en tu área de CSS personalizado:
/* REMOVE CAROUSEL DISPLAY */@media (width < 750px) { .bs-carousel__item .bs-pack-card { height: 150px !important; } .bs-carousel__items__container__view { gap: 5px; } .bs-grid-item-justification-space-between { height: 100%; } .bs-pack-card__prices-container { align-items: end; }}@container (width < 1100px) { .bs-carousel__item { flex-basis: 0px; } .bs-pass-page__carousel__container { padding: 0px 10px; }}.bs-carousel__indicator__container,.bs-carousel__navigation__button,.bs-carousel__navigation__button,.bs-carousel__indicator__container,.bs-initial-price__price { display: none;}.bs-carousel__items__indicator__container { overflow: visible; contain: none; pointer-events: none;}.bs-carousel__items__container { overflow: visible; contain: none;}.bs-carousel__items__container__view { display: flex; flex-wrap: wrap; transform: none; transition: none; animation: none; translate: 0; width: 100%; will-change: unset; contain: none; display: grid; grid-template-columns: repeat(4, minmax(300px, 1fr)); grid-template-rows: 230px; gap: 20px; margin: 0px;}.bs-carousel__items__container__view[style*="transform"] { transform: none !important;}.bs-pack-card__title { font-size: var(--h6-fontSize);}@media (width < 1475px) { .bs-carousel__items__container__view { grid-template-columns: repeat(3, minmax(300px, 1fr)); }}@media (width < 1100px) { .bs-carousel__items__container__view { grid-template-columns: repeat(2, minmax(300px, 1fr)); }}@media (width < 750px) { .bs-carousel__items__container__view { flex-direction: column; display: flex; width: 100%; } .bs-pack-card { height: 175px; }}.bs-carousel__items__container__view > * { transform: none; transition: none; animation: none; opacity: 1; visibility: visible; display: block; position: static; margin-left: 0; width: auto; flex-shrink: 0;}.bs-carousel__item { position: static; transform: none; pointer-events: all;}@media (max-width: 768px) { .bs-carousel__item { width: 100%; }}@media (max-width: 480px) { .bs-carousel__item { width: 100%; }}.hidden-item-right,.hidden-item-left { translate: none; flex-basis: 0px; translate: 0;}[id*=bsport-widget] .cleanslate .hidden-item-right,[id*=bsport-widget] .cleanslate .hidden-item-left { translate: none;}.bs-pack-card .bs-generic-card__content { background: linear-gradient(120deg, var(--color-secondary-background-paper) 50%, var(--color-background-paper) 50%); border-radius: var(--border-radius-4);}.bs-pass-page__carousel__container,.bs-carousel__container,.bs-carousel__items__container,.bs-carousel__items__container__view,.bs-carousel__item { pointer-events: none;}.bs-pack-card__footer > button,.bs-button__container { pointer-events: all;}/* Reduce height of packs */.bs-pack-card__description { -webkit-line-clamp: 2;}.bs-carousel__item .bs-pack-card { height: 230px;}.bs-calendar-search__container,.bs-search__container { margin-bottom: 0;}@media (width < 750px) { .bs-carousel__item { height: 160px; } .bs-pack-card__list { display: grid; grid-template-columns: 1fr 1fr; } .bs-carousel__item .bs-pack-card { height: 175px; } .bs-carousel__items__indicator__container { padding: 0px 10px; }}.bs-pass-page { display: grid;}.bs-pass-page__carousel__container { order: 1;}.bs-pass-page__list__filters__container { gap: 0px;}.bs-pack-card__prices-container { height: 100%; justify-content: end;}
⚠️ Si quieres que los packs aparezcan primero, añade también esta regla:
.bs-pass-page__carousel__container { order: 0;}
4. Guarda los cambios
Una vez que hayas añadido tus reglas de CSS personalizado, recuerda guardar. Los cambios se aplican de forma instantánea.
