Il template Shopik è un esempio di sito TOWeb 13 in cui un'immagine sembra essere stata tagliata in 3 pezzi, mentre in realtà si tratta di un'unica immagine riutilizzata 3 volte. Come aggiungere questo tipo di effetto al tuo sito web senza dover necessariamente usare quel template? È ciò che ti spiegheremo in questo tutorial, per permetterti di ottenere lo stesso risultato con le tue immagini in qualsiasi pagina del tuo sito.

  • 1° caso: se il tuo sito è stato costruito a partire dal template Shopik e desideri solo sostituire l'immagine della home page con la tua, ti basta selezionare uno dopo l'altro ciascuno dei 3 paragrafi della home page per aggiungervi ogni volta lo stesso file della tua immagine di sfondo con il pulsante "Cambia immagine". Ed è tutto!
    Attenzione: è importante che venga aggiunta ogni volta esattamente la stessa foto, senza alcun ritocco, ritaglio o minima modifica da parte tua.
Impostazioni del paragrafo in TOWeb per l’effetto immagine ritagliata: sfondo immagine, altezza piena ed effetto parallasse
  • 2° caso: se il tuo sito non è stato costruito a partire dal template Shopik e/o desideri che la tua immagine non sia divisa in 3 ma, ad esempio, in 2 o 4 parti ed eventualmente anche su un'altra pagina, ecco come procedere:
  1. Inizia aggiungendo un paragrafo con pochissimo contenuto, ad esempio senza titolo ma solo qualche parola e/o un link inserito in un pulsante
  2. Una volta creato questo paragrafo, applicagli una larghezza di 4 su 12, cioè 1/3 della larghezza della pagina ciascuno se desideri una divisione in 3 parti come in Shopik (oppure regola la larghezza su 3 su 12, cioè 1/4 della larghezza della pagina, se desideri una divisione in 4 parti)
  3. Poi in "Sfondo" seleziona "Immagine" per aggiungere la tua foto
  4. Attiva poi le opzioni "Altezza piena" e "Effetto parallasse". Queste 2 opzioni combinate sono necessarie per ottenere l'effetto di divisione.
  5. Infine, usa il pulsante "duplica" per copiare il paragrafo tutte le volte necessarie e riempire così la larghezza della pagina.

Ecco fatto: non ti resta che sostituire il testo di ogni paragrafo con quello che preferisci (ad esempio link in pulsanti come nel template Shopik), applicando eventualmente un cambio di colore del testo e/o un effetto "Opacità" in base alla tua foto per rendere i testi ben leggibili sull'immagine di sfondo. Infine, se la divisione con spaziatura non ti soddisfa, puoi spuntare la casella "Nessun margine" per ottenere l'immagine di sfondo intera con i testi dei vari paragrafi posizionati sopra.

Perché i tuoi testi restino adatti e sempre leggibili su tutti i tipi di dispositivi (in particolare tablet e smartphone), sarà necessario limitare il contenuto dei vari paragrafi a poche parole e/o non usare una dimensione del carattere troppo grande. E se in seguito vorrai solo cambiare l'immagine di sfondo, ti basterà effettuare le sostituzioni come indicato nel 1° caso.

Osservazioni:

  • Assicurati di usare una foto con una risoluzione sufficientemente elevata perché, a seconda dei dispositivi che visitano il tuo sito web, potranno essere visualizzate solo alcune porzioni e l'immagine di sfondo potrebbe perdere nitidezza se la sua risoluzione non è sufficiente. Allo stesso modo, per evitare che l'immagine di sfondo venga troppo allargata/ingrandita, ti consigliamo di usare un sito a larghezza fissa: eviterai così che diventi sfocata sui grandi schermi con risoluzioni superiori alla larghezza della tua foto.
  • Per riutilizzare un'immagine già presente nel tuo sito puoi tenere premuto CTRL mentre fai clic sul pulsante di aggiunta immagine.