Πώς να χρησιμοποιήσετε το πρόσθετο Simplio3D WordPress στο Elementor

Το πρόσθετο Simplio3D WordPress δεν διαθέτει ξεχωριστά widgets Elementor και δεν τα χρειάζεται. Κάθε μπλοκ Simplio3D είναι επίσης ένα shortcode και το τοποθετείτε με το εγγενές widget Shortcode του Elementor, ένα widget ανά μπλοκ. Το shortcode εμφανίζει ακριβώς ό,τι εμφανίζει και το μπλοκ, επομένως ένας διαμορφωτής προϊόντος στο Elementor λειτουργεί ακριβώς όπως ένας που έχει δημιουργηθεί στον επεξεργαστή μπλοκ WordPress: μία ζωντανή διαμόρφωση που μοιράζονται όλα τα widgets, η εργαλειοθήκη 3D, οι διαστάσεις, το AR, η ζωντανή τιμή, η σύνοψη, τα αιτήματα προσφοράς και το καλάθι WooCommerce.

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

Πριν ξεκινήσετε

• Το πρόσθετο Simplio3D, έκδοση 2.0.3 ή νεότερη, από τον κατάλογο προσθέτων του WordPress.org, που λειτουργεί σε κατάσταση Simplio3D v3. Οι νέες εγκαταστάσεις ξεκινούν σε αυτήν την κατάσταση. Ένας ιστότοπος που ενημερώθηκε από την έκδοση 1.x παραμένει σε κατάσταση Legacy μέχρι να αλλάξετε τη ρύθμιση από Simplio3D → Migration.
• Συνδεδεμένος ο λογαριασμός σας Simplio3D: στο WordPress, μεταβείτε στο Simplio3D → Log in to Simplio3D.
• Ένα δημοσιευμένο έργο: στο Simplio3D, ανοίξτε το Share, ενεργοποιήστε τον σύνδεσμο κοινοποίησης και αφήστε τον χωρίς κωδικό πρόσβασης. Αν περιορίζετε τους τομείς ενσωμάτωσης, προσθέστε τον τομέα του ιστότοπού σας.
• Elementor. Η δωρεάν έκδοση αρκεί.
• Για Add to Cart: WooCommerce και ένα απλό προϊόν με τιμή.

Προσθήκη στο καλάθι με WooCommerce

Στον επεξεργαστή μπλοκ, η επιλογή ενός προϊόντος στο μπλοκ Add to Cart το συνδέει με το έργο σας. Ένα shortcode δεν μπορεί να το κάνει αυτό, επομένως συνδέστε πρώτα εσείς το προϊόν:

1. Στα Products, επεξεργαστείτε ένα απλό προϊόν με κανονική τιμή.
2. Ανοίξτε το Product data → Simplio3D, ορίστε το έργο Simplio3D στο έργο σας και το Cart price σε Simplio3D υπολογισμένη τιμή (επαληθευμένη από τον διακομιστή), ή στην τιμή WooCommerce του ίδιου του προϊόντος. Κάντε κλικ στο Update.
3. Σημειώστε το id του προϊόντος: περάστε τον δείκτη πάνω από το προϊόν στη λίστα Products ή διαβάστε το post=123 στη γραμμή διευθύνσεων της οθόνης επεξεργασίας.
4. Αντικαταστήστε το widget Submit με το [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Προσθέστε το quantity_mode="selector" για να επιτρέψετε στους αγοραστές να επιλέγουν ποσότητα και το after_add="cart" για να τους μεταφέρετε στο καλάθι.

Το καλάθι, το checkout, τα email παραγγελιών και το WooCommerce → Orders εμφανίζουν στη συνέχεια τη διαμόρφωση, μια εικόνα της και την επαληθευμένη τιμή.

Ένα προϊόν που συνδέεται με την τιμή Simplio3D μπορεί να αγοραστεί μόνο μέσω του διαμορφωτή, επομένως το κανονικό κουμπί Add to cart του WooCommerce στη σελίδα προϊόντος ζητά από τους αγοραστές να το διαμορφώσουν πρώτα. Με το δωρεάν Elementor, διατηρήστε τον διαμορφωτή σε ξεχωριστή σελίδα και συνδέστε σε αυτήν από το προϊόν, για παράδειγμα με έναν σύνδεσμο «Διαμορφώστε το δικό σας» στη σύντομη περιγραφή. Με το Elementor Pro, μπορείτε να δημιουργήσετε ένα πρότυπο Single Product που χρησιμοποιεί τα widgets Shortcode του Simplio3D αντί για το widget Add to Cart του Elementor· προεπισκοπήστε αυτήν τη ρύθμιση πριν τη δημοσιεύσετε.

Ρυθμίσεις που θα χρησιμοποιείτε συχνότερα

Προσθέστε ρυθμίσεις μέσα στο shortcode, με ίσια εισαγωγικά και κάτω παύλες. Η αντιγραφή από Word, Google Docs ή Slack μπορεί να μετατρέψει τα εισαγωγικά σε καμπυλωτά και τότε το WordPress αγνοεί τη ρύθμιση.

• Το height="620px" mobile_height="400px" στο Viewer ορίζει το ύψος του σε επιτραπέζιους υπολογιστές και σε οθόνες πλάτους έως 781 px.
• Το loading="eager" σε ένα Viewer στην κορυφή της σελίδας το φορτώνει αμέσως αντί όταν εμφανιστεί κατά την κύλιση.
• Το layout="dropdown" σε ένα widget Options μετατρέπει τις επιλογές του σε αναπτυσσόμενη λίστα. Τα grid, list και buttons λειτουργούν επίσης, ανάλογα με τον τύπο επιλογής.
• Το columns="4" thumbnails="small" χωρά περισσότερες επιλογές σε κάθε σειρά.
• Το prefix="From" tax_display="exclude" στο Price προσθέτει κείμενο πριν από αυτό και εμφανίζει την τιμή προ φόρων, όπως στο καλάθι WooCommerce.
• Το summary_mode="compact" hide_defaults="yes" στο Summary τοποθετεί κάθε επιλογή σε μία γραμμή και παραλείπει όσες έχουν μείνει στην προεπιλεγμένη τιμή τους.
• Το display="hosted" στο Viewer εμφανίζει τον πλήρη διαμορφωτή Simplio3D, μαζί με τις επιλογές, σε ένα μόνο widget, χωρίς να απαιτούνται ids επιλογών.
• Το instance="oak" σε κάθε widget ενός συνόλου διατηρεί ξεχωριστούς δύο διαμορφωτές στην ίδια σελίδα. Τα widgets με το ίδιο instance μοιράζονται μία διαμόρφωση.

Προσαρμόστε το στο σχεδιασμό σας στο Elementor

• Η καρτέλα Advanced κάθε widget Shortcode διαχειρίζεται το περιθώριο, την εσωτερική απόσταση, το φόντο, το περίγραμμα και την εμφάνιση ανά συσκευή. Το viewer γεμίζει τη στήλη του, επομένως ορίστε το πλάτος της στήλης ή του container για να το κάνετε φαρδύτερο ή στενότερο.
• Τα μπλοκ λαμβάνουν τη γραμματοσειρά και το χρώμα κειμένου από τη σελίδα. Το χρώμα έμφασης (η επιλεγμένη επιλογή, ο δακτύλιος εστίασης και τα κουμπιά) επιστρέφει σε σχεδόν μαύρο σε κλασικά θέματα όπως το Hello Elementor, επομένως ορίστε το στο χρώμα έμφασης του Elementor από Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Άλλες ιδιότητες περιλαμβάνουν το --s3d-radius για τις γωνίες, το --s3d-thumb για το μέγεθος μικρογραφίας και το --s3d-button-bg για το κουμπί. Για να διαμορφώσετε μόνο ένα widget, προσθέστε το class="my-finish" στο shortcode του και στοχεύστε το .my-finish στο CSS σας.