Schede del prodotto nel tuo negozio online realizzati con CSS e HTML.

In questa lezione conclusiva per quanto riguarda varie modelli della scheda prodotto nel nostro negozio online vediamo altri 4 esempi. Per realizzarli abbiamo usato prima di tutto la pseudo classe hover per portare davanti  varie elementi aggiuntivi come aggiungi al carrello, aggiungere ai preferiti, oppure aggiungere per confrontare per esempio ho scelto 3'4 articoli e vorrei vederli tutti insieme su una sola pagina, per paragonarli tra di loro.

In più non dimentichiamo la lente di ingrandimento. Ovio che abbiamo realizzato solo una bozza in  linguaggi CSS e HTMl, e per renderli funzionanti dovresti sudare un può per incorporarli nel tuo negozio online.

Ma sapendo almeno CSS e HTML e utilizzando sistemi di gestione di contenuto tipo Joomla e Virtuemart la cosa non è cosi difficile come si pensasse al primo sguardo.

Avevo descritto nei articoli precedenti tutti  i modelli di virtuemart e basterebbe capire dove si trovino gli  elementi che vuoi cambiare e collegare ad esso gli stili CSS. Comunque un puo di pratica ti servirà. Abbiamo appunto preparato due corsi CSS pratica e Sito web da zero che ti saranno d'aiuto.  Ora e il momento delle nostre schede prodotto.

Esempio 5


Esempio 6

Piccolo vestito veloce

Euro 22

Esempio 7

Piccolo vestito nero

Euro 22

Esempio 8

Piccolo vestito nero

Euro 22

E qui sotto potrai scaricare dopo esserti registrato il codice di stili CSS e struttura HTML per ogni esempio. Non dimenticare di verificare se sul tuo sito e installato font FontAwesome che contiene cosi detti glifi con aiuto di quali abbiamo realizzato le varie icone, tipo carrello e altre 

Letto 666 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso