Per ora (pare che sia già in programma di risolverlo) Elementor ha messo a disposizione alcuni dei suoi widget con la funzionalità “nested content” che significa poter mettere dentro i widget classici altri widget. Sembra un po’ Inception con DiCaprio ma una volta capito il potenziale la cosa si fa divertente e soprattutto molto utile. Noi, come al solito, abbiamo voluto testare subito questa novità ma ci siamo scontrati con un problema che sembra esser stato notato anche da altri membri della community Elementor. Usando il widget “tabs” su schermi grandi (“desktop”) va tutto bene ma su mobile viene trasformato automaticamente in un accordion, che a senso ma dipende da caso a caso. Nel nostro caso volevamo usarlo in nell’area “prezzi” delle nostre pagine servizi per poter dividere i contenuti tra chi ha bisogno di basse quantità e chi di alte. La sezione comincia con la domanda “quanti ne devi fare?” e a seguire ci sono i 2 pulsantini dei tab: il minimo; tanti; Ovviamente a noi serviva farli vedere affiancati perché se su mobile la seconda voce va a finire infondo, dopo i prezzi per le basse quantità, non si capisce più a cosa fa riferimento. Abbiamo fatto una ricerca online e, come premesso, anche altri web designer avevano già riscontrato il problema. La soluzione è semplice, basta inserire il seguente codice css nell’area apposita del widget, sotto “avanzate”:

@media (max-width: 767px) {
  .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
   display: flex;
  flex-wrap: wrap !important;}

.elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active {
  display: none;
}

.elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) {
  display: none;
}

div.e-collapse:nth-child(1){display: none !important;}

#tabs-services {
    display: flex;
    
    flex-wrap: nowrap;
    overflow-x: auto;
    width: auto;
  }

  #tabs-services .tab-title {
    width: auto;
    flex: 0 0 auto;
  }
  
 .e-n-tab-title {
  flex-shrink: 0;
  max-width: 170px;
  flex-basis: auto;
}
}

Nell’attesa che il team di Elementor risolva ci teniamo stretto stretto questo codice.