homefinance blog
La nueva función de contenido dinámico Divi nos brinda la oportunidad de construir modelos dinámicos para publicaciones de blog (y más). Y hay razones bien fundadas por las cuales podría considerar esto. Una razón es el diseño. Puede diseñar algunos planes de ayuno increíbles con DIV utilizando el generador visual, especialmente cuando utiliza los aspectos prefabricados disponibles como punto de partida. Otra razón es la comodidad. Una vez que el aspecto de publicación está diseñado con todos los elementos de contenido dinámico (como categorías, imágenes presentadas, etiquetas de publicación, campos personalizados, etc.), el proceso de creación y actualización de publicaciones de blog se simplifica mucho. Además del contenido de publicación real, todos los demás datos de publicación se pueden actualizar sin tener que implementar el Visual Builder.
En este tutorial, le mostraré cómo construir un aspecto dinámico de la publicación en la división. Comenzando con un aspecto prefabricado, lo guiaré a través del proceso de agregar el contenido dinámico a lo largo de la apariencia y luego el diseño de ese contenido para que se ajuste. Incluso introduciré una forma simple de usar campos personalizados como contenido dinámico. Vamos a empezar. Tirar del ojo
¿Qué necesita comenzar para este tutorial? Necesitará lo siguiente:
El tema de Div
Paquete de paquete personal para entrenador. Este paquete de apariencia es accesible desde Divi Builder. Utilizaremos el aspecto de la página del servicio de entrenador personal para iniciar el diseño de nuestra publicación.
También le mostraré cómo aprovechar los campos personalizados para crear una sección de capacitación recomendada utilizando la funcionalidad del trabajo personalizado. Los campos personalizados se incorporan a WordPress y no requieren complementos adicionales o algo más. Por lo tanto, ya tiene lo que necesita. Parte 1: agregue el aspecto prefabricado para publicar para comenzar las cosas, continúe y cree una nueva publicación (no una página), dé el título de su publicación, luego haga clic en el botón Div Div Builder. Todavía no implementa el Visual Builder, porque primero debemos personalizar nuestra configuración de publicación en la pantalla predeterminada del editor de WordPress. Mientras que queremos agregar nuestro aspecto prefabricado para extraer las imágenes de la apariencia (la necesitamos para la imagen presentada). Haga clic en el botón de carga ubicado en el menú Divi Builder.
Desde la ventana emergente en la biblioteca, seleccione la apariencia de la página de servicio de entrenador personal e impleméntelo en su publicación haciendo clic en el botón “Usar este aspecto”.
Luego publique su publicación para guardar su configuración. Parte 2: Actualización de la configuración de la página de la Divicidad, la meta fecha y la configuración de imagen recomendada Div Es importante actualizar la configuración de spag, para que nuestro nuevo aspecto sea adecuado. También debemos ocultar la pantalla predeterminada, porque usaremos el título de publicación a cambio. En la parte superior derecha de la página, ubique el cuadro de página de la página de Setti y actualice lo siguiente: Apariencia de la página: Pantalla de ancho completo Título de publicación: Ocultar Si no ve la configuración de la página de división, probablemente no primero. Coloque las categorías en la categoría Box, agregue una nueva categoría llamada “Entrenamiento de fuerza” y asegúrese de que sea la única categoría seleccionada. Agregue etiquetas al cuadro de etiqueta, agregue las siguientes tres etiquetas: velocidad, entrenamiento y entrenamientos. La imagen presentada luego, agregue una imagen presentada que coincida con la imagen de fondo utilizada en el encabezado de diseño, como se muestra en la captura de pantalla a continuación.
Parte 3: Agregar campos personalizados para el contenido de capacitación dinámica Los campos personalizados se incorporan a WordPress. Estos permiten a los autores de la publicación agregar información adicional (llamada meta-date) a una publicación además de los metadatos predeterminados, como las categorías, la publicación de la publicación, la fecha de publicación, etc. En un nivel básico, se pueden usar campos personalizados para mostrar el tiempo o el estado de ánimo del autor al escribir una publicación. Pero hay muchas formas diferentes de usar campos personalizados para crear contenido dinámico para su sitio web. Siéntase libre de leer más sobre cómo agregar campos personalizados a su sitio web. Pero para este caso de uso, creo que comprenderá el concepto básico de campos personalizados mediante la construcción de algunos para usted. Le mostraré cómo agregar algunos campos personalizados que se pueden usar para agregar contenido dinámico a su publicación. Ejemplo Es una capacitación recomendada. Una vez que los campos personalizados están en su lugar, todo lo que el autor de la publicación debe completar es completar los valores de los campos personalizados, y el contenido se actualizará (dinámico) en la publicación sin tener que cargar Visual Builder. Para esto, desplácese hacia abajo hasta la parte inferior de la publicación y busque el cuadro de campo personalizado. Si por algunas razones no se muestra, asegúrese de seleccionarlo en las opciones de pantalla en la parte superior de la página.
Luego haga clic en el menú desplegable Campos personalizados (si está restringido) para agregar un nuevo campo personalizado e ingrese lo siguiente: Nombre: Valor de título: Capacitación recomendada Luego haga clic en el botón de campo personalizado. El nombre es cómo identifica el campo personalizado desde el Div. El valor es el contenido que se agregará dinámicamente a la página utilizando la función de contenido dinámico (más sobre ella más adelante). Continúe este proceso para agregar los siguientes campos personalizados a su sitio web. Nombre: Valor Calefacción: 800m en ejecución
Nombre: Valor de duración: 30min Nombre: Valor de peso de elevación:
sentadillas: 10 repeticiones al 60% máx. (4 conjuntos)
Banco: 6 repeticiones al 70% máximo (3 conjuntos)
Nombre: Valor genial: 400m en ejecución
Nota: Estos campos personalizados se agregarán al tema Div y estarán disponibles para cualquier publicación nueva que cree en el futuro. En otras palabras, no se limita a esta publicación única. ¡No olvides actualizar tu publicación! Parte 4: Agregar contenido dinámico a la apariencia de la publicación usando Visual Builder ahora, que tenemos la configuración de publicación y los meta datos, es hora de comenzar a agregar contenido dinámico a nuestra publicación. Para esto, implementa Visual Builder.
Para hacer las cosas un poco más fáciles de localizar y editar para este diseño de diseño avanzado, abra el menú Configuración y configure la interacción predeterminada del constructor en el modo de clic.
En la sección del encabezado, elimine el módulo de botón (no lo necesitamos). Reemplazando la imagen de fondo con el contenido dinámico de la imagen recomendada para la primera parte de nuestro contenido dinámico, reemplazaremos la imagen de fondo utilizada en la columna 1 de nuestra fila en la sección del encabezado superior con la imagen utilizada para la publicación. Para hacer esto, abra la configuración de la fila y busque la configuración de fondo para la columna 1 y haga clic en la pestaña de fondo. Luego elimine la imagen que actualmente está y pase con el mouse sobre el cuadro de vista previa del fondo. Verá el icono de contenido dinámico en la esquina superior derecha de la caja. Haga clic para abrir las opciones de contenido dinámico. Luego, seleccione de la lista de la opción de contenido dinámico para imágenes recomendadas. Su aspecto se verá exactamente igual, porque usamos la misma imagen. La única diferencia es ahora que la imagen de fondo se extrae de cualquier imagen se establece como una imagen recomendada. ¡Esta es la belleza del contenido dinámico! Continuemos. Agregar el título de publicación con un módulo de título en el módulo de texto que actualmente contiene el título de la página, agregue un módulo de título de publicación. También hay una opción para usar agregar el título de publicación a un módulo que usa contenido dinámico, pero dado que el título de publicación ya funciona como un contenido dinámico y mantiene la etiqueta del título H1 para SEO, es perfecto porque lo usa para la apariencia de su personalizado correo.
Luego actualice la configuración del módulo de título de trabajo de la siguiente manera: Pantalla Meta: No muestre la imagen presentada: No
Ahora vaya al módulo de texto anterior y copie los estilos de título H2 haciendo clic derecho en la pestaña H2 y seleccionando la opción en esta lista.
Después de eso, vuelva al módulo de texto anterior nuevamente y copie los estilos de espaciado y péguelos al módulo de publicación. Luego cambie el color del texto de publicar el título de la luz para obtener el color blanco. Ahora el título de su publicación debe coincidir con el diseño del aspecto original.
Ahora puede eliminar el módulo de texto que contiene el título original. Uso de contenido dinámico para crear una fila de interruptor de meta fechas a la segunda sección de la apariencia. Luego, retire el revestimiento superior de la sección tirando de ella en el Visual Builder o configúrelo en 0 PX en la configuración de la sección. En primer lugar, la segunda sección del modelo, notará un módulo de texto (tiene el contenido “sobre el entrenamiento personal”) con un divisor debajo de él. Aquí construiremos nuestro giro meta datado personalizado utilizando contenido dinámico. Queremos que el tamaño de esta fila coincida con el tamaño de la fila en la sección superior. Para hacer esto, abra la configuración de la fila en la sección superior y copie los estilos de tamaño. Luego pégalos primero de la segunda sección. Luego actualice el canal de fila con 2. El nuevo tamaño debe verse como la siguiente captura de pantalla.
También deberá agregar espacio personalizado de la siguiente manera:
Trenza personalizada: 1% a la izquierda, 1% a la derecha luego guarde la configuración de la fila. Ahora actualice la estructura de la columna de fila en un aspecto de cuatro columnas. Ahora estamos listos para agregar nuestro contenido dinámico. Para hacer esto, ahora abra la configuración del módulo de texto en la columna izquierda y pase con el mouse sobre el cuadro de contenido. Verá el icono de contenido dinámico en la esquina superior derecha de la caja. Haga clic para abrir las opciones de contenido dinámico.
Luego seleccione la opción: publique la fecha de publicación.
Luego cambie el formato de fecha en consecuencia.
Esto agregará la fecha de publicación de la publicación como un contenido dinámico. Para enfatizar el módulo de texto con el contenido dinámico de la fecha, copie los estilos del módulo de texto en la columna izquierda de la fila directa a continuación.
Luego pegue los estilos del módulo en el módulo de texto con el contenido dinámico de la fecha y cambie el color del texto del texto a blanco.
Luego, copie el módulo de texto y el divisor debajo de él y pegue a la columna 2. Luego cambie el contenido dinámico a las publicaciones.
Deberá actualizar el color del texto del enlace en blanco para que coincida con el diseño del diseño. Ahora copie el módulo de texto para las publicaciones de publicaciones con el divisor en la columna 3. Luego cambie el contenido dinámico para publicar el número de comentarios. En la ventana Post Post Comment County County, ingrese lo siguiente en el cuadro de entrada anterior: Antes: Comentarios:
Los cuadros de entrada hacia adelante y después están disponibles en ventanas emergentes dinámicas son una opción conveniente para agregar antes y / o después del contenido dinámico. Esto es útil para agregar etiquetas, símbolos de precios y otros elementos cuando sea necesario. Ahora, sigamos agregando nuestro contenido dinámico. Copie el módulo de texto y el divisor en la columna 3 y el pegamento en la columna 4. Esta última columna contendrá la miniatura del autor del autor y el nombre del autor. Por lo tanto, cambie el contenido dinámico del módulo de texto en Post Autor. En la ventana del autor de la publicación emergente, actualice lo siguiente: antes: BY: Formato: Nombre y primer nombre en el módulo de texto Con el contenido del Postor, agregue un nuevo módulo de imagen. Abra la configuración del módulo de imagen y elimine la imagen predeterminada. Como hice, haga clic en el icono de contenido dinámico en el cuadro de vista previa de la imagen y agregue la foto de perfil del autor como un contenido dinámico.
Luego ajuste la configuración de diseño para extraer la imagen y proporcionar un ancho personalizado de la siguiente manera: Ancho: 80 PX Margen personalizado (escritorio): -82px ARRIBA MARGEN Custom (tableta): 0 PX TOP
Nota: El nombre del autor de la publicación mostrará al autor que fue asignado a la publicación actual. Y la foto de perfil del autor de la publicación es todo lo que se ha establecido para el perfil de usuario desde el tablero de WordPress debajo de los usuarios> Su perfil Parte 5: Agregue los campos personalizados como un contenido dinámico para agregar una capacitación recomendada para publicar cómo he agregado aquellos ¿Campos personalizados anteriormente en el tutorial? Ahora usaremos esos campos personalizados como contenido para una capacitación presentada en nuestra publicación. Para agregar nuestro contenido de entrenamiento dinámico, primero duplique el giro con dos columnas directamente debajo de la fila con cuatro columnas con todos nuestros metadatos dinámicos. Luego borre los módulos de ambas columnas y agregue un módulo de propaganda a la columna izquierda. Usaremos módulos de propaganda para agregar el contenido dinámico para la sección de entrenamiento. Para comenzar, agregue un nuevo modo de propaganda a la columna izquierda. Para el título, agregue el campo personalizado llamado “Título de entrenamiento” como un contenido dinámico. Luego, para el contenido de la propaganda, agregue el campo personalizado llamado “duración” como un contenido dinámico. Para continuar las cosas, no entraré en detalles el estilo de estos módulos. Pero, deberá agregar un icono de propaganda colocado a la izquierda del título y actualizar el diseño para que coincida con el aspecto. Luego agregue un segundo módulo de propaganda a continuación. Ingrese el texto “Calefacción” como título. Y luego agregue el campo personalizado llamado “calefacción” como un contenido dinámico.
Agregue un tercer módulo debajo, con el título de “peso de levantamiento” y el campo personalizado “levantando el peso” como un contenido dinámico. Debido a que usamos HTML para este valor de campo personalizado, deberá activar el HTML bruto en la ventana emergente de peso.
¡Ahora tiene una sección dinámica para agregar capacitación a su publicación!
Todo lo que tiene que hacer es actualizar los valores de los campos personalizados en el editor de páginas de WordPress predeterminado, y ese contenido se agregará automáticamente al aspecto de publicación sin tener que ingresar al Builder Divi. Parte 6: Diseño de una sección de “temas relacionados” utilizando contenido dinámico para etiquetas publicadas Puede usar contenido dinámico para mostrar etiquetas de publicación y crear una sección de “temas relacionados” con una apariencia interesante para su publicación. Una nueva fila con una columna y agregar una Módulo de texto en una fila. Luego, para el cuadro de contenido, agregue las etiquetas de publicación como un contenido dinámico. Luego actualice las siguientes opciones de etiqueta de publicación: Antes: Temas relacionados: separador de etiquetas: // Nota: Puede usar casi cualquier conjunto de caracteres que desee para el separador de etiquetas, así que no dude en experimentar diferentes para modelos creativos.
Para estilizar el contenido, actualice la siguiente configuración de diseño: Fuente Texto: Oswald Texto Fuente Peso: Texto semi-alineado Color: # FF4C00 Texto: 30 PX Enlace Font: Oswald Enlace Peso Fontan: Enlace de texto semi-volante: # 262D3F Tamaño de texto Enlace: 50 PX Spacing Letter Link: 2 PX Link Line Altura: 1.6 Diseño final vacío.
Parte 7: Agregar una sección de biografía del autor y un comentario en este momento, estará bien equipado para agregar contenido dinámico y ajustar el diseño de su publicación. Con respecto a estos dos últimos elementos. Agregando una sección de autor biológico utilizando contenido dinámico para agregar una sección de biografía de copia en la parte inferior del contenido de publicación, puede usar la publicación dinámica de publicación, la foto de perfil del autor y la biografía del autor. Como puede ver en la captura de pantalla a continuación, creamos una fila de 1/4 columnas 3/4. Luego agregué la foto de perfil del autor de la publicación en la columna izquierda. En la columna derecha, agregué el autor de la publicación con la biografía del autor a continuación. También agregamos el contenido dinámico de la imagen presentada como una imagen de sección para la sección (y una superposición de gradiente). Aquí hay un ejemplo de cómo se vería eso.
Agregando una sección de comentarios utilizando el módulo de comentarios a medida que utilizamos una publicación personalizada de publicación, es posible usar un módulo de comentarios, para que podamos igualar la sección de diseño con la apariencia.Simplemente agregue el módulo de comentarios a una nueva fila de sección que corresponde a los estilos de los botones y fuentes con la apariencia actual.Aquí hay un ejemplo de cómo se vería esto. El diseñador final es el diseño final de toda la publicación después de que se haya ajustado todo el diseño.
