Cómo incluir una imagen recomendada de ancho completo en su div.

Las imágenes presentadas en el ancho completo se ven geniales en cualquier publicación de blog. Afortunadamente, son fáciles de agregar usando Divic Builder. Hay varias formas de agregarlos, para que pueda elegir el método que funcione mejor para sus necesidades en este artículo, veremos cuatro formas de agregar un ancho completo a la plantilla de publicación del blog. Vista previa de escritorio de fondo de sección dinámica

Sección dinámica Teléfono de fondo

Desktop de módulo de título post

Publicar el título El módulo del teléfono

Imagen de escritorio por separado

Teléfono de imagen separado

Imagen de ancho completo con un escritorio con modo de texto

Imagen completa con un texto con modo de texto

Acerca de las plantillas de publicación de blog

En primer lugar, deberá crear o cargar una plantilla de publicación de blog. La plantilla de publicación de blog ofrece el diseño que el contenido utilizará cuando se muestra en el frente. Puede obtener publicaciones de blog gratuitas para muchas de las divisiones que buscan en el blog la elegante “plantilla de publicación de blog gratuita”. Descargue el archivo de plantilla y descúplalo. Al cargar la plantilla de publicación del blog en la división del constructor de temas, no tendrá que asignarla. Esto se hace automáticamente. Si construye la plantilla desde cero, deberá asignarla a las publicaciones en la configuración de la plantilla.
Para mis ejemplos, utilizo la plantilla de publicación de blog gratuita para el paquete de la división para el cuidado del hogar. Esta plantilla ya incluye una imagen recomendada. Veremos cómo funciona y veremos otras formas en que podemos agregarlo. Cargue la plantilla de publicación de blog

Para cargar el archivo de plantilla de blog JSON, vaya a Divin> temas Builder en el tablero de WordPress. Seleccione la portabilidad en la esquina superior derecha y seleccione la pestaña Importar que se abre. Navegue al archivo obsoleto y seleccione. Haga clic en Importar plantillas de constructor de temas Div Div y espere a que la importación finalice. Haga clic en Guardar cambios. La plantilla se asigna automáticamente a todas las publicaciones. Agregue una imagen de ancho completo a la plantilla de publicación del blog
Haga clic en el icono de edición para abrir la plantilla.

Esta plantilla muestra el meta en la parte superior de la pantalla, seguido de categorías, el título de la publicación, un formulario de registro en el boletín, el contenido del contenido, los comentarios y un CTA. Agregue una imagen de ancho completo a la plantilla de publicación de blog con un fondo de sección dinámica

Primero, veamos el método que usa esta plantilla. La imagen presentada se selecciona dinámicamente en el fondo de la sección. Incluye un gradiente lineal blanco con una dirección de 90 grados, una posición inicial del 35%, una posición final del 90% y se coloca sobre la imagen de fondo.

Primer color: #ffffff
Segundo color: RGBA (0.0,0,0)
Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición de inicio: 35% (45% para tableta)
Posición final: 90%
Coloque el gradiente sobre la imagen de fondo: sí
Seleccione la imagen y haga clic en el uso de contenido dinámico.

Seleccione la imagen presentada en la parte superior de la lista. Salva y sale. La imagen presentada ahora aparecerá detrás del contenido de esa sección. Agregue una imagen de ancho completo a la plantilla de publicación del blog con el módulo de publicación

Primero, borre la fila con la categoría y publique el texto del título. Estos son módulos de texto. Los reemplazaremos con un módulo de publicación de publicación. Se vio que tenía una sección con la imagen de fondo y un módulo de opción. Abra la configuración de la sección.

Desplácese hasta opciones de fondo, seleccione gradiente y elimínelo.

Seleccione la imagen y elimínela. Sección de ancho completo

Coloque el cursor sobre la sección superior y haga clic en el icono azul para agregar una nueva sección. Seleccione el ancho completo.

Cuando se abre el módulo modal, seleccione el módulo de título de Post FullWidth.

Seleccione para mostrar el título, meta, categorías de publicación y imagen presentadas. Desactivar el autor, la fecha y el número de comentarios. Para colocar la imagen recomendada, seleccione la imagen de fondo/fondo de metal.

Mostrar el título

Muestra meta
Activar Publicaciones de Categorías Pantalla
Muestra la imagen recomendada
Colocación de la imagen recomendada: Título/Meta de fondo
Abra la pestaña de diseño y ejecute el texto del título. Seleccione Poppins para fuentes, semi bobos para peso y cambie el color de texto a #000763.
Fuente: Poppins

Peso de fuente: semi-aldine
Color: #000763
Establezca el tamaño de texto en 72 PX para el escritorio. Seleccione el icono de la tableta y seleccione 40px. Seleccione el icono del teléfono y configúrelo en 34 PX. Establezca la altura de la línea en 1.3 em.
Tamaño de texto: 72 PX (tableta 40 Px, 34 PX)

Altura de la línea: 1.2 em
Desplácese en el meta texto y elija Poppins para fuentes, semi voltado por peso, alineación en el centro y cambie el color de texto a # E53796. Establezca el tamaño de texto en 20px para el escritorio. Seleccione el icono del teléfono y seleccione 14px.
Fuente: Poppins

Peso de fuentes: semi-aldeado: #E53796
Tamaño de texto: 20px (teléfono 14px)
Alineación: centro
Desplácese hacia abajo hasta el espacio y establezca el margen inferior a 10px. Establezca el relleno derecho en 300px para el escritorio y 0px para su teléfono.
Marja: 10 píxeles a continuación
Llenado: derecho 300px (teléfono 0px)

Agregue el gradiente
Si desea tener el mismo gradiente que el original, abra la pestaña de contenido, desplácese hacia abajo hasta el fondo. Elija el gradiente y establezca el primer color en #FFFFFF y el segundo color en RGBA (0.0,0,0). Elija lineal para el tipo. Establezca la dirección en 90 grados, la posición de inicio al 35% y la posición final al 90%.
Primer color: #ffffff
Segundo color: RGBA (0.0,0,0)

Tipo de gradiente: lineal
Dirección de gradiente: 90 grados
Posición inicial: 35%
Posición final: 90%
Coloque el gradiente sobre la imagen de fondo: sí
Vaya a la pestaña de diseño, desplácese y establezca el relleno inferior en 0px. Guarde la configuración y cierre el generador.
Llenado inferior: 0px
Agregue una imagen de ancho completo a la plantilla de publicación del blog con una imagen separada por su cuenta

Abra la configuración para la sección y las categorías posteriores a la publicación.

Desplácese hasta el fondo. Seleccione el gradiente y elimínelo.
Seleccione la imagen y elimínela. Cierre la configuración.

Agrega una nueva fila

Coloque el cursor sobre la fila de título y haga clic para agregar una nueva fila. Agregue una sola fila de columna y tire de la fila encima del giro con el título.

Coloque el cursor sobre la nueva fila y haga clic en el icono gris para agregar un nuevo módulo. Busque la imagen y agréguela en una fila.
Elimine la imagen del sustituyente.

Seleccione usar contenido dinámico.

Luego seleccione la imagen recomendada de la lista. Seleccione la pestaña de diseño y desplácese. Habilitar Force FullWidth.

Forzamiento de ancho completo: sí

Abra la configuración de la fila y seleccione la pestaña Diseño. Establezca el ancho y el ancho máximo al 100%.

Ancho: 100%

Ancho máximo: 100%
Desplácese hacia abajo hasta el espacio y agregue -84px al margen superior. Guarde su trabajo y cierre el constructor.

Marja de Sus: -84
Agregue una imagen dinámica completa con un módulo de texto
Primero, abra la configuración para la sección que incluye publicar detalles y eliminar el gradiente y la imagen dinámica del fondo de la sección.

Luego establezca el fondo de fondo y cierre la configuración.
Antecedentes: #ffffff
Coloque el cursor sobre la sección y haga clic en el icono azul para agregar una sección normal debajo. Agrega una nueva fila

Agregue una sola fila de columna.

Abra la configuración de la fila y agregue 100% para el ancho y el ancho máximo por debajo del tamaño. Cierre la configuración de las filas.
Ancho: 100%

Ancho máximo: 100%

Luego agregue un módulo de texto en una fila.

En la configuración del módulo de texto, elimine el contenido falso del editor de texto.
Desplácese hacia abajo hasta la configuración de fondo, elija la pestaña Imagen y seleccione usando el contenido dinámico.
Seleccione la imagen recomendada de la lista.

Seleccione la pestaña de gradiente y elija blanco para el primer color y el blanco sin opacidad para el segundo color. Mantenga lineal para el tipo y establezca la dirección en 90 grados, la posición inicial al 35% y la posición final al 90%. Verifique para colocar el gradiente sobre el fondo.

Primer color: #ffffff

Segundo color: RGBA (0.0,0,0)

Tipo: lineal

Dirección: 90 grados
Posición inicial: 35%
Posición final: 90%
Coloque el gradiente sobre la imagen de fondo: pestaña Dasese de diseño y ejecute el espacio. Agregue 200 píxeles para el relleno superior e inferior. Cierre la configuración del módulo.
Llenado: 200 PX (arriba, abajo)
Abra la configuración de la sección para la opción Boletín. Haremos ajustes para que el boletín informativo aparezca por encima de la imagen presentada.
Tendremos que establecer el índice Z más alto que la segunda sección. Vaya a la pestaña avanzada y corra hacia abajo. Establezca el índice Z en 10. Cierre la configuración.
ÍNDICE Z: 10

A continuación, debemos reducir el espacio entre la imagen presentada y el contenido de la publicación del blog. Abra la configuración de la fila que contiene el contenido de la publicación del blog.
Seleccione la pestaña de diseño, desplácese y agregue -160px al margen superior. Cierre la configuración.

Marja, desde arriba: -160px

Abra la configuración de la sección del módulo de texto y agregue el relleno 0px para la parte superior e inferior. Cierre su configuración y guarde su trabajo.
Llenado: 0px (arriba, abajo)

Resultados de escritorio Sección dinámica de fondo

Sección dinámica Teléfono de fondo
Desktop de módulo de título post

Publicar el título El módulo del teléfono
Imagen de escritorio por separado
Teléfono de imagen separado

Imagen de ancho completo con un escritorio con modo de texto

Imagen completa con un texto con modo de texto