CMS

• Pages
• Emails
• Templates
  • Templates Position
• Variables
• Gallery
• Sliders

Category & Product Banners

• Category Page Banners
• Product Page Banners per Category
• Product Page Banners

HTML

Classes

• Hidden
• Units Of Measure
• Font & Text
• Colors & backgrounds
• Icons Font Awesome
• Angular Responsive Layout

Όλα τα κείμενα του site και τα emails υπάρχουν στο διαχειριστικό και μπορούν να αλλάξουν δυναμικά χωρίς να χρειάζεται upload. Στο menu Content Management μπορείτε να επιλέξετε ανάμεσα στα Pages, Emails, Templates, Variables, Galleries & Sliders.

Τα Variables, Images και Templates ουσιαστικά γίνονται include σε Pages ή άλλα Templates και μπορεί να περιέχονται σε πολλά σημεία στο site.

π.χ.
variable: {{VARIABLE_NAME}}
template: {% include “TEMPLATE_NAME” %}
image on templates: <img src=”{{galleryMediaUrl(‘GALLERY_NAME’, ‘IMAGE_IDENTIFIER’)}}”>
image on email templates:<img src=”cid:{{galleryMediaCid(‘GALLERY_NAME’, ‘IMAGE_IDENTIFIER’)}}” alt=” ” title=” ” >

Τα Pages αποτελούν τις στατικές σελίδες του site για τις οποίες μπορείτε να επιλέξετε αν θα είναι full width ή θα έχουν sidebar δεξί ή αριστερό. Απενεργοποιώντας τα Left Sidebar & Right SIdebar τότε το περιεχόμενο της σελίδας καταλαμβάνει όλο το πλάτος του site.

Τα emails αποτελούν τα μηνύματα που αποστέλλονται από το site, για παράδειγμα το Electroholic Order Confirmation.

Τα Templates αποτελούν ενότητες κώδικα που περιέχουν το περιεχόμενο όπως το footer, τα testimonials.
Επιλέγοντας Edit από το action menu, μπορείτε να επεξεργαστείτε το περιεχόμενο τους.

Τα Template Position αποτελούν συγκεκριμένες θέσεις μέσα στο site στις οποίες μπορείτε να προσθέσετε κάποιο template.

Τα Variables περιέχουν κομμάτια πληροφορίας που εμπεριέχονται σε πολλά σημεία του site, όπως το τηλέφωνο, η διεύθυνση ή το φαξ, για να γίνονται include σε Pages ή άλλα Templates.

Τα Galleries αποτελούν συλλογές εικόνων που εμφανίζονται σε συγκεκριμένα σημεία του site. Μπορείτε να προσθέσετε και να αφαιρέσετε εικόνες στην συλλογή. Για την κάθε εικόνα θα πρέπει πάντα να προσθέτετε ένα μοναδικό identifier ώστε να μπορείτε στην συνέχεια να το χρησιμοποιήσετε στα Templates ή Pages.

Τα Sliders αποτελούνται από εικόνες ή προϊόντα και εμφανίζονται σε συγκεκριμένα σημεία του site. Μπορείτε να προσθέσετε και να αφαιρέσετε εικόνες στην συλλογή. Στο παρόν version υπάρχουν μόνο 4 τα οποία είναι:

• Product Slider Top – Προτεινόμενα Προϊόντα
• Product Slider Bottom – Νέες Αφίξεις
• Home Page Slideshow (Top)
• Homepage Brands Carousel (Bottom)

Τα banners είναι templates που μπορούν να είναι εικόνες ή κομμάτια κώδικα.

Μπορείτε να προσθέσετε banners στην σελίδα της κατηγορίας. Υπάρχουν δύο διαθέσιμες θέσεις για τα banners στην σελίδα της κατηγορίας. Αυτά μπορείτε να τα ορίσετε κάνοντας edit στην κατηγορία και πηγαίνοντας στο tab Banner Positions.

• Category Before Main Content
• Category After Main Content

Εδώ μπορείτε να προσθέσετε banners για όλα τα προϊόντα της κατηγορίας. Αυτά μπορείτε να τα ορίσετε κάνοντας edit στην κατηγορία των προϊόντων και πηγαίνοντας στο tab Banner Positions.Υπάρχουν οκτώ διαθέσιμες θέσεις για τα banners στην σελίδα του προϊόντος που κληρονομεί από την κατηγορία του.

1. Product Before Main Content
2. Product After Main Content
3. Product Before Product Info
4. Product Before Details
5. Product After Details
6. Product Before Price Box
7. Product After Price Box
8. Product Before Recently Viewed

Επίσης, ανεξάρτητα από τα banners της κατηγορίας μπορείτε να προσθέσετε banners και για κάποιο συγκεκριμένο προϊόν. Αυτά μπορείτε να τα ορίσετε κάνοντας edit το προϊόν και πηγαίνοντας στο tab Banner Positions.Υπάρχουν αντίστοιχα οκτώ διαθέσιμες θέσεις για τα banners στην σελίδα του προϊόντος.

1. Product Before Main Content
2. Product After Main Content
3. Product Before Product Info
4. Product Before Details
5. Product After Details
6. Product Before Price Box
7. Product After Price Box
8. Product Before Recently Viewed

Conversion tool WORD to HTML
https://word2cleanhtml.com/

Basic Elements
https://www.learn-html.org/en/Basic_Elements

HTML Comments

<!–     –>

Paragraph

<p>….</p>

<p class=”my-1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

Link

<a href=”…”>…</a>

<a href=”…” target=”_blank” >…</a>

<a href=”/el/category/gaming” >Gaming</a>

<a href=”https://blog.electroholic.gr/” target=”_blank”>Τα νέα μας</a>

Image

<img  scr=”…” alt=”” >

<img scr=”{{galleryMediaUrl(“GALLERY_NAME”, “IMAGE_IDENTIFIER”)}}” class=”my-1 width-full” alt=””>

10px = 1rem

Font Weight classes:

light, bold, text-heavy, text-bold , text-medium, text-light

Text Align:

text-center ,text-left, text-right

Other classes

uppercase, underline, line-through, word-break, nowrap, no-pointer,
width-full, height-full
border-bottom, border-radius,
disabled
float-left, float-right
rel, sticky, abs, .top-right, .left-bottom, .bottom-center
row, row-gap, grid, row-wrap, start, space-center, start-center, stretch, wrap, scroll, list, column, start, center-start, column-reverse
flex-grow , flex-auto,
flex-100, flex-50, flex-33, flex-25, flex-20,
flex-sm-50, flex-sm-100,
flex-xs-50, flex-xs-100, flex-xs-wrap, flex-xs-column

Έχει προστέθηκε η βιβλιοθήκη με τα εικονίδια fontawesome αρά στο Content Management για να χρησιμοποιείτε ένα εικονίδιο απλά παίρνεται το html κώδικα που σας δίνει.

π.χ. <i class=”fas fa-bus-school”></i>

Αναζητηση στην Βιβλιοθήκη εικονιδίων: https://fontawesome.com/v6/search

Οδηγίες για Βασική Χρήση
https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

https://tburleson-layouts-demos.firebaseapp.com/#/docs
https://github.com/angular/flex-layout/wiki/Responsive-API

out - > flex-wrapper
in -> flex-container
content -> flex-content

<div class="flex-wrapper">
<div class="flex-container">
<div class="flex-content" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutGap=”2rem”>
<div fxFlex="grow">
</div>
<div fxFlex="25">
</div>
<div fxFlex="25">
</div>
</div>
</div>
</div>