Una guía útil sobre cómo estilizar las páginas en la división

La paginación es uno de esos elementos de un sitio web que a menudo se pasa por alto, especialmente cuando se trata de diseño. Y hay varios lugares donde la paginación puede ser adecuada para ser utilizada en su sitio web. Básicamente, la paginación (o un menú de paginación) permite a los usuarios navegar a través de varias páginas de artículos (por ejemplo, un archivo de publicaciones). Esto es especialmente útil para reducir el contenido de la página inicial. DIV tiene varios módulos que incluyen paginación (como el módulo de la galería) que se pueden estilizar utilizando la configuración construida. Algunos de estos módulos (como Blog y Portfolio) heredan la paginación predeterminada del DIV (o WordPress), que puede simplificarse para algunos sitios. Pero con la ayuda de un complemento, puede reemplazar la paginación de todo el tema con uno más complejo. Entonces puedes estilizarlo con CSS de todos modos.
En este tutorial, le mostraré cómo estilizar la paginación en todo el Div. Esto es lo que superaremos:
Cosas a considerar al diseñar la paginación en la división
El estilo del módulo de la Galería Div y la puesta en marcha del módulo de cartera de filtros
Estilos de paginación avanzados para el módulo de la galería y el módulo de cartera filtrable
Cambiar el estilo de blog y la página del módulo de Portofol
Agregar página compleja a la división utilizando el complemento WP-Pagenavi
Diseño de WP-Pagenavi Pagonic Pagon
Vamos a empezar. Tire de esta publicación con el ojo se refiere principalmente a la estilización de la paginación. Sin embargo, aquí hay algunos estilos de paginación complejos que te mostraré cómo construir.


Las nociones básicas se suscriben a nuestro canal de YouTube Para este tutorial, necesitará lo siguiente: Tema instalado y activo.
Para probar el diseño de módulos diferentes, necesitará un contenido simulado. Por ejemplo, para diseñar el módulo de cartera (o la cartera de filtración), necesitará unos 12-16 proyectos agregados a su tema, por lo que tendrá suficiente contenido para permitir que la paginación tenga un efecto. Para el módulo de la galería, necesitará unas 12-16 imágenes para completar la galería.
Si desea utilizar el complemento WP-Pagenavi, deberá instalar y activar el complemento. Este es un complemento gratuito que se puede descargar de WordPress Director desde su tablero de WordPress. Simplemente explore el complemento> Agregue un nuevo y busque WP-Pagenavi.
Una vez que haya puesto a disposición un contenido simulado, está listo para crear una nueva página. Desde el tablero de WordPress, navegue por las páginas> Agregar un nuevo. Dale a la página un título e implementa Divi Builder. Seleccione la opción “Construir desde Scratch”. Luego haga clic para construir en el front-end.

Ahora está listo para comenzar a probar algunos modelos de paginación. Cosas a considerar al diseñar la paginación en la división en términos generales, probablemente no desee volver demasiado loco con el diseño de la página, porque, como cualquier menú de navegación, es importante mantenerlo de manera simple e intuitiva. Sin embargo, aquí hay algunas cosas que podría considerar al diseñar la paginación en el Div. La paginación de la paginación de fuentes es un lugar maravilloso para separarse de las fuentes principales que usa para su sitio. Desea elegir las mejores fuentes orientadas hacia las interfaces y la navegación del usuario. Y dado que la paginación contiene principalmente números, debe asegurarse de que la fuente muestre todos los números con igual altura y ancho (lo que los expertos en tipografía llaman revestimiento y tabla). Algunos de mis favoritos conservadores incluyen oxígeno, Nunito Sans y Source Sans Pro. Y si tiene muchas páginas en la paginación, es posible que tenga que liberar espacio yendo con una fuente condensada como FJalla One o Roboto condensada.
Estilo de fuente de paginación también, puede probar algunos estilos de fuentes para diferenciar su paginación. Por ejemplo, puede usar el estilo con letras mayúsculas para hacer las conexiones “próximas” y “anteriores” más pronunciadas e igual a la altura de los números de página. Sin embargo, agregar el estilo de fuente subrayado podría ser un poco redundante, dado que los enlaces ya están en un menú de navegación. El espacio entre las letras de la paginación El espacio de las letras es una excelente manera de agregar un poco más de espacio horizontal para la página. Esto puede agregar un hermoso elemento de diseño y puede hacer que la navegación se destaque. Alinear el texto de la paginación en la división puede alinear fácilmente su página izquierda, central o derecha. Así que no se olvide de esto cuando diseñe su página web. El espacio clicible es importante tener suficiente espacio para hacer clic en sus enlaces de paginación. Por defecto, será bastante pequeño. Puede aumentar el espacio en el que puede hacer clic con texto más grande o aumentando la altura de la línea. Pero también puede agregar algunos rellenos alrededor de estos enlaces con algunos CSS. El tamaño del texto de la paginación El tamaño del texto de la paginación es normalmente bastante pequeño. Es probable que esto le impida distraer a los usuarios del contenido de la página. Sin embargo, si tiene un tamaño más grande del texto, puede aumentar el espacio que puede hacer clic en el enlace de paginación y hacer que los usuarios sean más visibles. Me gusta usar una unidad de longitud VW para un texto de paginación más grande, de modo que coincida con el navegador y el contenido.
La altura de la línea de paginación porque la paginación permanece normalmente en una sola línea, puede escapar agregando un poco más de altura de la línea a los enlaces para agregar espacio adicional en el que se puede hacer clic. La sombra de texto de texto de paginación puede distraer la atención si se usa mal. Es mejor dejarlo fuera, a menos que tenga la intención de mantenerlo sutil. También se puede usar para agregar un brillo creativo alrededor del texto si desea este tipo de cosas. Página de paginación activa Este aspecto de la paginación es importante para permitir a los usuarios saber en qué se encuentra la página al navegar actualmente. Debe haber un claro contraste entre el estilo de enlace de página activo y los enlaces de página inactivos. De manera predeterminada, la diva utilizará el conjunto de colores de acento principal establecido en el tema personalizado como el color de la página activa en el Div. Sin embargo, puede reemplazar esto con la línea CSS.
Para los módulos que tienen una paginación, DIV tiene opciones de diseño incorporadas para estilizar los diferentes elementos de la página. Además, puede agregar fácilmente algunos fragmentos CSS a la pestaña avanzada para un control aún mayor sobre el diseño en un lugar conveniente. Pero para la paginación en el nivel del tema, puede obtener una solución compleja utilizando el complemento WP-Pagenavi con CSS personalizado (más al respecto más adelante). Por ahora, comencemos con el modo de estilización de paginación en los módulos DIVI. El estilo del módulo de la Galería Div y el módulo de cartera de filtros con Builder activo en una nueva página, cree una nueva sección con una fila con una columna. Luego agregue un módulo de cartera de filtro en una fila. Como se mencionó anteriormente, asegúrese de crear 12-16 proyectos creados, para que pueda ver la paginación. En la configuración de la cartera de filtros, actualice lo siguiente: Número: 4 (para que pueda ver más enlaces de página en la paginación) Mostrar el título: hacer No mostrar categorías: no de forma predeterminada, DIV mostrará la paginación, así que deje la opción establecida en sí. Debería ver la paginación en la parte inferior derecha de la cartera.
Para enfatizar la paginación, vaya a la pestaña de diseño y abra el interruptor de texto de paginación para ver todas las opciones disponibles. Actualización de lo siguiente: Apariencia: Pagination Font Grid: Fuente Sans Pro Style Paging Font :: 1VW Altura de la línea de paginación: 2EM
Luego haga clic en la pestaña Avanzada y agregue el siguiente fragmento CSS a la paginación activa de la paginación: Color: #0096eb! Importante; aumentando el texto con una altura de línea más grande, hay más espacio para los usuarios. Cambiar la alineación en el centro y agregar un pequeño espacio entre las letras ayuda a hacer más visibles. Y el color del texto de paginación personalizado, con el color activo del contraste, ayuda al usuario a saber qué página es. Otros fragmentos CSS rápidos son algunos fragmentos CSS rápidos y ligeros para cambiar el diseño del diseño. Para eliminar la línea de borde predeterminada que está directamente por encima de la página, puede ingresar el siguiente CSS en la página de la cartera:
Borde: ninguno;

Para darle a su página una ventaja completa, puede ingresar el siguiente CSS en la página de Paging the Portfolio: Border: 2px Solid #DDDDDD;
Para darle la paginación de un color de fondo, puede ingresar los siguientes CSS en la página de Paging the Portfolio: Background: #333333;
También funciona para el módulo de la galería, la misma configuración de diseño también funcionará para el módulo de la galería. De hecho, puede copiar los estilos de texto de paginación del módulo de cartera de filtros y ¡puede pegarlos en un módulo de la galería! Asegúrese de transferir a cualquier fragmento CSS.
Estilos de paginación avanzados para el módulo de la galería y el módulo de cartera filtrable


Si desea obtener un diseño más avanzado para pagar su cartera de filtros y galería, puede usar algunos CS más avanzados. Lo que me gusta de este ejemplo privado es que el CSS personalizado funciona en conjunto con la configuración de módulo construida. Para demostrar, para usar la cartera de filtros nuevamente. Esta vez, actualice las opciones de diseño con lo siguiente: Apariencia: Paging Tamaño del texto: 16 PX Altura de la línea de paginación: 2.5emsub Avanzado, Agregue la siguiente clase CSS: CSS CLASS: PAGS-SPART Esto permite que nuestro CSS se aplique solo a esto módulo.

Ahora guarde la configuración y abra la configuración de la página emergente. En la pestaña avanzada, agregue el siguiente código CSS al cuadro CSS personalizado. .et_pb_filterabable_portfolio.pagi-space .et_pb_ortofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {

Borde: ninguno;

}

.et_pb_filterabable_portfolio.pagi-space .et_pb_ortofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {

Relleno: 1em 1.5em;

Antecedentes: #EEEEEE;
Border: 1px Solid #EEEEEE;
}
.et_pb_filterabable_portfolio.pagi-space .et_pb_ortofolio_pagination ul li a: hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
Color de borde: #333333;
}
.et_pb_filterabable_portfolio.pagi-space .et_pb_ortofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pba_gallery_pagination ul li a.active {
Antecedentes: #333333;
Color: #ffffff;
Color de borde: #333333;
}
Con el código en posición, puede ver que la paginación ahora tiene más espacio para cada clic en los enlaces de la página. Y los enlaces también tienen colores de fondo agregados, para que se parezcan más a los botones que se pueden hacer clic. Se agrega un borde sutil a cada uno de los enlaces flotantes. La conexión activa de la página se observa para un fondo oscuro contrastante, con un color más claro del texto. Este código estilizará la paginación tanto para el módulo de cartera filtrable como para el módulo de la galería. Asegúrese de agregar la clase CSS “Pagi-Spațiu” a la forma en que tiene un efecto. Aquí está el resultado en el módulo de cartera de filtros. Modificación del estilo de blog y enrazando el módulo de blog del módulo de cartera y el módulo de cartera heredan la fallecimiento predeterminado de WordPress que le permite navegar sus publicaciones con un enlace a “entradas más antiguas” y un enlace a “Siguientes entradas”. Así es como la paginación predeterminada en la página del archivo del blog sobre el tema de Div:
La misma paginación es utilizada por el módulo de blog y el módulo de cartera.
Si usa el módulo de blog (o el módulo de cartera), puede estilizar el texto de la paginación utilizando la configuración Built -in.
Esta es una solución simple y elegante para la mayoría de los casos. Sin embargo, si está buscando una página más compleja para reemplazar la paginación Div / WordPress predeterminada, existe una solución tan ligera que puede sorprenderlo. Agregar la página compleja a la división utilizando el complemento WP-Pagenavi Si desea una paginación más avanzada para todo el tema de la Divicidad, incluido el módulo de blog y el módulo de cartera, puede reemplazar la paginación predeterminada de WordPress con uno diferente utilizando el popular WP-Pagenavi . Este complemento funciona bien con Div. El diseño es básico, pero se puede personalizar fácilmente usando CSS. Agregar el complemento a la división Si aún no lo ha hecho, continúe e instale el complemento como se describe en la sección “Notiones introductorias” en la parte superior de la publicación. Una vez que el complemento esté instalado y activamente, la nueva forma de paginación se mostrará automáticamente en todo el tema. También afectará el módulo de blog y el módulo de cartera.
Configuración del complemento Puede localizar la configuración del complemento en el tablero de WordPress navegando> WP-Pagenavi.

Las configuraciones son principalmente para personalizar la funcionalidad y el contenido de texto que se muestra. Sin embargo, si desea organizar la paginación, deberá usar algunos CSS personalizados. Diseño de páginas WP-Pagenavi con CSS personalizado porque probablemente querrá estilizar la paginación para todo el tema, es muy lógico agregar CSS al personalizador de temas o al archivo de estilo de tema infantil.css. Continúe y coloque el siguiente CSS en el CSS Cass Customizer:/*Styles Los enlaces de paginación WP-Pagenvi*/

.wp-pagenavi a, .wp-pagenavi span {

Relleno: 0.3em 0.8em! IMPORTANTE;

Tamaño de fuente: 2em! IMPORTANTE; COLOR: #333333;

Línea de altura: 2em;

Antecedentes: #EEEEEE;

Transición: todos .5s;

}
/*Estilos el número de página actual WP-Pagenavi*/
.wp-pagenavi span.current {
Color: #ffffff! Importante;
Antecedentes: #333333!
}
/*Estilos de los enlaces de paginación WP-Pagenvi en Hover*/
.wp-pagenavi a: hover {
Color: #ffffff! Importante;
Antecedentes: #333333!
}
/*Estilos del texto de las páginas WP-Pagenavi*/
.wp-pagenavi .pages {
Antecedentes: ninguno;
}
Aquí esta el resultado final.
WP-Pagenavi Styling en el módulo de blog y el módulo de cartera como se mencionó anteriormente, el módulo de blog y el módulo de cartera heredan la página de WordPress predeterminada.Debido a que esto ha sido reemplazado por el nuevo complejo WP-Pagenavi Paging, los módulos también mostrarán esta nueva paginación.Puede usar el diseño integrado del texto de la paginación para agregar un estilo adicional a la página.