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


Los bloggers de comida y los creadores de recetas saben lo importante que es tener una apariencia consistente de 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 todo su sitio y blog. Con la ayuda de Complemento de campos personalizados avanzados (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 de 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.

Veamos cómo se ve el diseño en diferentes tamaños de pantalla.

Vista previa de plantilla de tarjeta de receta

Veamos 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 campo

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 para cada campo. Agregue la palabra "receta" al comienzo de cada etiqueta de campo para que sea fácil de encontrar al construir los módulos. El nombre del campo se completará automáticamente una vez que haya agregado la etiqueta.

Título de receta

Comience con el título de la receta.

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

Autor de recetas

Luego, cree 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 recetas

Sigue eso con el tiempo de preparación.

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

Porciones de recetas

Luego, las raciones.

  • Etiqueta de campo: porciones de recetas
  • Tipo de campo: Número
  • ¿Requerido ?: Sí
  • Texto del marcador: ##
  • Prepend: Porciones:

Receta Sabor Tip

Agregue un campo de punta de sabor.

  • Etiqueta de campo: receta de sabor
  • Tipo de campo: texto
  • ¿Requerido ?: Sí
  • Anteponer: Consejo 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í

Receta Ingredientes Título

Luego, el título de los ingredientes.

  • Etiqueta de campo: Receta Ingredientes Título
  • Tipo de campo: texto
  • Instrucciones: solo escribe lo mismo que el texto de marcador de posición.
  • ¿Requerido ?: Sí
  • Texto de marcador de posición: ingredientes

Lista de ingredientes de recetas

Sigue 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

Título de preparación de recetas

De penúltimo, el título de preparación.

  • Etiqueta de campo: Título de preparación de receta
  • Tipo de campo: texto
  • Instrucciones: solo escribe lo mismo que el texto de 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

Publicar grupo de campo

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

Cómo acceder al contenido del complemento ACF para la plantilla de tarjeta de receta 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. Crear una nueva plantilla de tarjeta de recetas con Divi Builder

Pasos de Divi Theme Builder

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. Crear cuerpo personalizado

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

3. Recrea el diseño de la tarjeta de recetas usando 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.

Antecedentes

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áx .: 100%

Añadir primera fila

Estructura de 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áx .: 90%

Configuraciones de columna

Antecedentes

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 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 icono de engranaje e ingrese fragmentos H1.

  • Cuerpo: Título de receta
  • Configuraciones del cuerpo:
    • Antes de:

    • Después:

Encabezado de texto

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

  • Nivel de rumbo: H1
  • Fuente: Orienta
  • Peso: negrita
  • Alineamiento: centro
  • Color: gris muy oscuro # 3d3d3d
  • Talla:
    • Escritorio: 3vw
    • Tableta: 4vw
    • Teléfono: 5vw
  • Espaciado de letras: 3px
  • Altura de línea: 1.5 em

Espaciado

Modifique los valores de espaciado también.

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

Agregue el 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, dale estilo al texto.

  • Fuente: Encode Sans
  • Color: gris muy oscuro # 3d3d3d
  • Talla:
    • Escritorio: 1.4vw
    • Tableta: 2.4vw
    • Teléfono: 3vw
  • Alineamiento: centro

Espaciado

Luego, ajuste el espacio.

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

Agregar segunda fila

Estructura de columna

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

Dimensionamiento

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

  • Ancho de canal: 2
  • Ancho: 90%
  • Ancho Máx .: 100%
  • Alineación de fila: izquierda

Espaciado

Entonces, el espacio.

  • Acolchado superior + inferior: 0.5vw
  • Relleno izquierdo: 10vw

Visibilidad

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

Configuración de 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 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. Lo agregaremos más tarde.

Antecedentes

Agregue un color de fondo al módulo.

  • Color de fondo: verde lima # b1e88d

Encabezado de texto

Estilo de la configuración de texto H5 siguiente.

  • Nivel de rumbo: H5
  • Fuente H5: Orienta
  • Color H5: Gris muy oscuro # 3d3d3d
  • Tamaño H5:
    • Escritorio: 1vw
    • Tableta: 2.3vw
    • Teléfono: 3.3vw
  • Alineamiento: centro

Espaciado

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

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

Módulo de texto duplicado de la columna 1 dos veces y pasar 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 recetas
  • Configuraciones del cuerpo:
    • Antes de:
      Tiempo de preparación:
    • Después: min.

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: porciones de recetas
  • Configuraciones del cuerpo:
    • Antes de:
      Porciones:
    • Después:

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

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

  • Cuerpo: receta de sabor
  • Configuraciones del cuerpo:
    • Antes de:
      Consejo de sabor:
    • Después:

Agregar 3ra fila

Estructura de columna

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

Dimensionamiento

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

  • Ancho de canal personalizado: 2
  • Ancho: 80%
  • Ancho Máx .: 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

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 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 ingredientes. Haga clic en el ícono de ajustes e ingrese los fragmentos H3 de la siguiente manera.

  • Cuerpo del texto: Receta Ingredientes Título
  • Configuraciones del cuerpo:
    • Antes de:

    • Después:

Encabezado de texto

Luego, peina el texto del encabezado.

  • Nivel de rumbo: H3
  • H3Font: Orienta
  • Color H3: Gris muy oscuro # 3d3d3d
  • Tamaño H3:
    • Escritorio: 1.6vw
    • Tableta: 2vw
    • Teléfono: 5.5vw
  • Alineamiento: centro

Espaciado

Complete el módulo ajustando el espacio.

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

Agregar módulo divisor a la columna 2

Línea

Agrega un módulo divisor y dale el 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, ajuste el espacio.

  • 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 icono de engranaje en la pestaña de contenido dinámico y habilite HTML sin formato.

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

Texto

Luego, peina el texto como sigue.

  • Fuente: Encode Sans
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 0.9vw
    • Tableta: 2vw
    • Teléfono: 3vw

Espaciado

Además, ajuste el espacio.

  • Margen superior:
    • Escritorio: -1vw
    • Tableta: -3vw
    • Teléfono: -5vw
  • Relleno superior:
    • Escritorio + Tableta: 0vw
  • Acolchado inferior:
    • Escritorio: 3vw
    • Tableta + Teléfono: 4vw
  • Acolchado 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 preparación.

  • Cuerpo: Título de preparación de 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 columna

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

Dimensionamiento

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

  • Ancho de canal personalizado: 2
  • Ancho: 100%
  • Ancho Máx .: 80%

Espaciado

Modifique la configuración de espaciado a continuación.
  • Acolchado izquierdo + derecho: 0vw

Configuración de columna 1

Antecedentes

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

  • Relleno izquierdo: 0vw

Frontera

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 aplique estilo al texto para que coincida con la plantilla de la tarjeta de recetas.

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

Encabezado 1 Texto

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

Encabezado 2 Texto

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

Encabezado 3 Texto

  • Fuente: Orienta
  • Color: Gris muy oscuro # 333333
  • Talla:
    • 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 espacio.

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

Si desea cambiar el color de la línea de la cita de bloque o el color del enlace, puede hacerlo en el personalizador del tema bajo color de acento.

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

Ingresar 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 receta:

  • Tostada vegana de aguacate superverde

Autor de recetas:

  • Magdalena Swifter – www.veganchef.com

Tiempo de preparación de recetas:

  • 15

Porciones de recetas:

  • 3

Receta Tip Sabor:

  • Use copos de sal marina y aceite virgen extra

Imagen de receta:

  • Imagen de tostadas de aguacate

Título de ingredientes de la receta:

  • Ingredientes

Lista de ingredientes de recetas:

  • 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 por la mitad
  • Una pizca de aceite de oliva
  • Una pizca de sal marina

Título de preparaciones de recetas:

  • Preparación

Lista de preparaciones de recetas:

  • 1. Tueste las rebanadas de pan a su 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. Espolvorea las habas, los brotes y la cebolla picada.
  • 6. Sazonar con sal.
  • 7. Agregue el 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 habitual. Seleccione la categoría de recetas y agregue una imagen destacada.

Vista previa de plantilla de tarjeta de receta

Una vez más, echemos un vistazo nuevamente a cómo se ve la publicación final 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. Añadir 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 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 de blog de recetas que usan 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.