Το εφέ Box Shadow στο CSS προσθέτει μια σκιά γύρω από ένα στοιχείο, δίνοντας την αίσθηση βάθους και κάνοντάς το να ξεχωρίζει στην ιστοσελίδα. Είναι μια απλή αλλά αποτελεσματική τεχνική που μπορεί να βελτιώσει αισθητικά το design του WordPress site σας. Ευτυχώς, η προσθήκη του στο WordPress είναι εύκολη, ακόμα και αν δεν είστε έμπειροι στον κώδικα.
Τι είναι το Box Shadow;
Η εντολή box-shadow στο CSS προσθέτει σκιά γύρω από στοιχεία όπως εικόνες, κουτιά κειμένου, κουμπιά κ.λπ. Η βασική σύνταξη είναι:
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
Οι αριθμοί καθορίζουν την οριζόντια και κάθετη μετατόπιση της σκιάς, το “blur radius” (θάμπωμα) και το χρώμα της σκιάς αντίστοιχα.
Πώς να το εφαρμόσετε στο WordPress
1. Μέσω του Customizer
- Συνδεθείτε στον πίνακα ελέγχου του WordPress.
- Μεταβείτε στο Εμφάνιση > Προσαρμογή > Πρόσθετο CSS.
- Εισάγετε τον εξής κώδικα:
.my-shadow {
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}
- Πατήστε “Δημοσίευση”.
Έπειτα, μπορείτε να εφαρμόσετε αυτή την κλάση (my-shadow) σε οποιοδήποτε στοιχείο μέσω του block editor ή μέσω HTML.
2. Μέσα από τον Gutenberg Editor
- Επιλέξτε ένα block (π.χ. εικόνα ή παράγραφο).
- Κάντε κλικ στις Ρυθμίσεις > Προχωρημένες και στο πεδίο “Πρόσθετη κλάση CSS”, γράψτε:
my-shadow.
3. Με χρήση Page Builder (όπως Elementor)
- Επιλέξτε το στοιχείο που θέλετε.
- Στις ρυθμίσεις εμφάνισης, βρείτε την καρτέλα “Advanced” και επιλέξτε “Custom CSS” (μόνο στην pro έκδοση).
- Προσθέστε τον κώδικα
box-shadow:ανάλογα με τις ανάγκες σας.
Συμπέρασμα
Το box-shadow είναι ένα εύχρηστο εργαλείο που δίνει ζωή και στιλ στα στοιχεία της σελίδας σας. Είτε χρησιμοποιείτε τον Customizer, τον Gutenberg, είτε έναν Page Builder, μπορείτε εύκολα να προσθέσετε σκιές και να δώσετε στο WordPress site σας έναν πιο μοντέρνο και επαγγελματικό αέρα.
