Κατηγορίες Blog

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

Κοινοποίηση σε facebook
Κοινοποίηση σε twitter
Κοινοποίηση σε pinterest
Κοινοποίηση σε linkedin
Κοινοποίηση σε reddit
Κοινοποίηση σε vk
Κοινοποίηση σε odnoklassniki
Κοινοποίηση σε tumblr
Κοινοποίηση σε digg
Κοινοποίηση σε skype
Κοινοποίηση σε stumbleupon
Κοινοποίηση σε mix
Κοινοποίηση σε telegram
Κοινοποίηση σε pocket
Κοινοποίηση σε xing
Κοινοποίηση σε whatsapp
Κοινοποίηση σε email

Για όσους δουλεύουν με τον 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

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

Γράψτε ένα σχόλιο ή ερώτηση