Étape 3: Les produit boutons
La grille de ce Instructable n’est pas très utile pour afficher vos produits bien, pourtant. Il est temps de commencer à personnaliser. Jetez un oeil sur le code de l’étape précédente.
Pour commencer à afficher un produit, remplacez l’URL ci-dessus avec une URL qui pointe vers l’image de votre produit. Remplacer « Image titre » avec le nom de votre produit. Conserver la description entre les balises < p. > Si vous voulez, mais ce qui suit est mieux ; oubliez la description et ajouter quelques touches de produit bien par exemple page de téléchargement, support etc.. Cela simplifie votre grille de produit et le rend plus attrayant.
Pour ce faire, tête vers votre fichier HTML dans le bloc-notes et ajouter cette ligne de code. juste après (à partir de PureCSS.io) :
PureCSS vous permet d’intégrer des boutons sur votre site Internet. Pour avoir de jolies icônes pour aller avec vos boutons, vous devrez ajouter ce qui suit ainsi, juste après le code ci-dessus (de fortawesome.github.io) :
Regardez autour de deux sites ci-dessus, vous trouverez une tonne d’options de personnalisation, mais pour l’instant, remplacer toute la ligne < p. > par ce qui suit :
Enregistrez votre document HTML, ouvrez-le dans un navigateur Web et le tour est joué ! Un bouton de paiement cool sur un de vos produits !
Jetez un oeil sur le site de FontAwesome (ci-dessus), où vous pouvez à peu près n’importe quelle icône pour votre bouton.