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

Publicado: 2019-11-26

Los blogueros de comida y los creadores de recetas saben lo importante que es tener un aspecto coherente en las recetas que publican. Una solución común es usar un complemento de tarjeta de recetas, pero eso viene con limitaciones de diseño. Ahora, con Divi Theme Builder, puede crear su propia plantilla de tarjeta de recetas para usar en su sitio y blog. Con la ayuda del complemento Advanced Custom Fields (ACF), diseñar una tarjeta de recetas única y reutilizable es más fácil que nunca.

En esta publicación, le mostraremos cómo crear una plantilla de tarjeta de recetas con contenido dinámico. Al usar la configuración de Divi Theme Builder, el diseño se puede aplicar a las publicaciones del blog que incluyen recetas seleccionando esa categoría específica. Esperamos que este tutorial lo inspire a crear su propio estilo de tarjetas de recetas con sus propios campos personalizados.

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

Vista previa de la plantilla de tarjeta de receta

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'. Nombra 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 de contenido diferente. 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 completará automáticamente 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 ?: Sí
  • Texto de marcador de posición: título de la receta
  • Límite de caracteres: 30

Autor de recetas

Luego, crea un campo para el autor.

  • Etiqueta de campo: Autor de recetas
  • Tipo de campo: Texto
  • ¿Requerido ?: Sí
  • Texto de marcador de posición: Autor

Tiempo de preparación de la receta

Siga eso con el tiempo de preparación.

  • Etiqueta de campo: tiempo de preparación de la receta
  • Tipo de campo: Número
  • ¿Requerido ?: Sí
  • Texto del marcador: ##
  • Anteponer: Tiempo de preparación:
  • Anexar: min.

Porciones de recetas

Luego, las porciones.

  • Etiqueta de campo: porciones de recetas
  • Tipo de campo: Número
  • ¿Requerido ?: Sí
  • 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 ?: Sí
  • 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 ?: Sí

Título de los ingredientes de la receta

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 ?: Sí
  • Texto de marcador de posición: ingredientes

Lista de ingredientes de recetas

Siga eso con la lista de ingredientes.

  • Etiqueta de campo: Lista de ingredientes de recetas
  • Tipo de campo: Área de texto
  • Instrucciones: agregue un espacio después de cada elemento
  • ¿Requerido ?: Sí
  • Filas: 8
  • Nuevas líneas: agregar automáticamente <br>

Título de preparación de recetas

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

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

Lista de preparación de recetas

Finalmente, 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 ?: Sí
  • Filas: 10
  • Nuevas líneas: agregar automáticamente <br>

Publicar grupo de campo

Publique 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 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 está 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 panel de control.

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. Cree un cuerpo personalizado

Haga clic en 'agregar cuerpo global' y seleccione 'agregar cuerpo personalizado'.

3. Recrea 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 tarjeta de recetas. Cuando se abra el generador de 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 # editado

Dimensionamiento

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

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

Agregar la primera 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

Frontera

Luego, modifique los estilos de borde.

  • Esquinas redondeadas: 1vw en 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 encabezado: 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.5em

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

Agregue un 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 recetas

Texto

Luego, aplique estilo al texto.

  • Fuente: Encode 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 de la canaleta: 2
  • Ancho: 90%
  • Ancho máximo: 100%
  • Alineación de filas: izquierda

Espaciado

Luego, el espaciado.

  • Acolchado superior + 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 la columna 1 + 2 + 3

Frontera

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 en 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.

  • Transformar escala 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. Lo agregaremos más tarde.

Fondo

Agregue un color de fondo al módulo.

  • Color de fondo: verde lima # b1e88d

Texto de encabezado

A continuación, modifique el estilo de la configuración de texto H5.

  • Nivel de encabezado: 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.

Agregar 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>

Agregar 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: Recetas porciones
  • Configuración del cuerpo:
    • Antes: <H5> Porciones:
    • Después: </H5>

Agregar 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>

Agregar tercera fila

Estructura de la columna

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

Dimensionamiento

Antes de agregar módulos, 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 la columna 1 + 2 + 3

Frontera

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 en 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.

  • Transformar escala 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 encabezado.

  • Nivel de encabezado: H3
  • H3Font: 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

Agregar módulo divisor a la columna 2

Línea

Agregue un módulo divisor y ajústelo 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, ajuste 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 formato.

  • Cuerpo del texto: Lista de ingredientes de la receta
  • Configuración del cuerpo: habilitar HTML sin formato

Texto

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

  • Fuente: Encode 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 preparativos al último módulo de texto de la columna.

  • Cuerpo: Lista de preparación de recetas

Agregar 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 columnas:

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

A continuación, modifique la configuración de espaciado.
  • Acolchado izquierdo + derecho: 0vw

Configuración de la columna 1

Fondo

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

  • Color de fondo: blanco #ffffff

Espaciado

Además, ajuste el espaciado.

  • Acolchado izquierdo: 0vw

Frontera

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

  • Esquinas redondeadas: 1vw en 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: Encode Sans
  • Color: Gris muy oscuro # 333333
  • Tamaño:
    • Escritorio: 0.9vw
    • Tableta: 2vw
    • Teléfono: 3vw
  • Altura de la línea: 2em

Texto del encabezado 1

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

Texto del título 2

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

Texto del título 3

  • 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 + 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 debajo del color de acento.

4. Edite / cree publicación usando la configuración del complemento ACF y la plantilla de tarjeta de receta

Ingresar campos personalizados

Abra o agregue una publicación. Debajo del área de contenido, encontrará todos los campos personalizados para la plantilla de 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 de aguacate vegano superverde

Autor de la receta:

  • Magdalena Swifter - www.veganchef.com

Tiempo de preparación de la receta:

  • 15

Porciones de recetas:

  • 3

Consejo de sabor de la receta:

  • Use 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
  • 10g. Brotes verdes
  • 1 cebolla tierna picada
  • 30g. Queso Feta Desmenuzado
  • 1 limón cortado a la mitad
  • Una pizca de aceite de oliva
  • Espolvorear sal marina

Título de las preparaciones de recetas:

  • Preparación

Lista de preparaciones de recetas:

  • 1. Tuesta las rebanadas de pan a tu gusto.
  • 2. Abrir el aguacate, quitar la pulpa, triturar 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. Espolvoree las habas, los brotes y la cebolleta picada.
  • 6. Sazone con sal.
  • 7. Agregue el queso feta desmenuzado.
  • 8. Rematar con aceite de oliva.

Darle un título a la publicación

Título

No olvide agregar un título a su 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 habitual. Seleccione la categoría de recetas y agregue una imagen destacada.

Vista previa de la plantilla de tarjeta de receta

Una vez más, echemos un vistazo a cómo se ve la publicación terminada con la plantilla de 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 campos de tarjetas de recetas.
  3. Agrega campos personalizados.
  4. Cree una nueva plantilla y asígnela a publicaciones de blog en la categoría 'recetas'.
  5. Utilice contenido dinámico de los campos ACF en los módulos.
  6. Cree o edite una publicación de blog completando los campos.
  7. Agregue 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.