Προσθήκη, μετακίνηση ενοτήτων και αλλαγή διαστάσεων με σύρσιμο

Ενότητα 3: Κείμενα, φωτογραφίες και ενότητες σελίδας · Χρόνος ανάγνωσης: 10 λεπτά

Στόχος μαθήματος: Μετά από αυτό το μάθημα μπορείτε να χτίσετε μια σελίδα από ενότητες: να προσθέσετε μια ενότητα μέσω του επιλογέα ή της συνομιλίας, να τη μετακινήσετε, να την αντιγράψετε και να τη διαγράψετε, να αλλάξετε αποστάσεις και διαστάσεις με σύρσιμο, και να επιλέξετε ανά ενότητα στήλες, γωνίες, φόντο και ορατότητα σε κινητό.

Βασικές έννοιες: ενότητα, Μπλοκ, Προσθήκη στοιχείου, μορφή, Ενότητα από κάτω, τρία σχέδια, Δημιουργία με AI, Επεξεργασία ενότητας, Απόσταση, Απόσταση μεταξύ στοιχείων, Στήλες, Γωνίες, Απόκρυψη σε κινητό, λαβή, Δικό σας HTML

Μια σελίδα είναι μια στοίβα από ενότητες

Κάθε σελίδα του site σας αποτελείται από ενότητες: οριζόντιες λωρίδες τοποθετημένες η μία κάτω από την άλλη. Στην κορυφή συνήθως υπάρχει ένα Hero (το μεγάλο άνοιγμα με επικεφαλίδα, κείμενο και κουμπί) και από κάτω, για παράδειγμα, Κάρτες με τις υπηρεσίες σας, Κριτικές, Ωράριο λειτουργίας και στο κάτω μέρος Επικοινωνία. Ο AI Builder διαθέτει 35 είδη ενοτήτων, το καθένα σε μία ή περισσότερες μορφές: το ίδιο περιεχόμενο, με διαφορετική διάταξη.

Όποιος σκέφτεται έτσι, φτιάχνει καλύτερη σελίδα. Βάλτε τις σημαντικότερες πληροφορίες στην κορυφή, ένα θέμα ανά ενότητα, και κλείστε με αυτό που πρέπει να κάνει ο επισκέπτης (να τηλεφωνήσει, να στείλει email, να ζητήσει προσφορά). Στο Schildersbedrijf Example η αρχική σελίδα έχει την εξής μορφή: Hero με «Ζητήστε προσφορά», Κάρτες με τρεις υπηρεσίες, Φωτογραφία και κείμενο για τον τρόπο εργασίας, Κριτικές, Ερωτήσεις και Επικοινωνία.

Προσθήκη ενότητας: τρεις τρόποι

1. Επιλογή μόνοι σας στον επιλογέα (δωρεάν)

Ανοίξτε τον πίνακα Μπλοκ στην πλευρική στήλη ή κάντε κλικ στην προεπισκόπηση στο Ενότητα από κάτω: το κουμπί αυτό βρίσκεται στη γραμμή εργαλείων μιας επιλεγμένης ενότητας και στη γραμμή με το + που εμφανίζεται όταν περνάτε τον δείκτη ανάμεσα σε δύο ενότητες. Κάτω από την προεπισκόπηση υπάρχει επίσης το Προσθήκη στοιχείου.

Ο επιλογέας δείχνει τα είδη σε ομάδες: Δημοφιλή, Αρχή και κεφαλίδα, Κείμενο και ιστορία, Υπηρεσίες και προϊόντα, Τιμές και προσφορές, Εμπιστοσύνη και ομάδα, Φωτογραφία και βίντεο, Πρακτικές πληροφορίες, Επικοινωνία και πρόσκληση σε δράση και Δικά σας στοιχεία και widgets. Υπάρχει πεδίο αναζήτησης («Αναζήτηση, για παράδειγμα κριτικές, τιμές ή ομάδα»). Κάθε είδος το βλέπετε ως παράδειγμα στη δική σας εταιρική ταυτότητα. Κάντε κλικ σε ένα είδος για να δείτε τις μορφές του και επιλέξτε μία με Προσθήκη. Αν δεν φτάσατε εκεί μέσω μιας συγκεκριμένης ενότητας, ο AI Builder ρωτά «Πού να μπει το ...;»: κάντε κλικ σε μια πράσινη γραμμή στη σελίδα σας ή επιλέξτε Στην κορυφή ή Στο κάτω μέρος. Μπορείτε επίσης να σύρετε ένα στοιχείο απευθείας από τον πίνακα στη σελίδα σας.

Αυτό δεν κοστίζει τίποτα. Η νέα ενότητα έρχεται με κείμενα παραδείγματος, τα οποία στη συνέχεια αλλάζετε μόνοι σας (μάθημα 3.2) ή αφήνετε το AI να τα συμπληρώσει (μάθημα 3.1). Σημαντικό: όσο υπάρχει ακόμη τέτοιο κείμενο παραδείγματος στο site σας, ο AI Builder δεν δημοσιεύει το site σας. Θα δείτε τότε το μήνυμα «Υπάρχει ακόμη κείμενο παραδείγματος στο site σας. Συμπληρώστε το πρώτα ή αφαιρέστε την ενότητα.»

2. Αίτημα στη συνομιλία: τρία σχέδια

Αν πληκτρολογήσετε στη συνομιλία «Θέλω μια ενότητα με τον τρόπο εργασίας μας σε τέσσερα βήματα», το AI δείχνει πρώτα τρία κατάλληλα σχέδια από τη βιβλιοθήκη ενοτήτων, στη δική σας εταιρική ταυτότητα. Επιλέγετε με Αυτό το σχέδιο ή κάνετε κλικ στο Αφήστε το AI να επιλέξει. Έπειτα το AI γεμίζει την ενότητα με περιεχόμενο, ως πρόταση. Επειδή προστίθεται μια ενότητα, αυτό κοστίζει 2 επεξεργασίες.

Αν πείτε ότι κάτι πρέπει να μπει σε μια υπάρχουσα ενότητα («βάλτε το ωράριο λειτουργίας στο μπλοκ επικοινωνίας») ή αν αναφέρετε μια υπηρεσία όπως Spotify ή Calendly με σύνδεσμο, ο AI Builder παραλείπει τα τρία σχέδια: τότε είναι σαφές τι θέλετε.

3. Δημιουργία δικού σας στοιχείου

Δεν βρίσκετε αυτό που ψάχνετε; Στην κορυφή του επιλογέα υπάρχει το Δημιουργήστε το δικό σας στοιχείο με AI. Περιγράψτε τι πρέπει να μπορούν να κάνουν οι επισκέπτες, για παράδειγμα έναν υπολογιστή τιμών ή ένα σύντομο κουίζ, και κάντε κλικ στο Δημιουργία με AI. Αυτό κοστίζει 2 επεξεργασίες, γιατί προστίθεται ένα νέο στοιχείο.

Μετακίνηση, αντιγραφή και διαγραφή

Περάστε τον δείκτη πάνω από μια ενότητα. Εμφανίζεται μια γραμμή εργαλείων με Αλλαγή με AI, Μετακίνηση πάνω, Μετακίνηση κάτω, Αντιγραφή, Ενότητα από κάτω και Διαγραφή, καθώς και μια λαβή για να σύρετε την ενότητα («Σύρετε αυτή την ενότητα σε άλλη θέση»). Στη Διαγραφή ο AI Builder ρωτά πρώτα «Είστε σίγουροι;». Και μεμονωμένα στοιχεία μέσα σε μια σειρά, όπως μία κάρτα ή μία κριτική, μπορείτε να τα σύρετε, να τα αντιγράψετε και να τα διαγράψετε.

Όλα αυτά τα κουμπιά είναι δωρεάν. Κάθε ενέργεια δημιουργεί μια νέα έκδοση («Η ενότητα μετακινήθηκε (έκδοση ...)»), οπότε μια ενότητα που διαγράψατε κατά λάθος την επαναφέρετε μέσω των Εκδόσεις (μάθημα 3.5). Η διαγραφή μέσω εντολής στη συνομιλία όμως κοστίζει μία επεξεργασία: χρησιμοποιήστε λοιπόν το κουμπί.

Αλλαγή διαστάσεων με σύρσιμο

Περάστε τον δείκτη στην προεπισκόπηση πάνω από μια ενότητα, φωτογραφία ή κείμενο και θα εμφανιστούν λαβές. Το σύρσιμο είναι δωρεάν και χωρίς AI:

• Κάτω άκρη μιας ενότητας: περισσότερη ή λιγότερη απόσταση πάνω και κάτω από την ενότητα.
• Hero: μεγαλύτερο ή μικρότερο ύψος.
• Φωτογραφία: πλατύτερη ή στενότερη, ψηλότερη ή πιο χαμηλή (η μορφή), πιο στρογγυλές ή πιο ίσιες γωνίες, και το σημείο εστίασης (μάθημα 3.3).
• Μπλοκ κειμένου: πλατύτερο ή στενότερο (δεξιά άκρη).
• Επικεφαλίδα: μεγαλύτερη ή μικρότερη, και η απόσταση από κάτω της.
• Σειρά καρτών ή στηλών: το πλάτος ολόκληρης της σειράς.

Κάντε διπλό κλικ σε μια λαβή και επανέρχεται η προεπιλεγμένη διάσταση· στο hero ο AI Builder επιλέγει τότε ξανά μόνος του το ύψος.

Γιατί το σύρσιμο είναι καλύτερο από το να ζητήσετε «κάν' το μεγαλύτερο»: βλέπετε αμέσως τι συμβαίνει, δεν κοστίζει τίποτα και το AI δεν αλλάζει κείμενο στην πορεία.

Επεξεργασία ενότητας: οι ρυθμίσεις μίας ενότητας

Κάντε κλικ σε μια ενότητα και επιλέξτε Επεξεργασία ενότητας. Ανοίγει ένα παράθυρο με:

Από κάτω βρίσκονται τα ίδια κουμπιά με τη γραμμή εργαλείων (Μετακίνηση πάνω, Μετακίνηση κάτω, Αντιγραφή, Ενότητα από κάτω, Διαγραφή) και, κάτω από το «Ή ζητήστε κάτι άλλο από το AI:», ένα πεδίο κειμένου για μια εντολή στο AI που αφορά μόνο αυτή την ενότητα.

Μερικές συμβουλές. Εναλλάξτε τα φόντα (ανοιχτή επιφάνεια, κανένα, απόχρωση), ώστε οι επισκέπτες να βλέπουν πού τελειώνει ένα θέμα. Σε μια σειρά καρτών χρησιμοποιήστε το πολύ τρεις ή τέσσερις στήλες· σε ένα τηλέφωνο έτσι κι αλλιώς μπαίνουν η μία κάτω από την άλλη. Χρησιμοποιήστε με φειδώ την Απόκρυψη σε κινητό: μην κρύβετε ποτέ τα στοιχεία επικοινωνίας σας ή κάτι που χρειάζεται ένας επισκέπτης από κινητό. Αν θέλετε να ελέγξετε πώς φαίνεται, επιλέξτε Κινητό στην επάνω γραμμή.

Δικό σας HTML

Στην ομάδα Δικά σας στοιχεία και widgets υπάρχει επίσης το Δικό σας HTML: μια ενότητα όπου επικολλάτε μόνοι σας HTML και, αν θέλετε, CSS. Μετά την τοποθέτηση την αλλάζετε με Επεξεργασία HTML στην ενότητα. Τα χρώματα και οι γραμματοσειρές ακολουθούν την εταιρική σας ταυτότητα μέσω μεταβλητών όπως var(--acc), var(--tekst) και var(--kop-font). Το CSS ισχύει μόνο για αυτή την ενότητα.

Οι περιορισμοί είναι σκόπιμοι: scripts, iframes και φόρμες δεν λειτουργούν εδώ. Για player, ημερολόγιο, χάρτη ή φόρμα από άλλη υπηρεσία χρησιμοποιήστε το Widget (μάθημα 4.3). Το Δικό σας HTML είναι για όσους γνωρίζουν HTML· για όλους τους άλλους, οι κανονικές ενότητες και το AI είναι ο γρηγορότερος δρόμος.

Παγίδες

• Κείμενο παραδείγματος που μένει σε μια ενότητα από τον επιλογέα: τότε δεν μπορείτε να δημοσιεύσετε.
• Πάρα πολλές ενότητες. Μια μακριά σελίδα με δέκα ενότητες δεν διαβάζεται. Αφαιρέστε ό,τι δεν προσθέτει τίποτα. Μια σελίδα έχει το πολύ 40 ενότητες, αλλά τόσες δεν θα τις χρειαστείτε ποτέ.
• Ρύθμιση αποστάσεων μέσω της συνομιλίας. Κοστίζει επεξεργασίες και είναι λιγότερο ακριβής από το σύρσιμο.
• Έλεγχος μόνο στον υπολογιστή. Οι στήλες, οι αποστάσεις και η απόκρυψη λειτουργούν διαφορετικά σε τηλέφωνο.
• Διαγραφή μέσω της συνομιλίας, ενώ το κουμπί Διαγραφή είναι δωρεάν.

Στον AI Builder: πώς να το κάνετε

1. Κάντε κλικ στην προεπισκόπηση στο Ενότητα από κάτω ή ανοίξτε τα Μπλοκ.
2. Επιλέξτε μια ομάδα, ένα είδος και μια μορφή, και κάντε κλικ στο Προσθήκη.
3. Αντικαταστήστε τα κείμενα παραδείγματος μόνοι σας ή με το AI.
4. Μετακινήστε με Μετακίνηση πάνω, Μετακίνηση κάτω ή τη λαβή· αντιγράψτε ή διαγράψτε μέσω της γραμμής εργαλείων.
5. Σύρετε την κάτω άκρη για την απόσταση· κάντε διπλό κλικ για επιστροφή στην προεπιλογή.
6. Ανοίξτε την Επεξεργασία ενότητας για φόντο, στήλες, γωνίες, ύψος του hero και Απόκρυψη σε κινητό.
7. Ελέγξτε στο Κινητό.

Σύνοψη

• Μια σελίδα είναι μια στοίβα από ενότητες· 35 είδη, το καθένα σε μία ή περισσότερες μορφές.
• Η προσθήκη μέσω του επιλογέα είναι δωρεάν και δίνει κείμενο παραδείγματος που πρέπει να αντικαταστήσετε πριν δημοσιεύσετε· μέσω της συνομιλίας παίρνετε τρία σχέδια και κοστίζει 2 επεξεργασίες.
• Η μετακίνηση, η αντιγραφή, η διαγραφή και η αλλαγή διαστάσεων με σύρσιμο είναι δωρεάν· διπλό κλικ σε μια λαβή επαναφέρει την προεπιλογή.
• Η Επεξεργασία ενότητας ρυθμίζει φόντο, απόσταση, απόσταση μεταξύ στοιχείων, στήλες, γωνίες, ύψος του hero και Απόκρυψη σε κινητό.
• Το Δικό σας HTML είναι δυνατό, αλλά χωρίς scripts, iframes και φόρμες· γι' αυτά υπάρχει το widget.

Κουίζ

Άσκηση

Άσκηση D3.4: Ένα τμήμα μέσα, ένα έξω. Βελτιώστε τη δομή της αρχικής σας σελίδας με τα κουμπιά και τις λαβές, χωρίς περιττές εντολές στο AI.

Λίστα ελέγχου:

• [ ] καταγράψατε τις ενότητες της αρχικής σας σελίδας από πάνω προς τα κάτω·
• [ ] προσθέσατε μία ενότητα μέσω του επιλογέα και αντικαταστήσατε όλο το κείμενο παραδείγματος·
• [ ] αφαιρέσατε ή συγχωνεύσατε με Διαγραφή μία ενότητα που δεν πρόσθετε τίποτα·
• [ ] μετακινήσατε μία ενότητα με Μετακίνηση πάνω, Μετακίνηση κάτω ή τη λαβή·
• [ ] σύρατε την απόσταση τουλάχιστον μίας ενότητας και την επαναφέρατε μία φορά με διπλό κλικ·
• [ ] αλλάξατε στην Επεξεργασία ενότητας το φόντο ή τις στήλες·
• [ ] ελέγξατε τη σελίδα στο Κινητό.

Ερωτήσεις:

1. Ποια ήταν η σειρά των ενοτήτων σας πριν και μετά, και γιατί επιλέξατε αυτή τη σειρά;
2. Ποια ενότητα αφαιρέσατε και τι δεν λείπει τώρα σε έναν επισκέπτη;
3. Πόσες επεξεργασίες σας κόστισε αυτή η άσκηση και ποιο βήμα μέσω της συνομιλίας θα είχε κοστίσει επεξεργασίες;

Αφού πατήσετε «ολοκληρώθηκε», βλέπετε ένα παράδειγμα απάντησης: από Hero, Αριθμοί, Κάρτες, Κριτικές, Επικοινωνία σε Hero, Κάρτες, Φωτογραφία και κείμενο (τρόπος εργασίας), Κριτικές, Ερωτήσεις, Επικοινωνία, ώστε οι υπηρεσίες να βρίσκονται αμέσως κάτω από το άνοιγμα· η ενότητα Αριθμοί αφαιρέθηκε επειδή οι αριθμοί ήταν επινοημένοι· η άσκηση κόστισε 0 επεξεργασίες, ενώ η διαγραφή ή μια νέα ενότητα μέσω της συνομιλίας θα κόστιζε 1 ή 2.

Περαιτέρω ανάγνωση

• Δωρεάν μάθημα Ορατότητα στο διαδίκτυο 3.2: Επικεφαλίδες και η δομή μιας σελίδας
• Δωρεάν μάθημα Ορατότητα στο διαδίκτυο 4.2: Πρώτα το κινητό και το viewport
• Sitebuilder και AI Builder: ποιον να επιλέξετε και πώς τον ανοίγετε;