Παράδειγμα κατασκευής ιστοσελίδας με το ronneby. Δημιουργούμε ιστότοπο wordpress με το πρότυπο ronneby.
Δημιουργία ιστοσελίδας με το ronneby
Ένα από τα δημοφιλέστερα θέματα για το wordpress που κυκλοφόρησαν το 2017 είναι το ronneby. Ίσως να είναι το δημοφιλέστερο. Οι κατασκευαστές ιστοσελίδων το επιλέγουν και το χρησιμοποιούν κυρίως για δυο λόγους. Ο πρώτος είναι το μεγάλο πλήθος παραλλαγών (theme demos) στις οποίες κυκλοφορεί. Όλα τα theme demos είναι εξαιρετικά όμορφα, το ένα καλύτερο από το άλλο . Ο δεύτερος είναι η ευκολία και η απλότητα που έχει το περιβάλλον διαχείρισης. Όλες οι επιλογές είναι συγκεντρωμένες σε ένα κεντρικό πίνακα διαχείρισης, και μάλιστα είναι πολύ απλή η χρήση τους. Το ronneby απλοποιεί πολύ τη δημιουργία ιστοσελίδων.
Κατασκευή ιστοσελίδας με το κατάλληλο theme
Το ronneby διανέμεται με 49 theme demos. Ανάλογα την εταιρεία για την οποία κατασκευάζουμε τον ιστότοπο, ανάλογα με το θέμα του ιστότοπου, έχουμε τη δυνατότητα να επιλέξουμε το κατάλληλο theme demos. Ένα πολύ δυνατό σημείο που έχει το ronneby είναι οτι η διαχείριση είναι ίδια για όλα τα theme demos. Επομένως εάν μάθουμε να κάνουμε δημιουργία ιστοσελίδας με το ronneby θα κερδίσουμε πολύ χρόνο από τις επόμενες εργασίες κατασκευής site που θα κάνουμε. Είναι δύσκολο να φανταστούμε επαγγελματικό κλάδο που να μην εμπίπτει στις κατηγορίες θεμάτων του συγκεκριμένου wordpress θέματος. Εάν το αγαπημένο σας Content Management System για την κατασκευή ιστοσελίδων είναι το wordpress, τότε μάλλον το ronneby θα γίνει το αγαπημένο σας theme.
Δημιουργία ιστοσελίδας για τεχνική εταιρεία
Στη συνέχεια θα παρουσιάσουμε τη χρήση του Ronneby για τη δημιουργία ιστοσελίδας σε εταιρεία που ασχολείται με κουφώματα αλουμινίου, συνθετικά κουφώματα, θωρακισμένες πόρτες, εσωτερικές πόρτες, πτυσσόμενα κάγκελα, ξυλουργικές εργασίες και ειδικές κατασκευές. Είναι απαραίτητο να γνωρίζουμε την πλήρη γκάμα εργασιών της εταιρείας για την οποία θα φτιάξουμε το site. Θα ήταν λάθος επιλογή σχεδιασμού ιστοσελίδας να επιλέξουμε ένα θέμα που αφορά μόνο κουφώματα. Αν και οι δυο πρώτοι τομείς εργασιών της εταιρείας είναι κουφώματα αλουμινίου και συνθετικά κουφώματα, αυτά είναι πράγματα που αφορούν την εικόνα του σπιτιού. Αν είχαμε μόνο αυτά τότε θα μας κάλυπτε ένα γενικό θέμα, που να περιέχει κυρίως image galleries. Εμείς όμως θέλουμε κάτι πιο τεχνικό διότι η εταιρεία ασχολείται και με ειδικές κατασκευές και ξυλουργικές εργασίες
Επιλογή theme demo του ronneby
Εξετάσαμε διαδοχικά όλα τα theme demos του ronneby ανοίγοντας την προεπισκόπησή τους. Επιλέξαμε το “Building company demo” διότι ταιριάζει στην εταιρεία της οποίας κατασκευάζουμε το site.
Κόστος κατασκευής ιστοσελίδων
Εάν είστε εταιρεία κατασκευής ιστοσελίδων, τότε το κόστος κατασκευής ιστοσελίδων που δίνετε στουςς πελάτες σας είναι περίπου σταθερό. Εάν όμως είστε freelancer κατασκευαστής ιστοσελίδων τότε το κόστος για τη δημιουργία μιας ιστοσελίδας εξαρτάται από τις απαιτήσεις του πελάτη και τις ιδιαίτερες δυσκολίες που θα κληθείτε να αντιμετωπίσετε. Το δυνατό σημείο του ronneby είναι οτι με τόσο μεγάλο πλήθος από theme demos είναι βέβαιο οτι θα το επαναχρησιμοποιήσετε. Η καλή γνώση θα σας διευκύνει πολύ στις επόμενες περιπτώσεις κατασκευής site που θα αναλάβετε. Συνεπώς έχετε την επιλογή. Είτε απλά να είστε πιο σύντομοι τη επόμενη φορά, είτε να δώσετε περισσότερα πράγματα με το ίδιο κόστος, είτε να χαμηλώσετε τις τιμές κατασκευής ιστοσελίδων εάν και ο επόμενος πελάτης επιλέξει το ronneby. Καλό θα είναι να μπειτε εδώ και να δείτε πακέτα και τεχνικές προδιαγραφές για την κατασκευή ιστοσελίδων.
Εγκατάσταση wordpress
Προχωρήσαμε στην εγκατάσταση πρώτα του wordpress και στη συνέχεια του ronneby. Τόσο το πρώτο όσο και το δεύτερο αποτελούν θεμελιώσεις γνώσεις κατασκευής ιστοσελίδων. Υποθέτουμε οτι ο αναγνώστης αυτού του άρθρου γνωρίζει πως να κάνει εγκατάσταση του wordpress και θεμάτων σε αυτό. Αφού εγκαταστήσουμε το θέμα και τα πρόσθετα που το συνοδεύουν (αναγκαστικά θα το κάνουμε, διότι μας βγάζει προειδοποίηση), στη συνέχεια εγκαθιστούμε το building company demo του ronneby.
Πρώτα πατάμε εδώ:
και στη συνέχεια εδώ:
Εδώ καθυστερεί αρκετά. Εάν δεν έχετε πολύ γρήγορο internet, θα χρειαστεί να κάνετε πολλή υπομονή. Το πρόβλημα είναι ότι δεν βγάζει κάποια προειδοποίηση ούτε κάποια μπάρα προόδου με συνέπεια να δημιουργείται η εντύπωση ότι κόλλησε. Εγκαταστήσαμε αρκετά theme demo πριν καταλήξουμε στο building company demo. Σε όλα καθυστέρησε, αλλά δεν κόλλησε σε κανένα.
Δημιουργία menu
Το πρώτο πράγμα που κάνουμε μόλις εγκαταστήσουμε το θέμα είναι να φτιάξουμε το menu. Διότι το menu είναι η καρδιά του ιστότοπου. Από εκεί ξεκινάνε όλα. Εάν δεν χωράνε οι επιλογές που θέλουμε, ίσως πρέπει να αλλάξουμε θέμα, πριν πάμε στα επόμενα βήματα κατασκευή στοσελίδας. Αλλιώς θα ταλαιπωρηθούμε πολύ. Αποφασίσαμε να βάλουμε στο κεντρικό menu όλες τις δραστηριότητες της εταιρείας.
Προώθηση ιστοσελίδας
Κατά τη δημιουργία menu πρέπει να έχουμε στο μυαλό μας την προώθηση της ιστοσελίδας. Ένα από τα σημαντικότερα πράγματα για την προώθηση ιστοσελίδων είναι να βρίσκονται οι λέξεις κλειδιά στα σημαντικά σημεία του ιστοτόπου. Το menu είναι ίσως το σημαντικότερο σημείο της ιστοσελίδας. Η παρουσία των λέξεων κλειδιών εκεί αποτελεί μια ισχυρή ένδειξη ότι ο ιστότοπος σχετίζεται με αυτή τη λέξη κλειδί. Άρα δεν θα περάσει απαρατήρητος από τη google όσον αφορά αυτές τις λέξεις κλειδιά. Εδώ μπορείτε να μάθετε πως προσεγγίζουν οι επαγγελματίες το θέμα της προώθησης ιστοσελίδων
Εικόνες και κείμενα στο Revolution Slider
Το επόμενο βήμα ήταν να επιλέξουμε εικόνες και κείμενα και να τα βάλουμε στο Revolution Slider. Όσο είχαμε το demo content το menu έδειχνε πολύ ωραίο. Όταν όμως βάλαμε τις πραγματικές εικόνες από κουφώματα αλουμινίου και πτυσσόμενα κάγκελα, δημιουργήθηκε πρόβλημα. Οι εικόνες πoυ επιλέξαμε, αν και πολύ σκούρες, δεν ήταν τόσο σκούρες όσο οι εικόνες του θέματος. Για την ακρίβεια, είχαν φωτεινά σημεία. Με συνέπεια να μη φαίνονται καθαρά τα γράμματα στις λέξεις του menu. Όπου ήταν φωτεινή η εικόνα, έκανε δυσανάγνωστα τα γράμματα.
Το πρόβλημα λύθηκε με το photoshop. Πριν ανεβάσουμε τις εικόνες, κάναμε μια απλή επεξεργασία με το photoshop. Πολύ απλά, τοποθετήσαμε πάνω πάνω ένα layer με μαύρο χρώμα και transparency 50%. Με αυτό τον τρόπο, όποια εικόνα και να βάλουμε ως φόντο, δεν θα δημιουργήσει πρόβλημα με δυσανάγνωστα γράμματα.
Το αποτέλεσμα είναιπολύ καλύτερο. Τα γράμματα πλέον είναι ευανάγνωστα:
Πετυχημένη κατασκευή ιστοσελίδας
Ένας πετυχημένος ιστότοπος δίνει στον αναγνώστη να καταλάβει κατευθείαν τι περιέχει. Σε αυτό βοηθάνε οι τέσσερις εικόνες που βρίσκονται κάτω από το Revolution Slider. Δυστυχώς το ronneby δεν έχει φροντίσει ώστε να έχουν το ίδιο ύψος. Για αυτό θα πρέπει να μεριμνήσει ο κατασκευαστής της ιστοσελίδας. Το καλύτερο είναι να ρυθμίσει τις διαστάσεις των εικόνων, πλάτος και ύψος, μέσα από το photoshop.
Ψηφιακό Marketing
Κάτω από τις τέσσερις αυτές εικόνες υπάρχει μια κίτρινη ταινία με τρεις φράσεις. Από τεχνικής άποψης είναι το ευκολότερο πράγμα να αλλάξουμε αυτές τις φράσεις. Άλλα όμως μας λέει το Ψηφιακό Marketing. Εάν εξετάσουμε τα πράγματα από την άποψη του Internet Marketing, έχουμε να αντιμετωπίσουμε ένα πραγματικά δύσκολο πρόβλημα. Γιατί να επιλέξω τη συγκεκριμένη εταιρεία; Το κίτρινο φόντο και τα μεγάλα γράμματα θα τραβήξουν αμέσως το μάτι του επισκέπτη. Έχει δει τις εικόνες, έχει δει τα αντικείμενα εργασιών της εταιρείας, και τώρα πρέπει να λάβει απάντηση στο κρισιμότερο ερώτημα. Αυτό μα λέει το Ψηφιακό Marketing. Γιατί να επιλέξω την συγκεκριμένη εταιρεία για τα κουφώματα ή την πόρτα ασφαλείας στο σπίτι μου; Σωστό Internet Marketing επιβάλλει να βάλουμε εκεί τα δυνατά σημεία της εικόνας. Μάθετε περισσότερα για το Ψηφιακό Marketing.
Εισαγωγή video στην ιστοσελίδα
Στη συνέχεια βάζουμε το video στην κεντρική μας ιστοσελίδα. Εδώ έχουμε άλλη μια δυσκολία. Ναι μεν είναι εύκολο να βάλουμε video μέσω του editor, αν όμως θέλουμε να ανοίγει σε full screen τότε πρέπει να χρησιμοποιήσουμε τον κώδικα shortcode του vc_video
To video_id θα το βρούμε από το youtube.
