Δημιουργήστε μια προσαρμοσμένη σελίδα προϊόντος WooCommerce με θέμα Flatsome

Επίκαιρο θέμα

Το Flatsome είναι ένα ισχυρό θέμα WordPress που έχει σχεδιαστεί για ιστότοπους ηλεκτρονικού εμπορίου και συνοδεύεται από ενσωμάτωση WooCommerce.

Είναι ένα από τα πιο δημοφιλή θέματα WooCommerce στο ThemeForest. Μέχρι τη στιγμή της συγγραφής αυτού του σεμιναρίου, ήταν πάνω από 174.500 πωλήσεις και μια καταπληκτική βαθμολογία 4,8 αστεριών προερχόμενη από περισσότερες από 6.600 κριτικές.

Το Flatsome έχει σχεδιαστεί κυρίως με γνώμονα τους αρχάριους και τους μη γνώστες της τεχνολογίας.

Αυτό είναι εξαιρετικό για άτομα που θέλουν να ξεκινήσουν με μια διαδικτυακή επιχείρηση, αλλά δεν ξέρουν πώς να κωδικοποιούν ή έχουν τον προϋπολογισμό για να προσλάβουν έναν επαγγελματία κωδικοποιητή. Με το Flatsome, θα μπορείτε να δημιουργήσετε έναν ιστότοπο με επαγγελματική εμφάνιση χρησιμοποιώντας απλά και διαισθητικά εργαλεία.

Τώρα, το Flatsome έρχεται γεμάτο με τόνους εκπληκτικών χαρακτηριστικών και λειτουργιών. Για να δείξουμε τι είναι διαθέσιμο και πώς λειτουργεί, έχουμε ένα γρήγορο σεμινάριο που σας δείχνει πώς να δημιουργήσετε μια σελίδα προϊόντος WooCommerce χρησιμοποιώντας το Flatsome.

Λοιπόν, χωρίς περαιτέρω καθυστέρηση, ας ξεκινήσουμε:

Πίνακας περιεχομένων:

Διαφορά μεταξύ Flatsome, WooCommerce και WordPress

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

Ας ξεκινήσουμε με το WordPress. Είναι μια πλατφόρμα όπου εγκαθιστάτε διαφορετικά θέματα και plugin για να δημιουργήσετε τον ιστότοπό σας. Υπάρχουν χιλιάδες plugin και θέματα διαθέσιμα για την εκπλήρωση άλλων εργασιών σύμφωνα με τις απαιτήσεις σας.

Το WooCommerce είναι ένα plugin που εγκαθιστούμε στο WordPress και σας επιτρέπει να προσθέσετε διαφορετικές δυνατότητες στον ιστότοπό μας. Με την εγκατάσταση αυτού του plugin , μπορούμε να φτιάξουμε τον ιστότοπο και το ηλεκτρονικό μας κατάστημα με πρόσθετες λειτουργίες όπως καλάθι αγορών, επεξεργασία πληρωμών, διαχείριση προϊόντων κ.λπ.

Τέλος, αλλά σίγουρα, ένα από τα πιο κρίσιμα στοιχεία είναι η προοπτική της ιστοσελίδας μας. Το Flatsome είναι ένα θέμα που μας επιτρέπει να προσαρμόσουμε την προοπτική του ιστότοπού μας σύμφωνα με τις επιθυμίες μας. Για παράδειγμα, εάν το λογότυπο της εταιρείας σας είναι πορτοκαλί, θα θέλατε να σκεφτείτε το χρώμα του ιστότοπού σας. Είναι αυτό που μπορεί να σας προσφέρει το Flatsome.

Δημιουργήστε μια σελίδα προϊόντος WooCommerce χρησιμοποιώντας το θέμα Flatsome

Δεδομένου ότι όλοι οι αναγνώστες μας έχουν γνώσεις σχετικά με το WordPress, το WoCommerce και το Flatsome, ήρθε η ώρα να προχωρήσουμε στην προσαρμογή της σελίδας προϊόντων μας με το φανταστικό πρόγραμμα δημιουργίας UX που συνοδεύει το θέμα Flatsome. Είναι ένα χαρακτηριστικό drag and drop που κάνει τη ζωή του σχεδιαστή εξαιρετικά εύκολη.

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

Ωστόσο, με τη βοήθεια του WooCommerce και του Flatsome, αυτή η εργασία έχει γίνει εξαιρετικά εύκολη. Πρέπει να καθίσετε και να σχεδιάσετε πώς θα μοιάζει ο ιστότοπός σας, και αυτό είναι. Το WooCommerce θα είναι εκεί για να σας βοηθήσει με τις επιλογές δημιουργίας του. Μπορείτε να δημιουργήσετε ένα πλήρες ηλεκτρονικό κατάστημα που λειτουργεί σε λίγα μόνο λεπτά με μεταφορά και απόθεση.

Με το WooCommerce και το Flatsome , θα μπορείτε να δώσετε μια εντελώς νέα ζωή στις ιδέες σας για ένα ηλεκτρονικό κατάστημα. Ο ιστότοπός σας πρέπει να έχει μοντέρνα και όμορφη εμφάνιση για να μπορεί να προσελκύει πελάτες. Επομένως, το Flatsome είναι η καλύτερη λύση για όλα τα προβλήματά σας, επομένως κατεβάστε το από εδώ και ας ξεκινήσουμε.

Το Flatsome έχει μερικά φανταστικά χαρακτηριστικά, αλλά ένα από τα στοιχεία είναι ότι έχει γίνει κορυφαία επιλογή περισσότερων από 300.000 χρηστών. Ένα απόλυτο εργαλείο βοηθά στη δημιουργία τεράστιων ιστοσελίδων με απόκριση χωρίς να χρειάζεται να κωδικοποιήσετε ούτε μια γραμμή. Επιπλέον, η ικανότητά του να δημιουργεί μερικά εξαιρετικά δημιουργικά και μοναδικά ηλεκτρονικά καταστήματα το καθιστά ακόμη πιο αξιόλογο.

Έτσι, χωρίς να χάσουμε άλλο χρόνο, ας προχωρήσουμε στο σεμινάριο. Αυτό το σεμινάριο σάς οδηγεί στην πλήρη διαδικασία σχεδιασμού της σελίδας προϊόντων. Οι εικόνες θα σας βοηθήσουν να αποκτήσετε μια καλύτερη ιδέα για το πώς θα προχωρήσει η εργασία στη διαδικασία.

Βήμα 1: Επιλέξτε μια διάταξη για τη σελίδα προϊόντος

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

Για αυτό το amp , θα συνεχίσουμε με την επιλογή Classic Shop. Ωστόσο, δεν υπάρχει περιορισμός για εσάς. Η διαδικασία προσαρμογής θα είναι παρόμοια για κάθε διάταξη που επιλέγετε. Η μόνη διαφορά θα ήταν ότι η βασική δομή της σελίδας θα είναι διαφορετική από την άλλη.

Προχωρώντας στο εργαλείο προσαρμογής προϊόντος, του δώσαμε το όνομα στην αριστερή πλαϊνή γραμμή πλήρους ύψους.

Υπάρχουν δύο διαθέσιμες επιλογές για την προσαρμογή της σελίδας προϊόντων. Το πρώτο πρέπει να γίνει με το πρόγραμμα δημιουργίας UX, ενώ το άλλο είναι να δημιουργήσετε τη σελίδα με μη αυτόματο τρόπο. Εάν επιλέξετε τη δεύτερη επιλογή, θα πρέπει να κατευθυνθείτε στην επίσημη τεκμηρίωση και να εντοπίσετε τους συντομότερους κωδικούς. Εάν είστε αρχάριος και αυτή είναι η πρώτη σας εμπειρία στη δημιουργία ενός ηλεκτρονικού καταστήματος, σας συνιστώ να πάτε για αυτήν την πρώτη επιλογή.

(Προαιρετικό) Βήμα 2: Δημιουργία σελίδας προϊόντος με μη αυτόματο τρόπο

Εδώ είναι ένα στιγμιότυπο οθόνης της επίσημης σελίδας τεκμηρίωσης του Flatsome. Μπορείτε να πληκτρολογήσετε τους κωδικούς λέξης και να τους αναζητήσετε.

Μόλις πατήσετε την αναζήτηση, θα εμφανιστεί μια λίστα με συντομότερους κωδικούς στην οθόνη. Μπορείτε να επιλέξετε τους συντομότερους κωδικούς που είναι σημαντικοί για τη σελίδα του προϊόντος. Η χρήση σύντομων κωδικών απαιτεί λιγότερη προσπάθεια, αλλά είναι σημαντικό να έχετε μια μικρή πρακτική εμπειρία με το WordPress και τη χρήση συντομεύσεων.

Ακολουθεί η λίστα με τους συντομότερους κωδικούς που μπορείτε να χρησιμοποιήσετε στον ιστότοπο για να δημιουργήσετε σελίδες.

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

Ξεκινήστε να δημιουργείτε ένα μπλοκ με τίτλο. Εάν θέλετε να αναπτύξετε το κεφάλι, πρέπει να κάνετε κλικ στο «Προσθήκη νέου» που είναι διαθέσιμο κάτω από μπλοκ UX που βρίσκονται στον πίνακα ελέγχου σας.

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

Θα είμαστε στο ίδιο επίπεδο μετά από αυτό το μικρό βήμα όπου μπορούμε να προσαρμόσουμε τη σελίδα μας σύμφωνα με τις επιθυμίες μας. Τώρα μεταβείτε στην επιλογή θέματος σελίδας προϊόντος και πατήστε το εικονίδιο προσαρμοσμένης διάταξης.

Μόλις ολοκληρωθεί, θα μπορείτε τώρα να δημιουργήσετε μπλοκ από το αναπτυσσόμενο μενού Προσαρμοσμένη διάταξη προϊόντος.

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

Μόλις ολοκληρωθεί, απλώς πατήστε το κουμπί Δημοσίευση. θα αποθηκεύσει τις ρυθμίσεις.

Βήμα 3: Προσαρμόστε τη σελίδα προϊόντος

Ήρθε η ώρα να ξεκινήσουμε την προσαρμογή. Αρχικά, θα πλοηγηθούμε στη σελίδα των υπαρχόντων προϊόντων από τη διεπαφή που ορίσαμε νωρίτερα στα βήματα.

Είναι σημαντικό να επιλέξετε ένα συγκεκριμένο προϊόν που πρέπει να ρυθμίσουμε. Θα πρέπει να έχετε πλήρεις λεπτομέρειες, εικόνες της εργασίας που πρέπει να προσαρμόσουμε. Με αυτόν τον τρόπο, η διαδικασία γίνεται πιο άνετη για την οπτικοποίηση της ενότητας σελίδας που θα δημιουργήσετε.

Η επιλογή δημιουργίας UX είναι ορατή. Απλώς πατήστε το κουμπί για να ξεκινήσει η προσαρμογή.

Αφού ανοίξει το εργαλείο δημιουργίας UX, μπορείτε να δείτε από την εικόνα ότι τα στοιχεία σελίδας προϊόντος είναι διαθέσιμα στο αριστερό πλαίσιο της σελίδας προϊόντων σας.

Το αριστερό πλαίσιο είναι το μπλοκ που δημιουργήσαμε αρχικά. Το δημιουργήσαμε με τη βοήθεια των σύντομων κωδικών που ελήφθησαν από την τεκμηρίωση.

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

Επιπλέον, σας επιτρέπει επίσης να αναδιατάξετε στοιχεία από την προεπισκόπηση του builder και να τοποθετήσετε πρόσθετα στοιχεία στη σελίδα προϊόντος του builder. Σε αυτήν την επίδειξη, η ενότητα Καρτέλες Προϊόντων και το Σχετικό προϊόν έχουν αναδιαταχθεί με ένα απλό μεταφορά και απόθεση.

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

Τυλίγοντας

Είναι επιτακτική ανάγκη να έχετε μια διαδικτυακή επιχείρηση στη σύγχρονη εποχή, επειδή οι άνθρωποι προτιμούν να μένουν σπίτι για να παραμείνουν ασφαλείς. Ξεκινήστε λοιπόν να χτίζετε το πρώτο ηλεκτρονικό κατάστημα της επιχείρησής σας με το Flatsome και μαγέψτε τους πελάτες σας με τη μοναδικότητα και τη δημιουργικότητά του. Επιπλέον, δεν υπάρχει χάος στον κώδικα στον επεξεργαστή περιεχομένου, μόνο μερικές γραμμές σύντομου κώδικα. Το Flatsome είναι αναμφίβολα το καλύτερο θέμα που έχω συναντήσει. Επομένως, δεν χρειάζεται να ψάξετε γύρω σας για οποιοδήποτε άλλο θέμα, απλώς πατήστε το λήψης και ξεκινήστε αμέσως να δημιουργείτε το προσαρμοσμένο ηλεκτρονικό σας κατάστημα.

Αφήστε ένα σχόλιο

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα απαιτούμενα πεδία είναι επισημασμένα *