En Webgarden hay 4 opciones predefinidas que puede utilizar para resaltar los elementos importantes de su página web. Si desea cambiar cualquiera de las opciones, puede hacerlo mediante la edición del código CSS.

Las opciones disponibles automáticamente con cada diseño de plantilla han sido elegidas para coincidir perfectamente con cada diseño gráfico específico. Realice los cambios con cuidado y con prudencia para que su página web mantenga un aspecto con un diseño uniforme.

Le recomendamos que primero realice cualquier cambio con una página web de prueba. Su página web de prueba no será accesible a los visitantes normales, y por lo tanto no perjudicará a su página web principal.

En su página web de prueba, cambie el diseño de la plantilla para que coincida con la de su página web principal. Luego, en la “Sección A” cree cuatro elementos de párrafo de texto uno al lado del otro. Cada uno debe contener algún texto.

Ahora vaya a la página web para visualizar cómo se ve.

Resalte cada uno de los elementos de párrafo de texto utilizando una opción predefinida diferente. Esto le permitirá visualizar como se ven todas las opciones antes de hacer cualquier cambio.

Las opciones de resaltado se verán en la administración de una forma parecida a la que muestra la imagen inferior, pero no significa que se vean de la misma manera en la página web.

Una vez haya hecho esto, asegúrese de ir a su página web para visualizar cómo se ven realmente las diferentes opciones.

Una vez que haya visto todas las opciones predefinidas podrá decidir cuál le gustaría cambiar. Para este ejemplo, vamos a cambiar el “Modelo 1”.

Vaya a la pestaña “Diseño” y de la columna izquierda seleccione “Editar CSS”. En el editor CSS las opciones individuales de resaltado están listadas bajo /* GROUPS */ como .highlight01 - .highlight04. En este diseño de plantilla en particular, hay una gran cantidad de código para los resaltados, pero para este ejemplo centrará su atención en el código de la parte superior.

En el editor CSS podemos ver que .highlight01 tiene un color de fondo y un color de fuente específico. El color se ha indicado mediante el esquema RGB. Los valores individuales especifican la proporción de rojo, verde y azul. Los números de 0 - 255 representan la intensidad del color. Así que 0 significa que nada de ese color está presente, mientras que 255 significa que está en su intensidad máxima. Por lo tanto rgb(0,0,0) es negro y rgb(255,255,255) es blanco. En este caso, el color de fondo es rgb(21,54,71), lo que significa que es un tono azulado. Si desea cambiar el color de fondo a un tono grisáceo y que tenga un borde negro de 2 pixeles de ancho, sólo tiene que cambiar los valores según se indica en la siguiente imagen.

Ahora vaya a la página web para visualizar cómo se ve.

Ahora ha creado una opción de resaltado con un buen contraste que va bien con el fondo blanco de la página web. Al mismo tiempo ha mantenido un esquema de color adecuado para que todo se ajuste perfectamente.

Aunque Webgarden sólo ofrece 4 opciones predefinidas, mediante la ramificación puede crear muchos más. Por ejemplo, puede definir “Modelo 1” cuatro veces (para el encabezado, las columnas laterales, el contenido y el pie de página) utilizando los selectores .top .highlight01, .panels .highlight01, .display .highlight01, y .bottom .highlight01.