\n Requisiti di questo tutorial
\n<\/h5>\n
\n Dovrai scaricare determinate immagini, vettori e caratteri per creare questo sito. Ma puoi comunque continuare senza queste risorse. Per organizzare correttamente il contenuto, crea una cartella separata per il tuo sito.\n<\/p>\n
- \n
- \n
\n Vai su pexels.com<\/a> e scarica:\n <\/p>\n
- \n
- \n
\n 4 immagini di dimensioni 1160 x 480 per slideshow. Ecco uno screenshot da Pexels. Puoi inserire questa dimensione nella casella “dimensione personalizzata” su questo sito web.\n <\/p>\n<\/li>\n
- \n
\n 6 immagini di dimensioni 271 x 208 per la sezione ‘servizi'.\n <\/p>\n<\/li>\n
- \n
\n 1 immagine di dimensioni 1160 x 692 per la sezione “Contattaci”.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Vai su freepik.com<\/a> e scarica:\n <\/p>\n
- \n
- Un'icona a forma di croce (puoi modificare questa icona in Illustrator o semplicemente scaricare il file png da feepik).\n <\/li>\n
- 6 immagini di volti per la sezione ‘Testimonianze'.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n Vai su thinpatterns.com<\/a> e scarica il modello ‘brickwall' per la sezione ‘Testimonianze'.\n <\/p>\n<\/li>\n
- \n
\n Mentre procederai con questo tutorial, ti dir\u00f2 come scaricare i font richiesti (pu\u00f2 essere fatto all'interno di Muse).\n <\/p>\n<\/li>\n
- \n
\n Usa il testo fittizio da lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n INIZIAMO!\n<\/p>\n
\n Preparazione dello spazio di lavoro e impostazione dell'intestazione\n<\/p>\n
\n 1 Crea un nuovo sito andando su File > Nuovo sito (Ctrl+N) e inserisci i valori come mostrato di seguito. Non dimenticare di selezionare la casella di controllo che dice “Sticky Footer”. Fai clic su OK e avrai la modalit\u00e0 PLAN. Fare doppio clic su A-Master situato in basso in un'area grigia. Creerai tutto su questa pagina master.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Scegliere lo strumento testo dalla casella degli strumenti situata sul lato sinistro della finestra dell'applicazione. Fare clic e trascinare sulla tela o sulla pagina per creare una casella di testo. Vai al pannello di testo (Ctrl+T), sotto il menu a tendina dei font, cerca Font Web e scegli ‘Aggiungi font Web' e scarica i seguenti font:\n<\/p>\n
- \n
- Rametto Uno\n <\/li>\n
- Pezzo\n <\/li>\n
- Questrial\n <\/li>\n
- Raleway\n <\/li>\n
- Nobile\n <\/li>\n
- PT Senza\n <\/li>\n
- Ubuntu\n <\/li>\n
- Aragosta\n <\/li>\n<\/ul>\n
\n Dopo aver scaricato questi caratteri, elimina questa casella di testo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 Vai al pannello Livelli situato sul lato destro della finestra dell'applicazione. Se non \u00e8 presente, vai al menu Finestra> Livelli. Vedrai l\u00ec un livello chiamato Livello 1 (colore blu). Questo \u00e8 il livello predefinito e tutto ci\u00f2 che crei o posizioni sulla tela va l\u00ec. Fai doppio clic su questo livello e chiamalo “Intestazione”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 All'interno del pannello dei livelli, fare clic sulla piccola icona della carta piegata situata nell'angolo in basso a destra. Facendo clic su questo creer\u00e0 un nuovo livello con il colore rosso. Ancora una volta, fai doppio clic su questo livello e rinominalo in “Contenuto”.\n<\/p>\n
\n 5 Fare clic e trascinare questo livello di contenuto e posizionarlo sotto il livello di intestazione. Lo abbiamo fatto perch\u00e9 vogliamo che il nostro colpo di testa sia in cima a tutto.\n<\/p>\n
\n 6 Selezionare il livello di intestazione e comprimere il pannello dei livelli.\n<\/p>\n
\n 7 Selezionare lo strumento rettangolo dalla casella degli strumenti o premere ‘m' sulla tastiera.\n<\/p>\n
\n 8 Disegna un piccolo rettangolo sulla tela e assicurati che il colore del bordo sia blu, il che indica che questo oggetto si trova all'interno del livello di intestazione.\n<\/p>\n
\n 9 Vai al pannello Trasforma situato nella parte in alto a destra della finestra dell'applicazione. Lascia la larghezza (L) e metti 50 nel campo dell'altezza interna (H) e premi invio. (Non preoccuparti dei valori X e Y.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 Nella parte superiore della pagina, vedrai due linee di colore blu (mostrate nello screenshot qui sotto). Questi sono chiamati ‘guide'. Quando passi il mouse sopra la prima guida, si dice “Inizio della pagina, trascina per regolare il riempimento sopra la pagina” e l'altra dice “Intestazione, trascina per regolare la posizione”. Impostare queste guide fin dall'inizio \u00e8 molto importante.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Ora, poich\u00e9 abbiamo creato un rettangolo di H=50, fare clic, tenere premuto e trascinare la guida ‘parte superiore della pagina' fino a quando la casella che apparir\u00e0 sotto una volta iniziato a trascinare indicher\u00e0 Y=50.\n<\/p>\n
\n 12 Allo stesso modo, trascina la guida dell'intestazione sopra nella parte superiore della guida della pagina finch\u00e9 non dice Y=0. Lo abbiamo fatto per impostare la nostra area di intestazione. (Potresti provare a posizionare queste guide in posizioni diverse per ottenere risultati diversi, ma per ora va bene.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 Selezionare il rettangolo appena creato, trascinarlo nell'area dell'intestazione in modo che si adatti correttamente.\n<\/p>\n
\n 14 Ora, dobbiamo aumentare la larghezza del rettangolo e renderla al 100% in modo che l'intestazione appaia perfetta su ogni dimensione dello schermo. Espandi il rettangolo su entrambi i bordi e assicurati che si agganci con i bordi. Apparir\u00e0 una guida arancione che assicura che l'oggetto sia stato agganciato. Man mano che aumenti la larghezza del rettangolo, il pop-up dir\u00e0 W=100% o W=1160 quando raggiungerai il bordo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Mantieni selezionato il rettangolo, fai clic sulla parola Riempi sotto il menu dell'applicazione e imposta le opzioni come segue. Scegli il primo colore come Nero e il secondo colore: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 Andare su File > Salva sito. Salva il tuo sito ogni volta che apporti una modifica.\n<\/p>\n
\n 17 Creare una casella di testo e digitare \u2013 ‘example.com' e modificarne la formattazione come mostrato di seguito.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Regolare le dimensioni della casella di testo in modo che l'intero testo appaia su una riga. Seleziona questa casella di testo e trascinala sul rettangolo nero. Allinealo al centro verticale del rettangolo (una linea blu ti dir\u00e0 quando \u00e8 centrato) e aggancialo al bordo sinistro come mostrato di seguito.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Creare una casella di testo e digitare \u2013 ‘Home'. Cambia la sua formattazione come segue. Regola la larghezza e l'altezza della casella di testo di conseguenza. Puoi farlo anche dal pannello di trasformazione. Il mio \u00e8 L=52, A=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Copiare e incollare questa casella di testo e digitare “Servizi” in quella nuova. Regola la larghezza. Trascina e posiziona questa casella di testo accanto a casa con una differenza molto minore tra i due. Ancora una volta, le guide ti aiuteranno nel corretto allineamento.\n<\/p>\n
\n 21 Copia e incolla questa casella di testo per quattro volte di pi\u00f9 e digita \u2013 Why Us, Testimonials, Contact Us e Newsletter. Posiziona queste caselle di testo una per una a spaziatura uguale accanto a “servizi”.\n<\/p>\n
\n 22 Con lo strumento di selezione selezionato e il tasto Maiusc premuto, selezionare tutte queste caselle di testo una per una. Vai al pannello di testo, cambia il colore in bianco. Scegli il gruppo di queste caselle e posizionalo sopra il rettangolo dell'intestazione. (Centrato verticalmente e allineato con il bordo destro della pagina). Questo \u00e8 il nostro Men\u00f9.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 Ancora una volta, con lo strumento di selezione selezionato e il tasto Maiusc premuto, selezionare queste caselle di testo, il rettangolo e la casella di testo example.com. In alto a destra, vedrai un'opzione chiamata Pin. Fai clic sulla sua casella in alto al centro per appuntare questi elementi. Ci\u00f2 significa che quando l'utente scorrer\u00e0 il tuo sito, questa intestazione rimarr\u00e0 fissa in alto. \u00c8 molto utile in quanto l'utente non dovr\u00e0 scorrere fino in fondo solo per scegliere un'altra opzione.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 Passare al pannello Livelli e bloccare il livello dell'intestazione. Questo pu\u00f2 essere fatto facendo clic all'interno della casella a sinistra del nome del livello. Quando blocchi un livello o qualsiasi oggetto, non influir\u00e0 sul suo aspetto ma non sarai in grado di selezionare questi elementi a meno che non li sblocchi. Lo abbiamo fatto per eliminare completamente le possibilit\u00e0 di spostare accidentalmente gli oggetti.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 Selezionare il livello del contenuto e comprimere il pannello dei livelli.\n<\/p>\n
\n Creazione di una presentazione
\n<\/h3>\n\n 26 Vai alla libreria dei widget situata sul lato destro della finestra dell'applicazione. Se non \u00e8 presente, vai al menu Finestra> scegli Libreria widget. Espandi la sezione “presentazioni” e seleziona “Vuoto”. Fare clic e trascinare questo oggetto sulla tela. Apparir\u00e0 una finestra nera con le opzioni della presentazione.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Assicurarsi che le opzioni siano impostate come mostrato nell'immagine sottostante. Nella sezione delle parti in basso, deseleziona le caselle di controllo che dicono Prev, Next, Captions e Counter. Non abbiamo bisogno di nessuno di questi.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Fare clic in un punto qualsiasi dell'area di disegno per far scomparire questo popup. Ora, fai clic con attenzione all'interno della presentazione. Cliccandolo una volta, vedrai che ‘Slideshow' \u00e8 stato scritto nell'area ‘il tipo di selezione corrente'. Si trova nell'angolo in alto a sinistra sotto il menu dell'applicazione. Quest'area ti permette di vedere cosa hai selezionato. \u00c8 una caratteristica molto utile quando il layout diventa complicato. Clicca di nuovo e noterai che la descrizione dice ‘Hero Image'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Aumenta manualmente la larghezza dell'immagine principale espandendola dal centro. Aggancialo su entrambi i bordi della pagina (per renderlo largo al 100%) e nella parte inferiore del rettangolo dell'intestazione come mostrato di seguito.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 Andare a trasformare pannello e mettere H=500.\n<\/p>\n
\n 31 Aprire nuovamente le opzioni della presentazione facendo clic sul piccolo cerchio blu con un rettangolo bianco al suo interno (si trova nell'angolo in alto a destra della presentazione).\n<\/p>\n
\n 32 Fare clic sull'icona della cartella accanto all'opzione ‘Aggiungi immagini\u2026', cercare le immagini che abbiamo scaricato per la presentazione. Seleziona tutti e quattro e fai clic su Apri.\n<\/p>\n
\n 33 Vai su File > scegli “Anteprima pagina nel browser” o Ctrl+Maiusc+E e guarda come funzioner\u00e0 la tua presentazione una volta che il sito sar\u00e0 attivo. Ti consiglio di memorizzare le scorciatoie da tastiera che sto usando in questo tutorial. Ci\u00f2 ti aiuter\u00e0 ad accelerare il processo di progettazione.\n<\/p>\n
\n Creazione della sezione ‘Servizi'
\n<\/h3>\n\n 34 Ora che abbiamo impostato la nostra intestazione e presentazione, \u00e8 il momento di creare sezioni per ogni elemento che abbiamo aggiunto al nostro menu. Iniziamo con i “servizi”. Crea una casella di testo e digita servizi al suo interno (tutte le lettere minuscole) e modifica la formattazione come segue.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Fare doppio clic all'interno di questa casella di testo e selezionare solo la lettera ‘I'. Cambia il carattere in “Chunk” e lascia tutto uguale. Regola l'altezza di questa casella di testo. Quando ne diminuirai l'altezza, ad un certo punto apparir\u00e0 una linea tratteggiata e la scatola non si accorcer\u00e0. Non ridurre le dimensioni dopo. Questa \u00e8 l'altezza pi\u00f9 bassa possibile con questa dimensione del carattere.\n<\/p>\n
\n 36 Con la casella di testo selezionata, passare al pannello di trasformazione e impostare l'angolo di rotazione su -90 gradi (90 gradi negativi).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Spostare la casella di testo sul lato sinistro dell'area di disegno come mostrato di seguito.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Potresti voler ridurre un po' lo zoom per vedere tutto il contenuto in una volta o per regolare correttamente gli oggetti. Per fare ci\u00f2, prova a digitare valori diversi (meno del 100%) nella sezione del livello di zoom in alto. Dopo aver digitato il valore, premere Invio.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 Vai su File > scegli ‘Posiziona'. Seleziona la prima immagine che abbiamo scaricato per la nostra sezione servizi. Fare clic su Apri.\n<\/p>\n
\n 40 Il cursore cambier\u00e0 il suo aspetto in una pistola di posizione caricata con un'immagine. Fare clic sulla tela per posizionarlo. Spostalo e posizionalo in modo che sia allineato con la parte superiore della casella di testo “servizi”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Copia questa immagine e incollala due volte. Seleziona queste immagini incollate una per una e allineale a uguale distanza con la prima immagine.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 Selezionare la seconda immagine, fare clic destro su di essa e scegliere ‘sostituisci immagine' (\u00e8 l'ultima opzione). Cerca la seconda immagine e fai clic su Apri. Sostituisci anche la terza immagine.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Creare caselle di testo per le informazioni sui servizi e applicare la formattazione per intestazioni e paragrafi come scritto di seguito. Le guide ti aiuteranno ad allinearle correttamente.\n<\/p>\n
- \n
- \n Per le intestazioni:<\/strong> Font: Raleway Bold, Dimensione=20, Colore: Nero, Allineato a sinistra e 100% iniziale.\n <\/li>\n
- \n Per i paragrafi:<\/strong> carattere: Questrial, dimensione=15, colore: R=67 G=67 B=67, allineato a sinistra e 120% in avanti.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Posizionare altre tre immagini come abbiamo fatto nei passaggi precedenti e allo stesso modo creare un testo descrittivo per esse. Dovresti avere il seguente risultato.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Risultato finale della sezione ‘Servizi'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Creazione della sezione “Perch\u00e9 noi”.
\n<\/h3>\n\n 45 La prossima \u00e8 la sezione ‘Perch\u00e9 noi'. Questo \u00e8 un po' complicato. Prestare attenzione nella selezione degli oggetti. Innanzitutto, crea un rettangolo di larghezza 100% e H=996. Riempilo con un colore (R=47, G=48, B=55). Fai clic con il pulsante destro del mouse su questo rettangolo> Disponi> scegli “porta in secondo piano” (non manda indietro).\n<\/p>\n
\n 46 Espandi la tua area di lavoro facendo clic e trascinando la guida ‘in fondo alla pagina' in modo da avere spazio sufficiente per creare contenuti che verranno inseriti in questo rettangolo che abbiamo appena creato.\n<\/p>\n
\n 47 Scorri verso il basso fino allo spazio vuoto bianco e crea un altro rettangolo di L=351 e A=351. Riempilo con il colore bianco e senza tratti.\n<\/p>\n
\n 48 Vai all'opzione ‘raggio d'angolo' (si trova accanto al tratto sotto il menu dell'applicazione). Fai clic su tutti gli angoli per arrotondarli e metti 500 nella casella accanto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Avrai un cerchio. Trascina questo cerchio sul rettangolo e regolalo come segue. Accanto al raggio dell'angolo, c'\u00e8 un'opzione chiamata ‘Opacit\u00e0'. Con il cerchio selezionato, metti 14 in questa casella.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Creare una casella di testo e digitare \u2013 why us (all small). Cambia il suo font in Rammetto One, size=100, Color R=241 G=244 B=247, leading 100% e allinealo al centro. Metti questa casella di testo all'interno del cerchio e allineala correttamente.\n<\/p>\n
\n 51 Ora creeremo le linee tratteggiate. Crea un rettangolo di L=9 e A=9, senza riempimento. Fai clic sulla parola “tratto” accanto a riempimento. Scegli il colore R=241 G=244 B=247. Fai clic sull'icona della catena per spezzarla e metti “1” nel peso della corsa inferiore.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Copia questo rettangolo con un tratto laterale e incollalo pi\u00f9 volte. Disporli in una riga (ingrandisci leggermente con lo strumento zoom se hai difficolt\u00e0 a vedere questi rettangoli). Una volta ottenuta la lunghezza desiderata della linea tratteggiata, seleziona tutti questi rettangoli, fai clic con il tasto destro e scegli “Raggruppa”. Copia e incolla questo gruppo per altre linee tratteggiate.\n<\/p>\n
\n 53 Per le linee tratteggiate inclinate, provare a inserire angoli di rotazione diversi nel pannello di trasformazione. Ho usato 150 e 30 gradi. Dovrai eliminare alcuni rettangoli da questo gruppo per avere lunghezze pi\u00f9 brevi. Regola queste linee vicino al cerchio come mostrato di seguito.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Ora aggiungeremo altro testo per numeri, intestazioni e descrizioni. Usa le seguenti impostazioni per ognuna di esse e regola queste caselle di testo come mostrato di seguito.\n<\/p>\n
- \n
- \n Per i numeri:<\/strong> Font=Rammetto One, Colore: R=196 G=214 B=193, allineato al centro e 100% in testa, dimensione: 200 (per il numero ‘1'), 160 (per i numeri ‘2' e ‘3') e 120 (per i numeri ‘4' e ‘5').\n <\/li>\n
- \n Per le intestazioni:<\/strong> Font=Raleway Bold, Dimensione=18, Colore:Bianco, Allineato al centro e 100% iniziale.\n <\/li>\n
- \n Per i paragrafi:<\/strong> Font=Questrial, Dimensione=16, Colore: R=241 G=244 B=247, Allineato al centro e 120% in avanti.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Risultato finale della sezione “Perch\u00e9 noi”.
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Creazione della sezione ‘Testimonianze'
\n<\/h3>\n\n 55 Ancora una volta, creare un po' di spazio per lavorare trascinando verso il basso la parte inferiore della guida della pagina. Crea un rettangolo di larghezza 100% e H=486.\n<\/p>\n
\n 56 Con il rettangolo selezionato, fare clic sulla parola ‘Riempi' e fare clic su ‘Aggiungi immagine' accanto all'opzione immagine. Cerca l'immagine del modello brickwall che abbiamo scaricato. Sotto l'opzione Adattamento, scegli “Affianca” per riempire l'intero rettangolo con questa trama.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Scorri verso il basso fino allo spazio vuoto e crea una casella di testo di dimensioni L=406, A=289 con l'aiuto del pannello di trasformazione. Digita \u2013 ‘ci\u00f2 che gli altri hanno da dire' (tutto in piccolo). Cambia il suo carattere in Rammetto One, dimensione=70, allinealo a sinistra, valori di colore R=37 G=37 B=37 e leading=100%.\n<\/p>\n
\n 58 Con questa casella di testo selezionata, fare clic sulla parola tratto, applicare il tratto destro di peso uno e di colore nero. Trascina questa casella di testo e posizionala sopra il rettangolo con il motivo brickwall.\n<\/p>\n
\n 59 Il passaggio successivo consiste nell'aggiungere le testimonianze dei clienti. Per questo, useremo le immagini vettoriali della faccia tonda che abbiamo scaricato da freepik.com. Ancora una volta, riduciti allo spazio vuoto bianco in modo da poter personalizzare correttamente la tua composizione.\n<\/p>\n
\n 60 Vai alla libreria Widget e trascina ‘Vuoto' dalla sezione composizioni sulla tela. Fai clic sul segno pi\u00f9 per aggiungere altri tre trigger. Seleziona attentamente il primo trigger e assicurati la selezione con l'aiuto dell'area di selezione corrente che dice trigger. E proprio accanto c'\u00e8 un'opzione chiamata ‘Attivo'. Fare clic qui per espandere. Seleziona lo stato “Normale” e scegli “nessun riempimento” e “nessun tratto” per questo stato. Ripeti l'operazione per ogni stato che \u00e8 Rollover, Mouse gi\u00f9 e Attivo. Vai al pannello di trasformazione con il primo trigger selezionato e metti W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Ripeti il \u200b\u200bpassaggio precedente per ogni trigger che abbiamo. Ci\u00f2 significa che non applicare alcun riempimento e nessun tratto per ogni stato e trasformare i trigger in dimensioni 10 x 10. Avvicina i grilletti l'uno all'altro.\n<\/p>\n
\n 62 Ora. Personalizzeremo gli obiettivi per ciascuno di questi trigger. Il grande rettangolo che vedi \u00e8 il bersaglio. Seleziona il primo trigger e seleziona il suo stato normale dal pannello degli stati. Successivamente, seleziona il target per questo trigger e non applicare nessun riempimento e nessun tratto per ogni stato. Quindi vai al pannello di trasformazione e crea il target di L=360, H=370.\n<\/p>\n
\n 63 Ripetere il passaggio precedente per ogni target. Assicurati solo di selezionare prima il trigger, portarlo allo stato normale, quindi selezionare il rispettivo target con stato normale e quindi applicare nessun riempimento e nessun tratto. Non sar\u00e0 necessario modificare le dimensioni di ogni target. Fallo solo per uno e sar\u00e0 applicato a tutti.\n<\/p>\n
\n 64 Ora inizieremo ad aggiungere contenuto a questa composizione. Vai a File> Posiziona e apri l'immagine del primo volto e posizionala all'esterno della composizione. Trascina questa immagine e inseriscila ora nella composizione. Vedrai che un cerchio blu apparir\u00e0 nell'angolo in alto a destra che indica che questa immagine ora fa parte della composizione.\n<\/p>\n
\n 65 Creare tre caselle di testo: una per il nome della persona, una per la sua designazione e una per la dichiarazione o recensione. Applica la formattazione come scritto di seguito e inserisci queste caselle di testo all'interno della composizione. Assicurati solo che ognuno di loro abbia un cerchio blu all'angolo.\n<\/p>\n
- \n
- \n Per il nome della persona:<\/strong> Carattere: Nobile Medium Italic, dimensione=18, Colore: R=37 G=37 B=37, allineato al centro e 100% all'inizio.\n <\/li>\n
- \n Per la designazione:<\/strong> Carattere: Nobile, dimensione=15, Colore: R=37 G=37 B=37, allineato al centro e 100% iniziale.\n <\/li>\n
- \n Per dichiarazioni (con virgolette):<\/strong> Font: PT Sans Italic, dimensione=18, colore: R=69 G=64 B=68, allineato al centro e 100% iniziale.\n <\/li>\n<\/ul>\n
\n 66 Con l'immagine del viso selezionata, applica un tratto di peso 4 su ciascun lato, colore: bianco, arrotonda tutti gli angoli e aumenta il raggio finch\u00e9 non avvolge l'immagine. Ho usato 100 come raggi d'angolo.\n<\/p>\n
\n 67 Vai su ‘Effetti' (situato accanto all'opzione angoli arrotondati) e seleziona la casella di controllo ‘ombreggiatura'. Metti i valori come; Colore=Nero, Opacit\u00e0=37%, Sfocatura=12, Angolo=78 e Distanza=5.\n<\/p>\n
\n 68 Ripetere i passi precedenti (da 64 a 67) per aggiungere contenuto ad ogni target e salvare le modifiche (Ctrl+S). Metti questa composizione sopra il rettangolo con il motivo del muro di mattoni.\n<\/p>\n
\n 69 Ora seleziona l'intera composizione (assicurati dell'area di selezione corrente) ed espandi le sue opzioni facendo clic sul cerchietto blu. Impostare le opzioni come mostrato di seguito. Premi Ctrl + Maiusc + E e verifica se funziona correttamente.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Dovresti ottenere il seguente risultato.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Risultato finale della sezione ‘Testimonianze'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Creazione della sezione “Contattaci”.
\n<\/h3>\n\n 71 La sezione successiva \u00e8 Contattaci. Aggiungeremo un'immagine di sfondo, un modulo e alcune caselle di testo in questa sezione. Innanzitutto, crea un rettangolo di larghezza 100% e H=692. Riempilo con un'immagine che abbiamo scaricato per questa sezione e scegli “scala per riempire” in Adattamento. Cambia la sua opacit\u00e0 al 72%.\n<\/p>\n
\n 72 Crea un altro rettangolo della stessa larghezza e altezza e riempilo con una sfumatura. Metti i valori del gradiente come; Opacit\u00e0=dal 90% al 46%, Colore: Nero a R=69 G=64 B=68, Punto focale=66%, Direzione: Orizzontale e Dimensione: automatica. Metti questo rettangolo sopra l'immagine e assicurati che scatti con ogni bordo.\n<\/p>\n
\n 73 Vai alla libreria dei widget. Sotto i moduli, seleziona “contatto semplice” e trascinalo sulla tela. Apparir\u00e0 una finestra con le opzioni del modulo. Inserisci il nome del modulo: Modulo di contatto, Email a: inserisci il tuo indirizzo email in cui desideri ricevere le informazioni inserite dai visitatori, Dopo l'invio: seleziona ‘resta sulla pagina corrente'. L'ultima opzione \u00e8 “Modifica insieme”. Assicurati che sia selezionato. In questo modo dovrai apportare modifiche solo ad un campo e verranno applicate a tutti. Fare clic in un punto qualsiasi dell'area di disegno per far scomparire la casella delle opzioni.\n<\/p>\n
\n 74 Selezionare il modulo. Fare clic sull'etichetta “Nome” e fare nuovamente clic finch\u00e9 non viene visualizzato “Etichetta” scritto nell'area di selezione corrente. Premi Elimina. Ripeti l'operazione per le etichette delle email e dei messaggi ed eliminale.\n<\/p>\n
\n 75 Seleziona di nuovo il modulo e seleziona il primo campo del modulo che dice ‘Inserisci nome' finch\u00e9 non vedi ‘Inserimento testo' nell'area di selezione corrente. Non applicare riempimento e tratto inferiore (peso uno e colore bianco) per ogni stato, da Vuoto a Fuoco. Per lo stato di errore, selezionare nessun riempimento e tratto inferiore di colore rosso con peso 1.\n<\/p>\n
\n 76 Successivamente, con il campo e-mail selezionato> scegli nuovamente il suo stato vuoto e personalizza il carattere e il colore del testo per ogni stato come scritto di seguito.\n<\/p>\n
- \n
- \n Per vuoto, non vuoto e stato attivo:<\/strong> Font: Questrial, dimensione=14, colore: bianco, allineato a sinistra, 100% iniziale e senza corsivo.\n <\/li>\n
- \n Per lo stato di rollover:<\/strong> basta cambiare il colore del testo in R=196 G=196 B=196 e niente corsivo.\n <\/li>\n
- \n Per stato di errore:<\/strong> cambia il colore del testo in rosso e senza corsivo.\n <\/li>\n<\/ul>\n
\n 77 Fare clic e selezionare il pulsante Invia. Scegli il suo stato normale, arrotonda tutti gli angoli con 40 raggi e aumenta la sua larghezza come mostrato nello screenshot qui sotto. Cambia il font in Raleway Bold, size=20, allineato al centro, color: R=241 G=244 B=247, leading: regola il testo ‘submit' al centro del pulsante aumentando questo valore (ho usato il 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Per i suoi stati rollover e mouse down, cambia il colore del tratto e il colore del testo in grigio (R=127 G=127 B=127). Infine, per il suo stato di “invio in corso”, cambia il tratto e il colore del testo in blu cielo (R=41 G=171 B=226).\n<\/p>\n
\n 79 Quando selezioni lo stato ‘invio in corso' per questo pulsante di invio, vedrai che c'\u00e8 un'altra casella di testo che dice ‘invio modulo…'. Seleziona questa casella e scegli il suo stato “invio in corso”. Cambia il carattere in Questrial, dimensione=14, colore: grigio, allineato al centro e senza corsivo. Scegli lo stato “invio riuscito” e cambia il colore del testo in azzurro (senza corsivo). Scegli il suo stato “invia errore” e cambia il colore del testo in rosso (senza corsivo). Il modulo di contatto \u00e8 pronto.\n<\/p>\n
\n 80 Creare due caselle di testo. Digita – contattaci e nella seconda riga digita “tutti i campi sono obbligatori”. Per contattarci, usa il carattere: Rammetto One, taglia=60, colore: R=241 G=244 B=247, leading=100% e allineato a sinistra. Per il testo “tutti i campi sono obbligatori”, utilizza il carattere: Nobile corsivo, dimensione=26, colore: R=241 G=244 B=247, iniziale=100% e allineato a sinistra. Per questa casella di testo, applica il tratto inferiore di peso 1 e colora il bianco.\n<\/p>\n
\n 81 Digitare un paragrafo nella seconda casella di testo che abbiamo creato. Usa font: PT Sans Italic, size=14, color: R=241 G=244 B=247, leading=120%, allineato a sinistra e spazio prima=15.\n<\/p>\n
\n 82 Metti queste caselle di testo e il modulo sull'immagine che abbiamo posizionato. Regolali come segue.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Crea un'altra casella di testo per alcune informazioni di contatto come indirizzo dell'ufficio, e-mail e numeri di telefono. Metti questa casella di testo sull'immagine. Dovresti avere il seguente risultato.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Risultato finale della sezione ‘Contattaci'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Creazione pi\u00e8 di pagina
\n<\/h3>\n\n 84 L'ultima sezione \u00e8 pi\u00e8 di pagina. Ci sono tre guide nella parte inferiore, vale a dire: parte inferiore della pagina, pi\u00e8 di pagina e parte inferiore del browser. Quello che devi fare ora \u00e8 assicurarti che la guida “in fondo alla pagina” corrisponda alla parte inferiore della sezione contattaci e che la guida “a pi\u00e8 di pagina” coincida con la guida “in fondo alla pagina”. Successivamente, puoi trascinare verso il basso la guida “parte inferiore del browser” per regolare lo spazio necessario per il pi\u00e8 di pagina.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Creare due rettangoli di larghezza 100% e H=168 per il primo e H=37 per l'altro. Cambia il colore di riempimento del rettangolo grande in bianco e usa R=47, G=48, B=55 per uno pi\u00f9 corto.\n<\/p>\n
\n 86 Selezionare il primo rettangolo e provare a posizionarlo nell'area del pi\u00e8 di pagina. Non ci andr\u00e0. Invece, la guida in fondo alla pagina inizier\u00e0 ad espandersi verso il basso. Per rendere questo rettangolo un elemento a pi\u00e8 di pagina, seleziona la casella di controllo “Pi\u00e8 di pagina” situata nell'area in alto a destra della finestra dell'applicazione. Fallo anche per il secondo rettangolo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Ora posiziona questi rettangoli nell'area del pi\u00e8 di pagina e assicurati che il rettangolo grande sia leggermente sopra la guida del pi\u00e8 di pagina. La parte inferiore del rettangolo colorato deve combaciare con la parte inferiore della guida del browser. Altrimenti vedrai un piccolo spazio bianco dopo il pi\u00e8 di pagina che non ha un bell'aspetto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Crea caselle di testo per il pi\u00e8 di pagina e digita quello che vuoi. Basta selezionare la casella di controllo “pi\u00e8 di pagina” per le caselle di testo che aggiungerai. Ho aggiunto del testo contenente Disclaimer e informazioni sul copyright.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 Il badge “Made with Adobe Muse CC” pu\u00f2 essere aggiunto dalla libreria dei widget nella sezione social. Puoi anche aggiungere collegamenti alla tua pagina Facebook, Twitter, Google+, LinkedIn, Pinterest, canale YouTube o collegamento Vimeo.\n<\/p>\n
\n 90 Il simbolo del copyright e molti altri simboli visualizzati accanto al testo Tutti i diritti riservati possono essere aggiunti dal pannello “Glifi” situato sul lato destro della finestra dell'applicazione. Se non \u00e8 presente, vai al menu Finestra> scegli Glifi.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Creazione della sezione ‘Newsletter'
\n<\/h3>\n\n 91 Fino ad ora, abbiamo progettato sezioni per tutte le voci di menu tranne una, ‘Newsletter'. Facciamo qualcosa di interessante con esso. Ricorda il simbolo della croce che abbiamo scaricato, verr\u00e0 utilizzato qui (va bene se non l'hai scaricato, puoi comunque seguirlo). Innanzitutto, seleziona la casella di testo Newsletter e annota la sua larghezza e altezza dal pannello di trasformazione. Il mio \u00e8 81 x 17.\n<\/p>\n
\n 92 Ora, apri la libreria dei widget e trascina ‘Visualizzazione lightbox' dalla sezione delle composizioni. Elimina i primi due trigger (situati in alto) ed elimina tutti i sottotitoli (situati in basso). Rendere la dimensione del terzo trigger uguale alla casella di testo Newsletter che \u00e8 81 x 17. Modificarne il riempimento e il tratto su nessuno per tutti gli stati.\n<\/p>\n
\n 93 Trascina la casella di testo della newsletter e posizionala all'interno di questo trigger in modo tale che tutti i bordi della casella di testo coincidano con i bordi del trigger. Ora trascina questo gruppo e inseriscilo nuovamente nel menu in cui era stato posizionato in precedenza. Quello che abbiamo fatto \u00e8 che abbiamo applicato un link alla casella di testo Newsletter. Quando l'utente far\u00e0 clic su di esso, il sito Web svanir\u00e0 e verr\u00e0 visualizzato il target.\n<\/p>\n
\n 94 Il prossimo passo \u00e8 personalizzare il nostro target. Seleziona l'area grigia e assicurati che l'area di selezione corrente indichi “Target”. Dovrai fare clic tre volte per selezionarlo. Cambia il riempimento e il tratto su nessuno per tutti i suoi stati.\n<\/p>\n
\n 95 Aggiungi due caselle di testo e un semplice modulo di contatto (elimina i campi nome e messaggio e mantieni solo il campo email). Trascinali all'interno di questa composizione e assicurati che abbiano tutti un cerchio blu agli angoli.\n<\/p>\n
\n 96 Personalizza il form come abbiamo fatto nella sezione contattaci. Dovresti avere il seguente risultato. Per il campo di testo “Resta in contatto”, utilizza il carattere: Lobster, dimensione=40, colore:bianco, allineato al centro e 100% in primo piano. Per il testo descrittivo sotto di esso, usa il carattere: Ubuntu Light Italic, dimensione=14, colore: bianco, allineato al centro e 120% in avanti. Cambia il testo del pulsante di invio in “Iscriviti”.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Ora seleziona il pulsante di chiusura, spostalo e posizionalo nell'angolo in alto a destra di questo display lightbox come mostrato di seguito. Fare clic al suo interno finch\u00e9 non viene visualizzata la scritta “Etichetta” nell'area di selezione corrente. Elimina l'etichetta.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Modificare il riempimento e il tratto di questo pulsante di chiusura in nessuno per tutti gli stati e impostarne L=40 e A=40. Vai a Riempi> aggiungi immagine e cerca l'immagine incrociata. Scegli “ridimensiona per adattare” sotto l'opzione di adattamento.\n<\/p>\n
\n 99 Fai clic su Newsletter e vedrai un cerchio blu all'angolo. Fare clic e assicurarsi che le opzioni siano impostate come segue.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Risultato finale della sezione ‘Newsletter'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Creazione di collegamenti ipertestuali
\n<\/h3>\n\n 100 L'ultimo compito rimasto \u00e8 quello di applicare i collegamenti a ciascuna sezione. Per fare questo, scegli l'opzione ‘link anchor' che si trova nella zona centrale in alto o premi la lettera ‘a' sulla tua tastiera. Vedrai che il cursore cambia il suo aspetto in una pistola posizionata caricata con un'ancora di collegamento.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Quando fai clic sull'area di lavoro per posizionarlo, verr\u00e0 visualizzata una finestra di dialogo che ti consente di rinominare un'ancora.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Crea ancore di collegamento per ogni sezione che abbiamo progettato, ovvero Home, Servizi, Perch\u00e9 noi, Testimonianze e Contattaci. Posiziona le ancore in cima a ogni sezione. L'ancora domestica \u00e8 mostrata di seguito come esempio. Posizionare queste ancore \u00e8 un passo importante e dovrebbe essere fatto con attenzione. Quando l'utente far\u00e0 clic su un particolare collegamento, il sito Web scorrer\u00e0 fino alla posizione in cui \u00e8 stato posizionato l'ancora.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Ora applicheremo i collegamenti. Per fare ci\u00f2, seleziona la casella di testo “Home”. Vai all'opzione “Collegamenti ipertestuali” (che si trova in alto), fai clic sulla piccola freccia gi\u00f9 per espandere l'elenco. Qui puoi vedere tutti gli ancoraggi che abbiamo appena posizionato. Collegalo all'ancora ‘Home'. Ripeti questo passaggio per altre caselle di testo eccetto Newsletter poich\u00e9 abbiamo applicato una visualizzazione lightbox ad essa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Risultato finale dopo la creazione di collegamenti ipertestuali
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Tocchi finali: modifica delle propriet\u00e0 della pagina e aggiunta di Favicon
\n<\/h3>\n\n 104 All'interno della modalit\u00e0 Plan, fare clic con il pulsante destro del mouse sulla home page e selezionare ‘Propriet\u00e0 pagina. Apparir\u00e0 una finestra di dialogo. Scegli la scheda “Opzioni” e sotto il nome della pagina, metti – “Benvenuto in example.com” e fai clic su OK. Questo \u00e8 il testo che apparir\u00e0 nella parte superiore della finestra del browser.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 Passare a File > Propriet\u00e0 sito. Nella scheda Layout, l'ultima opzione \u00e8 “Favicon”. Quando ci passi sopra con il mouse, apparir\u00e0 un pop-up che descrive cos'\u00e8 una favicon e quale dovrebbe essere la dimensione ottimale. \u00c8 utile aggiungere una favicon in quanto aiuta a far risaltare il tuo marchio e serve anche allo scopo di aiutare gli utenti a identificare facilmente il tuo sito se lo hanno aggiunto ai segnalibri.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Test ed esportazione
\n<\/h3>\n\n 106 Prova il tuo sito andando su File > Anteprima sito nel browser o Ctrl+Alt+E. Questa volta non scegliere “Anteprima pagina nel browser” poich\u00e9 i collegamenti non funzionano nell'anteprima della pagina. Potresti provare a posizionare gli ancoraggi in punti diversi per assicurarti che quando l'utente far\u00e0 clic su un collegamento, il sito scorrer\u00e0 fino alla sezione giusta e alla posizione giusta.\n<\/p>\n
\n 107 Infine, vai su File > Esporta come HTML (Ctrl+E). Sotto l'URL del sito, inserisci un nome come “example.com” e scegli la posizione. Fare clic su OK. Il sito web \u00e8 pronto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Risultato finale di ogni pagina
\n<\/h3>\n\n Prima pagina
\n<\/h5>\n<\/a><\/p>\n\n Sezione “Servizi”.
\n<\/h5>\n<\/a><\/p>\n\n Sezione “Perch\u00e9 noi”.
\n<\/h5>\n<\/a><\/p>\n\n Sezione ‘Testimonianze'
\n<\/h5>\n<\/a><\/p>\n\n Sezione “Contattaci”.
\n<\/h5>\n<\/a><\/p>\n\n Sezione pi\u00e8 di pagina
\n<\/h5>\n - \n Per lo stato di rollover:<\/strong> basta cambiare il colore del testo in R=196 G=196 B=196 e niente corsivo.\n <\/li>\n
- \n Per la designazione:<\/strong> Carattere: Nobile, dimensione=15, Colore: R=37 G=37 B=37, allineato al centro e 100% iniziale.\n <\/li>\n
- \n Per le intestazioni:<\/strong> Font=Raleway Bold, Dimensione=18, Colore:Bianco, Allineato al centro e 100% iniziale.\n <\/li>\n
- \n Per i paragrafi:<\/strong> carattere: Questrial, dimensione=15, colore: R=67 G=67 B=67, allineato a sinistra e 120% in avanti.\n <\/li>\n<\/ul>\n
- \n Per le intestazioni:<\/strong> Font: Raleway Bold, Dimensione=20, Colore: Nero, Allineato a sinistra e 100% iniziale.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n