Μετατροπή των tabs του Elementor από Accordion σε menu για mobile έκδοση ή διατήρηση των tabs σε mobile

Για όσους δουλεύουν με τον Elementor builder , θα γνωρίζετε πως το tabs element στην έκδοση κινητού, μετατρέπεται σε accordion (όπως στην εικόνα που ακολουθεί).

Όταν το tab έχει μικρό περιεχόμενο, κυρίως πληροφοριακό, αυτό βολεύει και αισθητικά, αλλά και λειτουργικά.

Όταν όμως το περιεχόμενο είναι πολύ μεγάλο σε μέγεθος, αυτό συνεπάγεται πολύ μεγαλό ύψος, το οποίο συνεπάγεται πολύ μεγάλο scroll προς τα κάτω για να βρεις το επόμενο tab. Πολλές φορές αυτό σημαίνει ότι οι επισκέπτες μπερδεύονται και δεν καταλαβαίνουν ότι πρόκειται για accordion, με αποτέλεσμα να εγκαταλείψουν την σελίδα με μια κακή αίσθηση λειτουργικότητας.

Πως μετατρέπουμε λοιπόν τα accordion tabs του mobile σε κανονικό μενού, πάνω από το περιεχόμενο;

Βήμα 1:

Στο tabs element, θα πάμε στις ρυθμίσεις “Για προχωρημένους” και θα του προσθέσουμε το id: nicolas-tabs

Αμέσως μετά, θα πάμε στις ρυθμίσεις της σελίδας (κάτω αριστερά)

Και θα επιλέξουμε πάλι την καρτέλα “Για προχωρημένους”

Εκεί θα προσθέσουμε τον ακόλουθο css κώδικα και θα πατήσουμε αποθήκευση:

@media only screen and (max-width: 600px) {
#nicolas-tabs .elementor-tabs-wrapper {
display: flex;
flex-direction: column;
}
#nicolas-tabs .elementor-tab-title{
height: 15px;
padding-top: 5px;
padding-bottom: 20px;
border:1px solid #CCC;
margin: auto;
width: 50%;
}
}
@media only screen and (max-width: 600px) {
#nicolas-tabs .elementor-tab-mobile-title {
display: none;
}
}

Ο παραπάνω κώδικας κάνει την μετατροπή που προαναφέραμε από accordion σε κάθετο μενού με borders, σε συσκευές με οθόνη max-width: 600px , δηλαδή σε κινητά τηλέφωνα.

Τώρα, αν θέλετε να διατηρήσετε τα κανονικά tabs, ξεχάστε τον παραπάνω κώδικα και χρησιμοποιήστε τον ακόλουθο:

@media (min-width: 320px) {
#nicolas-tabs .elementor-tabs-wrapper {
display: flex;
flex-direction: row;
}
}
@media (min-width: 320px) {
#nicolas-tabs .elementor-tab-mobile-title {
display: none;
}
}

Με εκτίμηση, Νίκος – MaxServices.gr , NicolasLagios.com