Cambie el tamaño de la fuente mediante el editor CSS
Las partes de la página web que tienen las fuentes más grandes atraen más la atención, pero no destacan si las fuentes a su alrededor también son grandes. El uso de una variación de tamaños de fuente en su página web añade un contraste agradable.
Tamaños de fuente en varios bloques de contenido
Muchos diseños de plantilla de Webgarden utilizan el mismo tamaño de fuente para toda la página web, al igual que el diseño de la plantilla mostrado a continuación, el cual utiliza el tamaño de fuente 0.75em en todo el contenido.
Por lo que el texto en su página web se vería así.
Pruebe añadir algo de contraste agradable con diferentes tamaños de fuente en varios bloques de contenido.
Puede hacer esto mediante la edición CSS en su diseño de plantilla. Su editor CSS puede incluir selectores tales como .static (tanto para el encabezado y pie de página), .panels (para las columnas izquierda y derecha), y .display (para el bloque de contenido). O puede ajustar, por ejemplo, .top (sólo para la cabecera) o .bottom (sólo el pie de página). Si sólo desea cambiar elementos específicos puede hacerlo utilizando el resaltado.
En este diseño de plantilla podría eliminar la línea que empieza con .page que está subrayada en la imagen de arriba, y sustituirla por el código CSS resaltado según se muestra en la imagen a continuación. (No se olvide de guardar).
Así las fuentes de su página web se verían de esta manera.
Tamaño de los títulos
Puede definir el tamaño para cada uno de sus títulos de una manera similar. No se olvide que siempre hay que especificar un conjunto particular de títulos en el selector. La forma más fácil de hacer esto es sobrescribiendo en el editor CSS las reglas existentes para el diseño de plantilla.
A continuación puede ver cómo encontrar el título correcto (marcado como headline) en el editor CSS. El código CSS de esta imagen utiliza un código de colores para que coincida con la imagen que encontrará más abajo.
A continuación puede ver cómo encontrar el título correcto (marcado como headline) en el editor CSS. El código CSS de esta imagen utiliza un código de colores para que coincida con la imagen que encontrará más abajo.
En este ejemplo los títulos utilizados en el encabezado (.top) son diferentes a los utilizados en el resto de la página web.
Los elementos identificados por las clases .static, .top, .bottom y .panels utilizan h1 (grande), h2 (mediano), y h3 (pequeño) para los títulos insertados por los usuarios. Los títulos generados por Webgarden utilizan h4 - h6.
Sin embargo, para los elementos con la clase .display es exactamente lo contrario. Los títulos insertados en la administración utilizan h4 (grande), h5 (mediano), y h6 (pequeño). Los títulos generados por Webgarden utilizan h1 - h3.
Sin embargo, para los elementos con la clase .display es exactamente lo contrario. Los títulos insertados en la administración utilizan h4 (grande), h5 (mediano), y h6 (pequeño). Los títulos generados por Webgarden utilizan h1 - h3.
Algunos diseños de plantillas tienen selectores de títulos como .parts .item > .headline h1 que son diferentes a los habituales .item > .headline h1. Esto se debe a que todos los elementos insertados por los usuarios en la administración se insertan en .parts y se pueden encontrar en el primero de estos selectores. Por otro lado, los títulos generados por Webgarden (por ejemplo, los nombres de las secciones) no están en .parts. Sólo pueden ser encontrados bajo .item> .headline.