WPBakery Page Builder (Visual Composer) 2022
WPBakery τι είναι; Ένας οδηγός χρήσης
WPBakery Page Builder (Visual Composer) 2022: Η σύνταξη κώδικα HTML, CSS και PHP για τη δημιουργία ή την προσαρμογή ενός ιστότοπου WordPress μπορεί να είναι απίστευτα χρονοβόρα, ακόμη και για έναν έμπειρο σχεδιαστή ιστοσελίδων. Αυτός είναι πιθανώς ο λόγος που μεγάλο μέρος της κοινότητας του WordPress έχει προχωρήσει στη χρήση προσθηκών (plugins) δημιουργίας σελίδων.
Το WPBakery Page Builder (παλαιότερα ονομαζόταν Visual Composer) είναι το πιο ευέλικτο και πλούσιο σε χαρακτηριστικά πρόσθετο δημιουργίας σελίδων WordPress που μπορείτε να αποκτήσετε το 2020.
Είναι συμβατό με σχεδόν κάθε σύγχρονο θέμα του WordPress και δεν χρειάζεστε δεξιότητες προγραμματισμού για να μπορέσετε να το χρησιμοποιήσετε. Στην πραγματικότητα, ενώ το χρησιμοποιείτε, δεν θα χρειαστεί καν να πληκτρολογήσετε κανέναν σύντομο κωδικό!
Με τους λεπτομερείς επεξεργαστές front-end και back-end που προσφέρει το WPBakery Page Builder, η δημιουργία σελίδων για τον ιστότοπό σας στο WordPress, συχνά δεν περιλαμβάνει τίποτα περισσότερο από μερικά κλικ και λειτουργίες μεταφοράς και απόθεσης.
Σε αυτό το σεμινάριο του Visual Composer, θα σας δείξω πώς να προσθέσετε το WPBakery Page Builder στο στιγμιότυπο του WordPress και θα σας παρουσιάσω όλες τις σημαντικές δυνατότητες του.
To παρόν άρθρο έγινε στα πλαίσια του πιστοποιημένου σεμιναρίου 12 μήνης διάρκειας web designer / developer του ΚΕΔΙΒΙΜ του Πανεπιστημίου Αιγαίου το οποίο στηρίζει το Εργαστήριο ΤΠΕ Ήρων και ο επιχειρησιακός του βραχίονας η γνωστή εταιρεία κατασκευής ιστοσελίδων DreamWeaver.Gr
Προαπαιτούμενα
Για να μπορέσετε να ακολουθήσετε αυτό το σεμινάριο του WPBakery Page Builder, θα χρειαστείτε:
Τι κάνει το WPBakery (Visual Composer) το καλύτερο εργαλείο δημιουργίας σελίδων WordPress σήμερα;
Επιπλέον, για να κατανοήσετε καλύτερα πώς να χρησιμοποιείτε το Visual Composer και γιατί πρέπει να χρησιμοποιείτε το WPBakery Page Builder αντί για όλες τις άλλες προσθήκες δημιουργίας σελίδων που είναι διαθέσιμες σήμερα, σας προτείνω να διαβάσετε το ακόλουθο άρθρο:
1. Εγκατάσταση του WPBakery Page Builder
Το WPBakery Page Builder είναι ένα premium πρόσθετο WordPress. Είναι διαθέσιμο στο CodeCanyon, οπότε συνδεθείτε στον λογαριασμό σας στο Envato και αγοράστε μια άδεια χρήσης για αυτό. Είναι ακόμα συχνά γνωστό με το παλιό του όνομα: Visual Composer.
Αφού το αγοράσετε, θα μπορείτε να κάνετε λήψη ενός αρχείου ZIP που περιέχει διάφορα αρχεία που σχετίζονται με την προσθήκη.
Εξαγάγετε το αρχείο ZIP και αναζητήστε ένα αρχείο με το όνομα js_composer.zip. Αυτό είναι ένα αρχείο αρχειοθέτησης πρόσθετων, το οποίο πρέπει να ανεβάσετε στον διακομιστή σας στο WordPress. Συνδεθείτε λοιπόν στον πίνακα διαχειριστή του WordPress και μεταβείτε στις Plugins > Add New. Στη συνέχεια, κάντε κλικ στο κουμπί Upload Plugin και επιλέξτε js_composer.zip .
Πατήστε το κουμπί Install Now για να ξεκινήσει η εγκατάσταση.
Μόλις ολοκληρωθεί η εγκατάσταση, πατήστε το κουμπί Activate Plugin. Μόλις το κάνετε αυτό, θα μεταφερθείτε στην οθόνη καλωσορίσματος του WPBakery Page Builder.
2. Διαμόρφωση του Plugin
Η εκμάθηση του τρόπου χρήσης του WPBakery Page Builder είναι εύκολη. Το πρόσθετο είναι εξαιρετικά προσαρμόσιμο, προσφέροντας δεκάδες επιλογές διαμόρφωσης που μπορείτε να τροποποιήσετε ώστε να ταιριάζουν με τις απαιτήσεις σας. Πατήστε το κουμπί Settings στην οθόνη καλωσορίσματος για να τους ρίξετε μια ματιά.
Η προσθήκη έχει μια καλά μελετημένη προεπιλεγμένη διαμόρφωση που είναι αρκετά καλή για τις περισσότερες περιπτώσεις χρήσης. Για παράδειγμα, στην καρτέλα General Settings, μπορείτε να δείτε ότι υποστηρίζει αποκριτικό σχεδιασμό αμέσως.
Το πρόσθετο προσπαθεί επίσης να εφαρμόσει διάφορες βελτιστοποιήσεις για να διασφαλίσει ότι οι σελίδες που δημιουργείτε με αυτό, έχουν ελάχιστους χρόνους φόρτωσης. Για παράδειγμα, χρησιμοποιεί από προεπιλογή μόνο το υποσύνολο λατινικής γραφής των γραμματοσειρών Google. Για να υποστηρίξετε διαφορετική γρσφή, το μόνο που χρειάζεται να κάνετε είναι να αλλάξετε την επιλογή Google fonts subsets.
Στην καρτέλα Role Manager, μπορεί να παρατηρήσετε ότι αυτή η προσθήκη είναι διαθέσιμη μόνο για τις σελίδες του ιστότοπού σας στο WordPress. Εάν θέλετε να είναι διαθέσιμο και για τις αναρτήσεις σας, επιλέξτε Custom στη λίστα Post types και ενεργοποιήστε την επιλογή post.
Αφού κάνετε τις αλλαγές, κάντε κύλιση προς τα κάτω και κάντε κλικ στο κουμπί Save Changes.
Τέλος, εάν θέλετε να προσαρμόσετε την εμφάνιση και την αισθητική των στοιχείων περιεχομένου του WPBakery Page Builder, μεταβείτε στην καρτέλα Design Options και επιλέξτε το πεδίο Use custom design. Μόλις το κάνετε, θα μπορείτε να αλλάξετε τα προεπιλεγμένα χρώματα, τα περιθώρια και τα πλάτη που χρησιμοποιεί η προσθήκη.
3. Χρήση του Επεξεργαστή Back-End
Αυτό είναι ένα βασικό βήμα σε αυτό το σεμινάριο του Visual Composer. Το WPBakery Page Builder παρέχεται με δύο ισχυρούς επεξεργαστές: έναν επεξεργαστή back-end και έναν επεξεργαστή front-end. Και τα δύο είναι προσβάσιμα μόνο μέσα σε μια σελίδα ή μια ανάρτηση. Επομένως, προς το παρόν, σας προτείνω να δημιουργήσετε μια νέα σελίδα μεταβαίνοντας στις Pages > Add New.
Στη διεπαφή δημιουργίας σελίδας, θα μπορείτε να επιλέξετε ποιο πρόγραμμα επεξεργασίας θέλετε να χρησιμοποιήσετε. Ξεκινήστε κάνοντας κλικ στο κουμπί Backend Editor για να ανοίξετε το back-end editor.
Χρησιμοποιώντας αυτό το πρόγραμμα επεξεργασίας, μπορείτε εύκολα να προσθέσετε μια ποικιλία από κοινά χρησιμοποιούμενα στοιχεία στη σελίδα. Το WPBakery Page Builder προσφέρει απλά στοιχεία, όπως μπλοκ κειμένου, εικόνες και διαχωριστικά. Προσφέρει επίσης πιο προηγμένα, όπως κουμπιά “Like” στο Facebook, Χάρτες Google, γραφήματα και κινούμενα καρουζέλ.
Για ευκολία πρόσβασης, τα στοιχεία χωρίζονται σε τέσσερις διαφορετικές κατηγορίες: content, social, structure, and WordPress widgets.
Όπως υποδηλώνει το όνομα, τα στοιχεία περιεχομένου είναι στοιχεία που συνήθως χρησιμοποιείτε για να δημιουργήσετε τα περιεχόμενα μιας σελίδας ή μιας ανάρτησης. Ομοίως, τα κοινωνικά στοιχεία είναι εκείνα που διευκολύνουν τους χρήστες να μοιράζονται τη σελίδα σας σε πλατφόρμες κοινωνικής δικτύωσης. Τα στοιχεία δομής, από την άλλη πλευρά, είναι για πιο προχωρημένους χρήστες, οι οποίοι έχουν την άνεση να γράφουν κώδικα. Σας επιτρέπουν να προσθέσετε απευθείας raw HTML και JavaScript στη σελίδα σας.
Για να προσθέσετε ένα στοιχείο, το μόνο που χρειάζεται να κάνετε είναι να πατήσετε το κουμπί Add Element και να επιλέξετε το στοιχείο που θέλετε.
Εναλλακτικά, μπορείτε να πατήσετε το κουμπί Add Text Block για να προσθέσετε απευθείας κάποιο κείμενο στη σελίδα.
Σημειώστε ότι εάν δεν είστε ικανοποιημένοι με την προεπιλεγμένη εμφάνιση ενός στοιχείου, μπορείτε πάντα να τροποποιήσετε τα στυλ του μεταβαίνοντας στην καρτέλα Design Options.
Αφού προσθέσετε μερικά στοιχεία, μπορεί να παρατηρήσετε ότι κάθε στοιχείο έχει μια γραμμή εργαλείων που σχετίζεται με αυτό, όπου περιέχει μερικά κουμπιά. Αυτά τα κουμπιά εμφανίζουν εικονίδια και σας επιτρέπουν να εκτελείτε σημαντικές λειτουργίες, όπως μεταφορά και απόθεση του στοιχείου για να αλλάξετε τη θέση του, να το αντιγράψετε, να το διαγράψετε ή να επεξεργαστείτε τα περιεχόμενά του.
4. Χρήση του WYSIWYG Front-End Editor
Ο επεξεργαστής back-end είναι ιδανικός για μεγάλες, περίπλοκες σελίδες που περιέχουν πολλά στοιχεία. Κατά τη χρήση του, πρέπει να πατάτε το κουμπί Preview κάθε φορά που θέλετε να δείτε πώς θα είναι η σελίδα σας όταν δημοσιευτεί.
Εάν επιλέξετε να χρησιμοποιήσετε το πρόγραμμα επεξεργασίας διεπαφής WYSIWYG, θα πρέπει να εργαστείτε με την τελική εμφάνιση της σελίδας σας από την αρχή. Μπορείτε πάντα να εναλλάσσεστε απρόσκοπτα από το ένα πρόγραμμα επεξεργασίας στο άλλο, επομένως μετακινηθείτε προς τα επάνω και πατήστε το κουμπί Frontend Editor για να ανοίξετε το νέο πρόγραμμα επεξεργασίας.
Σε αυτό το πρόγραμμα επεξεργασίας, θα δείτε τις γραμμές εργαλείων που σχετίζονται με ένα στοιχείο, μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το στοιχείο. Αυτές οι γραμμές εργαλείων και η λειτουργικότητα που προσφέρουν είναι πολύ παρόμοιες με αυτές που προσφέρει ο επεξεργαστής back-end.
Επιπλέον, το μπροστινό πρόγραμμα επεξεργασίας σάς επιτρέπει να βλέπετε πώς φαίνεται η σελίδα σε διάφορα μεγέθη οθόνης. Σας επιτρέπει επίσης να συνεχίσετε να επεξεργάζεστε τη σελίδα σε οποιοδήποτε μέγεθος οθόνης προτιμάτε.
5. Χρήση προτύπων
Μια άλλη σημαντική πτυχή της εκμάθησης πώς να χρησιμοποιείτε το WPBakery Page Builder είναι η χρήση προτύπων. Το WPBakery Page Builder σάς επιτρέπει να μετατρέψετε οποιαδήποτε σελίδα ή ανάρτηση δημιουργείτε με αυτό σε πρότυπο. Χρησιμοποιώντας αυτήν τη δυνατότητα, μπορείτε να ελαχιστοποιήσετε τον όγκο της επαναλαμβανόμενης εργασίας που κάνετε κατά τη δημιουργία σελίδων για τον ιστότοπό σας στο WordPress.
Για να αποθηκεύσετε την τρέχουσα διάταξη της σελίδας σας ως πρότυπο, ανοίξτε το παράθυρο διαλόγου Templates, δώστε ένα όνομα στο πρότυπο και πατήστε το κουμπί Save Template.
Δεν περιορίζεστε στο να εργάζεστε με τα δικά σας templates. Αυτό το πρόσθετο συνοδεύεται από μια μεγάλη βιβλιοθήκη template, η οποία ενημερώνεται τακτικά. Για να ανοίξετε τη βιβλιοθήκη, μεταβείτε στην καρτέλα Template Library και πατήστε το κουμπί Access Library.
Η βιβλιοθήκη, όπως μπορείτε να δείτε, περιέχει μια μεγάλη ποικιλία προτύπων διάταξης κορυφαίας ποιότητας. Όλα αυτά είναι διαθέσιμα σε εσάς δωρεάν. Πρέπει, ωστόσο, να ενεργοποιήσετε την άδεια του WPBakery Page Builder για να μπορέσετε να τα χρησιμοποιήσετε.
Γενικά, τα πρότυπα μπορούν να χωριστούν σε δύο κατηγορίες: πρότυπα για ολόκληρες σελίδες και πρότυπα για μεμονωμένα, ανεξάρτητα τμήματα μιας σελίδας. Για παράδειγμα, το πρότυπο About Page σάς βοηθά να δημιουργήσετε μια πλήρη σελίδα “about”. Αλλά το πρότυπο Hero Section δημιουργεί μόνο μια hero section για εσάς.
Τα καλύτερα WordPress WPBakery Page Builder Add-Ons & Extensions στο CodeCanyon για το 2020
Ελπίζω να σας άρεσε το σεμινάριο του WPBakery Page Builder που μοιράστηκα μαζί σας. Τώρα ξέρετε πώς να χρησιμοποιήσετε το WPBakery Page Builder. Στη συνέχεια, επιτρέψτε μου να σας πω πού μπορείτε να βρείτε τα καλύτερα επαγγελματικά πρόσθετα WPBakery WordPress, ώστε να μπορείτε να δημιουργήσετε έναν καταπληκτικό ιστότοπο σε ελάχιστο χρόνο.
Εξερευνήστε εκατοντάδες από τα καλύτερα WordPress add-ons που δημιουργήθηκαν ποτέ στο CodeCanyon της Envato Market. Με μια φθηνή εφάπαξ πληρωμή, μπορείτε να αγοράσετε ένα από αυτά τα πρόσθετα, επεκτάσεις και πρόσθετα WordPress υψηλής ποιότητας.
Ενώ το WPBakery είναι ένα πλήρες πρόγραμμα δημιουργίας σελίδων, feature-rich add-ons και extensions πλούσια σε δυνατότητες, θα σας επιτρέψουν να προσθέσετε μια μεγάλη ποικιλία λειτουργιών στον ιστότοπό σας, όπως:
- μοναδικά στοιχεία
- επιπλέον δυνατότητες WooCommerce
- κουτιά περιεχομένου
- και πολλα ΑΚΟΜΑ
Ξέρετε πώς να χρησιμοποιήσετε το Visual Composer. Αλλά αυτές οι επιπλέον δυνατότητες και η λειτουργικότητα είναι απαραίτητα για τον ιστότοπό σας στο WordPress, οπότε φροντίστε να ελέγξετε την επιλογή μας παρακάτω!
5 Κορυφαία πρόσθετα δημιουργίας σελίδων WPBakery
Ακολουθούν μερικά από τα καλύτερα add-ons και επεκτάσεις του WPBakery που είναι διαθέσιμα στο CodeCanyon για το 2020.
1. Τα πιό πρόσφατα πρόσθετα για το Εργαλείο δημιουργίας σελίδων WPBakery
Αυτό είναι το add-on με τις περισσότερες πωλήσεις για το WPBakery Page Builder. Με περισσότερες από 60.000 πωλήσεις, ο κόσμος το λατρεύει για τα φανταστικά χαρακτηριστικά του:
-
- σχεδίαση με πλήρη απόκριση
- μοναδικά και ευέλικτα στοιχεία
- καθαρός κώδικας
- 9+ επιδείξεις πλήρους σελίδας
- παράλλαξη και φόντο βίντεο
- CSS3 κινούμενα σχέδια
- εκπαιδευτικά βίντεο
- καλύτερη υποστήριξη πελατών
2. Πρόσθετο Composium—WP Bakery Page Builder Extensions
Το Composium είναι ένα άλλο πρόσθετο επεκτάσεων WPBakery με τις περισσότερες πωλήσεις. Περιλαμβάνει περισσότερα από 150 premium στοιχεία για το WPBakery Page Builder και εκπληκτικές δυνατότητες όπως:
-
- σχεδίαση με πλήρη απόκριση
- εικονίδιο διαχείρισης γραμματοσειρών
- Διαχείριση γραμματοσειρών Google
- πρόγραμμα δημιουργίας προτύπων και γραφικών στοιχείων
- αρθρωτό σύστημα
- Ενσωμάτωση WooCommerce
- καθαρό και αποτελεσματικό κώδικα
- γρήγορη υποστήριξη
3. Μαζικά πρόσθετα για το WPBakery Page Builder
Τα Massive Addons είναι συμβατά με το 99% των θεμάτων WordPress που υποστηρίζουν το Visual Composer 4.7+. Και αυτό το δημοφιλές πρόσθετο WPBakery μόλις κυκλοφόρησε μια ενημέρωση με πολλά ενδιαφέροντα στοιχεία:
-
- προεπιλογές κοντέινερ
- Πρότυπα 35 σελίδων +17 νέα πρότυπα
- Υποστήριξη WooCommerce
- εγκατάσταση προτύπου με ένα κλικ
- 1.700+ προκαθορισμένες προεπιλογές
4. WooCommerce Page Builder
Αυτό το πρόσθετο WPBakery δημιουργήθηκε για να σας βοηθήσει να προσαρμόσετε τον ιστότοπό σας στο WooCommerce. Με αυτό το πρόσθετο, θα μπορείτε να δημιουργήσετε οποιαδήποτε διάταξη για μια σελίδα WooCommerce εύκολα, χωρίς να απαιτούνται γνώσεις κωδικοποίησης. Είναι ένα φοβερό πρόσθετο WPBakery γιατί είναι:
-
- εύκολο στην εγκατάσταση
- φιλικό προς τον χρήστη
- συμβατό με οποιοδήποτε θέμα
- υποστηρίζει συντομότερους κωδικούς WooCommerce
5. Πρόχειρο του WPBakery Page Builder
Το Πρόχειρο του WPBakery Page Builder σάς επιτρέπει να αντιγράψετε/αποκόψετε και να επικολλήσετε μεμονωμένα στοιχεία περιεχομένου ή μια στοίβα στοιχείων περιεχομένου στις σελίδες, χωρίς ποτέ να φύγετε από τη διεπαφή back-end του WPBakery Page Builder.
Ένα άλλο εξαιρετικό χαρακτηριστικό είναι ότι μπορείτε να μεταφέρετε πρόχειρα μεταξύ τοποθεσιών και τομέων χρησιμοποιώντας τη λειτουργία εξαγωγής/εισαγωγής. Μπορείτε επίσης να δημιουργήσετε πρότυπα πρόχειρου για να εξοικονομήσετε πολύ χρόνο!
Συμπέρασμα
Σε αυτό το σεμινάριο του WPBakery Page Builder, μάθατε πώς να κάνετε λήψη, εγκατάσταση και διαμόρφωση του WPBakery Page Builder. Είδατε επίσης πόσο εύκολο είναι να δημιουργήσετε σελίδες και δημοσιεύσεις για τον ιστότοπό σας στο WordPress με αυτό. Για να μάθετε περισσότερα σχετικά με τον τρόπο χρήσης του Visual Composer, ανατρέξτε στην τεκμηρίωσή του.
Δημιουργώντας το πρόσθετο Visual Composer, ένα από τα πρώτα ολοκληρωμένα προγράμματα δημιουργίας σελίδων μεταφοράς και απόθεσης για το WordPress, η ομάδα του WPBakery άλλαξε σημαντικά τον τρόπο με τον οποίο οι άνθρωποι χρησιμοποιούν το WordPress. Στα τέλη του 2017, μετονόμασαν την προσθήκη τους σε WPBakery Page Builder. Σήμερα, έχει πάνω από 350.000 χρήστες και διαθέτει πάνω από 2 εκατομμύρια ιστότοπους.
Το πρόσθετο έχει επίσης ένα πλούσιο οικοσύστημα χτισμένο γύρω του. Επειδή είναι εύκολα επεκτάσιμο, υπάρχουν πολλά πρόσθετα τρίτων που είναι διαθέσιμα για αυτό.
Εάν είστε κάποιος που χρησιμοποιεί τακτικά το WordPress, το CodeCanyon έχει πολλά περισσότερα πρόσθετα WordPress που μπορούν να αλλάξουν ριζικά τον τρόπο με τον οποίο αναπτύσσετε και διαχειρίζεστε τους ιστότοπούς σας στο WordPress.
Επίσης μπορείτε να διαβάσετε πολλά χρήσιμα άρθρα για κατασκευή ιστοσελίδων με wordpress εδώ
Μετάφραση: Μαρία Νάσταρη
Πηγή: webdesign.tutsplus.com
