Website builder Site.Pro: Φτιάξε το site σου σε 1 μέρα!

Σε αυτό το άρθρο θα σου δείξουμε βήμα προς βήμα πώς να κατασκευάσεις ένα site με το website builder Site.Pro εύκολα, γρήγορα και χωρίς να έχεις καθόλου σχετικές γνώσεις.

Για να προχωρήσεις στην κατασκευή του site σου πρέπει να κατοχυρώσεις ένα domain name και να αγοράσεις ένα πακέτο web hosting, πολύ εύκολα και γρήγορα μέσα από το site μας.

Όταν είσαι έτοιμος επέστρεψε σε αυτό το άρθρο για να φτιάξεις το site σου σύμφωνα με τα παρακάτω.

Τι περιλαμβάνει ο οδηγός:

1. Πρόσβαση στον sitebuilder
2. Επιλογή Template
3. Διαδραστικός βοηθός χρήσης
4. Δημιουργία/επεξεργασία σελίδων
5. Προσθήκη/αλλαγή λογότυπου
6. Προσθήκη/επεξεργασία κειμένου
7. Εισαγωγή εικόνων
8. Προσθήκη Χάρτη
9. Φόρμες επικοινωνίας
10. Responsive design
11. Βελτιστοποίηση SEO
12. Στατιστικά site

1. Συνδέσου στον sitebuilder

Για να αποκτήσεις πρόσβαση στο website builder Site.Pro θα πρέπει να συνδεθείς στον πίνακα ελέγχου του web hosting σου με το username και password που έχεις λάβει κατά την αγορά του πακέτου.

Πάτα εδώ για να συνδεθείς και στη συνέχεια επίλεξε το domain name που θέλεις να κατασκευάσεις το site σου.

*Αν έχεις κατοχυρώσει domain name και δεν το έχεις προσθέσει ακόμη στο διαχειριστικό του web hosting, ακολούθησε πρώτα τις οδηγίες εδώ και μετά επέστρεψε στο άρθρο για να συνεχίσεις με την κατασκευή.

1ο Βήμα

2ο Βήμα

2. Επιλογή template

Αφού πατήσεις στο εικονίδιο του website builder Site.Pro, θα δεις την παρακάτω οθόνη:

Περιηγήσου στις κατηγορίες των templates που θα βρεις στο αριστερό μενού και δοκίμασε μερικά σε προεπισκόπηση για να δεις ποιο ταιριάζει καλύτερα στο project σου (πχ το παρακάτω):

 

Αν έχεις ήδη επιλέξει κάποιο template και θες να το αλλάξεις, πάτα στο Νέα/Επαναφορά και στη συνέχεια Αλλαγή Προσχεδίου.

3. Διαδραστικός βοηθός χρήσης

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

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

4. Δημιουργία νέων ή επεξεργασία σελίδων

Για να δημιουργήσεις μια νέα σελίδα –πέρα αυτών που περιέχει ήδη το template- πάτα στο drop down menu (βλ. παρακάτω) και στη συνέχεια επίλεξε Επεξεργασία:

 

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

Τον ίδιο τρόπο θα ακολουθήσεις για να προσθέσεις, να αφαιρέσεις ή να επεξεργαστείς άλλες σελίδες.

5. Προθήκη/αλλαγή λογότυπου

Τα περισσότερα templates έχουν ένα προεπιλεγμένο λογότυπο, που μπορείς πολύ εύκολα να το αλλάξεις με δικό σου. Κάνε mouse over στο προεπιλεγμένο λογότυπο, επίλεξε το μολυβάκι και στη συνέχεια πάτα Αλλαγή εικόνας:

Φόρτωση νέου λογότυπου

Στο παράθυρο που θα ανοίξει, επίλεξε το κουμπί “Ανεβάστε μια νέα εικόνα” (βλέπε εικόνα 3ο βήμα) για να ανεβάσεις το logo σου.

 

6. Επεξεργασία & προσθήκη κειμένων

Επεξεργασία

Για να επεξεργαστείς τους τίτλους, υπότιτλους, παραγράφους κτλ, κάνε mouseover στο κείμενο που θες να επεξεργαστείς, πάτα διπλό κλικ ή πάτα το μολυβάκι:

Προσθήκη 

Για να προσθέσεις νέο κείμενο, σύρε και εναπόθεσε (drag & drop) στην περιοχή που θέλεις την επιλογή Κείμενο όπως βλέπεις παρακάτω.

Στο παράθυρο που θα ανοίξει, επίλεξε τη μορφή του κειμένου: τίτλος, υπότιτλος, παράγραφος κτλ. Στην προκειμένη περίπτωση επιλέγουμε πχ “Τίτλος”.

*Tip: Μπορείς να αλλάξεις το περιεχόμενο με live επεξεργασία οποιαδήποτε στιγμή πατώντας διπλό κλικ στο κείμενο.  

7. Εισαγωγή εικόνων

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

Στην συνέχεια θα ανοίξει το παράθυρο αλλαγής εικόνας, ανέβασε την εικόνα που θέλεις ή επίλεξε  από αυτές που έχεις ήδη στην Gallery σου.

8. Προσθήκη χάρτη

Πήγαινε στο σημείο της σελίδας που θέλεις να προσθέσεις χάρτη, σύρε και εναπόθεσε (drag&drop) από το μενού των εργαλείων την επιλογή Χάρτες.

Μέτα την εναπόθεση θα σου ανοίξει αυτόματα ένα παράθυρο για να επιλέξεις μεταξύ google maps, bing maps, baidu maps κτλ.
Στην συνέχεια, θα χρειαστεί να εισάγεις τις ακριβείς συντεταγμένες που θες να δείχνει ο χάρτης, το επίπεδο του zoom και σε ορισμένες περιπτώσεις API key. Μη ξεχνάς να κάνεις mouse over στα διάφορα ερωτηματικά, θα σε βοηθήσουν πολύ για να ολοκληρώσεις την εισαγωγή του χάρτη με επιτυχία.

9. Φόρμες επικοινωνίας

Η φόρμα επικοινωνίας είναι απαραίτητη για κάθε site. Μέσω αυτής οι επισκέπτες μπορούν να σου στέλνουν μηνύματα στο email σου εύκολα και γρήγορα.

Επεξεργασία υπάρχουσας

Τα περισσότερα templates έχουν ήδη εγκατεστημένη φόρμα στην σελίδα της επικοινωνίας. Για να την προσαρμόσεις πάτα στο μολυβάκι και στην συνέχεια στις Ιδιότητες. Από εκεί μπορείς να ρυθμίσεις τις διαστάσεις και τα πεδία της, να εισάγεις πεδίο για το email των επισκεπτών, να ενεργοποιήσεις SMTP authentication (καρτέλα SMTP) και να προσθέσεις recaptcha.

 

 Προσθήκη νέας φόρμας

Για να προσθέσεις νέα φόρμα επικοινωνίας σε μια σελίδα, μπορείς πολύ εύκολα να το κάνεις με drag & drop. Από την γραμμή των εργαλείων, επίλεξε την φόρμα, σύρε και εναποθεσέ την στο σημείο που θέλεις. Τέλος, προσάρμοσε την εμφάνιση και τις ρυθμίσεις όπως επιθυμείς.

10. Responsive design

Το responsive design, είναι ο σχεδιασμός της ιστοσελίδας ώστε να προσαρμόζεται δυναμικά σε κάθε διάσταση και προσανατολισμό οθόνης (smartphones, tablets κτλ) χωρίς να μειώνεται η εμπειρία του χρηστή (με zoom ή πλάγια κύλιση στη σελίδα).

Το website builder Site.Pro διαθέτει εξειδικευμένη λειτουργία για να προσαρμόσεις το site σου σε desktop, tablet και mobile με πολύ εύκολο τρόπο. Από το μενού των εργαλείων επίλεξε την λειτουργία “Προσαρμογή οθόνης” και στη συνέχεια τη συσκευή για την οποία θες να προσαρμόσεις το περιεχόμενο:

 

Χρησιμοποίησε το drag & drop για να προσθέσεις ή να αφαιρέσεις περιεχόμενο ανάλογα με την κάθε συσκευή. Άλλαξε το μέγεθος των γραμματοσειρών, προσάρμοσε τις εικόνες, τις φόρμες, τα πλαίσια και τα κουμπιά ώστε να πετύχεις την καλύτερη δυνατή εμπειρία χρήστη σε όλες τις συσκευές.

11. Βελτιστοποίηση SEO

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

Το Site.Pro διαθέτει το δικό του εργαλείο για το SEO του site σου, για να ρυθμίσεις τους τίτλους, τις meta περιγραφές, τα φιλικά url και τις open graph εικόνες που θα εμφανίζονται στο Facebook & Twitter όταν θα κάνεις post μια από τις σελίδες του site.

Κάνε κλικ στις ρυθμίσεις και στη συνέχεια από το drop down μενού επίλεξε το SEO και θα σου ανοίξει το παρακάτω παράθυρο:

Μετά συμπλήρωσε τα παρακάτω πεδία:

• Τίτλος ( 50 – 60 χαρακτήρες): Μην ξεχάσεις να βάλεις τη λέξη/φράση-κλειδί που στοχεύει η συγκεκριμένη σελίδα.
• Περιγραφή (Meta Description 150-160 χαρακτήρες max: Μικρή περίληψη του περιεχόμενου της σελίδας σου.
• Λέξεις κλειδιά ( Meta keywords): Από το 2018 και μετά, δεν παίζουν ρόλο στις μηχανές αναζήτησης Google, Bing & Yahoo.
• Σύνδεσμος φιλικός προς τον χρήστη (Δεν ισχύει για την αρχική σελίδα): Για τις εσωτερικές σελίδες, θα πρέπει οπωσδήποτε να συμπεριλάβεις την λέξη-κλειδί που στοχεύει η σελίδα.

Παράδειγμα

Ας υποθέσουμε ότι έχουμε μια σελίδα που παρουσιάζει τα καλύτερα android smartphones για το 2019. Η λέξη-κλειδί που θέλουμε να αναζητούν οι χρήστες και να εμφανίζεται η σελίδα μας στα αποτελέσματα των μηχανών αναζήτησης είναι “καλύτερα android smartphones”.  Άρα στις ρυθμίσεις του SEO θα προσθέσουμε τα παρακάτω:

• Τίτλος σελίδας: Τα καλύτερα Android Smartphones για το 2019
• Φιλικό url: todomainmou.gr/καλύτερα-androind-smartphones-2019
• Περιγραφή: Τα καλύτερα Androids Smartphones είναι στο site μας. Δες όλα τα χαρακτηριστικά, κριτικές, συγκρίσεις και σχόλια εδώ.

12. Στατιστικά Site

Google Analytics

Είναι σημαντικό να γνωρίζεις πόσα άτομα επισκέπτονται το site σου, πόσο χρόνο παραμένουν σε αυτό, πόσες σελίδες βλέπουν κτλ. Ο καλύτερος τρόπος για να λάβεις τέτοιους είδους στατιστικά είναι μέσω του εργαλείου Google Analytics. Για να το εγκαταστήσεις στο site σου, πρώτα κάνε εγγραφή στο Google Analytics και στην συνέχεια επέστρεψε στο Site.Pro για να εισάγεις το tracking id (βρες το tracking id) όπως δείχνει η παρακάτω εικόνα.

Google Search Console

Ένα ακόμη πολύ χρήσιμο εργαλείο σε ότι αφορά τα στατιστικά και τις βελτιστοποιήσεις του site σου είναι το Google search console (πρώην Webmaster Tools). Με τη χρήση του θα μπορέσεις να καταλάβεις πώς η Google “βλέπει” το site σου, αν τυχόν παρουσιάζει προβλήματα που χρειάζονται επίλυση, αν μπορείς να βελτιώσεις την απόδοση του κ.α.

Για να το αξιοποιήσεις, θα πρέπει πρώτα να κάνεις εγγραφή στο Google search console και να επιβεβαιώσεις την ιδιοκτησία σου με την μέθοδο HTML TAG μέσω των ρυθμίσεων στο Site.Pro.

Τέλος, στο κάτω μέρος του ίδιου παραθύρου (Ρυθμίσεις > SEO)  θα δεις ένα πεδίο “URL Χάρτη Ιστότοπου”  με μια διεύθυνση τύπου  …../sitemap.xml. Αντίγραψε αυτό το url και στη συνέχεια επέστρεψε στο Google Search Console για να το υποβάλεις ως χάρτη ιστότοπου στην αντίστοιχη ενότητα. Το url αυτό στην ουσία παρέχει στην Google πολύτιμες πληροφορίες για τη δομή του site σου μέσω του αρχείου sitemap.xml και τη βοηθάει να το αναγνώσει και να το αποδώσει στα αποτελέσματά της.

 

Θες βοήθεια;

Αν χρειάζεσαι περισσότερες οδηγίες και βοήθεια, δες στη γνωσιακή βάση της DNHOST πώς να ενεργοποιήσεις τον website builder και χρησιμοποίησε τον διαδραστικό βοηθό, πατώντας στο ερωτηματικό (?) που υπάρχει στο κάτω δεξιά μέρος του Site.pro.

 

Συνοψίζοντας

Αυτή ήταν μια σύντομη ξενάγηση στις σημαντικότερες λειτουργίες του νέου website builder, Site.Pro.

Κατοχύρωσε το domain που ταιριάζει στην ιδέα σου μέσα από 400 σχεδόν καταλήξεις και βγάλε όλη τη δημιουργικότητά σου με τον Site.Pro που περιλαμβάνεται δωρεάν στα web hosting πακέτα μας για να φτιάξεις ένα φανταστικό website!