Cómo crear un marcador de juego con el paquete de diseño del club de fútbol de Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo crear un marcador de juego genial con el paquete de diseño del club de fútbol de Divi. Crearemos este último marcador del juego usando solo las opciones integradas de Divi, ¡así que vamos a hacerlo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado final en diferentes tamaños de pantalla.

Cargue el paquete de diseño del paquete de diseño del club de fútbol

Para crear este tutorial, usaremos la página de inicio del paquete de diseño del club de fútbol, ​​así que continúe y agregue una nueva página usando este diseño.

Agregar nueva sección

Luego, agregue una nueva sección aquí mismo:

Color de fondo

Abra la configuración de la sección y agregue un color de fondo a continuación.

• Color de fondo: # f4f4f4

Espaciado

Juega también con los valores de espaciado.

• Acolchado superior: 55px
• Acolchado inferior: 140px

Clonar fila y colocar en sección

Localizar fila y crear clon

Para ahorrar tiempo, vamos a clonar la fila del título en la siguiente sección.

Colocar en nueva sección

Cambiar texto

Cambie la copia del Módulo de texto en la fila para que coincida con la nueva sección.

Agregar fila n. ° 2

Estructura de la columna

Justo debajo de la fila anterior, continúe y agregue una nueva fila utilizando la siguiente estructura de columnas:

Color de fondo

Abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: #ffffff

Color de fondo de la columna 1

Agrega también un color de fondo a la columna 1.

• Color de fondo de la columna 1: #fcfcfc

Color de fondo de la columna 3

Repita el mismo paso para la columna 3.

• Color de fondo de la columna 3: #fcfcfc

Dimensionamiento

Cambie también la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar altura de columna: Sí

Espaciado

A continuación, elimine todo el relleno predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Para que coincida con el paquete de diseño, agregue un borde superior e inferior a la fila.

• Ancho del borde inferior: 8px
• Color del borde inferior: # 00aaff

Sombra de la caja

Por último, agregue una sombra de cuadro sutil para crear profundidad en la página.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -20px
• Color de sombra: rgba (0,0,0,0.56)

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Comience con un módulo de texto en la columna 1 y agregue algo de contenido.

Color de fondo

A continuación, cambie el color de fondo.

• Color de fondo: # E8E8E8

Configuración de texto

Continúe jugando con la configuración del texto.

• Fuente de texto: Squada One
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 333333
• Tamaño del texto: 20px
• Orientación del texto: centro

Espaciado

Luego, agregue algunos valores de espaciado personalizados.

• Acolchado superior: 10px
• Acolchado inferior: 10px
• Relleno izquierdo: 10px
• Relleno derecho: 10px

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar contenido

Agregue un nuevo módulo de texto justo debajo del módulo de texto anterior en la columna 1. Una vez que lo haga, agregue contenido al cuadro de contenido.

Configuración de texto

A continuación, cambie la configuración de texto.

• Fuente de texto: Open Sans
• Peso de la fuente del texto: negrita
• Color del texto: # 333333
• Tamaño del texto: 18px
• Orientación del texto: centro

Espaciado

Juega también con los valores de espaciado.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Agregar módulo de imagen a la columna 1

Subir el logotipo del club

El último módulo necesario en la columna 1 es un módulo de imagen que contiene el logotipo del club de uno de los equipos que compiten.

Dimensionamiento

Una vez que haya subido la imagen del logotipo del club, vaya a la configuración de tamaño y realice algunos cambios.

• Ancho: 45% (escritorio), 16% (tableta), 28% (teléfono)
• Alineación del módulo: centro

Espaciado

Continúe agregando valores de margen personalizados en la configuración de espaciado.

• Margen superior: 20px
• Margen inferior: 50 px

Clonar módulos y colocar duplicados en la columna 3

Una vez que haya terminado con los tres módulos en la columna 1, puede clonarlos y colocar los duplicados en la tercera columna.

Cambiar contenido

Por supuesto, deberá cambiar el contenido de cada módulo clonado.

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido

En la segunda columna, colocaremos la fecha y la puntuación final. Comience agregando un módulo de texto con una fecha.

Color de fondo

Agregue un color de fondo que coincida con el paquete de diseño a continuación.

• Color de fondo: # 00aaff

Configuración de texto

Cambie también la configuración del texto.

• Fuente de texto: Squada One
• Estilo de fuente de texto: mayúsculas
• Color del texto: #FFFFFF
• Tamaño del texto: 42px
• Orientación del texto: centro

Espaciado

Luego, vaya a la configuración de espaciado y dé al módulo un poco más de relleno.

• Acolchado superior: 30px
• Acolchado inferior: 30px

Visibilidad

Por último, desactive el módulo en el teléfono y la tableta.

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

El segundo módulo de texto en la columna 2 debe contener la puntuación del juego.

Configuración de texto

Después de agregar el contenido, cambie la configuración del texto.

• Fuente de texto: Squada One
• Color del texto: # 333333
• Tamaño del texto: 150px
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

Continúe modificando los valores de espaciado.

• Margen superior: 40 px (escritorio), 20 px (tableta y teléfono)
• Margen inferior: 20px (tableta y teléfono)
• Relleno izquierdo: 10px
• Relleno derecho: 10px

Visibilidad

Oculte este módulo en el teléfono y la tableta también. En la siguiente parte, crearemos la alternativa para tamaños de pantalla más pequeños.

Clonar ambos módulos y colocarlos en la columna 1

Clona ambos módulos que puedes encontrar en la columna 2 y coloca los duplicados en la primera columna encima de los otros módulos.

Cambiar la visibilidad

Estamos usando estos dos módulos para tener un mejor resultado en la tableta y el teléfono. Para asegurarse de que estos módulos se muestren solo en tamaños de pantalla más pequeños, desactívelos en el escritorio.

Agregar fila n. ° 3

Estructura de la columna

En la siguiente fila, mostraremos los diferentes objetivos en el escritorio. Utilice la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: #FFFFFF

Color de fondo de la columna 2

Cambie también el color de fondo de la columna 2.

• Color de fondo de la columna 2: # f7f7f7

Dimensionamiento

Elimine todo el espacio entre columnas en la configuración de tamaño a continuación.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 0
• Ecualizar altura de columna: Sí

Espaciado

Agregue también valores de espaciado personalizados.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno inferior de la columna 1: 100 px
• Columna 1 Relleno derecho: 10px
• Columna 3 Relleno izquierdo: 10px

Frontera

Luego, agregue un borde inferior sutil a la fila.

• Ancho del borde inferior: 8px
• Color del borde inferior: # 00aaff

Sombra de la caja

Para crear profundidad en la página, agregue una sombra de cuadro de fila.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -20px
• Color de sombra: rgba (0,0,0,0.56)

Visibilidad

Como se mencionó anteriormente, estamos usando esta fila para mostrar objetivos solo en el escritorio, así que continúe y desactive la fila en el teléfono y la tableta. Más adelante en la publicación, crearemos una alternativa de tableta y teléfono.

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

Agregue un nuevo módulo de texto a la primera columna que contiene los detalles del primer objetivo.

Configuración de texto

A continuación, cambie la configuración de texto.

• Fuente de texto: Squada One
• Estilo de fuente de texto: mayúsculas
• Color del texto: # 333333
• Tamaño del texto: 27px
• Orientación del texto: Derecha

Espaciado

Juega también con los valores de espaciado.

• Margen superior: 100 px
• Acolchado inferior: 20px

Frontera

Continúe agregando un borde inferior sutil.

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 333333

Clonar el módulo de texto dos veces

Cambiar el espaciado de los duplicados

Clone el módulo de texto que acaba de crear dos veces y cambie los valores de espaciado de ambos duplicados.

• Margen superior: 200 px
• Acolchado inferior: 20px

Clonar el módulo de texto n. ° 1 y colocar el duplicado en la columna 3

Cambiar la configuración de texto

Clone el primer módulo de texto en la columna 1 una vez más y coloque el duplicado en la columna 3. Continúe cambiando la orientación del texto.

• Orientación del texto: izquierda

Cambiar espaciado

También es necesario aumentar el margen superior.

• Margen superior: 200 px

Módulo de clonación de texto en la columna 3

Ahora puede clonar este módulo de texto una vez más.

Agregar fila n. ° 4

Estructura de la columna

¡Es hora de agregar la última fila! Elija la siguiente estructura de columnas:

Color de fondo

Cambia el color de fondo de la fila.

• Color de fondo: #FFFFFF

Dimensionamiento

A continuación, elimine todo el espacio entre las columnas.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Agregue un poco de acolchado superior e inferior adicional.

• Relleno superior: 100 px
• Acolchado inferior: 100px

Frontera

También necesitaremos un borde inferior sutil para esta fila.

• Ancho del borde inferior: 8px
• Color del borde inferior: # 00aaff

Sombra de la caja

A continuación, agregue una sombra de cuadro a la fila.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -20px
• Color de sombra: rgba (0,0,0,0.56)

Visibilidad

Por último, oculte la fila en el escritorio.

Agregar módulo de texto n. ° 1

Agregar contenido

Agregue un nuevo módulo de texto a la columna de la fila y agregue los detalles del objetivo.

Configuración de texto

A continuación, cambie la configuración de texto.

• Fuente de texto: Squada One
• Estilo de fuente de texto: mayúsculas
• Tamaño del texto: 27px
• Orientación del texto: Derecha

Espaciado

Utilice valores de espaciado personalizados a continuación.

• Margen derecho: 150px
• Acolchado inferior: 20px

Frontera

También estamos agregando un borde inferior sutil.

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 333333

Módulo de clonación de texto

Cambiar la configuración de texto

Clone el módulo de texto que creó y cambie la orientación del texto del duplicado.

• Orientación del texto: izquierda

Espaciado

Modifique también los valores de espaciado.

• Margen superior: 200 px
• Margen izquierdo: 150px

Clone ambos módulos de texto tantas veces como sea necesario

Ahora puede clonar estos módulos tantas veces como desee para mostrar todos los objetivos diferentes.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo crear un marcador de juego usando el paquete de diseño del club de fútbol de Divi. Esta es una excelente manera de agregar más incentivos a su sitio web y conectarse con su audiencia. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!