card - LO SMANETTONE

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto PORTFOLIO. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e un tasto SCOPRI per farlo atterrare sulla pagina dedicata a quel servizio. Durante la progettazione sulle opzioni dell'oggetto in questione dovete creare una unica categoria. Io l'ho chiamata servizi. Sotto ci mettete tutti i vostri servizi.

ATTENZIONE: SE avete una recente versione anno 2024-> di web site, questa procedura è indicata anche per collegare pagine come:

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto ANIMATED IMAGE. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica con un effetto che gli permetterà di farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha parecchie funzioni per essere personalizzato. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto IMAGE. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e un tasto SCOPRI (facoltativo) per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha parecchie funzioni per essere personalizzato. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno. L'esempio è indicato per tutti quelli che magari in home page, vogliono presentare i prodotti più selezionati o quelli di maggiore interesse o anche quelli con promozioni attive. Gli elementi che compongono l'esempio sono:

In questo esempio utilizziamo una serie di 3 card (ma ne possiamo fare anche di più) con l'oggetto IMAGE. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e un tasto SCOPRI (facoltativo) per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha parecchie funzioni per essere personalizzato. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno. L'esempio è indicato per tutti quelli che vogliono avere una pagina servizi centralizzata.

Gli elementi che compongono l'esempio sono:

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto ANIMATED BOX. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha poche funzioni per essere personalizzato e non è responsive. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno senza tagli di immagine. Vanno fatte delle prove nella formattazione degli spostamenti delle schede a varie risoluzioni. L'oggetto di per se è scenografico ma si perde troppo tempo a trovare soluzioni accettabili sul ridimensionamento.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto FONT AWESOME ICONS e con qualsiasi altro oggetto della collezione Incomedia che presenta Icone da riutilizzare.. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica applicando all'icona il percorso per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha poche funzioni per essere personalizzato. Cosa ci serve?

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto ANIMATED BOX 2. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e un tasto SCOPRI per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha poche funzioni per essere personalizzato e non è responsive. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno senza tagli di immagine. Vanno fatte delle prove nella formattazione degli spostamenti delle schede a varie risoluzioni. L'oggetto di per se è scenografico ma si perde troppo tempo a trovare soluzioni accettabili sul ridimensionamento.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto TESTO. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sull'immagine per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto ha poche funzioni per essere personalizzato e non è responsive. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno senza tagli di immagine. Vanno fatte delle prove nella formattazione degli spostamenti delle schede a varie risoluzioni. Per la soluzione hover (gli angoli blu che compaiono al passaggio del mouse) bisogna inserire del codice extra.

COME ABBIAMO DETTO SOPRA QUESTA SITUAZIONE RICHIEDE CODICE EXTRA.▲

CREDITI GIANCARLO WEB

Prepara 4 immagini tutte della stessa dimensione suggerisco 400x400. Su ogni immagine applica un'icona . Si fa con un programma vettoriale lavorando su livelli. Esempio:Gimp,Adobe photoshop.

Fai doppio click sull'oggetto testo e all'interno carica l'immagine e abbonda con la fantasia per descrizione

Ecco come ho fatto io ▼

Una volta completato il tutto vai al passo 3 poi su proprietà poi su codice - PRIMA DELLA CHIUSURA DEL TAG HEAD - inserisci il seguente codice. Attenzione!!! Gli id dell'oggetto appartengono a questa situazione quindi voi dovete sostituire gli id presenti nel codice con quelli vostri che andrete a ricavarvi ispezionando il codice della vostra pagina.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto CONTENT SLIDER. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sull'immagine o su un pulsante per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto dispone di sufficienti funzioni per essere personalizzato MA NON E' RESPONSIVE se non con l'inserimento di codice extra per un adattamento prossimo al responsive. E' importante impostare immagini tutte della stessa grandezza per avere un riscontro uniforme e moderno senza tagli netti di immagine. Vanno fatte delle prove nella formattazione degli spostamenti delle schede a varie risoluzioni.

Qui viene proposto il primo set di listato di 4. Fatto il primo ai successivi sarà sufficiente cambiare l'id dell'oggetto che si ricava con l'ispezione del codice.

Dove va messo il codice? Nella proprietà della pagina ► CODICE ► PRIMA DELLA CHIUSURA DEL TAG HEAD.

Crediti e ringraziamenti a Giuseppe Guida, utente help center Incomedia.

Ed ecco il listato:

Semplificando i 4 content slider hanno ognuno un identificatore. La prima scheda ha #imObjectContentSlider_530_793 che vedete sul codice. Una volta individuati gli altri dovete ricopiare il primo codice e sostituire l'id dell'oggetto. Quindi la seconda scheda potrebbe avere l'id #imObjectContentSlider_530_794, la terza #imObjectContentSlider_530_795 ecc.... Voi non dovete fare altro che modificare la sola stringa dell'ID.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto TESTO. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sull'immagine o su un pulsante per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto dispone di sufficienti funzioni per essere personalizzato.

COSA SERVE?

OGGETTO TESTO aggiungendo in basso altre tre schede da rinominare a secondo delle vostre esigenze

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto TILBOX. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sullo stesso oggetto per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto dispone di sufficienti funzioni per essere personalizzato ma non presenta carattere accattivante tale da essere preso in seria considerazione.

In questo esempio utilizziamo una serie di 4 card (ma ne possiamo fare anche di più) con l'oggetto HOVER IMAGE 2. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sullo stesso oggetto per farlo atterrare sulla pagina dedicata a quel servizio. L'oggetto dispone di sufficienti funzioni per essere personalizzato . In questa simulazione alcuni frammenti di transizione tra i tanti che mette a disposizione l'oggetto.

In questo esempio utilizziamo una serie di 3 card tramite codice extra in oggetto html incomedia. La funzione sarà quella di presentare all'utente che ci visita una breve introduzione della tematica e dargli modo di cliccare sullo stesso oggetto per farlo atterrare sulla pagina dedicata a quel servizio.