Σε αυτό το scastencast θα ανακαλύψουμε την ενότητα Προσφορές. Η ενότητα "Προσφορές" είναι ουσιαστικά ένας "τοίχος διαφημίσεων". Είναι ένας τομέας του ιστότοπου στον οποίο οι άνθρωποι θα πρέπει να πλοηγηθούν στον εαυτό τους, οπότε δεν ανησυχώ για την παρεμπόδιση των διαφημίσεων στις σκέψεις των ανθρώπων. Επίσης, κάθε διαφήμιση έχει έκπτωση σε αυτήν και είναι προϊόν που σας προτείνω προσωπικά, οπότε δεν γίνεται σκιερό.
Έχουμε ήδη την κεφαλίδα στη θέση της. Έχουμε ήδη το περιεχόμενο να φουσκώσει στη σελίδα που πρέπει να σχεδιάσουμε. Αυτό είναι το ιδανικό μέρος για να ξεκινήσετε να γράφετε κάποιο CSS.
Αυτό που είναι ωραίο σε αυτήν τη σελίδα είναι ότι μπορούμε να βυθίσουμε τα δάχτυλα των ποδιών μας στον κόσμο της αποκριτικής διαφήμισης. Ο κόσμος της διαφήμισης δεν έχει πραγματικά ανταποκριθεί στο σχεδιασμό που ανταποκρίνεται. Οι διαφημίσεις έχουν συχνά σταθερό μέγεθος και το μέγεθός τους είναι δύσκολο ή απαγορεύεται. Αυτό δεν συμβαίνει σε αυτόν τον ιστότοπο επειδή δημιουργώ οι ίδιοι τις διαφημίσεις.
Κάθε διαφήμιση δημιουργείται από μια εικόνα φόντου, μια εικόνα λογότυπου και κομμάτια κειμένου. Χρησιμοποιώντας ένα background-imageμέσο μπορούμε να περικόψουμε τα άκρα του και αυτό είναι εντάξει. Δεν χάνουμε κανένα κείμενο ή σημαντικά μέρη του λογότυπου.
Η διάταξη αυτού του «τοίχου» θα μοιάζει με τοίχο =). Θα έχουμε τρεις στήλες σε μεγάλα μεγέθη επιφάνειας εργασίας και, στη συνέχεια, θα πάμε σε δύο στήλες και, τέλος, μία στήλη σε μεγέθη τηλεφώνου. Το μόνο που κάνουμε είναι να αιωρούμε τις διαφημίσεις και να εφαρμόζουμε ένα min-heightγια να διατηρούμε το ίδιο ύψος. Σε διαφορετικά ερωτήματα πολυμέσων, απλώς προσαρμόζουμε το πλάτος των διαφημίσεων και αλλάζουμε ποιες από αυτές έχουν το σωστό περιθώριο και ποιες όχι (μέσω :nth-child).
Στο πίσω μέρος, κάθε διαφήμιση είναι ένα προσαρμοσμένο πεδίο στο WordPress. Όταν τα εξάγουμε στη σελίδα ρωτάμε πρώτα για αυτά και τα βάζουμε σε έναν πίνακα. Στη συνέχεια, ανακατέψτε αυτόν τον πίνακα. Τελικά τους επαναλαμβάνω. Θα μπορούσατε επίσης να δώσετε σε όλους μια δίκαιη ευκαιρία να είναι η κορυφαία διαφήμιση!