Δευτέρα, 17 Ιανουαρίου, 2022
Online σεμινάρια
ΑρχικήΚατασκευή ιστοσελίδων με wordpressElementor Tutorial : Πως να σχεδιάσεις την δικιά σου ιστοσελίδα.

Elementor Tutorial : Πως να σχεδιάσεις την δικιά σου ιστοσελίδα.

Ένας ωραίος τρόπος να δημιουργήσεις ιστοσελίδες στο WordPress, είναι ο page builder Elementor. Χρησιμοποιώντας έναν επεξεργαστή μεταφοράς και απόθεσης (drag and drop), μπορούμε να προσαρμόσουμε σχεδόν κάθε πτυχή του σχεδιασμού της ιστοσελίδας μας. Υπάρχουν περισσότερα από 90 μικροεφαρμογές (widgets) να επιλέξεις όπως κείμενο, εικόνες, κουμπιά και δυναμικό περιεχόμενο τα οποία μπορείτε με drag and drop να τα τοποθετήσετε σε οποιαδήποτε τοποθεσία των σελίδων του ιστότοπού σας για τον πιο εντυπωσιακό οπτικά συνδυασμό.

O Elementor είναι διαθέσιμος ως δωρεάν πρόσθετο (plugin) αλλά τα καλύτερα χαρακτηριστικά, συμπεριλαμβανομένης της premium υποστήριξης και της δυνατότητας δημιουργίας ενός ολόκληρου πρότυπου (template) από την αρχή, είναι κλειδωμένα πίσω από μια premium συνδρομή. Ο Elementor Pro σας βοηθά να σχεδιάζετε όχι μόνο άρθρα και σελίδες, αλλά και κεφαλίδες (headers) και υποσέλιδα (footers) χρησιμοποιώντας τον ίδιο τρόπο, της μεταφοράς και απόθεσης. Η free έκδοση του, ωστόσο, περιορίζεται μόνο στην προσαρμογή άρθρων και σελίδας.
Ανεξάρτητα από την έκδοση που θα επιλέξετε, είναι ένα ισχυρό και ευέλικτο πρόσθετο που σας επιτρέπει να δημιουργήσετε όμορφα σχέδια που μπορούν είτε να βελτιώσουν το υπάρχον θέμα σας είτε να σας βοηθήσουν να δημιουργήσετε ένα νέο από την αρχή. Σε αυτό το άρθρο, ρίχνουμε μια ματιά σε όλα όσα πρέπει να γνωρίζετε για να σχεδιάσετε την ιστοσελίδα σας με Elementor και WordPress.
Πριν ξεκινήσετε να χρησιμοποιείτε τον page builder , πρέπει να έχετε έναν ιστότοπο που να τρέχει την πιο πρόσφατη έκδοση του WordPress. Μπορείτε να δημιουργήσετε τον δικό σας ιστότοπο WordPress ακολουθώντας τις οδηγίες βήμα προς βήμα από τον οδηγό μας για αρχάριους. Μόλις τελειώσετε, είστε έτοιμοι να προχωρήσετε στο επόμενο βήμα και να ξεκινήσετε την εγκατάσταση του Elementor.

1. Kάντε εγκατάσταση τον Elementor στο WordPress

O Elementor, όπως είπαμε, είναι ένα δωρεάν πρόσθετο και είναι προαιρετικό να πληρώσετε την pro έκδοση για το WordPress. Για να κατεβάσετε και να εγκαταστήσετε το πρόσθετο στον ιστότοπό σας, θα χρειαστεί είτε να επισκεφτείτε την επίσημη σελίδα του page builder είτε να κατεβάσετε το πρόσθετο από το repository των προσθέτων. Να επισημάνουμε ότι η πληρωμένη έκδοση του πρόσθετου είναι διαθέσιμη αποκλειστικά στην επίσημη σελίδα του page builder.
Αν σας αρκεί η δωρεάν έκδοση του πρόσθετου, μπορείτε να το κατεβάσετε απευθείας από το repository των πρόσθετων. Απλώς επισκεφτείτε τη σελίδα διαχείρισης του ιστότοπού σας στο WordPress (συνήθως www.τοdomainσας.com/wp-admin.php). Μετά μεταβείτε στον πίνακα ελέγχου (Dashboard) και επιλέξτε στα πρόσθετα (Plugins), νέο πρόσθετο. Στην αναζήτηση πληκτρολογήστε Elementor. Μόλις εμφανιστεί το πρόσθετο στα αποτελέσματα αναζήτησης, μπορείτε να κάνετε κλικ στην εγκατάσταση και στη συνέχεια στην ενεργοποίηση.
Μπορείτε επίσης να κάνετε λήψη του πρόσθετου από την επίσημη σελίδα του page builder. Απλώς επισκεφτείτε την ιστοσελίδα και κάντε κλικ στο Get Started. Από εκεί, μπορείτε να ακολουθήσετε έναν απλό οδηγό που θα σας βοηθήσει να επιλέξετε το πρόγραμμα που θέλετε (δωρεάν ή επί πληρωμή) και να κατεβάσετε το πρόσθετο με την μορφή ZIP. Στην συνέχεια, μπορείτε να το ανεβάσετε το αρχείο ZIP στην ιστοσελίδα σας μεταβαίνοντας στον πίνακα ελέγχου → πρόσθετα → νέο πρόσθετο → μεταφόρτωση πρόσθετου.
Εάν έχετε εγγραφεί στην πληρωμένη έκδοση του Elementor, θα χρειαστεί να εγκαταστήσετε το επιπλέον πρόσθετο Elementor Pro εκτός από το Elementor. Είναι διαθέσιμο για λήψη μόνο στο elementor.com, το κατεβάζετε σε μορφή ZIP και μπορείτε να κάνετε εγκατάσταση στον πίνακα ελέγχου όπως είπαμε παραπάνω.

2. Δημιουργήστε την πρώτη σε σελίδα ή άρθρο 
Ανεξάρτητα από την έκδοση στην οποία έχετε επιλέξει, ο page builder σας επιτρέπει να επεξεργάζεστε μεμονωμένα τις σελίδες και τα άρθρα σας με drag and drop. Απλώς μεταβείτε στο άρθρο ή τη σελίδα που θέλετε να επεξεργαστείτε, πηγαίνοντας στον πίνακα ελέγχου του WordPress και μεταβαίνοντας στις σελίδες → προσθήκη νέας ή άρθρα → προσθήκη νέου. Μόλις εισέλθετε στη σελίδα ή στο άρθρο για να κάνετε επεξεργασία, κάντε κλικ στο επεξεργασία με τον Elementor.
Διαθέτοντας το drag and drop σας επιτρέπει να προσαρμόσετε τις σελίδες και τα άρθρα σας χρησιμοποιώντας στήλες (columns) ή πλέγματα (grids). Το πλαϊνό μενού στα αριστερά με τα διάφορα στοιχεία που έχει, μας βοηθάει με την μέθοδο του drag and drop να τοποθετούμε δεξιά στην σελίδα μας όποιο στοιχείο θέλουμε. Αυτά τα στοιχεία περιλαμβάνουν ενότητες, επικεφαλίδες, κείμενο, εικόνες, κουμπιά και άλλα. Φυσικά, η πληρωμένη έκδοση έρχεται με περισσότερα στοιχεία από τη δωρεάν έκδοση του.
Έτσι, επιλέξτε τα στοιχεία που θέλετε να τοποθετήσετε στην σελίδα σας ώστε να έχετε την επιθυμητή δομή. Μπορείτε επίσης να διαλέξετε ένα από τα πολλά έτοιμα πρότυπα (templates) που είναι διαθέσιμα από την βιβλιοθήκη. Μπορείτε να βρείτε την βιβλιοθήκη προτύπων, απλώς πατώντας το μικρό εικονίδιο με το φάκελο στην περιοχή περιεχομένου της σελίδας σας.

3. Δουλεύοντας με τον Elementor Theme Builderhtml-gr-elementor-theme-editor
Στον πίνακα ελέγχου, πηγαίνετε στα πρότυπα και επιλέγετε τον Theme Builder. Με αυτή την επιλογή, ξεκλειδώνετε πρόσθετες επιλογές για να προσαρμόσετε τον ιστότοπό σας και σας επιτρέπει να δημιουργήσετε ένα ολόκληρο θέμα από την αρχή στο WordPress. Είναι διαθέσιμο μόνο στην pro έκδοση του Elementor. Χρησιμοποιώντας το, μπορείτε να προσθέσετε έναν απεριόριστο αριθμό προτύπων και να τα ρυθμίσετε να εμφανίζονται υπό συγκεκριμένες συνθήκες σε ορισμένες περιοχές του ιστότοπού σας.
Υπάρχουν διάφοροι τύποι προτύπων που μπορείτε να δημιουργήσετε, όπως Header, Footer, Single Page, Single Post, Archive, Search Results, και Error 404. Ο Elementor προτείνει την προσθήκη τουλάχιστον ενός προτύπου σε καθέναν από αυτούς τους τύπους προτύπων προκειμένου να δημιουργήσετε ένα πλήρες θέμα για τον ιστότοπό σας. Μπορείτε επίσης να δημιουργήσετε πολλά πρότυπα του ίδιου τύπου. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα ξεχωριστό header για τη landing page σας και ένα άλλο header για τα άρθρα σας.
O Theme Builder χρησιμοποιεί το ίδιο περιβάλλον επεξεργασίας στα άρθρα και τις σελίδες. Μπορείτε με drag and drop να βάλετε τα στοιχεία που θέλετε για να προσαρμόσετε τη σχεδίαση κάθε προτύπου και να το ρυθμίσετε, ώστε να το δημοσιεύσετε κάτω υπό συγκεκριμένες προϋποθέσεις στον ιστότοπό σας. Ο Theme Builder του Elementor είναι η πιο ευέλικτη και αξιοσημείωτη πτυχή του πρόσθετου.

4. Δημιουργήστε ένα ηλεκτρονικό κατάστημα
Το WooCommerce είναι το απόλυτο πρόσθετο ηλεκτρονικού εμπορίου για το WordPress. Αυτή τη στιγμή χρησιμοποιείται από περισσότερα από 2 εκατομμύρια ηλεκτρονικά καταστήματα σε όλο τον κόσμο. Μαζί με τον Elementor, μπορεί να χρησιμοποιηθεί για τη δημιουργία του απόλυτου ιστότοπου ηλεκτρονικού εμπορίου, με αισθητικό περιβάλλον και εξαιρετικό UX design.
Αφού εγκαταστήσετε και ενεργοποιήσετε τόσο το WooCommerce όσο και τον Elementor από τον πίνακα ελέγχου του WordPress, μπορείτε να προσαρμόσετε κάθε σελίδα του ηλεκτρονικού σας καταστήματος χρησιμοποιώντας προσαρμοσμένα πρότυπα. Για να το κάνετε αυτό, μεταβείτε στο Elementor → Theme Builder και δημιουργήστε ένα νέο πρότυπο κάτω από το Single Product.
Αυτό θα σας επιτρέψει να προσαρμόσετε τη σελίδα περιγραφής προϊόντος του ηλεκτρονικού σας καταστήματος. Απλώς σχεδιάστε τη σελίδα σας με drag and drop ή επιλέξτε ένα από τα πολλά διαθέσιμα πρότυπα για να ξεκινήσετε. O Elementor είναι απόλυτα συμβατός με το WooCommerce και εφαρμόζει αυτόματα τις αλλαγές της δομής σε όλες τις περιγραφές προϊόντων στον ιστότοπό σας.

Μετάφραση: Τάκης Μπάτσικας

Πηγή: CreativeBloq.com

ΔΙΑΒΑΣΤΕ ΠΕΡΙΣΣΟΤΕΡΑ
RELATED ARTICLES

ΑΦΗΣΤΕ ΜΙΑ ΑΠΑΝΤΗΣΗ

Please enter your comment!
Please enter your name here

- Advertisment -
Online σεμινάρια

ΣΧΕΤΙΚΑ ΑΡΘΡΑ