Dans ce screencast, nous allons creuser dans la section Offres. La section Offres est essentiellement un «mur d'annonces». C'est une zone du site que les gens devraient naviguer vers eux-mêmes, donc je ne crains pas de brouiller les publicités dans les pensées des gens. En outre, chaque annonce a une réduction sur elle et est un produit que je recommande personnellement, donc pas d'ombre.
Nous avons déjà l'en-tête en place. Nous avons également déjà le contenu craché sur la page que nous devons styliser. C'est l'endroit idéal pour se lancer directement dans l'écriture de CSS.
Ce qui est cool avec cette page, c'est que nous pouvons plonger nos orteils dans le monde de la publicité réactive. Le monde de la publicité n'a vraiment pas rattrapé le design réactif. Les publicités sont souvent de taille fixe et leur redimensionnement est difficile ou carrément interdit. Ce n'est pas le cas sur ce site car je crée moi-même les annonces.
Chaque annonce est créée à partir d'une image d'arrière-plan, d'une image de logo et de morceaux de texte. En utilisant un background-imagemoyen, nous pouvons en quelque sorte rogner les bords et c'est OK. Nous ne perdons aucun texte ni aucune partie importante du logo.
La disposition de ce «mur» sera semblable à un mur =). Nous aurons trois colonnes à des tailles de bureau larges, puis deux colonnes, puis une seule colonne à des tailles de téléphone. Tout ce que nous faisons est de faire flotter les annonces et d'appliquer un min-heightpour les garder toutes à la même hauteur. Lors de différentes requêtes multimédias, nous ajustons simplement la largeur des publicités et modifions celles qui ont la bonne marge et celles qui n'en ont pas (via :nth-child).
Sur le back-end, chaque annonce est un champ personnalisé dans WordPress. Lorsque nous les sortons sur la page, nous les interrogeons d'abord et les mettons dans un tableau. Ensuite, mélangez ce tableau. Puis enfin leur faire écho. Autant donner à chacun une chance d'être la meilleure annonce!