Editor CSS

Hemos llegado a una parte fundamental del desarrollo web y es el agregar estilos CSS a nuestra página para modificar su aspecto estético y hacerla más atractiva visualmente.

Agregar estilos CSS a tu sitio web

Una vez que tenemos creada la estructura en HTML y hemos definido nuestras clases, vamos a dirigirnos a las herramientas de desarrollador y seleccionaremos la opción de Editor CSS.

Al hacerlo, se desplegará una ventana del lado derecho de nuestro MGPanel con un editor de código, el cual funciona como una hoja de estilos CSS. Allí podemos agregar los estilos desde cualquier lugar donde nos encontremos en el CMS.

Puedes agregar tantos estilos como necesites en tu sitio web. Te recomendamos dividirlos por secciones usando comentarios para que mantengas un orden dentro del editor.

Nota: MGPanel V11 acepta únicamente estilos CSS. Esta versión NO PERMITE el uso de código de preprocesadores como SASS o LESS.

CSS Base

A medida que vayas dando forma a tu sitio web en MGPanel te encontrarás con que algunas etiquetas HTML o ciertas clases de Bootstrap tienen estilos CSS aplicados; esto se debe a que este CMS cuenta con una hoja de estilos incorporada por defecto para facilitar la presentación de los elementos que se forman automáticamente como los productos, la tienda y el blog.

También se establecen otros estilos funcionales como el tamaño de la letra y de las diferentes etiquetas H. Sin embargo, todos estos estilos puedes sobrescribirlos desde el Editor CSS a tu gusto.

MGPanel da prioridad a los estilos escritos desde el Editor CSS por lo que no debes preocuparte por los estilos por defecto del CSS Base.

Respaldar CSS

Una vez que hayas agregado estilos a tu página y esta tenga el aspecto que quieres, es buena practica crear un respaldo de tu CSS antes de continuar realizando cambios estéticos, de modo que si algo no te convence puedas revertir los cambios que hayas hecho. También por seguridad te recomendamos que hagas respaldos periódicos por si cometes un error durante la edición y guardas un CSS “dañado”.

¿Cómo respaldar mis estilos CSS?

Para respaldar tu CSS debes abrir tu Editor CSS y activar la opción de “Respaldar Código” ubicada a la izquierda del botón de Guardar, luego basta con darle click a Guardar y todo tu CSS quedará respaldado en un archivo.

¿Dónde veo mis respaldos de CSS?

Si deseas ver el archivo de respaldo de tus estilos CSS, dale click al botón de “Ver respaldos” ubicado en la esquina superior derecha de tu Editor CSS.

Responsive Web Design y CSS Media Queries

Actualmente las personas pueden ingresar a tu sitio web desde múltiples dispositivos, con múltiples tamaños de pantalla, por lo que debes tratar de mantenerlo presentable para cada uno de ellos. Hacer que tus sitios web se vean bien en todos los dispositivos se conoce como Responsive Web Design y CSS te permite hacerlo usando una propiedad especial llamada Media Queries.

Las Media Queries te permiten agregar estilos adicionales que apliquen a partir de ciertos tamaños de pantalla.

En MGPanel tenemos definidos los Media Queries más usados en la actualidad y que permiten ajustar tu sitio web de la forma más eficiente. Sin embargo, puedes agregar los Media Queries que necesites o cambiar los que establecemos por defecto para ti.

Diseño Mobile First

Esta técnica de diseño te permite crear tus sitios web priorizando la versión para smartphones y adaptarlo para tamaños de pantalla más grandes. Cuando aplicas el método Mobile First también debes agregar Media Queries específicos a tu CSS orientados a cambiar el aspecto de la página conforme incrementa el tamaño de la pantalla.

MGPanel te permite aplicar esta técnica de Diseño Web Responsivo para que tengas total libertad al desarrollar tus sitios web.