Los bloggers de alimentos y los creadores de recetas saben lo importante que es tener un aspecto constante de las recetas que publican. Una solución ordinaria es el uso de un complemento de tarjeta de receta, pero viene con limitaciones de diseño. Ahora, con la Divica del constructor de temas, puede crear su propia plantilla de tarjeta de receta para ser utilizada en todo su sitio y bloguear con los campos personalizados del complemento avanzado (ACF), diseñar una tarjeta de receta única y reutilizable es más fácil que nunca. En esta publicación, le mostraremos cómo crear una plantilla de tarjeta de receta dinámica. Al usar la configuración de Divic 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 libros de recetas con sus campos personalizados.
Echemos un vistazo al aspecto del diseño en diferentes tamaños de pantalla. Tarjeta de receta de plantilla de vista previa para echar un vistazo al diseño del diseño en diferentes tamaños de pantalla. Escritorio

Tableta

Móvil

1. Descargue e instale la búsqueda de complementos de los campos personalizados avanzados e instale Encuentre el complemento ACF que busque “campos personalizados avanzados” en la barra de búsqueda de arado, instálelo y active.

Agregue un nuevo grupo de campo Haga clic en la pestaña ACF y seleccione “Agregar un nuevo”. Nombra el grupo “Tarjeta de receta”. Agregue los campos personalizados uno por uno por el botón “Agregar campo”.

Agregue 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 lista a continuación 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 construir los módulos. El nombre del campo se completará automáticamente después de haber agregado la etiqueta. La receta de tite comienza con el título de la receta.

Etiqueta de campo: título de receta
Tipo de campo: texto
¿Obligatorio?: Sí
Texto sustituto: título de receta
Límite de personaje: 30
Receta del autor Entonces, cree un campo para el autor.

Etiqueta de campo: autor de receta
Tipo de campo: texto
¿Obligatorio?: Sí
Texto sustituto: autor
Receta de tiempo de preparación Siga esto con el tiempo de preparación.

Etiqueta de campo: tiempo de preparación de recetas
Tipo de campo: número
¿Obligatorio?: Sí
Texto sustituyente: ##
Prepago: tiempo de preparación:
Adjunto: min.
Puertos de recetas entonces, porciones.

Etiqueta de campo: porciones de recetas
Tipo de campo: número
¿Obligatorio?: Sí
Texto sustituyente: ##
Prepago: porciones:
Consejo de aroma de receta Agregue un campo de aroma.

Etiqueta de campo: Consejo de aroma de recetas
Tipo de campo: texto
¿Obligatorio?: Sí
Prepago: Consejo de aroma:
Límite de personaje: 40
Imagen de receta ahora, agregue el campo de imagen.

Etiqueta de campo: imagen de receta
Tipo de campo: imagen
¿Obligatorio?: Sí
Título de ingredientes de la receta entonces, título de ingredientes.

Etiqueta de campo: ingredientes de la receta del título
Tipo de campo: texto
Instrucciones: escriba lo mismo que el texto sustituto.
¿Obligatorio?: Sí
Texto sustituto: ingredientes
La lista de ingredientes de la receta sigue esto con la lista de ingredientes.

Etiqueta de campo: Lista de ingredientes Recipetip del campo: área de texto
Instrucciones: Agregue un espacio después de cada elemento
¿Obligatorio?: Sí
Filas: 8
Nuevas líneas: agregar
automáticamente
Título de preparación de recetas además del último título de preparación.
Etiqueta de campo: título de preparación de recetas

Tipo de campo: texto
Instrucciones: escriba lo mismo que el texto sustituto.
¿Obligatorio?: Sí
Texto sustituto: preparación
La 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
¿Obligatorio?: Sí
Filas: 10
Nuevas líneas: agregar
automáticamente
Publicar el grupo de campo publica el grupo de campo. La ventana de su grupo de campo debe verse como la imagen a continuación.
Cómo acceder al contenido del complemento ACF para la plantilla de la tarjeta de receta en los campos personalizados avanzados de Div Builder se puede agregar a un módulo de división haciendo clic en el icono de contenido dinámico. Este icono se encuentra en la esquina superior derecha de la caja de contenido. Así es como se ve:

2. Cree una nueva plantilla de tarjeta de receta con Div Div Div Div Theme Builder Pasos 1. Cree una categoría de recetas que necesita una categoría llamada “Recetas”, para que pueda asignar su plantilla. Agrégalo a la pestaña Categoría a través del tablero.

2. Abra el Temo Builder Divin y agregue una nueva plantilla Abra el generador de tema superior y agregue una nueva plantilla.

3. Agregue un cuerpo global haga clic en “Agregar cuerpo global” y asigne las plantillas de publicaciones en ciertas categorías> 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. Recree el diseño de la tarjeta de receta utilizando contenido dinámico Agregue una nueva sección ahora, podemos comenzar a diseñar la plantilla de la tarjeta de receta. Cuando se abre el Builder Divi, seleccione “Build 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 # reproducido

La dimensión también ajusta el tamaño en la pestaña de diseño.

Ancho: 100%
Ancho máximo: 100%

Agregue la primera fila a la estructura de la columna Agregue una nueva fila con una columna.
Dimensión Antes de agregar módulos, ajuste la configuración de tamaño de la fila.
Ancho máximo: 90%

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

Color de fondo: blanco #ffffff
Border entonces, cambie los estilos de borde.

Esquinas redondeadas: 1VW las cuatro esquinas
Estilos de borde: los cuatro lados

Ancho: 5 PX
Color: Muy oscuro gris # 333333
Agregue un módulo de texto de contenido dinámico contenido después de haber completado la configuración de la fila y la columna, 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 la rueda e ingrese fragmentos H1.
Cuerpo: el título de la receta
Configuración de Corp:

Antes:

Después de:

El texto de Shota luego estiliza la configuración del texto H1 en consecuencia:
Nivel de título: H1
FUENTE: Oriente


Peso: en negrita
Alineación: centro
Color: muy oscuro gris # 3d3d3d
Tamaño:
Escritorio: 3VW
Tableta: 4VW
Teléfono: 5VWSPARACIÓN DE LETRAS: 3 PX
Altura de la línea: 1.5em
Difundir el cambio y los valores de espaciado.
Margen inferior:
Escritorio: -1VW
Tableta: -2VW

Teléfono: -5VW
Revestimiento superior:
Desktop + tableta: 1VW
Teléfono: 2VW
Revestimiento inferior: 0 VW
Forro izquierdo + derecho:
Desktop + tableta: 3VW
Teléfono: 4VW
Agregue el segundo modo 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: Receta del autor
Texto luego estilice el texto.
Fuente: codificar sans

Color: muy oscuro gris # 3d3d3d
Tamaño:

Escritorio: 1.4VW
Tableta: 2.4VW
Teléfono: 3VW
Alineación: centro
Espacio y luego ajusta la distancia.
Margen superior: 1.5VW
Revestimiento superior:
Desktop + tableta: 0VW

Teléfono: 2VW
Revestimiento inferior: 2VW
Forro izquierdo + derecho:
Escritorio: 2VW
Tableta + teléfono: 3VW
Agregue la segunda fila La estructura de la columna ahora, agregue una segunda fila utilizando la siguiente estructura de columnas:
Dimensión Abra la configuración de la fila y ajuste la configuración de tamaño en consecuencia:
El ancho de la canaleta: 2
Ancho: 90%

Ancho máximo: 100%

Alineación de filas: a la izquierda
Espacio y luego la distancia.
El revestimiento superior + inferior: 0.5 VW
Revelaje izquierdo: 10 VW
Finalmente, la visibilidad, en la pestaña avanzada, ajuste la visibilidad.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Columna 1 + 2 + 3 Configuración del borde Estilizan las tres columnas de la misma manera. Primero, acceda 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: 5 PX

Color: Gray Muy Dark # 33333333333333RAnform para darle al diseño un efecto flotante, ajuste la configuración de transformación de la siguiente manera. Repita para las tres columnas.
Escaleras transformándose en caminata: 105% x 105%
Agregue un módulo de texto al contenido de la columna 1 Agregue un módulo de texto y deje la ventana de contenido vacía por el momento. Lo agregaremos más tarde. fondo Agregue un color de fondo al módulo.
Color de fondo: lima verde # b1e88d
Envío de texto Stile la configuración de texto H5.

Nivel de título: H5
Fuente H5: Oriente

Color H5: Muy Dark Grey # 3D3D3D
Tamaño H5:

Escritorio: 1VW
Tableta: 2.3VW
Teléfono: 3.3VW
Alineación: centro
Finalmente, el espacio, ajuste los valores de espaciado de la siguiente manera.
Revestimiento superior:
Escritorio: 1VW
Tableta: 1.5VW
Teléfono: 3.5VW

Levante inferior:
Escritorio: 0.5 VW
Tableta + teléfono: 1.5VW
Forro izquierdo + derecho:
Escritorio: 2VW
Tableta + teléfono: 3VW
Duplique el módulo de texto en la columna 1 dos veces y cambie a las columnas 2 y 3 en la vista de estructura alambre, copie el módulo de texto en la primera columna. Luego mueva los duplicados a la columna 2 y 3.
Agregue contenido dinámico al módulo de texto en la columna 1 Agregue contenido dinámico para el tiempo de preparación y ajuste la configuración.
Cuerpo: tiempo de preparación de recetas
Configuración de Corp:
Antes:

Tiempo de preparación:


Después: min.

Agregue contenido dinámico al módulo de texto en la columna 2 Agregue contenido dinámico para las porciones de recetas y ajuste la configuración.
Cuerpo: puerta de recetas
Configuración de Corp:
Adelante:

porciones:
Después de:

Agregue contenido dinámico al módulo de texto en la columna 3 Agregue el contenido dinámico para la punta de los sabores y ajuste la configuración.
Cuerpo: receta del cuerpo Aroma Consejo:
Forward:

Consejo de sabor:
Después de:

Agregue la tercera fila La estructura de la columna Ahora agregue la tercera fila utilizando la siguiente estructura de columnas:


Dimensión Antes de agregar módulos, ajuste el tamaño de la fila.
Ancho de canaleta personalizado: 2
Ancho: 80%
Ancho máximo: 100%
El espacio también elimina el margen superior predeterminado.


Margen superior: 0VW

Finalmente visibilidad, ajuste la visibilidad en la pestaña avanzada.
Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Columna 1 + 2 + 3 Configuración del borde Impulsan 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: 5 PX
Color: Muy oscuro gris # 333333
Transforme continuar agregando una transformación con el mouse en la pestaña de diseño. Repita para las columnas 2 y 3.

Escaleras transformándose en caminata: 105% x 105%
Agregue un módulo de imagen con un contenido dinámico en el contenido de la columna 1 Agregue un módulo de imagen dinámica para la imagen de la receta.
Imagen: imagen de receta
Agregue un módulo de texto dinámico en el contenido de la columna 2 ahora, agregue un módulo de texto dinámico para el título de los ingredientes. Haga clic en el icono de la rueda e ingrese fragmentos H3 de la siguiente manera.
Cuerpo de texto: título de ingredientes de recetas

Configuración de Corp:
Antes:

Después de:

El texto de Shota luego estiliza el texto del encabezado.

Nivel de título: H3
H3Font: Oriente
Color H3: Gray muy oscuro # 3D3D3D
Tamaño H3:
Escritorio: 1.6VW


Tableta: 2VW
Teléfono: 5.5VW
Alineación: centro
Espacio Completa el módulo que ajusta el espacio. Baja Marja: 0VW
Revestimiento superior:
Escritorio: 2VW
Tableta: 3VW
Teléfono: 4VW
Forro izquierdo + derecho:

Escritorio: 2VW
Tableta + teléfono: 3VW
Agregue el módulo divisor a la columna 2 La línea Agregue un módulo divisor y estilice de la siguiente manera.
Color: lima verde # b1e88d
Dimensión luego ajuste los valores de tamaño.
Peso: 5 PX
Ancho: 40%
Alineación: a la izquierda
Finalmente espaciado, ajuste el espacio.

Margen superior: 0VW
Agregue un módulo de texto dinámico en el contenido de la columna 2 Agregue un módulo de texto dinámico para la lista de ingredientes. Haga clic en el icono de la rueda en la pestaña Contenido dinámico y active el código GROSS HTML.

El cuerpo del texto: lista de ingredientes de recetas
Configuración de Corp: activar HTML GROSS
Texto luego estilice el texto de la siguiente manera.
Fuente: codificar sans

Color: Muy oscuro gris # 333333
Tamaño:

Escritorio: 0.9VW
Tableta: 2VW
Teléfono: 3VW


El espacio también ajusta la distancia.
Margen superior:
Escritorio: -1VW
Tableta: -3VW
Teléfono: -5VW
Revestimiento superior:
Desktop + tableta: 0VW

Levante inferior:
Escritorio: 3VW
Tableta + teléfono: 4VW
Forro 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, copie todos los módulos en la segunda columna. Mover módulos duplicados en la tercera columna 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: receta de preparación de títulos
Agregue contenido dinámico en el segundo modo de texto en la columna 3 también agregue el contenido dinámico para la lista de preparaciones al último módulo de texto. Corp: lista de preparación de recetas
Agregue la cuarta fila para completar la columna para completar la plantilla, necesitamos un módulo de trabajo. Agregue una nueva fila usando la siguiente estructura de columna:
Dimensión Antes de agregar un módulo, ajuste el tamaño de la fila.
El ancho de la cuneta personalizada: 2

Ancho: 100%

Ancho máximo: 80%
sangría

Luego cambie la configuración de espaciado.
Forro izquierdo + derecha: 0VW

Configuración La columna 1 de fondo siente la columna para que coincida con el libro de recetas de arriba. Primero, agregue un fondo.

Color de fondo: blanco #ffffff
El espacio también ajusta la distancia.
Junta izquierda: 0VW
Border Último pero no menos importante, cambie la configuración del borde.

Esquinas redondeadas: 1VW las cuatro esquinas
Estilos de borde: los cuatro lados
Ancho: 5 PX

Color: Muy oscuro gris # 333333
Deja la columna 2 vacía. Agregue un módulo de contenido para publicar en el texto de la columna 1 Agregue un módulo de publicación en la columna uno y estilice el texto para que coincida con la plantilla de la tarjeta de receta.

Fuente: codificar sans
Color: Muy oscuro gris # 333333

Tamaño:
Escritorio: 0.9VW
Tableta: 2VW
Teléfono: 3VW
Altura de línea: 2em

Título 1 Texto
FUENTE: Oriente
Color: Muy oscuro gris # 333333
Tamaño:
Escritorio: 2VW
Tableta: 5VW
Teléfono: 6VW
Título 2 Texto

FUENTE: Oriente
Color: Muy oscuro gris # 333333
Tamaño:
Escritorio: 1.8VW
Tableta: 4.5VW
Teléfono: 5.5VW
Título 3 Texto
FUENTE: Oriente
Color: Muy oscuro gris # 333333
Tamaño:
Escritorio: 1.6VW
Tableta: 4.5VW
Teléfono: 5VWSPARATION para que coincida con el estilo del libro de recetas, ajuste los valores de espaciado.
Reviniente superior + inferior: 2 VW
Forro izquierdo + derecho:
Escritorio: 4VW
Tableta + teléfono: 6VW
Si desea cambiar el color de la línea Blockquote o el color del enlace, puede hacerlo en el personalizador del tema bajo el color. 4. Edite / cree una publicación con la configuración del complemento ACF y la plantilla de tarjeta de receta Ingrese los campos personalizados abiertos o agregue una publicación. En el área de contenido, encontrará todos los campos personalizados para la plantilla de tarjeta de receta. Para recrear este diseño de pan tostado de aguacate, complete los campos de la siguiente manera. Título de la receta:
Frito pan supergreen vegano aguacate
Receta del autor:
Magdalena Swifter – www.veganchef.com


Tiempo de preparación de recetas:
15
Puertos de recetas:
3
Consejo para el aroma de recetas:

Use copos de sal marina y aceite virgen extra
Imagen de receta:
Imagen de tostadas de aguacate
Título de la receta de ingredientes:
ingredientes
La lista de ingredientes de la receta:
3 rebanadas de pan integral
1 aguacate horneado
100 gramos. Frijoles hervidos
10g. Col verde
1 cebolla de primavera picada
30 g. Queso feta mascota

1 Corte de limón por la mitad
Crema de aceite de oliva
Espolvorear
Título de preparaciones de recetas:
Preparación
Lista de preparaciones de recetas:
1. Fríe las rebanadas de pan como desee.
2. Abra el aguacate, retire la pulpa, mezcle con un tenedor.
3. Apriete el jugo de limón sobre el aguacate, sazone con sal.
4. Estire el puré de aguacate sobre el pan frito.
5. Espolvorea frijoles, brotes y cebolla de primavera picada.
6. Sazone con sal.
7. Agregue el queso feta picado.
8. Completo con aceite de oliva. Publique un título de la publicación, no olvide agregar un título a su publicación.
Receta de tostadas con aguacate
Agregue contenido, seleccione una categoría y agregue una imagen recomendada Escribir o insertar el contenido de publicación de blog en el editor habitual. Seleccione la categoría de receta y agregue una imagen presentada.
Vista previa Tarjeta de receta de plantilla una vez más, para ver nuevamente lo que se completa la publicación con la plantilla de la tarjeta de receta en diferentes pantallas. Escritorio
Tableta
Móvil
¡Es una lámina! Revisemos rápidamente los pasos que tomamos para hacer esta plantilla de receta.
Instale el complemento ACF.
Establezca un grupo de campos de libros de recetas.
Agregue campos personalizados.

Cree una nueva plantilla y asigna a las publicaciones de blog en la categoría “Receta”.
Use contenido dinámico de los campos ACF en módulos.

Cree o edite una publicación de blog completando los campos.

Agregue contenido de publicación de blog.

Debido a que este diseño se ha creado como una plantilla dinámica, seguirá siendo consistente en todos los blogs de recetas que usan los campos personalizados de complementos ACF. Esperamos que este diseño de plantillas de recetas inspire todo tipo de plantillas de recetas nuevas e innovadoras para su dieta. Cuéntanos tus opiniones en los comentarios.