Το split-screen layout είναι μία από τις πιο δυνατές τάσεις στο σύγχρονο design. Χωρίζοντας την οθόνη σε δύο ίσα μέρη (συνήθως 50/50), μπορείτε να δημιουργήσετε μια εντυπωσιακή αντίθεση μεταξύ μιας εικόνας και ενός κειμένου. Είναι ιδανικό για αρχικές σελίδες (hero sections), σελίδες υπηρεσιών ή παρουσιάσεις προϊόντων όπου η οπτική πληροφορία είναι εξίσου σημαντική με τη γραπτή. Το Divi κάνει αυτή τη διαδικασία εξαιρετικά απλή, αρκεί να γνωρίζετε πώς να διαχειριστείτε τα περιθώρια και τις στήλες.
Η ισορροπία μεταξύ εικόνας και μηνύματος
Σε ένα split-screen, το ένα μέρος λειτουργεί ως ο "μαγνήτης" (εικόνα) και το άλλο ως η "δράση" (κείμενο και κουμπί). Αυτή η δομή βοηθά τον χρήστη να εστιάσει χωρίς να κουράζεται, καθώς η πληροφορία είναι οργανωμένη και συμμετρική.
Βήματα για τέλειο Split-Screen στο Divi
Για να φαίνεται το layout επαγγελματικό, πρέπει να καλύπτει όλο το πλάτος της οθόνης χωρίς κενά.
- Νέα Σειρά (Row): Προσθέστε μια σειρά με δύο ίσες στήλες (1/2 - 1/2).
- Ρυθμίσεις Σειράς (Sizing): Στην καρτέλα Design > Sizing, αλλάξτε το "Gutter Width" σε 1 (για να μην υπάρχει κενό ανάμεσα στις στήλες). Ενεργοποιήστε το "Make This Row Fullwidth" (ή ορίστε πλάτος 100% και Max Width 100%).
- Εξίσωση Υψών: Ενεργοποιήστε το "Equalize Column Heights". Αυτό είναι το μυστικό για να τελειώνουν οι δύο πλευρές στο ίδιο ακριβώς σημείο, ανεξάρτητα από το περιεχόμενο.
- Υπόβαθρο Στηλών: Αντί να βάλετε ένα Image Module, πηγαίνετε στις ρυθμίσεις της πρώτης στήλης και ορίστε μια εικόνα ως Background. Στη δεύτερη στήλη, ορίστε ένα χρώμα φόντου.
- Περιεχόμενο και Padding: Στη στήλη με το κείμενο, προσθέστε αρκετό Padding (π.χ. 10% σε όλες τις πλευρές) ώστε το κείμενο να "αναπνέει" και να μην κολλάει στις άκρες της οθόνης.
Το split-screen design προσφέρει μια αίσθηση μοντερνισμού και καθαρότητας. Είναι ένας εξαιρετικός τρόπος να αναδείξετε την αισθητική του brand σας ενώ ταυτόχρονα παραμένετε λειτουργικοί. Μην ξεχάσετε να ελέγξετε το αποτέλεσμα στο κινητό, όπου το Divi θα στοιχίσει αυτόματα τη μία στήλη κάτω από την άλλη.
