Come creare un tabellone segnapunti di gioco con Divi's Soccer Club Layout Pack

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo. Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come creare un fantastico tabellone segnapunti di gioco utilizzando il pacchetto di layout del club di calcio di Divi. Creeremo questo ultimo tabellone segnapunti di gioco utilizzando solo le opzioni integrate di Divi, quindi andiamoci!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato finale su schermi di diverse dimensioni.

Carica il pacchetto layout del pacchetto di layout della squadra di calcio

Per creare questo tutorial, utilizzeremo la pagina di destinazione del Pacchetto layout Soccer Club, quindi vai avanti e aggiungi una nuova pagina utilizzando questo layout.

Aggiungi nuova sezione

Quindi, aggiungi una nuova sezione proprio qui:

Colore di sfondo

Apri le impostazioni della sezione e aggiungi successivamente un colore di sfondo.

• Colore di sfondo: #f4f4f4

Spaziatura

Gioca anche con i valori di spaziatura.

• Imbottitura superiore: 55px
• Imbottitura inferiore: 140 px

Clona riga e posiziona nella sezione

Trova riga e crea clone

Per risparmiare tempo, cloneremo la riga del titolo nella sezione successiva.

Posto in una nuova sezione

Cambia testo

Modifica la copia del modulo di testo nella riga in modo che corrisponda alla nuova sezione.

Aggiungi riga #2

Struttura della colonna

Proprio sotto la riga precedente, vai avanti e aggiungi una nuova riga usando la seguente struttura di colonne:

Colore di sfondo

Apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Colore di sfondo della colonna 1

Aggiungi anche un colore di sfondo della colonna 1.

• Colore di sfondo della colonna 1: #fcfcfc

Colore di sfondo della colonna 3

Ripetere lo stesso passaggio per la colonna 3.

• Colore di sfondo della colonna 3: #fcfcfc

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza l'altezza della colonna: Sì

Spaziatura

Successivamente, rimuovi tutto il riempimento predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Frontiera

Per abbinare il pacchetto di layout, aggiungi un bordo superiore e inferiore alla riga.

• Larghezza bordo inferiore: 8px
• Colore bordo inferiore: #00aaff

Scatola ombra

Infine, aggiungi un'ombra sottile per creare profondità sulla pagina.

• Posizione verticale dell'ombra del riquadro: 20 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -20px
• Colore ombra: rgba(0,0,0,0.56)

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Inizia con un modulo di testo nella colonna 1 e aggiungi del contenuto.

Colore di sfondo

Cambia il colore di sfondo successivo.

• Colore di sfondo: # E8E8E8

Impostazioni testo

Continua giocando con le impostazioni del testo.

• Carattere del testo: Squada One
• Stile del carattere del testo: maiuscolo
• Colore del testo: #333333
• Dimensione del testo: 20px
• Orientamento del testo: al centro

Spaziatura

Quindi, aggiungi alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 10px
• Imbottitura destra: 10px

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Aggiungi un nuovo modulo di testo proprio sotto il precedente modulo di testo nella colonna 1. Una volta fatto, aggiungi il contenuto alla casella del contenuto.

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Carattere del testo: Open Sans
• Peso del carattere del testo: grassetto
• Colore del testo: #333333
• Dimensione del testo: 18px
• Orientamento del testo: al centro

Spaziatura

Gioca anche con i valori di spaziatura.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Aggiungi modulo immagine alla colonna 1

Carica il logo del club

L'ultimo modulo necessario nella colonna 1 è un modulo immagine contenente il logo del club di una delle squadre in gara.

Dimensionamento

Dopo aver caricato l'immagine del logo del club, vai alle impostazioni di dimensionamento e apporta alcune modifiche.

• Larghezza: 45% (Desktop), 16% (Tablet), 28% (Telefono)
• Allineamento del modulo: Centro

Spaziatura

Continua aggiungendo valori di margine personalizzati nelle impostazioni di spaziatura.

• Margine superiore: 20px
• Margine inferiore: 50 px

Clona moduli e posiziona duplicati nella colonna 3

Una volta che hai finito con tutti e tre i moduli nella colonna 1, puoi clonarli e posizionare i duplicati nella terza colonna.

Modifica contenuto

Ovviamente, dovrai modificare il contenuto di ogni modulo clonato.

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto

Nella seconda colonna, posizioneremo la data e il punteggio finale. Inizia aggiungendo un modulo di testo con una data.

Colore di sfondo

Aggiungi un colore di sfondo che corrisponda al pacchetto di layout successivo.

• Colore di sfondo: #00aaff

Impostazioni testo

Modifica anche le impostazioni del testo.

• Carattere del testo: Squada One
• Stile del carattere del testo: maiuscolo
• Colore del testo: #FFFFFF
• Dimensione del testo: 42px
• Orientamento del testo: al centro

Spaziatura

Quindi, vai alle impostazioni di spaziatura e dai al modulo un po' più di imbottitura.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px

Visibilità

Infine, disabilita il modulo su telefono e tablet.

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Il secondo modulo di testo nella colonna 2 deve contenere il punteggio del gioco.

Impostazioni testo

Dopo aver aggiunto il contenuto, modificare le impostazioni del testo.

• Carattere del testo: Squada One
• Colore del testo: #333333
• Dimensione del testo: 150 px
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Spaziatura

Continua modificando i valori di spaziatura.

• Margine superiore: 40 px (desktop), 20 px (tablet e telefono)
• Margine inferiore: 20 px (tablet e telefono)
• Imbottitura sinistra: 10px
• Imbottitura destra: 10px

Visibilità

Nascondi questo modulo anche su telefono e tablet. Nella parte successiva, creeremo l'alternativa per schermi di dimensioni più piccole.

Clona entrambi i moduli e posizionali nella colonna 1

Clona entrambi i moduli che puoi trovare nella colonna 2 e posiziona i duplicati nella prima colonna sopra gli altri moduli.

Modifica visibilità

Stiamo utilizzando entrambi questi moduli per avere un risultato migliore su tablet e telefono. Per assicurarti che questi moduli vengano visualizzati solo su schermi di dimensioni più piccole, disabilitali sul desktop.

Aggiungi riga #3

Struttura della colonna

Nella riga successiva, visualizzeremo i diversi obiettivi sul desktop. Utilizzare la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #FFFFFF

Colore di sfondo della colonna 2

Cambia anche il colore di sfondo della colonna 2.

• Colore di sfondo della colonna 2: #f7f7f7

Dimensionamento

Rimuovi tutto lo spazio tra le colonne nelle impostazioni di dimensionamento successive.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 0
• Equalizza l'altezza della colonna: Sì

Spaziatura

Aggiungi anche valori di spaziatura personalizzati.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura inferiore colonna 1: 100 px
• Imbottitura destra colonna 1: 10px
• Colonna 3 Imbottitura sinistra: 10px

Frontiera

Quindi, aggiungi un sottile bordo inferiore alla riga.

• Larghezza bordo inferiore: 8px
• Colore bordo inferiore: #00aaff

Scatola ombra

Per creare profondità alla pagina, aggiungi un'ombra della casella di riga.

• Posizione verticale dell'ombra del riquadro: 20 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -20px
• Colore ombra: rgba(0,0,0,0.56)

Visibilità

Come accennato in precedenza, stiamo utilizzando questa riga per visualizzare gli obiettivi solo sul desktop, quindi vai avanti e disabilita la riga su telefono e tablet. Più avanti nel post, creeremo un'alternativa per tablet e telefono.

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

Aggiungi un nuovo modulo di testo alla prima colonna contenente i dettagli del primo obiettivo.

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Carattere del testo: Squada One
• Stile del carattere del testo: maiuscolo
• Colore del testo: #333333
• Dimensione del testo: 27px
• Orientamento del testo: a destra

Spaziatura

Gioca anche con i valori di spaziatura.

• Margine superiore: 100 px
• Imbottitura inferiore: 20px

Frontiera

Continua aggiungendo un sottile bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #333333

Clona modulo di testo due volte

Modifica la spaziatura dei duplicati

Clona il modulo di testo che hai appena creato due volte e modifica i valori di spaziatura di entrambi i duplicati.

• Margine superiore: 200 px
• Imbottitura inferiore: 20px

Clona il modulo di testo n. 1 e posiziona il duplicato nella colonna 3

Modifica le impostazioni del testo

Clona ancora una volta il primo modulo di testo nella colonna 1 e posiziona il duplicato nella colonna 3. Procedi modificando l'orientamento del testo.

• Orientamento del testo: a sinistra

Cambia spaziatura

Anche il margine superiore deve essere aumentato.

• Margine superiore: 200 px

Clona modulo testo nella colonna 3

Ora puoi clonare di nuovo questo modulo di testo.

Aggiungi riga #4

Struttura della colonna

È ora di aggiungere l'ultima riga! Scegli la seguente struttura di colonne:

Colore di sfondo

Cambia il colore di sfondo della riga.

• Colore di sfondo: #FFFFFF

Dimensionamento

Rimuovi poi tutto lo spazio tra le colonne.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Aggiungi un po' di imbottitura extra in alto e in basso.

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

Frontiera

Avremo bisogno di un sottile bordo inferiore anche per questa riga.

• Larghezza bordo inferiore: 8px
• Colore bordo inferiore: #00aaff

Scatola ombra

Quindi, aggiungi un'ombra di casella alla riga.

• Posizione verticale dell'ombra del riquadro: 20 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -20px
• Colore ombra: rgba(0,0,0,0.56)

Visibilità

Infine, nascondi la riga sul desktop.

Aggiungi testo Modulo n. 1

Aggiungi contenuto

Aggiungi un nuovo modulo di testo alla colonna della riga e aggiungi i dettagli dell'obiettivo.

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Carattere del testo: Squada One
• Stile del carattere del testo: maiuscolo
• Dimensione del testo: 27px
• Orientamento del testo: a destra

Spaziatura

Utilizza successivamente i valori di spaziatura personalizzati.

• Margine destro: 150 px
• Imbottitura inferiore: 20px

Frontiera

Stiamo aggiungendo anche un sottile bordo inferiore.

• Larghezza bordo inferiore: 1px
• Colore bordo inferiore: #333333

Clona modulo testo

Modifica le impostazioni del testo

Clona il modulo di testo che hai creato e modifica l'orientamento del testo del duplicato.

• Orientamento del testo: a sinistra

Spaziatura

Modifica anche i valori di spaziatura.

• Margine superiore: 200 px
• Margine sinistro: 150 px

Clona entrambi i moduli di testo tutte le volte necessarie

Ora puoi clonare questi moduli tutte le volte che vuoi per mostrare tutti i diversi obiettivi.

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come creare un tabellone segnapunti di gioco utilizzando il pacchetto di layout del club di calcio di Divi. Questo è un ottimo modo per aggiungere ulteriori incentivi al tuo sito web e connetterti con il tuo pubblico. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!