Cómo crear una plantilla de tarjeta de receta con Divi Theme Builder

Vista previa de plantilla de tarjeta de recetas

Echemos un vistazo a cómo se ve el diseño en diferentes tamaños de pantalla.

Escritorio

Tableta

Móvil

1. Descargue e instale el complemento de campos personalizados avanzados

Buscar e instalar

Encuentre el complemento ACF buscando ‘Campos personalizados avanzados’ en la barra de búsqueda del complemento, instálelo y actívelo.

Agregar nuevo grupo de campos

Haga clic en la pestaña ACF y seleccione ‘agregar nuevo’. Nombre el grupo ‘Tarjeta de recetas’. Agregue los campos personalizados uno por uno a través del botón ‘agregar campo’.

Agregar campos personalizados

Para cada campo personalizado, haga clic en el botón ‘agregar campo’. Cada uno se puede personalizar para un tipo diferente de contenido. La siguiente lista especifica la etiqueta y el tipo de cada campo. Agregue la palabra ‘receta’ al comienzo de cada etiqueta de campo para que sea fácil de encontrar al crear los módulos. El nombre del campo se autocompletará una vez que haya agregado la etiqueta.

Título de la receta

Comience con el título de la receta.

• Etiqueta de campo: Título de la receta
• Tipo de campo: Texto
• ¿Requerido?: Si
• Texto de marcador de posición: Título de la receta
• Límite de caracteres: 30

Autor de la receta

Luego, crea un campo para el autor.

• Etiqueta de campo: Autor de la receta
• Tipo de campo: Texto
• ¿Requerido?: Si
• Texto de marcador de posición: Autor

Tiempo de preparación de recetas

Siga eso con el tiempo de preparación.

• Etiqueta de campo: Tiempo de preparación de la receta
• Tipo de campo: Número
• ¿Requerido?: Si
• Texto del marcador: ##
• Anteponer: Tiempo de preparación:
• Agregar: mín.

Porciones de recetas

Luego, las raciones.

• Etiqueta de campo: Porciones de receta
• Tipo de campo: Número
• ¿Requerido?: Si
• Texto del marcador: ##
• Anteponer: Porciones:

Sugerencia de sabor de receta

Agregue un campo de sugerencia de sabor.

• Etiqueta de campo: Sugerencia de sabor de receta
• Tipo de campo: Texto
• ¿Requerido?: Si
• Anteponer: Sugerencia de sabor:
• Límite de caracteres: 40

Imagen de receta

Ahora, agregue el campo de imagen.

• Etiqueta de campo: imagen de receta
• Tipo de campo: Imagen
• ¿Requerido?: Si

Receta Ingredientes Título

Luego, el título de los ingredientes.

• Etiqueta de campo: Título de los ingredientes de la receta
• Tipo de campo: Texto
• Instrucciones: simplemente escriba lo mismo que el texto del marcador de posición.
• ¿Requerido?: Si
• Texto de marcador de posición: Ingredientes

Lista de ingredientes de la receta

Siga eso con la lista de ingredientes.

• Etiqueta de campo: lista de ingredientes de la receta
• Tipo de campo: Área de texto
• Instrucciones: agregue un espacio después de cada elemento
• ¿Requerido?: Si
• Filas: 8
• Líneas nuevas: Agregar automáticamente <br>

Título de preparación de receta

Penúltimo, el título de la preparación.

• Etiqueta de campo: Título de preparación de receta
• Tipo de campo: Texto
• Instrucciones: simplemente escriba lo mismo que el texto del marcador de posición.
• ¿Requerido?: Si
• Texto de marcador de posición: Preparación

Lista de preparación de recetas

Por último, la lista de preparación.

• Etiqueta de campo: Lista de preparación de recetas
• Tipo de campo: Área de texto
• Instrucciones: agregue un espacio después de cada elemento
• ¿Requerido?: Si
• Filas: 10
• Líneas nuevas: Agregar automáticamente <br>

Publicar grupo de campos

Publicar el grupo de campo. La ventana de su grupo de campos debería verse como la captura de pantalla a continuación.

Cómo acceder al contenido del complemento ACF para la plantilla de la tarjeta de recetas en The Divi Builder

Los campos personalizados avanzados se pueden agregar a un módulo Divi haciendo clic en el ícono de contenido dinámico. Este icono se encuentra en la esquina superior derecha del cuadro de contenido. Esto es lo que parece:

2. Cree una nueva plantilla de tarjeta de receta con Divi Builder

Pasos del generador de temas Divi

1. Crear categoría de recetas

Necesita una categoría llamada ‘recetas’ para poder asignarle la plantilla. Agréguelo en la pestaña de categoría a través del tablero.

2. Abra Divi Theme Builder y agregue una nueva plantilla

Abra el generador de temas Divi y agregue una nueva plantilla.

3. Agregar cuerpo global

Haga clic en ‘agregar cuerpo global’ y asigne la plantilla a publicaciones en categorías específicas> recetas. Luego, haga clic en el botón ‘crear plantilla’.

4. Construir cuerpo personalizado

Haga clic en ‘agregar cuerpo global’ y seleccione ‘agregar cuerpo personalizado’.

3. Vuelva a crear el diseño de la tarjeta de recetas con contenido dinámico

Agregar nueva sección

Ahora, podemos comenzar a diseñar la plantilla de la tarjeta de recetas. Cuando se abra el constructor Divi, seleccione ‘construir desde cero’. Comience agregando una nueva sección.

Fondo

En la configuración de la sección, agregue un color de fondo.

• Color de fondo: gris claro #ededed

Dimensionamiento

Además, ajuste el tamaño en la pestaña de diseño.

• Ancho: 100%
• Ancho máximo: 100%

Agregar 1ra Fila

Estructura de la columna

Agregue una nueva fila con una columna.

Dimensionamiento

Antes de agregar módulos, ajuste la configuración de tamaño de la fila.

• Ancho máximo: 90%

Configuración de columna

Fondo

Personalice la configuración de la columna dentro de la fila. Primero, agregue un color de fondo.

• Color de fondo: Blanco #ffffff

Borde

Luego, modifique los estilos de borde.

• Esquinas redondeadas: 1vw las cuatro esquinas
• Estilos de borde: los cuatro lados
• Ancho: 5px
• Color: Gris muy oscuro #333333

Agregar módulo de texto con contenido dinámico

Contenido

Una vez que haya completado la configuración de filas y columnas, es hora de agregar módulos. Comience agregando un módulo de texto. En la ventana de contenido, seleccione el contenido dinámico para el título de la receta. Una vez seleccionado, haga clic en el ícono de ajustes e ingrese los fragmentos H1.

• Cuerpo: Título de la receta
• Configuración del cuerpo:
  
  • Antes: <H1>
  • Después:</H1>

Texto de encabezado

Luego, diseñe la configuración de texto H1 en consecuencia:

• Nivel de título: H1
• Fuente: Orienta
• Peso: Negrita
• Alineación: Centro
• Color: Gris muy oscuro #3d3d3d
• Tamaño:
  
  • Escritorio: 3vw
  • tableta: 4vw
  • Teléfono: 5vw
• Espaciado entre letras: 3px
• Altura de la línea: 1,5 em

Espaciado

Modifique también los valores de espaciado.

• Margen inferior:
  
  • Escritorio: -1vw
  • Tableta: -2vw
  • Teléfono: -5vw
• Acolchado superior:
  
  • Escritorio + Tableta: 1vw
  • Teléfono: 2vw
• Acolchado inferior: 0vw
• Relleno izquierdo + derecho:
  
  • Escritorio + Tableta: 3vw
  • Teléfono: 4vw

Agregar segundo módulo de texto con contenido dinámico

Contenido

Agregue un segundo módulo de texto y seleccione el contenido dinámico para el autor de la receta.

• Cuerpo: Autor de la receta

Texto

Luego, estiliza el texto.

• Fuente: Codificar Sans
• Color: Gris muy oscuro #3d3d3d
• Tamaño:
  
  • Escritorio: 1.4vw
  • Tableta: 2.4vw
  • Teléfono: 3vw
• Alineación: Centro

Espaciado

Luego, ajuste el espaciado.

• Margen superior: 1.5vw
• Acolchado superior:
  
  • Escritorio + Tableta: 0vw
  • Teléfono: 2vw
• Acolchado inferior: 2vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw

Agregar segunda fila

Estructura de la columna

Ahora, agregue una segunda fila usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y ajuste la configuración de tamaño en consecuencia:

• Ancho del canalón: 2
• Ancho: 90%
• Ancho máximo: 100%
• Alineación de filas: Izquierda

Espaciado

Luego, el espaciado.

• Acolchado superior e inferior: 0.5vw
• Acolchado izquierdo: 10vw

Visibilidad

Por último, en la pestaña avanzada, ajusta la visibilidad.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Configuración de columna 1 + 2 + 3

Borde

Diseñe las tres columnas de la misma manera. Primero, vaya a la configuración del borde y realice algunos cambios. Repita para las tres columnas.

• Esquinas redondeadas: 1vw las cuatro esquinas
• Estilos de borde: los cuatro lados
• Ancho: 5px
• Color: Gris muy oscuro #333333

Transformar

Para darle al diseño un efecto de desplazamiento, ajuste la configuración de transformación de la siguiente manera. Repita para las tres columnas.

• Escala de transformación al pasar el mouse: 105 % x 105 %

Agregar módulo de texto a la columna 1

Contenido

Agregue un módulo de texto y deje la ventana de contenido vacía por ahora. Agregaremos eso más tarde.

Fondo

Agregue un color de fondo al módulo.

• Color de fondo: verde lima #b1e88d

Texto de encabezado

A continuación, aplique estilo a la configuración de texto H5.

• Nivel de título: H5
• Fuente H5: Orienta
• Color H5: Gris muy oscuro #3d3d3d
• Tamaño H5:
  
  • Escritorio: 1vw
  • Tableta: 2.3vw
  • Teléfono: 3.3vw
• Alineación: Centro

Espaciado

Finalmente, ajuste los valores de espaciado de la siguiente manera.

• Acolchado superior:
  
  • Escritorio: 1vw
  • Tableta: 1.5vw
  • Teléfono: 3.5vw
• Acolchado inferior:
  
  • Escritorio: 0.5vw
  • Tableta + Teléfono: 1.5vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw

Duplique el módulo de texto de la columna 1 dos veces y muévalo a las columnas 2 y 3

En la vista de estructura alámbrica, duplique el módulo de texto en la primera columna. Luego, mueva los duplicados a las columnas 2 y 3.

Agregue contenido dinámico al módulo de texto en la columna 1

Agregue el contenido dinámico para el tiempo de preparación y ajuste la configuración.

• Cuerpo: Tiempo de preparación de la receta
• Configuración del cuerpo:
  
  • Antes: <H5>Tiempo de preparación:
  • Después: min.</H5>

Agregue contenido dinámico al módulo de texto en la columna 2

Agregue el contenido dinámico para las porciones de recetas y ajuste la configuración.

• Cuerpo: Receta Porciones
• Configuración del cuerpo:
  
  • Antes: <H5>Porciones:
  • Después: </H5>

Agregue contenido dinámico al módulo de texto en la columna 3

Agregue el contenido dinámico para la sugerencia de sabor y ajuste la configuración.

• Cuerpo: Sugerencia de sabor de receta
• Configuración del cuerpo:
  
  • Antes: <H5>Consejo de sabor:
  • Después: </H5>

Añadir tercera fila

Estructura de la columna

Ahora agregue la tercera fila usando la siguiente estructura de columna:

Dimensionamiento

Antes de agregar cualquier módulo, ajuste el tamaño de la fila.

• Ancho de canalón personalizado: 2
• Ancho: 80%
• Ancho máximo: 100%

Espaciado

Además, borre el margen superior predeterminado.

• Margen superior: 0vw

Visibilidad

Finalmente, ajuste la visibilidad en la pestaña avanzada.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Configuración de columna 1 + 2 + 3

Borde

Diseñe las tres columnas de la misma manera, comenzando con la configuración del borde. Repita para las columnas 2 y 3.

• Esquinas redondeadas: 1vw las cuatro esquinas
• Estilos de borde: los cuatro lados
• Ancho: 5px
• Color: Gris muy oscuro #333333

Transformar

Continúe agregando una transformación de desplazamiento en la pestaña de diseño. Repita para las columnas 2 y 3.

• Escala de transformación al pasar el mouse: 105 % x 105 %

Agregar módulo de imagen con contenido dinámico a la columna 1

Contenido

Agregue un módulo de imagen con contenido dinámico para la imagen de la receta.

• Imagen: Imagen de receta

Agregar módulo de texto con contenido dinámico a la columna 2

Contenido

Ahora, agregue un módulo de texto con contenido dinámico para el título de los ingredientes. Haga clic en el ícono de ajustes e ingrese los fragmentos H3 de la siguiente manera.

• Cuerpo del texto: Título de los ingredientes de la receta
• Configuración del cuerpo:
  
  • Antes: <H3>
  • Después: </H3>

Texto de encabezado

Luego, aplique estilo al texto del título.

• Nivel de título: H3
• Fuente H3: Orienta
• Color H3: Gris muy oscuro #3d3d3d
• Tamaño H3:
  
  • Escritorio: 1.6vw
  • Tableta: 2vw
  • Teléfono: 5.5vw
• Alineación: Centro

Espaciado

Complete el módulo ajustando el espaciado.

• Margen inferior: 0vw
• Acolchado superior:
  
  • Escritorio: 2vw
  • Tableta: 3vw
  • Teléfono: 4vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 2vw
  • Tableta + Teléfono: 3vw

Agregue el módulo divisor a la columna 2

Línea

Agrega un módulo divisor y dale estilo de la siguiente manera.

• Color: Verde lima #b1e88d

Dimensionamiento

Luego ajuste los valores de tamaño.

• Peso: 5px
• Ancho: 40%
• Alineación: Izquierda

Espaciado

Por último, ajusta el espaciado.

• Margen superior: 0vw

Agregar módulo de texto con contenido dinámico a la columna 2

Contenido

Agregue un módulo de texto con contenido dinámico para la lista de ingredientes. Haga clic en el ícono de ajustes en la pestaña de contenido dinámico y habilite HTML sin procesar.

• Cuerpo del texto: lista de ingredientes de la receta
• Configuración del cuerpo: Habilitar HTML sin procesar

Texto

Luego, diseñe el texto de la siguiente manera.

• Fuente: Codificar Sans
• Color: Gris muy oscuro #333333
• Tamaño:
  
  • Escritorio: 0.9vw
  • Tableta: 2vw
  • Teléfono: 3vw

Espaciado

Además, ajuste el espaciado.

• Margen superior:
  
  • Escritorio: -1vw
  • Tableta: -3vw
  • Teléfono: -5vw
• Acolchado superior:
  
  • Escritorio + Tableta: 0vw
• Acolchado inferior:
  
  • Escritorio: 3vw
  • Tableta + Teléfono: 4vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 3vw
  • tableta: 4vw
  • Teléfono: 5vw

Duplique todos los módulos en la columna 2 y muévase a la columna 3

En la vista de estructura alámbrica, duplique todos los módulos en la columna dos. Mueva los módulos duplicados a la columna tres en el mismo orden.

Agregue contenido dinámico en el primer módulo de texto en la columna 3

Agregue el contenido dinámico para el título de la preparación.

• Cuerpo: Título de preparación de la receta

Agregue contenido dinámico en el segundo módulo de texto en la columna 3

Además, agregue el contenido dinámico para la lista de preparaciones al último módulo de texto de la columna.

• Cuerpo: Lista de preparación de recetas

Añadir cuarta fila

Estructura de la columna

Para completar la plantilla, necesitamos un módulo de contenido de publicación. Agregue una nueva fila usando la siguiente estructura de columna:

Dimensionamiento

Antes de agregar un módulo, ajuste el tamaño de la fila.

• Ancho de canalón personalizado: 2
• Ancho: 100%
• Ancho máximo: 80%

Espaciado

• Relleno izquierdo + derecho: 0vw

Configuración de la columna 1

Fondo

Diseñe la columna para que coincida con la tarjeta de recetas anterior. Primero, agrega un fondo.

• Color de fondo: Blanco #ffffff

Espaciado

Además, ajuste el espaciado.

• Relleno izquierdo: 0vw

Borde

Por último, pero no menos importante, modifique la configuración del borde.

• Esquinas redondeadas: 1vw las cuatro esquinas
• Estilos de borde: los cuatro lados
• Ancho: 5px
• Color: Gris muy oscuro #333333

Deje la columna 2 vacía.

Agregar módulo de contenido de publicación a la columna 1

Texto

Agregue un módulo de contenido de publicación a la columna uno y diseñe el texto para que coincida con la plantilla de la tarjeta de recetas.

• Fuente: Codificar Sans
• Color: Gris muy oscuro #333333
• Tamaño:
  
  • Escritorio: 0.9vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Altura de línea: 2em

Encabezado 1 Texto

• Fuente: Orienta
• Color: Gris muy oscuro #333333
• Tamaño:
  
  • Escritorio: 2vw
  • Tableta: 5vw
  • Teléfono: 6vw

Encabezado 2 Texto

• Fuente: Orienta
• Color: Gris muy oscuro #333333
• Tamaño:
  
  • Escritorio: 1.8vw
  • Tableta: 4.5vw
  • Teléfono: 5.5vw

Título 3 Texto

• Fuente: Orienta
• Color: Gris muy oscuro #333333
• Tamaño:
  
  • Escritorio: 1.6vw
  • Tableta: 4.5vw
  • Teléfono: 5vw

Espaciado

Para que coincida con el estilo de la tarjeta de recetas, ajuste los valores de espaciado.

• Acolchado superior e inferior: 2vw
• Relleno izquierdo + derecho:
  
  • Escritorio: 4vw
  • Tableta + Teléfono: 6vw

Si desea cambiar el color de la línea de la cita en bloque o el color del enlace, puede hacerlo en el personalizador de temas en el color de énfasis.

4. Editar/Crear publicación usando la configuración del complemento ACF y la plantilla de la tarjeta de recetas

Introducir campos personalizados

Abre o agrega una publicación. Debajo del área de contenido, encontrará todos los campos personalizados para la plantilla de la tarjeta de recetas. Para recrear este diseño de tostadas de aguacate, complete los campos de la siguiente manera.

Título de la receta:

• Tostada vegana superverde de aguacate

Autor de la receta:

• Magdalena Swifter – www.veganchef.com

Tiempo de preparación de la receta:

• 15

Porciones de recetas:

• 3

Sugerencia de sabor de receta:

• Usa escamas de sal marina y aceite virgen extra

Imagen de receta:

• Imagen de tostadas de aguacate

Título de los ingredientes de la receta:

• Ingredientes

Lista de ingredientes de la receta:

• 3 rebanadas de pan integral
• 1 aguacate maduro
• 100 gramos. Habas Cocidas
• 10 g. brotes verdes
• 1 cebolla tierna picada
• 30 g. Queso feta desmenuzado
• 1 limón cortado por la mitad
• Chorrito de Aceite de Oliva
• Espolvorear de sal marina

Receta Preparaciones Título:

• Preparación

Lista de preparaciones de recetas:

• 1. Tuesta las rebanadas de pan a tu gusto.
• 2. Abra el aguacate, retire la pulpa, triture con un tenedor.
• 3. Exprima el jugo de limón sobre el aguacate, sazone con sal.
• 4. Extienda el puré de aguacate sobre la tostada.
• 5. Espolvorear las habas, los brotes y la cebolleta picada.
• 6. Sazone con sal.
• 7. Agregue queso feta desmenuzado.
• 8. Terminar con aceite de oliva.

Dale un título a la publicación

Título

No olvides agregar un título a tu publicación.

• Receta de tostadas de aguacate

Agregar contenido, seleccionar categoría y agregar imagen destacada

Escriba o inserte el contenido de la publicación del blog en el editor normal. Seleccione la categoría de recetas y agregue una imagen destacada.

Vista previa de plantilla de tarjeta de recetas

Una vez más, echemos un vistazo a cómo se ve la publicación terminada con la plantilla de la tarjeta de recetas en diferentes pantallas.

Escritorio

Tableta

Móvil

¡Es una envoltura!

Repasemos rápidamente los pasos que tomamos para lograr este diseño de plantilla de tarjeta de recetas.

1. Instale el complemento ACF.
2. Configure un grupo de campo de tarjeta de receta.
3. Agregar campos personalizados.
4. Cree una nueva plantilla y asígnela a las publicaciones del blog en la categoría ‘recetas’.
5. Use contenido dinámico de los campos ACF en los módulos.
6. Cree o edite una publicación de blog completando los campos.
7. Agregar contenido de publicación de blog.

Dado que este diseño se creó como una plantilla con contenido dinámico, se mantendrá constante en todas las publicaciones del blog de recetas que utilizan los campos personalizados del complemento ACF. Esperamos que este diseño de plantilla de tarjeta de recetas inspire todo tipo de plantillas de recetas nuevas e innovadoras para sus blogs relacionados con la comida. Háganos saber sus pensamientos en los comentarios.