Webx 5
ESPERIENZE UTILI
EFFETTO COSTELLAZIONE
ADATTATO
Progetto FREE
Non disponibile per cellulari. Only PC!!!!
Ti piacerebbe avere un effetto costellazione in uno sfondo riga? Se SI allora seguimi nei vari Step per la costruzione della tua pagina personalizzata.
PRO
- DIFFICOLTA' - MEDIA
- CODICE EXTRA DA INSERIRE - SI
CONTRO
- Bisogna cercare immagini che si adattino alle varie risoluzioni. Io ho scelto due immagini da 1280 x 853. Su pixbay ne trovi quante ne vuoi.
- Ci sono Conflitti con il modulo recensioni se inserite nella pagina questo effetto.
CREDITI
- Il codice originario è stato interamente sviluppato da KolAsim - Moderatore HelpCenter INCOMEDIA.
- L'effetto Responsive adattato dello slider proviene da un'idea di Giuseppe Guida. Utente HelpCenter INCOMEDIA.
Sei Pronto per questa avventura? OK partiamo.
PREPARAZIONE DEL LAYOUT
Non è necessaria alcuna impostazione particolare o break-point specifici. Va bene anche quella che solitamente da il prodotto di default.
PREPARAZIONE DELLA PAGINA TEST
Vai al Passo 3 - MAPPA e crea la tua pagina esempio.
Inserisci un separatore da 90px per primo nella struttura 
. Non toccare i margini e non estendere in larghezza
. Non toccare i margini e non estendere in larghezzaDi seguito al separatore metti un oggetto TITOLO responsive 
, non estendere in larghezza ed esegui i settaggi come da immagini che seguono:
, non estendere in larghezza ed esegui i settaggi come da immagini che seguono:Margini ▼
Setup dell'oggetto titolo ▼
Di seguito metti un separatore da 90PX . Non toccare i margini e non estendere in larghezza
. Non toccare i margini e non estendere in larghezzaVai in STRUTTURA RIGHE e aggancia i 4 oggetti tra loro ed estendi in larghezza come da immagine:▼
Nelle OPZIONI a destra scegli elenco immagini e inserisci due tue IMMAGINI possibilmente da 1280x853px. Devi fare delle prove e trovare quelle giuste.
Sei quasi alla fine porta pazienza.
Vai al passo 3 STILE RIGA - E SCEGLI RESPONSIVE 
Ora questo esempio e stato realizzato su un layout con break point specifici e quindi gli oggetti vengono nascosti a partire da una certa risoluzione. Tu prova il comportamento della pagina e decidi dove nascondere i due separatori. Io ho fatto così:
Se vuoi seguire lo stesso esempio del mio devi modificare la struttura come da immagine: (facoltativo)
- vai al passo 2 su modello e poi fai click su RESPONSIVE
- Prepara la struttura come da immagine seguente:▼ ►►► OPPURE SCARICA UN MODELLO CON I BREAK-POINT GIÀ INSERITI E PRONTI PER CREARTI IL TUO ESEMPIO
- 3 - SALVA TUTTO.
Scarica ora da questo progetto il file CSS e il File JS 
Una volta scaricate le due cartelle con all'interno i loro rispettivi file non devi dar altro che portarti nell'area del file manager del Provider/Hosting ove è ospitato il tuo sito e caricare le due cartelle nella rooth principale o in una sottocartella dove è ospitata la pagina di esempio da te creata.
Ora che hai fatto questa operazione andiamo a finalizzare.
Vai al PASSO 3 seleziona la tua pagina e poi vai su PROPRIETA' e poi su ESPERTO
Prima della chiusura del tag head inserisci tutto il codice seguente:
Salva tutto.
Non ti rimane che provare l'effetto che funzionerà solo lanciando il sito sulla rete internet ma non in locale e non in anteprima
ATTENZIONE !!! Tutti i contenuti della pagina che andrai a mettere devono avere impostato uno sfondo bianco come da immagine che ti propongo.
