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 Divi en curso, le mostraremos cómo crear un marcador de juego genial usando el paquete de diseño de club de fútbol de Divi . Crearemos este último marcador de juego usando Divi y sus opciones integradas solamente, ¡así que vamos a hacerlo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado final en diferentes tamaños de pantalla.
Sube el paquete de diseño del paquete de diseño del club de fútbol
Para crear este tutorial, usaremos la página de destino del Paquete de diseño de club de fútbol, así que continúe y agregue una nueva página usando este diseño.
Agregar nueva sección
Luego, agrega una nueva sección aquí:
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 con los valores de espaciado también.
- Relleno superior: 55px
- Relleno 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.
Añadir Fila #2
Estructura de la columna
Justo debajo de la fila anterior, continúe y agregue una nueva fila usando 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
Agregue también un color de fondo de 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 la configuración de tamaño también.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar la altura de la columna: Sí
Espaciado
Elimine todo el relleno predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
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 cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -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
Cambia el color de fondo a continuación.
- Color de fondo: #E8E8E8
Configuración de texto
Continúe jugando con la configuración de texto.
- Fuente del 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.
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 10px
- Relleno derecho: 10px
Agregue el Módulo de Texto #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 haya hecho, agregue contenido al cuadro de contenido.
Configuración de texto
Cambie la configuración de texto a continuación.
- Fuente de texto: Open Sans
- Peso de fuente de texto: Negrita
- Color del texto: #333333
- Tamaño del texto: 18px
- Orientación del texto: Centro
Espaciado
Juega con los valores de espaciado también.
- Relleno superior: 20px
- Relleno inferior: 20px
Agregar módulo de imagen a la columna 1
Subir 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 cargado 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: 50px
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 #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 la configuración de texto también.
- Fuente del 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 dele al módulo un poco más de relleno.
- Relleno superior: 30px
- Relleno inferior: 30px
Visibilidad
Por último, deshabilite el módulo en el teléfono y la tableta.
Agregue el Módulo de Texto #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 del texto: Squada One
- Color del texto: #333333
- Tamaño del texto: 150px
- Altura de 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 también en el teléfono y la tableta. En la siguiente parte, vamos a crear la alternativa para tamaños de pantalla más pequeños.
Clonar ambos módulos y colocar en la columna 1
Clone ambos módulos que puede encontrar en la columna 2 y coloque los duplicados en la primera columna sobre los otros módulos.
Cambiar visibilidad
Estamos usando estos dos módulos para tener un mejor resultado en tabletas y teléfonos. Para asegurarse de que estos módulos se muestren solo en tamaños de pantalla más pequeños, desactívelos en el escritorio.
Añadir Fila #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 siguiente configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 0
- Igualar la altura de la columna: Sí
Espaciado
Agregue también valores de espaciado personalizados.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno inferior de la columna 1: 100px
- Columna 1 Relleno derecho: 10px
- Columna 3 Relleno izquierdo: 10px
Borde
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 cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -20px
- Color de sombra: rgba (0,0,0,0.56)
Visibilidad
Como se mencionó anteriormente, estamos usando esta fila para mostrar los objetivos solo en el escritorio, así que continúe y deshabilite la fila en el teléfono y la tableta. Más adelante en la publicación, crearemos una alternativa para 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
Cambie la configuración de texto a continuación.
- Fuente del 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 con los valores de espaciado también.
- Margen superior: 100px
- Relleno inferior: 20px
Borde
Continúe agregando un borde inferior sutil.
- Ancho del borde inferior: 1px
- Color del borde inferior: #333333
Clonar 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: 200px
- Relleno inferior: 20px
Clonar módulo de texto n.º 1 y colocar duplicado en la columna 3
Cambiar la configuración de texto
Clona el primer módulo de texto en la columna 1 una vez más y coloca el duplicado en la columna 3. Continúa cambiando la orientación del texto.
- Orientación del texto: Izquierda
Cambiar espaciado
El margen superior también debe aumentarse.
- Margen superior: 200px
Clonar módulo de texto en la columna 3
Ahora puede clonar este módulo de texto una vez más.
Añadir Fila #4
Estructura de la columna
¡Es hora de agregar la última fila! Elija la siguiente estructura de columna:
Color de fondo
Cambia el color de fondo de la fila.
- Color de fondo: #FFFFFF
Dimensionamiento
Elimine todo el espacio entre las columnas a continuación.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Agregue un poco de relleno adicional en la parte superior e inferior.
- Relleno superior: 100px
- Relleno inferior: 100px
Borde
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 cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -20px
- Color de sombra: rgba (0,0,0,0.56)
Visibilidad
Por último, oculta la fila en el escritorio.
Añadir Módulo de Texto #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
Cambie la configuración de texto a continuación.
- Fuente del texto: Squada One
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 27px
- Orientación del texto: Derecha
Espaciado
Use valores de espaciado personalizados a continuación.
- Margen derecho: 150px
- Relleno inferior: 20px
Borde
También estamos agregando un borde inferior sutil.
- Ancho del borde inferior: 1px
- Color del borde inferior: #333333
Módulo de texto clonado
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: 200px
- 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 de 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!