Usar la opción CSS para crear páginas

Crear páginas más complejas, fáciles de modificar y dinámicas, es posible con la herramienta de creación de páginas.

Puedes ir más allá aplicando “Class” y “ID” para aplicar un estilo únicamente al contenido de un bloque, sin cambiar los estilos de otras líneas de la página.

Para este tutorial se necesitan nociones en CSS pero toma en cuenta que es posible agregar simplemente estilos en las páginas o en imágenes.

Definiciones

Le CSS: es el lenguaje que es usado para definir el aspecto de tu sitio.

Para personalizar el diseño de tu sitio, puedes usar formularios en Configuración> Diseño> Personalizar. También puedes utilizar CSS en las zonas suplementarias o personalizar en su totalidad el diseño de tu sitio activando el modo experto. Para mayor información acerca de este tema te recomendamos este tutorial: Elegir y personalizar el diseño.

Un class y un ID son atributos que sirven para aplicar estilos CSS de un contenido en una página, no hay mucha diferencia entre estos dos atributos. Sin embargo un ID no puede ser utilizado más que solo una vez en una página.

Podrás utilizar los ID como anclas (es decir para crear un link hacia un lugar precioso dentro de una página).

Los ID están declarados en una hoja de estilo con la firma almohadilla (#nombre-del-id). Los class están definidos con un punto (.nombre-de-la-class).

Ejemplo de la realización: Modificar los estilos de un texto con un ID

Es posible de agregarlo en forma de texto con la barra de herramientas del editor visual ( como remarcar en negritas, en itálica, cambiar la talla o el tipo de letra). Sin embargo, es preferible de hacerlo en CSS si sabes que estos estilos deberán ser utilizados en repetidas ocasiones en diferentes páginas de tu sitio. Es el caso de nuestro ejemplo:

Con el fin de conservar una coherencia gráfica entre todas nuestras páginas, decidimos aplicar el mismo estilo por cada texto de introducción de cada página del sitio (también es el caso para los tutoriales de emiweb por ejemplo). Para obtener (como en la captura de la derecha en la parte de abajo) un texto más separada, más grande, con un borde y un margen en la parte inferior, vamos a crear un ID.

Creación del ID en una zona CSS

Para agregar CSS a tu tema existante:

Dirígete a Configuración > Diseño> Personalizar
En la parte de abajo, dar click en Editar/ Añadir código CSS a la plantilla
Este codigo CSS se agregara al CSS del tema
Si cambias de tema, este CSS no será conservado

Uso del ID en la línea

El ID fue creado en Configuración>Diseño> Personalizar
Tambien puedes crearlo en Configuración>Ajustes> Zonas editables, en la parte Estilos CSS adicionales
Para modificar el ID en la línea, modifica tu pagina dado click en el botón Diseño (que se encuentra en la parte de abajo a la izquierda de cada línea), selecciona el estilo Avanzado(class/ID) e indica el nombre del ID que has creado.

Los estilos definidos por un ID “introducción” serán aplicados al contenido del bloque. Esto quiere decir que el texto de este bloque será de 15Mpx, tendrá un borde de 2Mpx, el texto estará justificado, etc. No podrás utilizarlo dos veces este ID en esta página.

Antes de la aplicación del estilo

Después de aplicar el ID y el estilo