Πάμε να δούμε βήμα-βήμα πώς να φτιάξουμε ένα website με WordPress, σαν να ξεκινάμε από το μηδέν. Η συνταγή “κατασκευή ιστοσελίδας δωρεάν” έχει Υλικά και Εκτέλεση!

ΒΗΜΑ 1 (υλικά): Επιλέγουμε Domain και Hosting

Για να έχουμε ένα website online, χρειαζόμαστε:

• Domain name (π.χ. toonomasou.gr η διεύθυνση του “σπιτιού” της ιστοσελίδας)
• Web Hosting (το “σπίτι” που θα φιλοξενεί το site)

Εφόσον κατοχυρώσουμε το domain name αλλά αγοράσουμε και το κατάλληλο πακέτο φιλοξενίας, ρυθμίζουμε αρχικά το όνομα χώρου να βλέπει τους DNS του CloudFlare.

Για να ρυθμίσουμε σωστά το domain μας με το Cloudflare, ώστε να έχουμε προστασία, ταχύτητα και SSL, ακολουθούμε τα εξής βήμα-βήμα.

💡 Αν αγοράσετε Domain και Hosting από την BLB.gr όλα τα παρακάτω βήματα τα ολοκληρώνουμε εμείς για σας, χωρίς έξτρα χρέωση.

• Αγορά ονόματος χώρου (με υποστήριξη) από 19€/έτος
• Φιλοξενία ιστοσελίδας (με υποστήριξη) από 35€/έτος

Θα χρειαστούμε για το CloudFlare

• Ένα κατοχυρωμένο domain (π.χ. to-domain-mou.gr)
• Πρόσβαση στο Cloudflare (δωρεάν λογαριασμός)
• Πρόσβαση στο panel του καταχωρητή για τις ρυθμίσεις του domain name

1.α: Δημιουργία λογαριασμού στο Cloudflare

1. Στο www.cloudflare.com
2. Κλικ στο Sign Up (αν δεν έχουμε ήδη λογαριασμό)
3. Βάζουμε email και password και κάνουμε επιβεβαίωση

1.β: Προσθέτουμε το domain στο Cloudflare

1. Από το Cloudflare dashboard, κλικ στο “Add a Site”
2. Πληκτρολογούμε το domain μας (π.χ. mywebsite.gr) και μετά κλικ Next
3. Επιλέγουμε το δωρεάν πλάνο (Free Plan) → Continue

1.γ: Εισαγωγή DNS εγγραφών

Το Cloudflare θα σκανάρει αυτόματα τις υπάρχουσες DNS εγγραφές του ονόματος (π.χ. A records, MX, κ.λπ.).

1. Επιβεβαιώνουμε ότι υπάρχει μια A εγγραφή του τύπου:
   • @ → IP του hosting μας
   • www → CNAME προς @ ή IP

Την ΙΡ την βρίσκουμε από το πακέτο φιλοξενίας που αγοράσαμε, και την βάζουμε στο πεδίο A.

2. Κλικ Continue

1.δ: Αλλάζουμε Nameservers

Το Cloudflare θα μας δώσει 2 νέους nameservers (π.χ. lara.ns.cloudflare.com, bob.ns.cloudflare.com)

1. Συνδεόμαστε στον καταχωρητή του domain όπου αγοράσαμε το όνομα
2. Πάμε στις Ρυθμίσεις DNS / Nameservers
3. Αφαιρούμε τους παλιούς nameservers και βάζουμε αυτούς που μας έδωσε το Cloudflare

👀 ΠΡΟΣΟΧΗ: Μπορεί να χρειαστούν έως και 24 ώρες για να ενεργοποιηθεί πλήρως.

1.ε: Ρύθμιση SSL στο Cloudflare

Μέσα στο Cloudflare:

1. Πάμε SSL/TLS από το αριστερό μενού
2. Ρυθμίζουμε το SSL σε “Full” ή “Full (strict)” (ανάλογα με το αν το hosting παρέχει SSL)
3. Ενεργοποιούμε:
   • ✅ “Always use HTTPS”
   • ✅ “Automatic HTTPS Rewrites”

1.στ’: Έλεγχος

Μετά από 1-24 ώρες:

• Το domain θα “περνάει” από Cloudflare
• Το SSL (https://) θα είναι ενεργό
• Μπορούμε να μπούμε στο site και να δούμε 🔒 στην address bar

Προτάσεις για αρχάριους στο CloudFlare

Κατασκευή ιστοσελίδας δωρεάν με τεχνική υποστήριξη και εκπαίδευση

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

ΒΗΜΑ 2 (εκτέλεση): Εγκατάσταση του WordPress

1. Συνδεόμαστε στο hosting control panel.
2. Βρίσκουμε την επιλογή “Install WordPress” (συνήθως παρέχεται η αυτόματη εγκατάσταση).
3. Δίνουμε τα εξής:
   • Όνομα site (π.χ. “Το Site μου”)
   • Username και Password για login στο WordPress
4. Κλικ Install

Για τους πιο έμπειρους καλό είναι να κάνετε χειροκίνητη εγκατάσταση wordpress.

Μετά την εγκατάσταση:

Θα μπορούμε να δούμε το site μας π.χ. στην διεύθυνση:

www.toonomasou.gr/

ΒΗΜΑ 3: Στον Πίνακα Ελέγχου του WordPress

Χρησιμοποιούμε τα στοιχεία σύνδεσης μας για να μπούμε στο:

www.toonomasou.gr/wp-admin

Εκεί θα δούμε τα:

• Πίνακας Ελέγχου (Dashboard)
• Άρθρα (Posts), Σελίδες (Pages), Εμφάνιση (Appearance), Πρόσθετα (Plugins) κ.λπ.

ΒΗΜΑ 4: Επιλέγουμε Θέμα (Theme)

1. Πάμε στην αριστερή στήλη → Εμφάνιση > Θέματα
2. Κλικ “Προσθήκη νέου”
3. Ψάχνουμε ένα ωραίο, δωρεάν theme όπως:
   • Astra (ελαφρύ και γρήγορο)
   • OceanWP
   • Hello Elementor
4. Κλικ “Εγκατάσταση” και μετά “Ενεργοποίηση”

Ο συνδυασμός ενός Astra theme με Elementor προσφέρει εξαιρετικά αποτελέσματα.

ΒΗΜΑ 5: Προσθέτουμε Σελίδες

1. Πάμε Σελίδες > Προσθήκη
2. Φτιάχνουμε τις βασικές σελίδες:
   • Αρχική
   • Προφίλ ή Εταιρεία
   • Επικοινωνία
   • Υπηρεσίες (αν χρειάζεται)
3. Γράφουμε περιεχόμενο, προσθέτουμε εικόνες κ.λπ.

ΒΗΜΑ 6: Φτιάχνουμε το Μενού

1. Πάμε Εμφάνιση > Μενού
2. Δίνουμε ένα όνομα στο μενού (π.χ. “Κύριο Μενού” ή “Main Menu”)
3. Προσθέτουμε τις σελίδες που φτιάξαμε
4. Κάνουμε κλικ στο “Τοποθέτηση μενού” (να είναι πάνω στο site)
5. Κλικ Αποθήκευση

ΒΗΜΑ 7: Πρόσθετα (Plugins)

Plugins = Επεκτάσεις που προσθέτουν λειτουργίες

Προτείνουμε:

• Elementor (για να φτιάχνουμε σελίδες εύκολα με drag & drop)
• WPForms (για φόρμα επικοινωνίας)
• Yoast SEO (για SEO – βελτιστοποίηση στις μηχανές αναζήτησης)

Πάμε στα Πρόσθετα > Νέο Πρόσθετο και τα εγκαθιστούμε.

⚠️ ΠΡΟΣΟΧΗ: Πολλοί θεωρούν ότι το WordPress δεν είναι ιδανικό για επιτυχημένα site μεγάλης επισκεψιμότητας, και εδώ ακριβώς βρίσκεται το κλειδί τις επιτυχίας. Στην σωστή διαχείριση των plugins. Αν προσθέτουμε/αφαιρούμε plugins χωρίς να γνωρίζουμε ακριβώς τι συμβαίνει στον server και ειδικά στην βάση του wordpress, τότε όντως κάποια στιγμή η ιστοσελίδα μας θα φτάσει σε ένα τεχνικό αδιέξοδο και θα αντιμετωπίσει σοβαρά προβλήματα λειτουργίας.

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

ΒΗΜΑ 8: Ρυθμίσεις

Κλικ στο Ρυθμίσεις > Γενικά:

• Όνομα ιστοσελίδας
• Περιγραφή

Πάμε Ρυθμίσεις > Μόνιμοι σύνδεσμοι:

• Επιλέγουμε Όνομα Άρθρου (το πιο ιδανικό για το SEO που χρειαζόμαστε)

🦺 Χρειάζεστε βοήθεια για όλα τα παραπάνω;

Ξεκινήστε με ένα χαμηλό πακέτο φιλοξενίας, κάντε τις δοκιμές σας,

και καλέστε μας για ό,τι χρειαστείτε.

Ας φτιάξουμε βήμα-βήμα μια σελίδα όπως η “Εταιρεία” (ή “Σχετικά με εμάς”) στο WordPress. Θα δούμε πως να:

• Τη δημιουργήσουμε,
• Βάλουμε περιεχόμενο και
• Να τη συνδέσουμε στο μενού.

ΒΗΜΑ 1: Δημιουργία νέας σελίδας

1. Πάμε στο wp-admin (π.χ. www.toonomasou.gr/wp-admin)
2. Από το αριστερό μενού, κλικ:
   Σελίδες > Προσθήκη Νέας
3. Πληκτρολογούμε τίτλο: π.χ. Η Εταιρεία ή Σχετικά με εμάς
4. Στο πεδίο περιεχομένου (το μεγάλο πλαίσιο κάτω από τον τίτλο), γράφουμε πληροφορίες για την εταιρεία μας, όπως:

   Η εταιρεία μας ιδρύθηκε το 2020 με σκοπό να παρέχει ποιοτικές υπηρεσίες στον τομέα της τεχνολογίας... κτλ
   

5. Θέλουμε να προσθέσουμε και εικόνες;
   • Κλικ στο κουμπί “+” (Προσθήκη) πάνω ή μέσα στο περιεχόμενο
   • Επιλέγουμε “Εικόνα” και μετά Μεταφόρτωση για να ανεβάσουμε φωτογραφία από τον υπολογιστή μας
6. Αφού τελειώσουμε:
   • Κλικ Δημοσίευση
   • Ξανά κλικ Δημοσίευση για επιβεβαίωση

ΒΗΜΑ 2: Προσθήκη της σελίδας στο Μενού

1. Κλικ στο: Εμφάνιση > Μενού
2. Αν δεν υπάρχει μενού:
   • Δημιουργούμε ένα νέο (π.χ. “Κύριο Μενού”) και το αποθηκεύουμε
3. Στο αριστερό μέρος, θα δούμε τις σελίδες που έχουμε φτιάξει. Βρίσκουμε την σελίδα Η Εταιρεία και την τσεκάρουμε/επιλέγουμε.
4. Κλικ Προσθήκη στο Μενού
5. Αν θέλουμε, μπορούμε να τη μετακινήσουμε πάνω-κάτω με drag & drop
6. Κάτω από το μενού, τσεκάρουμε το “Πρωτεύον μενού” ή “Κύριο μενού” (ανάλογα το θέμα που επιλέξαμε)
7. Κλικ Αποθήκευση Μενού

ΒΗΜΑ 3: Έλεγχος

Τώρα:

• Πάμε στην αρχική σελίδα
• Θα δούμε το μενού στην κορυφή και την επιλογή Η Εταιρεία
• Αν την κλικάρουμε, θα πάμε στη σελίδα που φτιάξαμε

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

Παρακάτω θα δούμε αναλυτικά βήμα-βήμα πώς το κάνουμε, με εικόνες/παραδείγματα.

💡 Ιδανικά, για απλές σελίδες όπως πχ άρθρα, νέα, συμβουλές και προσφορές, δεν χρειάζεται ο Elementor και κανένας extra editor εκτός από τον default του wordpress.

ΠΡΟΕΤΟΙΜΑΣΙΑ Elementor

Βήμα 1: Εγκατάσταση Elementor

1. Πάμε στον Πίνακα Ελέγχου WordPress
2. Πρόσθετα > Νέο Πρόσθετο
3. Στο πεδίο αναζήτησης γράφουμε: Elementor
4. Κλικ Εγκατάσταση Τώρα και μετά Ενεργοποίηση

Τώρα, όταν πάμε να επεξεργαστούμε μια σελίδα, θα δούμε κουμπί: “Επεξεργασία με Elementor”

1. Εκεί μπορούμε με drag & drop να βάλουμε:
   • Τίτλους
   • Κείμενα
   • Εικόνες
   • Στήλες
   • Κουμπιά κ.λπ.

Έχει και δωρεάν και επί πληρωμή έκδοση — όπου για αρχή αρκεί η δωρεάν.

ΣΧΕΔΙΑΣΗ ΑΡΧΙΚΗΣ ΣΕΛΙΔΑΣ

Βήμα 2: Δημιουργία ή επεξεργασία της Αρχικής Σελίδας

1. Κλικ Σελίδες > Όλες οι σελίδες
2. Βρίσκουμε τη σελίδα “Αρχική” ή δημιουργούμε νέα:
   • Κλικ “Προσθήκη Νέας”
   • Τίτλος: Αρχική
   • Κλικ Δημοσίευση
3. Πάνω από το περιεχόμενο κλικ “Επεξεργασία με Elementor”

Βήμα 3: Σχεδίαση με Elementor

Θα μεταφερθούμε στον επεξεργαστή Elementor. Εδώ ξεκινάει η δημιουργία!

Παράδειγμα Δομής Αρχικής Σελίδας:

1. Κεφαλίδα (Hero Section) – Μεγάλη εικόνα/φόντο + τίτλος + κουμπί
2. Ποιοι Είμαστε – Λίγα λόγια για την εταιρεία
3. Υπηρεσίες – Τι προσφέρουμε
4. Συστάσεις/Κριτικές (προαιρετικά)
5. Επικοινωνία ή Footer

Πώς προσθέτουμε περιεχόμενο:

Προσθήκη νέας ενότητας (section):

1. Κλικ στο “+” στο κύριο πλαίσιο
2. Επιλέγουμε δομή (π.χ. 1 στήλη ή 2 στήλες)

Προσθέτουμε widget (περιεχόμενο):

Αριστερά έχει τα Widgets:

• Heading (Τίτλος)
• Text Editor (Κείμενο)
• Image (Εικόνα)
• Button (Κουμπί)
• Icon Box (εικόνα + τίτλος + κείμενο μαζί)
• Divider (γραμμή)

Απλά σέρνουμε & αφήνουμε drag & drop το widget που θέλουμε στη θέση που θέλουμε.

Παράδειγμα σχεδίασης ιστοσελίδας

1. Κεφαλίδα – Μεγάλη πρώτη ενότητα

• Προσθέτουμε νέα ενότητα (1 στήλη)
• Κλικ στο “Επεξεργασία Ενότητας” (το μπλε πλαίσιο με τις 6 τελείες)
• Από δεξιά > Στυλ > Φόντο > Τύπος Φόντου > Κλασικό
• Προσθέτουμε μια εικόνα φόντου

Προσθέτουμε:

• Widget Τίτλος: “Καλώς ήρθατε στην [Επωνυμία]!”
• Widget Κείμενο: “Παρέχουμε λύσεις τεχνολογίας από το 2020”
• Widget Κουμπί: “Μάθετε περισσότερα”

2. Υπηρεσίες

• Νέα ενότητα (3 στήλες)
• Σε κάθε στήλη βάζουμε:
  • Icon Box ή
  • Εικόνα + Τίτλος + Κείμενο

3. Σχετικά με εμάς

• Μια στήλη με κείμενο
• Δίπλα βάζουμε εικόνα της ομάδας

Βήμα 4: Ρυθμίζουμε την Αρχική σαν την κεντρική σελίδα

1. Πάμε στις Ρυθμίσεις > Ανάγνωση
2. Εκεί που λέει “Η αρχική σελίδα εμφανίζει:” επιλέγουμε:
   • ✅ Στατική σελίδα
   • Αρχική σελίδα: [διαλέγουμε τη σελίδα που φτιάξαμε]

Κλικ Αποθήκευση Αλλαγών

Τέλος: Αποθήκευση και Προεπισκόπηση ιστοσελίδας

Μέσα στον Elementor:

• Κλικ Ενημέρωση για να αποθηκεύσουμε
• Κλικ Προεπισκόπηση αλλαγών για να τη δούμε

Χρήση Elementor Widgets

Για απορίες και επισημάνσεις, μπορείτε να σχολιάσετε, ρωτήστε και απαντήστε σε οτιδήποτε χρειάζεστε.