Επεξεργασία Ταυτότητας Ιστότοπου (Customize Villa)

Σύνδεση στο Διαχειριστικό Περιβάλλον του WordPress #

Πριν ξεκινήσεις, συνδέσου στο admin panel της ιστοσελίδας σου.

📌 Αν δεν γνωρίζεις πώς, δες τον αντίστοιχο οδηγό ΕΔΩ.

Είσοδος στον Customize #

1. Αρχικά, από το αριστερό μενού, βρες και πάτησε την επιλογή Appearance (Εμφάνιση).
2. Στη συνέχεια, επίλεξε Customize (Προσαρμογή).

Στο νέο παράθυρο που θα ανοίξει, θα δεις προεπισκόπηση του site σου και ένα πλαϊνό μενού με τις διαθέσιμες ρυθμίσεις.

Επεξεργασία Site Identity #

Από το μενού του Customizer, επίλεξε Site Identity. Εδώ μπορείς να ρυθμίσεις:

1. Site Title (Τίτλος Ιστότοπου)
   Βάλε το όνομα του site σου, για παράδειγμα Motivar Single Page Accommodation.
2. Tagline (Υπότιτλος)
   Μικρή περιγραφή ή σλόγκαν που συνοδεύει τον τίτλο.
3. Site Icon (Εικονίδιο Ιστότοπου)
   Το μικρό εικονίδιο που εμφανίζεται στον browser (favicon).

📌 Προδιαγραφές για favicon : 512×512 pixels. Το WordPress θα σε καθοδηγήσει αν χρειαστεί αλλαγή μεγέθους.

Logo Options #

Στην ενότητα Logo Options, θα δεις διάφορες επιλογές για να ανεβάσεις ή να αλλάξεις εικόνες λογοτύπου:

• Website Logo – Το βασικό λογότυπο που εμφανίζεται σε όλες τις σελίδες.
• Mobile Website Logo – Κενό.
• Transparent Logo – Το λογότυπο που εμφανίζεται σε διάφανη κεφαλίδα.
• Transparent Mobile Logo – Κενό.

Μπορείς να επιλέξεις Change image για να ανεβάσεις νέο λογότυπο ή Remove για να το αφαιρέσεις.

Ρυθμίσεις Μεγεθών και Περιθωρίων:

• Logo Max Width (px) – Μέγιστο πλάτος του λογότυπου σε pixels.
• Logo Max Width on Scroll (px) – Μέγιστο πλάτος όταν γίνεται scroll.
• Logo Max Width on Mobile (px) – Μέγιστο πλάτος λογότυπου σε κινητά.
• Header Padding (px) – Κενό γύρω από την κεφαλίδα.
• Header Padding on Scroll (px) – Κενό γύρω από την κεφαλίδα κατά το scroll.
• Header Padding on Mobile (px) – Κενό γύρω από την κεφαλίδα σε κινητά.

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

💡 Tip:
Καλό είναι να κάνεις μικρές αλλαγές κάθε φορά και να πατάς Publish για να βλέπεις πώς φαίνονται μπροστά στο site σου. Έτσι μπορείς να επαναλάβεις τη διαδικασία μέχρι να πετύχεις το αποτέλεσμα που θες, χωρίς να χαλάσεις την αρχική εμφάνιση.

Προσαρμογή Side Menu #

Στην ενότητα Sidebar Menu Options, μπορείς να αλλάξεις το λογότυπο και τα χρώματα της πλαϊνής μπάρας του site σου.

Sidebar Logo – Το λογότυπο που είναι στο side menu.
Μπορείς να επιλέξεις Change image για να ανεβάσεις νέο ή Remove για να το αφαιρέσεις

Ρυθμίσεις Χρωμάτων:
Background Colour – Το χρώμα φόντου του side menu.

Sidebar Logo max width (px) – Ορίζει το μέγιστο πλάτος (σε px) με το οποίο εμφανίζεται το λογότυπο στη sidebar.

Background Image – Η εικόνα φόντου που εμφανίζεται πίσω από το περιεχόμενο.

💡 Tip:
Καλό είναι να μην αλλάξεις τα χρώματα του κειμένου και του φόντου της πλαϊνής μπάρας, εκτός αν υπάρχει συγκεκριμένος λόγος.

Color Options #

Στην ενότητα Color Options, μπορείς να αλλάξεις τα βασικά χρώματα του site σου.

Διαθέσιμες Ρυθμίσεις Χρωμάτων

• Color 1 – Το βασικό χρώμα του κειμένου σε όλο το site.
• Colour 2 – Το κύριο χρώμα για το Background.
• Colour 3 και 4 –Βασικό χρώμα κουμπιών/links (background) και hover/active.

💡 Tip: Αν δεν έχεις εμπειρία με την επιλογή χρωμάτων, καλό είναι να μην κάνεις μεγάλες αλλαγές, γιατί μπορεί να επηρεάσεις αρνητικά την αναγνωσιμότητα και την αισθητική του site. Δοκίμασε μικρές αλλαγές και πάτα Publish για να δεις το αποτέλεσμα πριν προχωρήσεις.

Filox Main Color #

Από Filox → Settings μπορείς να αλλάξεις τα χρώματα για το section του ημερολογίου και τις κάρτες του καταλύματος/βίλας (κουμπιά, hover, φόντο, τίτλοι).

Additional CSS #

Με αυτά τα βήματα βάζεις το logo της επιχείρησής σου ως φόντο στις σελίδες του site, ώστε να εμφανίζεται διακριτικά και επαγγελματικά στο τελικό στάδιο της κράτησης (και γενικά στο frontend).

1) Πάρε το URL του logo από το Media Library

1. Πήγαινε Media → Library.
2. Κάνε κλικ στο αρχείο του λογότυπου.
3. Στα Attachment details αντέγραψε το File URL (π.χ. https://your-site.com/uploads/2025/09/logo.png).

2) Βάλε το URL στο Additional CSS

1. Πήγαινε Appearance → Customize → Additional CSS (ή Theme Options → Custom CSS, ανάλογα με το theme).
2. Βρες τις γραμμές:
   background-image: url('https://villas.motivar.dev/app/uploads/2025/09/motivar-logo-1.png');
3. Αντικατάστησε το link μέσα στα ' ' με το δικό σου File URL και αποθήκευσε.