Utilizar un resaltado personalizado

Webgarden ofrece 4 opciones de resaltados predefinidos que varían según el diseño de la plantilla, que incluso pueden afectar a la tipografía, pero el número de opciones de resaltados personalizados que puede crear usted mismo es infinito.
Cómo utilizar un resaltado predefinido
Si usted tiene un elemento que debe destacarse en su página web, resáltelo. Las opciones predefinidas son la manera más fácil.

Imaginemos que en esta página web, desea destacar a los clientes el número de teléfono situado en la esquina inferior izquierda. En ese caso resáltelo.
resaltado_1.png
Desde la administración de la página web haga clic en el elemento que desea destacar para que aparezca el cuadro de diálogo. Seleccione la pestaña “Avanzado” y elija la opción de resaltado que desea del menú desplegable “Resaltado”. Luego haga clic en “Guardar”.
resaltado_2.png
Ahora vaya a su página web para visualizar cómo se ve.
resaltado_3.png
Pruebe las 4 opciones del menú desplegable para ver lo que hacen en su plantilla. Asegúrese de visualizar su página web. A menudo lo que se ve en la administración es diferente.
Cómo utilizar un resaltado personalizado
Si no le gusta ninguna de las opciones predefinidas, puede crear la suya propia. Esto se puede hacer con o sin el uso de CSS.

Desde la administración de la página web haga clic en el elemento que desea destacar para que aparezca el cuadro de diálogo. Seleccione la pestaña “Avanzado” y elija la opción “Personalizado” del menú desplegable “Resaltado”. Introduzca un nombre para el resaltado personalizado (es posible que desee tomar nota del nombre que elija), y luego haga clic en “Guardar”.
resaltado_4.png
Resaltado personalizado con CSS
Si desea utilizar CSS para añadir su resaltado personalizado, introduzca el código necesario en el Editor de CSS.

Para ello haga clic en la pestaña “Diseño” en la parte superior de la pantalla y seleccione “Editar CSS”.
resaltado_5.png
Vaya a la parte inferior del editor CSS para introducir el código.

El nombre que ha introducido para su resaltado personalizado es ahora el nombre de clase del elemento HTML. Así que su selector CSS podría ser algo como “.Modelo5”.

Si desea que el elemento tenga un texto blanco sobre un fondo azul oscuro, escriba algo como:
.Modelo5 {
background: rgb(14,11,50);
color: rgb(255,255,255);
}
La primera propiedad especifica el color de fondo, y la segunda especifica el color de la fuente.

No se olvide de guardar.
resaltado_6.png
Ahora vaya a su página web para visualizar cómo se ve.
resaltado_7.png
Resaltado personalizado sin CSS
Si usted no está familiarizado con CSS, puede añadir su resaltado personalizado utilizando la “Edición del diseño”.

Para ello haga clic en la pestaña “Diseño” en la parte superior de la pantalla y seleccione “Edición del diseño”.
resaltado_8.png
Pase el cursor sobre el elemento que le gustaría destacar hasta que se vuelva amarillo, y luego haga clic en él. Si el elemento no está en la página de inicio, cambie al “Modo de Navegación” para navegar en la misma y cuando encuentre el elemento deseado vuelva a cambiar nuevamente al “Modo de edición de diseño” para poder seleccionarlo.
resaltado_9.png
En el cuadro de diálogo que aparece, verá una lista de todas las capas individuales. Seleccione la capa que incluye el nombre que acaba de introducir para su resaltado personalizado.
resaltado_10.png
Se abrirá el cuadro de diálogo “Editar estilo”. Elija el color de fondo que desea utilizando el botón pequeño de la derecha. De la misma manera elija el color de la fuente. Realice los cambios que desee y haga clic en “Guardar”.
resaltado_11.png
Ahora vaya a su página web para visualizar cómo se ve.
resaltado_12.png
Los cambios realizados en “Edición del diseño” también aparecen en el “Editor CSS” bajo /*WEBGARDEN_EDITOR*/.

Estos ejemplos se realizaron utilizando un diseño de plantilla de la serie 145. Es posible que tenga que hacer algunos ajustes adicionales con otros diseños de plantilla para lograr resultados similares. Si usted necesita alguna ayuda con el resaltado personalizado, no dude en ponerse en contacto con Soporte Webgarden.
11.06.2015 19:51:11
info
Name
Email
Comment
Or visit this link or this one