Βελτιστοποίηση περιεχομένου - Typography
Αυτή η σελίδα σας παρουσιάζει έτοιμο κώδικα που συνοδεύει το template ώστε να βελτιώσετε την εμφάνιση του περιεχομένου σας, να τονίσετε ή να δώσετε έμφαση, σε κάποια τμήματα. Στη συνέχεια γίνεται μια προσπάθεια κατανόησης μέσα από παραδείγματα, για το πως μπορείτε να χρησιμοποιήσετε προσθέτοντας στις HTML ετικέτες σας, τις κλάσεις όπως σας τις παρουσιάζουμε.
Πολυτονικό σύστημα.
Για περιπτώσεις ηλεκτρονικών καταστημάτων για πώληση βιβλίων, υπάρχει η δυνατότητα δημοσίευσης κειμένου με πολυτονικό σύστημα γραφής, όπου αυτό κριθεί αναγκαίο.
Λυσιστράτη
ἀλλ᾽ εἴ τις ἐς Βακχεῖον αὐτὰς ἐκάλεσεν,
ἢ ᾽ς Πανὸς ἢ ᾽πὶ Κωλιάδ᾽ ἢ ᾽ς Γενετυλλίδος,
οὐδ᾽ ἂν διελθεῖν ἦν ἂν ὑπὸ τῶν τυμπάνων.
νῦν δ᾽ οὐδεμία πάρεστιν ἐνταυθοῖ γυνή·
Επικεφαλίδες
Αυτή είναι μια επικεφαλίδα h1
<h1> Επικεφαλίδα h1 </h1>
Αυτή είναι μια επικεφαλίδα h2
<h2> Επικεφαλίδα h2 </h2>
Αυτή είναι μια επικεφαλίδα h3
<h3> Επικεφαλίδα h3 </h3>
Αυτή είναι μια επικεφαλίδα h4
<h4> Επικεφαλίδα h4 </h4>
Αυτή είναι μια επικεφαλίδα h5
<h5> Επικεφαλίδα h5 </h5>
Αυτή είναι μια επικεφαλίδα h6
<h6> Επικεφαλίδα h6 </h6>
Παράγραφοι
Αυτό είναι ένα τυχαίο κείμενο, που σκοπό έχει να σας δείξει, πως μπορείτε σε μια ή περισσότερες παραγράφους να δώστε έμφαση.<blockquote> ... </blockquote>
Αυτό είναι ένα τυχαίο κείμενο, που σκοπό έχει να σας δείξει, πως μπορείτε σε μια ή περισσότερες παραγράφους να δώστε έμφαση.<blockquote class="cite"><span class="cite"> ... </span></blockquote>
Tooltip
Αν αφήσετε το ποντίκι πάνω από αυτή τη φράση θα εμφανιστεί ένα κείμενο βοήθειας
Χρήση:
<strong class="hasTip" title="Αυτό είναι το κείμενο βοήθειας"> Σ αυτή τη φράση text</strong>
Λίστες χωρίς αρίθμιση
Στη συνέχεια υπάρχουν τύποι λίστας χωρίς αρίθμιση
Η απλή λίστα χωρίς αρίθμιση είνα:<ul><li> ... </li><li> ... </li></ul>
και θα έχει τη μορφή:
- Αυτή είναι μια απλή λίστα χωρίς αρίθμηση.
- Είναι πολύ εύκολο να τη χρησιμοποιήσετε αφου δεν χρειάζεται επιπλέον όναμα κλάσης CSS.
Οι εμπλουτισμένες λίστες εμφανίζονται στη συνέχεια και έχουν τη μορφή χρήσης:<ul><li> ... </li><li> ... </li></ul>
- Αυτή τη μορφή μπορείτε να τη χρησιμοποιήσετε για αναφορά σε νέα ή άρθρα.
- Χρήση:
<ul class="latestnews"><li> ... </li><li> ... </li></ul>
- This is the most read list used into Popular articles module.
- Χρήση:
<ul class="mostread"><li> ... </li><li> ... </li></ul>
- This is the sections list used into Sections module.
- Χρήση:
<ul class="sections"><li> ... </li><li> ... </li></ul>
- Λίστα αποδοχής.
- Χρήση:
<ul class="list-accept"><li> ... </li><li> ... </li></ul>
- Λίστα προσθήκης.
- Χρήση:
<ul class="list-add"><li> ... </li><li> ... </li></ul>
- Λίστα διαγραφής.
- Χρήση:
<ul class="list-delete"><li> ... </li><li> ... </li></ul>
- Λίστα λάθους .
- Χρήση:
<ul class="list-error"><li> ... </li><li> ... </li></ul>
- Λίστα ειδοποίησης.
- Χρήση:
<ul class="list-alert"><li> ... </li><li> ... </li></ul>
- Λίστα μη συμπεριλαμβανομένου χαρατηριστικού.
- Χρήση:
<ul class="list-cross"><li> ... </li><li> ... </li></ul>
- Λίστα ιδεών.
- Χρήση:
<ul class="list-tip"><li> ... </li><li> ... </li></ul>
- Λίστα συμπεριλαμβανομένου χαρακτηριστικού.
- Χρήση:
<ul class="list-tick"><li> ... </li><li> ... </li></ul>
- Λίστα δισκετών.
- Χρήση:
<ul class="list-disk"><li> ... </li><li> ... </li></ul>
- Λίστα email.
- Usage:
<ul class="list-email"><li> ... </li><li> ... </li></ul>
- Λίστα ροής νέων.
- Χρήση:
<ul class="list-feed"><li> ... </li><li> ... </li></ul>
- Λίστα εικόνας.
- Χρήση:
<ul class="list-image"><li> ... </li><li> ... </li></ul>
- Λίστα πληροφόρισης.
- Χρήση:
<ul class="list-information"><li> ... </li><li> ... </li></ul>
- Λίστα κλειδιού.
- Χρήση:
<ul class="list-key"><li> ... </li><li> ... </li></ul>
- Λίστα εφημερίδας.
- Χρήση:
<ul class="list-newspaper"><li> ... </li><li> ... </li></ul>
- Λίστα μολυβιού.
- Χρήση:
<ul class="list-pencil"><li> ... </li><li> ... </li></ul>
- Λίστα CD .
- Χρήση:
<ul class="list-cd"><li> ... </li><li> ... </li></ul>
- Λίστα PC.
- Χρήση:
<ul class="list-pc"><li> ... </li><li> ... </li></ul>
- Λίστα iPod.
- Χρήση:
<ul class="list-ipod"><li> ... </li><li> ... </li></ul>
- Λίστα ποντικού.
- Χρήση:
<ul class="list-mouse"><li> ... </li><li> ... </li></ul>
Λίστες με αρίθμηση
Αν χρησιμοποιείτε αριθμημένες λίστες, δείτε πως μπορείτε να αλάξετε την εμφάνιση.
- Αυτή είναι μια απλή λίστα με αρίθμηση.
- Στοιχείο λίστας 2
- Στοιχείο λίστας 3
Χρήση: <ol><li> ... </li><li> ... </li></ol>
Μπορείτε να τη χρησιμοποιήσετε για όσα στοιχεία σας είναι απαραίτητα
1.Αυτή είναι μια λίστα αρίθμησης με μεγάλους αριθμούς.
2.Στοιχείο λίστας με μεγάλους αριθμούς 2
3.Στοιχείο λίστας με μεγάλους αριθμούς 3
Χρήση: <p class="big-number"><span class="big-number">number</span> Content </p>
Μπορείτε ακόμη με την παραπάνω χρήση να προσθέσετε αρίθμιση σε παραγράφους με κεφαλαία γράμματα ή και αριθμούς, δίνοντας ένα τίτλο στην κάθε παράγραφο:
A Αυτός είναι ο πρώτος τίτλος.
Αυτό είναι ένα δοκιμασιτκό κείμενο, που ακολουθεί μετά τον πιο πάνω τίτλο σαν παράδειγμα, ώστε γίνει κατανοητή μια μορφή εμφάνισης με γράμματα. Μπορείτε φισικά να χρησιμοποιήσετε και αριθμούς.
B Αυτός είναι ο δεύτερος τίτλος.
Αυτό είναι ένα δοκιμασιτκό κείμενο, που ακολουθεί μετά τον πιο πάνω τίτλο σαν παράδειγμα, ώστε γίνει κατανοητή μια μορφή εμφάνισης με γράμματα. Μπορείτε φισικά να χρησιμοποιήσετε και αριθμούς.
Κουτιά
Χρήση 1:
<div class="alert"> Text here </div>
Χρήση 2:
<div class="alert"><div class="icon"><!-- --></div> Text here </div>
Χρήση 1:
<div class="info"> Text here </div>
Χρήση 2:
<div class="info"><div class="icon"><!-- --></div> Text here </div>
Χρήση 1:
<div class="notice"> Text here </div>
Χρήση 2:
<div class="notice"><div class="icon"><!-- --></div> Text here </div>
Χρήση 1:
<div class="box-save"> Text here </div>
Χρήση 2:
<div class="box-save"><div class="icon"><!-- --></div> Text here </div>
Χρήση 1:
<div class="box-accept"> Text here </div>
Χρήση 2:
<div class="box-accept"><div class="icon"><!-- --></div> Text here </div>
Χρήση 1:
<div class="box-tip"> Text here </div>
Χρήση 2:
<div class="box-tip"><div class="icon"><!-- --></div> Text here </div>
Κουμπιά
<div class="button"> Αγόρασέ το ! </div>
Για να μεταφερθεί ο επισκέπτης προς ένα προϊόν, θα πρέπει το κείμενο "Αγόρασέ το !" να είναι σύνδεσμος (link) προς το προϊόν ή το άρθρο.
<button type="button" class="btn btn-large"> Μεγάλο Κουμπί 1 </button>
<button type="button" class="btn-large"> Μεγάλο Κουμπί 2 </button>
<button type="button" class="btn"> Κανονικό Κουμπί </button>
<button type="button" class="btn-small"> Μικρό Κουμπί </button>
<button type="button" class="btn-mini"> Πολύ Μικρό Κουμπί </button>
Πίνακες
<table> .... </table>
# | Προϊόν | Ποστότητα | Εκπτωση |
1 | Τανίες DVD | 10 | 20% |
2 | Παπούτσια | 5 | 15% |
3 | Μπλούζες | 10 | 10% |
<table class="table-condensed"> .... </table>
# | Προϊόν | Ποστότητα | Εκπτωση |
1 | Τανίες DVD | 10 | 20% |
2 | Παπούτσια | 5 | 15% |
3 | Μπλούζες | 10 | 10% |
<table class="table-hover"> .... </table>
# | Προϊόν | Ποστότητα | Εκπτωση |
1 | Τανίες DVD | 10 | 20% |
2 | Παπούτσια | 5 | 15% |
3 | Μπλούζες | 10 | 10% |
<table class="noborder"> .... </table>
# | Προϊόν | Ποστότητα | Εκπτωση |
1 | Τανίες DVD | 10 | 20% |
2 | Παπούτσια | 5 | 15% |
3 | Μπλούζες | 10 | 10% |
Εικόνες
Στη συνέχεια υπάρχουν τέσσρεις διαφορετικές περιπτώσεις εμφάνισης της ίδιας εικόνας. Επιλέξτε αυτή που σας εξυπηρετεί.
Εικόνα με στρογγυλεμένες γωνίες | Εικόνα σε κύκλο |
Χρήση: |
Χρήση:<img class="img-circle"> src="/image.jpg" /> |
|
|
Εικόνα με περίγραμμα |
Εικόνα με σκιά |
Χρήση:<img class="img-polaroid"> src="/image.jpg" /> |
Χρήση:<img class="img-shadow"> src="/image.jpg" /> |
Responsive iframe
Ενσωμάτση iframe, ώστε να ακολουθεί την συμβατότητα με τις φορητές συσκευές, για αυτόματη αλλαγής μεγέθους, με βάση την συσκευή ανάγνωσης.
<div class="embed-container"> <iframe> ... κώδικας ... </iframe></div>
Responsive Video Player
Ενσωμάτση Υoutube Video ή από όποιο άλλο παρόμοιο site, στην παρουσίαση των προϊόντων, ώστε να ακολουθεί την συμβατότητα με τις φορητές συσκευές, για αυτόματη αλλαγής μεγέθους του video, με βάση την συσκευή ανάγνωσης.
<div class="videoWrapper"> <iframe> ... κώδικας ... </iframe></div>
Υποστήριξη Awesome Fonts
Εικονίδια Social
Προσθέστε εικονίδια σύνδεσης στα social media σε όποιο σημείο του site με την διημιουργία Προσαρμοσμένου Ενθέματος HTML
και ως περιεχμόνο τις γραμμές:
Για το Facebook <a href="https://facebook.com" target="_blank" rel="noopener"><i class="fab fa-facebook-square fa-lg"></i></a>
Για το twiteer <a href="https://twitter.com" target="_blank" rel="noopener"><i class="fab fa-twitter-square fa-lg"></i></a>
Για το instagram <a href="https://www.instagram.com/" target="_blank" rel="noopener"><i class="fab fa-instagram fa-lg"></i></a>
Ενσωματώστε πολύ εύκολα εικονίδια στο κείμενό σας
Δείτε ολόκληρη τη λίστα των διαθέσιμων εικόνιδίων στο Font Awesome site.
Αλλάξτε το μέγεθος
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
Δείτε μέσα από απλές οδηγίες πως μπορείτε να κάνετε χρήση και ενσωμάτωση
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use