Cómo limitar la longitud del extracto de su div.

Los fragmentos de publicación le dan al lector un pequeño teaser sobre el contenido. Estos se pueden generar automáticamente a partir de contenido o crear manualmente para cada publicación. Independientemente de cómo se creen, es importante tener control sobre su longitud. En este artículo, veremos cómo limitar la longitud del extracto de su módulo de blog Div. También veremos cómo estilizarlo para que funcione excelente con el diseño de su sitio para comenzar. Vista previa primero, veamos qué construiremos. Longitud limitada de extracto en el escritorio

Longitud limitada de extracto por teléfono

Suscríbete a nuestro canal de YouTube
¿Por qué incluir un extracto de publicación?

Un fragmento de publicación ofrece una oración o dos del contenido para ayudar al lector a comprender lo que está a punto de publicar. En lugar de mostrar todo el contenido de la publicación del blog, WordPress muestra un pequeño fragmento del contenido. Esto ayuda a controlar el tamaño de la publicación en el flujo, creando un diseño más limpio, que es más fácil de usar. Le da a su apariencia un aspecto constante en toda la página.

Este fragmento puede ser especificado por el autor o WordPress puede asumir un cierto número de caracteres del primer párrafo para mostrarlos en forma de extracto. WordPress puede usar este fragmento para controlar lo que se muestra en el flujo del blog. Los motores de búsqueda lo usan para mostrar parte del contenido en los resultados de búsqueda.

Para las publicaciones en las páginas de flujo del blog de WordPress, la capacidad de mostrar el fragmento debe activarse en la configuración de lectura. Podemos activar esta opción, pero no nos da control sobre la longitud del fragmento.

El módulo de blog Divi predeterminado el blog de publicación de fragmentos de forma predeterminada. No es necesario ajustar su configuración de WordPress. El módulo ofrece muchas opciones, incluido un campo para especificar la longitud del extracto de publicación. Cómo limitar la longitud de la postariilización del extracto de la longitud de la publicación de la publicación en el módulo de blog Div Div es simple. Primero, coloque el cursor sobre el modo y haga clic en el icono de la rueda para abrir la configuración del módulo.

En la configuración del contenido, desplácese hacia abajo hasta que vea la longitud del contenido. Aquí, tenemos varias opciones para controlar el fragmento de publicación. Estas son la configuración predeterminada. Para limitar la longitud del extracto, simplemente elija mostrar el fragmento e ingrese el número de caracteres que se mostrarán en la longitud del campo.

Longitud del contenido: Mostrar fragmento
Longitud adicional: ingrese el número
Echemos un vistazo más de cerca a lo que hace cada configuración. La longitud del contenido
La longitud del contenido le permite elegir entre mostrar un fragmento y mostrar todo el contenido. Seleccione la pantalla de fragmentos para especificar la longitud de un fragmento. Este ejemplo muestra el contenido.

Longitud del contenido: Mostrar fragmento
Use extractos de la publicación
USA Post Extracts muestra el fragmento opcional especificado por el autor de la publicación en el editor de publicaciones de WordPress. Si la publicación no incluye un extracto creado manualmente, genera automáticamente un extracto del primer párrafo. La longitud del extracto

La longitud del extracto le permite especificar el número de caracteres que se muestran para el fragmento. Esta es la segunda configuración para limitar la longitud del fragmento. Ingrese cualquier cantidad que desee en el campo. El valor predeterminado es 270. Puede ingresar cualquier cantidad que desee mostrar. No hay un número particular de caracteres extraídos que siempre sea el mejor para elegir. El contenido es diferente, el público es diferente y su diseño es diferente. Recomiendo usar un número que mejor se adapte al diseño de la página. Incluso puede hacer algunas pruebas divididas A/B para ver cuál es la longitud del fragmento que funciona mejor para su audiencia.

También es posible ocultar completamente el fragmento. Simplemente desplácese hacia abajo hasta los elementos y deshabilite la pantalla de extracto. Cómo atacar el fragmento de publicación
Ahora que hemos visto cómo limitar el fragmento de publicación, veamos cómo estilizarlo para que coincida con su sitio para mis ejemplos, agregamos el módulo de blog al diseño de la página inicial. Esta página no incluye un módulo de blog. Mostraré cómo peinarlo para que coincida con la página y seleccionaré un fragmento que funcione con el diseño de la página. Nota: para ahorrar tiempo, normalmente copiaría el módulo en la página de destino de este paquete de diseño. En su lugar, comenzaré desde cero y seguiré las colas de diseño en la página inicial y crearé mi propio estilo.

Agregue una nueva sección, una fila y un módulo de blog

Primero, agregue una nueva sección habitual a la sección de características del equipo. Haga clic en el icono Blue Plus y seleccione Regular.
Seleccione una sola fila de columna.

Agregue un módulo de texto en una fila. Esto creará un título para la sección de blog. Luego agregue una nueva fila debajo de la primera. Esta fila contendrá nuestro módulo de división de blog.

Finalmente agregue un módulo de blog en segundo lugar. Este módulo aparece sobre el módulo de texto, por lo que no veremos el título hasta que hagamos ajustes en el módulo de blog.

Ahora es el momento de la peluquería. Configuraremos el módulo de blog a medida que lo estilice.

Estilizar la sección

Primero, estilicemos la sección. Abra las opciones de sección haciendo clic en el icono de la rueda.

Desplácese hacia el fondo y configure el color en #F6F2EA. Cierre la configuración.
Antecedentes: #F6F2EA

Stile el giro

Abra la línea con el módulo de texto. Si el módulo de texto aparece detrás del módulo de blog, puede cambiar a la vista de estructura alámbrica para hacer clic en el icono de la rueda. Vaya a la pestaña de diseño y cambie el ancho máximo a 800 PX. Cierre la configuración de las filas.
Ancho máximo: 800 PX
Destacar el módulo de texto

Abra el módulo de texto, seleccione el Título 2 e ingrese el blog como una sección para la sección.
Estilo de texto: Título 2
Texto: blog

Vaya a la pestaña Design y desplácese hacia abajo hasta el texto del título. Seleccione H2 y elija Archivo, Semi Bold y establezca el color en #010101.
Título: H2
Fuente: archivo

Peso: semi en negrita
Color: #010101
Establezca el tamaño de fuente en el escritorio en 50px y el tamaño de la fuente del teléfono a 20px. Establezca la altura de la línea en 1.35 em.
Tamaño de fuente: escritorio de 50px, teléfono 20px
Altura de la línea: 1.35 em

Establezca la alineación del módulo en el centro y agregue 8px del margen inferior. Cierre la configuración.
Alineación del módulo: centro
Margen hacia abajo: 8px

Stile el módulo de blog
Ahora podemos pasar al módulo de blog. Regresé a la visualización visual en el escritorio. Abra la configuración del módulo. Configuración de contenido Para el módulo de blog de la pestaña Contenido, ingrese 3 para el número de publicaciones.
Número de publicaciones: 3
Elija mostrar el contenido de la longitud del contenido, seleccione para usar extractos de publicación y establezca la longitud del extracto en 300.

En elementos, active la pantalla de imagen recomendada, visite leer más y extraer el botón de visualización. Deshabilite el resto.

Mostrar la imagen presentada: Sí
Mostrar el botón Leer más: Sí

El autor del espectáculo: no

Fecha de visualización: no
Categorías de visualización: no
Muestra el número de comentarios: no
Muestra el extracto: si
Paging de visualización: no
Configuración de diseño del módulo de blog Texto de título
Vaya a la pestaña Diseño. Normalmente personalizaría la superposición, pero la superposición predeterminada funciona perfectamente con este aspecto. Desplácese hacia abajo hasta el texto del título y seleccione H3. Establezca la fuente en archivo, en negrita y color en #010101.
Título del nivel Título: H3
Fuente: archivo
Peso: en negrita

Color: #010101
Establezca el tamaño de texto en el escritorio en 30 px, el tamaño del texto del teléfono a 16 px y la altura de la línea a 1.4 em.
Tamaño de fuente: escritorio 30px, teléfono 16px
4em
Fuente para el cuerpo

Para el texto del cuerpo, elija el archivo, configúrelo en lo ordinario, seleccione negro, configure el tamaño en 15 PX y la altura de la línea del cuerpo a 1.5 EM.
Fuente: archivo
Peso: ordinario
Color: #000000

Tamaño: 15px
Altura de la línea: 1.5 em
Leer más texto
Desplácese hacia abajo hasta la configuración para leer más texto. Elija el archivo, en negrita, tt, configúrelo en negro, el tamaño de 16 px y establezca la altura de la línea en 2.6 em.
Fuente: archivo
Peso: Darestile: TT
Color: #000000

Tamaño: 16px
Altura de la línea: 2.6 em
sangría
Desplácese hacia abajo hasta el espacio y coloque 0VW en el borde superior. Esto pone el contenido bajo el título, por lo que ahora podemos ver el blog por encima del módulo del blog.
Margen superior: 0VW
Frontera
Luego desplácese hacia abajo hasta la frontera. Coloque las esquinas en 0px, ancho a 1px y coloree a negro.
Esquinas redondeadas: 0px

Ancho óseo: 1px
Color: #000000
Sombra de la caja

Finalmente, desplácese hasta la sombra de la caja y apáguelo. Guarde su configuración que haya terminado.
Box Shadow: Ninguno
Como parece en apariencia
Así es como se ve agregado al look. Ahora, veamos cerca del escritorio y el teléfono. Resultados Longitud limitada del extracto en el escritorio
Longitud limitada de extracto por teléfono

Pensamientos finales Esta es nuestra forma de limitar la longitud del extracto de su módulo de blog de Divic. Limitar la longitud del fragmento puede tener un impacto en el diseño de su aspecto. La estilización del fragmento también es fácil con las opciones elegantes del módulo de blog Div. Queremos escuchar de ti. ¿Limitar las publicaciones de publicaciones en su módulo de blog de Divic? Cuéntanos sobre esto en los comentarios.