ΠΛΗΡΕΣ ΗΛΕΚΤΡΟΝΙΚΟ ΚΑΤΑΣΤΗΜΑ :: DEMO ::
Κατηγορίες Προϊόντων
Προϊόντα που είδατε πρόσφατα
Χωρίς έξοδα αποστολής

free shipping banner

Οι παραγγελίες άνω των 80 € αποστέλλονται χωρίς έξοδα αποστολής

 

Για τηλεφωνικές παραγγελίες καλέστε: 000.000.0000 - 000.010.1010

Βελτιστοποίηση περιεχομένου - 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>
 

Λίστες με αρίθμηση

Αν χρησιμοποιείτε αριθμημένες λίστες, δείτε πως μπορείτε να αλάξετε την εμφάνιση.

  1. Αυτή είναι μια απλή λίστα με αρίθμηση.
  2. Στοιχείο λίστας 2
  3. Στοιχείο λίστας 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%

 

Εικόνες

Στη συνέχεια υπάρχουν τέσσρεις διαφορετικές περιπτώσεις εμφάνισης της ίδιας εικόνας. Επιλέξτε αυτή που σας εξυπηρετεί.

Εικόνα με στρογγυλεμένες γωνίες  Εικόνα σε κύκλο

testmage

 testmage

Χρήση:
<img class="img-rounded"> src="/image.jpg" />

Χρήση:
<img class="img-circle"> src="/image.jpg" />

 

 

Εικόνα με περίγραμμα

Εικόνα με σκιά

testmage

testmage

Χρήση:
<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

Demo Ολοκληρωμένου Ηλεκτρονικού καταστήματος

Βρίσκεστε στο demo, ενός ολοκληρωμένου ηλεκτρονικού καταστήματος, που μπορεί να αποκριθεί σε κάθε απαίτηση μικρής και μεσαίας επιχείρισης. Το κόστος του είναι συμβολικό αναλογικά με τις δυνατότητες, με στόχο να βοηθήσουμε την κάθε επιχείρηση, να δραστηριοποιηθεί στο διαδίκτυο. Μέσα από το μενού "Χαρακτηριστικά Εμφάνισης" μπορείτε να δείτε τις βασικές δυνατότητες, για το πως θα ρυθμίσετε την εμφάνιση ακριβώς στις δικές σας απαιτήσεις.
Στο Youtube δείτε στην αντίστοιχη ενότητα τα βοηθητικά video https://www.youtube.com/playlist?list=PLXKmdNvfREgFofBm9XRqYjS46YHBwx5Kb (Ρυθμίστε την ποιότητα των video σε HD από τον player του Youtube, έχουν ληφθεί σε προηγούμενη έκδοση, αλλά η διαδικασίες παραμένουν ακριβώς οι ίδιες)
Από το κουμπί πιο κάτω, δείτε πως μπορείτε να το αποκτήσετε και τις δυνατότητες του ηλεκτρονικού καταστήματος.

Περισσότερες πληροφορίες και παραγγελία...

Από το Blog μας
Το κατάστημα

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

Ωρες λειτουργίας

Για την καλύτερη εξυπηρέτηση,
επικοινωνήστε μαζί μας,
τις ώρες λειτουργίας της επιχείρησης.

Δευτέρα - Παρασκευή 
08:00 εώς τις 14:30 και
απο τις 17:30 εώς τις 21:00
Σάββατο 08:30 εώς 17:00

Επικοινωνήστε μαζί μας

Γράψτε σχετικές πληροφορίες
επικοινίας ή ώρες λειτουργίας

Οδός αριθμός
ΤΚ 001 00 - Πόλη
Τηλ: +30.000.1231231
Fax: +30.000.3213213
info @ todomainsas.gr