Stap 3: De knoppen van het product
Het raster in dit Instructable is niet erg nuttig voor het weergeven van uw producten goed, nog. Het is tijd om te beginnen met het aanpassen. Neem een kijkje op de code uit de vorige stap.
Om begonnen te worden worden getoond van een product, vervangen door de bovengenoemde URL met een URL die naar de productafbeelding van uw verwijst. 'Image Title' vervangen door de naam van uw product. Houd de beschrijving tussen de tags < p. > als u wilt, maar de volgende beter is; Vergeet de beschrijving en toevoegen sommige knoppen nette product bijvoorbeeld downloaden, ondersteuningspagina enz. Dit vereenvoudigt het raster van uw product en maakt het meer aantrekkelijk.
Te doen dit, hoofd terug naar uw HTML-bestand in Kladblok, en voeg deze regel code. direct na (van PureCSS.io):
PureCSS kunt u knoppen op uw website insluiten. Als u wilt mooie pictogrammen om te gaan met je rode knoppen, moet u het volgende aan toevoegen ook direct na de bovenstaande code (van fortawesome.github.io):
Kijk rond de bovengenoemde twee sites, vindt u een ton aanpassingsopties, maar voor nu, vervang de hele regel < p. > met het volgende:
Een HTML-document opslaan, openen in een webbrowser, en voila! Een koele checkout-knop op een van uw producten!
Neem een kijkje op de site van FontAwesome (zie hierboven), waar u kunt enkel over elke pictogram voor uw knop.
