Διαχωριστής Σχήματος Elementor με διάφανο background χρησιμοποιώντας clip-path css

  • Nicolas
  • 31 Ιανουαρίου, 2022
  • Δεν υπάρχουν Σχόλια

Στην περίπτωση που επιθυμείτε να διαχωρίσετε ένα background στο elementor με διαχωριστή σχήματος (shape divider) προκειμένου να μετατρέψετε την εικόνα σας είτε πάνω είτε κάτω με κυματισμούς ή άλλα σχήματα και ταυτόχρονα θέλετε να εμφανίζεται η πίσω εικόνα background (εκεί που κάνει το κόψιμο δηλαδή), δυστυχώς δεν θα μπορέσετε με τον κλασικό διαχωριστή σχήματος του Elementor. Αυτό γιατί ο διαχωριστής σχήματος στο χώρισμα μπορεί μόνο να εμφανίσει χρώμμα (μέχρι και τις 31/1/2022).

Για να πετύχετε το αποτέλεσμα που ακολουθεί στην εικόνα θα χρειαστεί να χρησιμοποιήσετε τα μαγικά του css και πιο συγκεκριμένα το clip-path.

Οδηγίες Clip-path:

  • Θα πρέπει πρώτα να επισκεφθείτε το clip-path waves generator: https://wave.novoselski.net
  • Ρυθμίστε το offset , το amplitude και το frequency σύμφωνα με τα γούστα σας (το offset αφορά ουσιαστικά το ύψος της εικόνα)
  • To generator από μόνο του φτιάχνει waves για το κάτω μέρος μιας εικόνας.
  • Αν θέλετε το αποτέλεσμα να αντιστραφεί (δηλαδή τα κύματα να γίνουν στο πάνω μέρος της εικόνας), θα πρέπει να παραβιάσετε με το χέρι το τελικό αποτέλεσμα που σας δίνει ο generator καθώς δεν έχει την δυνατότητα για αντιστροφή (δείτε παρακάτω).

Κύματα κάτω από την εικόνα:


.kymatapanw{
clip-path: polygon(100% 0%, 0% 0% , 0% 81.00%, 1% 81.00%, 2% 81.02%, 3% 81.04%, 4% 81.07%, 5% 81.11%, 6% 81.16%, 7% 81.22%, 8% 81.29%, 9% 81.36%, 10% 81.45%, 11% 81.54%, 12% 81.64%, 13% 81.74%, 14% 81.86%, 15% 81.98%, 16% 82.11%, 17% 82.24%, 18% 82.38%, 19% 82.53%, 20% 82.68%, 21% 82.84%, 22% 83.00%, 23% 83.17%, 24% 83.34%, 25% 83.52%, 26% 83.69%, 27% 83.88%, 28% 84.06%, 29% 84.25%, 30% 84.43%, 31% 84.62%, 32% 84.81%, 33% 85.00%, 34% 85.19%, 35% 85.38%, 36% 85.57%, 37% 85.76%, 38% 85.95%, 39% 86.13%, 40% 86.31%, 41% 86.49%, 42% 86.66%, 43% 86.84%, 44% 87.00%, 45% 87.17%, 46% 87.32%, 47% 87.48%, 48% 87.62%, 49% 87.76%, 50% 87.90%, 51% 88.03%, 52% 88.15%, 53% 88.26%, 54% 88.37%, 55% 88.47%, 56% 88.56%, 57% 88.64%, 58% 88.72%, 59% 88.78%, 60% 88.84%, 61% 88.89%, 62% 88.93%, 63% 88.96%, 64% 88.98%, 65% 89.00%, 66% 89.00%, 67% 89.00%, 68% 88.98%, 69% 88.96%, 70% 88.93%, 71% 88.89%, 72% 88.84%, 73% 88.78%, 74% 88.71%, 75% 88.64%, 76% 88.55%, 77% 88.46%, 78% 88.36%, 79% 88.25%, 80% 88.14%, 81% 88.02%, 82% 87.89%, 83% 87.76%, 84% 87.61%, 85% 87.47%, 86% 87.31%, 87% 87.16%, 88% 86.99%, 89% 86.83%, 90% 86.66%, 91% 86.48%, 92% 86.30%, 93% 86.12%, 94% 85.94%, 95% 85.75%, 96% 85.56%, 97% 85.37%, 98% 85.18%, 99% 84.99%, 100% 84.80%);
}

Για να το αντιστρέψετε αλλάξτε το class σε κάτι πιο αναγνωρίσιμο, πηγαίνετε ξανά στο generator και χαμηλώστε κατά πολύ το offset , πάρτε το νέο αποτέλεσμα , σβήστε αυτά τα πρώτα “100% 0%, 0% 0% ,” από πάνω και προσθέστε στο τέλος του polygon πριν το “)” τα ακόλουθα: ,100% 100%, 0% 100%

Δηλαδή ο κώδικας θα γίνει έτσι:


.kymatakatw{
clip-path: polygon(0% 19.5%, 1% 19.49%, 2% 19.48%, 3% 19.45%, 4% 19.42%, 5% 19.37%, 6% 19.32%, 7% 19.25%, 8% 19.18%, 9% 19.09%, 10% 19%, 11% 18.9%, 12% 18.79%, 13% 18.66%, 14% 18.54%, 15% 18.4%, 16% 18.26%, 17% 18.1%, 18% 17.95%, 19% 17.78%, 20% 17.61%, 21% 17.43%, 22% 17.25%, 23% 17.06%, 24% 16.87%, 25% 16.67%, 26% 16.47%, 27% 16.27%, 28% 16.06%, 29% 15.85%, 30% 15.64%, 31% 15.43%, 32% 15.21%, 33% 15%, 34% 14.78%, 35% 14.57%, 36% 14.36%, 37% 14.15%, 38% 13.94%, 39% 13.73%, 40% 13.52%, 41% 13.32%, 42% 13.13%, 43% 12.93%, 44% 12.75%, 45% 12.56%, 46% 12.39%, 47% 12.22%, 48% 12.05%, 49% 11.89%, 50% 11.74%, 51% 11.6%, 52% 11.46%, 53% 11.33%, 54% 11.21%, 55% 11.1%, 56% 11%, 57% 10.9%, 58% 10.82%, 59% 10.75%, 60% 10.68%, 61% 10.63%, 62% 10.58%, 63% 10.55%, 64% 10.52%, 65% 10.5%, 66% 10.5%, 67% 10.51%, 68% 10.52%, 69% 10.55%, 70% 10.58%, 71% 10.63%, 72% 10.68%, 73% 10.75%, 74% 10.82%, 75% 10.91%, 76% 11%, 77% 11.11%, 78% 11.22%, 79% 11.34%, 80% 11.47%, 81% 11.6%, 82% 11.75%, 83% 11.9%, 84% 12.06%, 85% 12.22%, 86% 12.4%, 87% 12.57%, 88% 12.76%, 89% 12.94%, 90% 13.14%, 91% 13.33%, 92% 13.54%, 93% 13.74%, 94% 13.95%, 95% 14.16%, 96% 14.37%, 97% 14.58%, 98% 14.79%, 99% 15.01%, 100% 15.22%,100% 100%, 0% 100%);
}

 

Τέλος αν θέλετε και άλλα σχήματα, μπορείτε να δείτε το ακόλουθο generator: https://bennettfeely.com/clippy/ και επίσης το ακόλουθο άρθρο: https://www.sitepoint.com/introducing-css-clip-path-property/

Καλή συνέχεια.

Original Source: https://nicolaslagios.com/%ce%b4%ce%b9%ce%b1%cf%87%cf%89%cf%81%ce%b9%cf%83%cf%84%ce%ae%cf%82-%cf%83%cf%87%ce%ae%ce%bc%ce%b1%cf%84%ce%bf%cf%82-elementor-%ce%bc%ce%b5-%ce%b4%ce%b9%ce%ac%cf%86%ce%b1%ce%bd%ce%bf-background-%cf%87/

Σχολιασμός μέσω Facebook

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται.


Digital Marketing

Οι σελίδες των υπηρεσιών Digital Marketing θα είναι σύντομα κοντά σας.

Μπορείτε ήδη να δείτε και να παραγγείλετε (online ή μέσω επικοινωνίας) τις υπηρεσίες μας στις “Πρόσθετες Υπηρεσίες Ιστοσελίδας” πατώντας εδώ.

Εργασία

Επεξήγηση

Όροι

Πάγια έξοδα (ανά μήνα ή έτος για υπηρεσίες κλπ)

Κατοχύρωση επιθυμητού domain

Είναι η διεύθυνση του site σας, πχ: tositemou.com

Εάν έχετε ήδη δικό σας domain, θα προχωρήσουμε απευθείας στην

σύνδεση του με τον χώρο φιλοξενίας.

Τα πάγια έξοδα του domain δεν αφορούν την υπηρεσία μας και δεν

συμπεριλαμβάνονται στην προσφορά που θα λάβετε, πληρώνετε

απευθείας στον πάροχο και λαμβάνετε ξεχωριστό τιμολόγιο από εκεί.

Από 10€ / έτος έως 30€ / δύο έτη (αναλόγως κατάληξης gr, com κλπ)

Ρύθμιση Χώρου

φιλοξενίας ιστοσελίδας

Είναι ο χώρος που φιλοξενεί τα αρχεία σας

Εάν έχετε ήδη, ρυθμίζουμε τον υπάρχον, χωρίς να φέρουμε ευθύνη για μελλοντικά προβλήματα στο site σας και extra χρέωση για ζημιές λόγω αναβαθμίσεων ή server.

Εάν επιθυμείτε μπορείτε να αγοράσετε δικό μας ετήσιο πακέτο «Συντήρηση+Φιλοξενία» 190€ / έτος χωρίς να επιβαρύνεστε για τυχόν ζημιές λόγω αναβαθμίσεων.

Max Services Support & VPS Hosting + Unlimited Subdomains & email accounts (total 25GB HDD space): 20€/μήνα , 110€/6μηνο , 190€/έτος.

Εγκατάσταση & Ρύθμιση Πλατφόρμας (Wordpress, Joomla, Drupal, Opencart κλπ)

Είναι το λογισμικό της ιστοσελίδας σας

Ρύθμιση της ιστοσελίδας με τις βασικές πληροφορίες της επιχείρησης,

καθώς και κάθε απαραίτητη τεχνική ρύθμιση

Εγκατάσταση & διαμόρφωση

θέματος

Σκελετός/Theme/Template

Είναι ένα έτοιμο πρότυπο το οποίο διαμορφώνουμε στα μέτρα σας.

Αν επιθυμείτε κατασκευή Custom θέματος (εξ ολοκλήρου από το 0), η τελική τιμή κατασκευής του site θα συζητηθεί.

Κατασκευή / Ανάρτηση περιεχομένου ιστοσελίδας

Αφορά τις στατικές σελίδες (επικοινωνία, εταιρεία κλπ) + ανέβασμα υλικού (προϊόντα - άρθρα)

Έως 50 χειροκίνητα.

Έως 2000 μαζικά (εφόσον μας τα έχετε δώσει σε excel).

Για περισσότερα, η τελική τιμή θα συζητηθεί.

Προσθήκη όρων χρήσης, πολιτικής

απορρήτου και μπάρας GDPR

Είναι 100% νομικά απαραίτητο να αναρτήσουμε σε ειδικές σελίδες

που θα περιλαμβάνονται στο κάτω μενού του site σας, τους όρους

χρήσης και την πολιτική απορρήτου της ιστοσελίδας σας, καθώς

επίσης και ειδική αναδυόμενη μπάρα που εμφανίζεται στους νέους

επισκέπτες όπου θα πρέπει να αποδεχτούν τα cookies της

ιστοσελίδα σας.

Ιδιαίτερα στην Ευρώπη, ο νόμος GDPR σας υποχρεώνει να γίνουν

αυτές οι ενέργειες καθώς αφορά το προσωπικά δεδομένα του κάθε

επισκέπτη

Μπορείτε να επιλέξετε να προσθέσουμε αντιγραφή όρων και

πολιτικής από παρόμοια sites (αλλάζοντας φυσικά ονόματα και

διευθύνσεις) ή να επιλέξετε να μας στείλετε εσείς το περιεχόμενο και

να το αναρτήσουμε.

Πρέπει όμως να γνωρίζετε, πως σε καμία περίπτωση δεν φέρουμε

οποιαδήποτε νομική ή άλλη ευθύνη για το περιεχόμενο.

Μηχανισμός eshop (αν το επιθυμείτε)

· Εγκατάσταση & ρύθμιση μηχανισμού

· Ρύθμιση στοιχείων επιχείρησης (μεταφορικά, πληρωμές, φπα κ.α.)

· Design καταστήματος κλπ.

· Πωλήσεις Χονδρικής ή Dropship αν επιθυμείτε

Για την εισαγωγή προϊόντων, χρειάζεται να έχετε έτοιμα τα δεδομένα των προϊόντων σας (κωδικό, απόθεμα, τίτλο, φωτογραφία κλπ).

Εισάγουμε: Έως 50 χειροκίνητα.

Έως 2000 μαζικά (εφόσον μας τα έχετε δώσει σε excel).

Για περισσότερα, η τελική τιμή θα συζητηθεί.

Επιλέξτε Υπηρεσία Διαδικτύου

Σύντομα κοντά σας οι υπηρεσίες μέσα από την ιστοσελίδα!

Οι υπηρεσίες αφορούν το γραφείο εξυπηρέτησης στην Μακρακώμη Φθιώτιδας με εξυπηρέτηση για όλη την Ελλάδα.

Προς το παρόν μπορείτε να καλέσετε στα τηλέφωνα: +30 223 602 4107 & +30 698 630 7660

Επίσης μπορείτε να στείλετε email σε: max.makrakomi@gmail.com

Μερικές από τις υπηρεσίες μας

Σύντομα κοντά σας!

Μετάβαση στο περιεχόμενο