Soporte CSS para páginas y publicaciones

El soporte CSS a nivel de página y a nivel de las publicaciones, te proporciona un acceso rápido y sencillo al CSS de una página. Esto te da la posibilidad de alterar rápidamente el estilo de cualquier elemento de tu página sin ajustar el código del tema actual. ¡Incluso puedes agregar tus propios micro-temas aquí!

Esto es ideal para las actualizaciones de estilo en una página o publicación específica cuando lo necesites realizar, pero no en todas las publicaciones que utilizan ese tema. ¡Incluso podrás ver los cambios de tu CSS directamente en tu página mientras lo editas!

Para editar la publicación o el CSS de la página, simplemente haz clic en el botón Creative & Page CSS en la pestaña Page e introduce tu CSS dentro del menú desplegable disponible.

 

1-Jan-21-2021-12-19-28-84-PM

Creative CSS

El estilo del "Creative CSS" se aplicará en todas las páginas dentro de tu publicación. Si editas esto en una página dentro de tu publicación, se aplicará inmediatamente a todas las demás páginas.

El Creative CSS es útil cuando tienes un elemento que puede que no necesita ser parte de tu tema. Por ejemplo, un cambio de color de un botón que no deseas que se aplique a ninguna otra publicación, pero que quieres utilizar en esta publicación.

También puedes utilizar las etiquetas específicas de la plataforma ion para definir un micro-tema que solo está disponible en esa publicación o página. Una vez que guardes, se actualizará la página y podrá utilizar instantáneamente el nuevo micro-tema.

 

Page CSS

El "Page CSS" solo se aplicará a la página donde te encuentras dentro de una publicación. Si realizas ediciones en el Page CSS, solo se guardará y se aplicará a esa página.

El Page CSS es útil para aplicar CSS específico de página, como cambiar la altura de un elemento que aparece en cada página.

 

Media Queries

Otro gran caso de utilidad para las Creative y Page CSS es cambiar el estilo usando un "Media queries CSS" para diferentes ventanas gráficas en lugar de mostrar y ocultar múltiples versiones de un elemento específico.

Por ejemplo, puede haber ocasiones en las que quieras que los títulos <h1> tengan un tamaño diferente en la ventana gráfica XS sin mostrar u ocultar diferentes versiones de ese título.

Se puede agregar una "media query" al Creative or Page CSS para cambiar el tamaño de la ventana gráfica XS (767 px de ancho o más pequeño).

 

  • A continuación, encontrarás un ejemplo de una media query que se puede utilizar para hacer <h1> titulares 1.2 en la ventana gráfica XS:

@media screen and (max-width: 767px) {

h1 {font-size: 1.2em;}

}

  • A continuación, se muestra una configuración de media queries basada en los 4 tamaños definidos en la plataforma de ion:

 

/*MEDIUM SCREENS*/

@media screen and (max-width: 1199px) {

}

/*SMALL SCREENS*/

@media screen and (max-width: 991px) {

}

/*EXTRA SMALL SCREENS*/

@media screen and (max-width: 767px) {

}

 


Si tiene alguna pregunta, póngase en contacto con nosotros en help@rockcontent.com. 😀