Diseño de página  //  Opciones de Diseño

Inicio » Diseños » Opciones de Diseño

Norma de diseño

La página predeterminada es la disposición estándar utilizada para las páginas de contenido. Contiene una sección de contenido y una sub-navegación. Este diseño puede ser invertido para mostrar el contenido y la sub-navegación a cada lado, dependiendo de sus preferencias.

Para lograr este diseño de crear dos div y agregar la clase de "two-thirds" a una clase de "one-third" al otro. El orden de las etiquetas determinará si usted tiene una barra de sub-navegacion a la izquierda o a la derecha.

Diseño con navegación de la derecha

<div class="two-thirds">Su contenido aqui.</div>
<div class="one-third">Sub-navegation aqui</div>

Ver una página de ejemplo que utiliza este diseño.

Diseño con navegación de la izquierda

<div class="one-third">Sub-navegacion aqui</div>
<div class="two-thirds">Su contenido aqui.</div>

Ancho máximo de diseño

El diseño de página completa utiliza todo el ancho del área de contenido. No tiene una sub-navegación o la barra lateral por lo que es una buena opción para las páginas de textos amplios, o descripciones.

Esta disposición sólo requiere una sola div con la etiqueta class de "página completa".

<div class="full-page">Su contenido aqui.</div>

Ver una página de ejemplo que utiliza este diseño.

Presentación del estilo del Blog

El diseño de blog ofrece un menú a la izquierda o a la derecha dependiendo de su preferencia. Cada entrada tiene un diseño de síntesis y el diseño artículo completo. Este formato también se puede utilizar para artículos de noticias o cualquier otra estructura de contenidos.

Las opciones de diseño de izquierda y derecha para el blog se efectúa por el mismo margen como la página predeterminada.

Ver una página de ejemplo que utiliza este diseño.

Diseños Multi-columnas

El diseño de dos columnas utiliza todo el ancho de la página de contenido. No está destinada a tener sub-navegación, pero puede tener una si lo desea. Este diseño es muy adecuado para las páginas de destino antes de una sección de contenido, por ejemplo "la empresa" y páginas de "contacto".

El diseño de tres columnas iguales utilizando 3 columnas de ancho. Todo esto puede incluir contenido o si lo desea, la puede adaptar a cualquiera de las tres columnas en una sub-navegación.

Diseño de 2 columnas

Requiere dos etiquetas div con la class "half-page".

<div class="half-page">El contenido de la primer columna.</div>
<div class="half-page">El contenido de su segunda columna.</div>

Ver una página de ejemplo que utiliza este diseño.

Diseño de 3 columnas

Requiere tres etiquetas div con el class "one-third". Al igual que la página por defecto, el orden de las etiquetas se introducen en el código y determina el orden de aparición en la página.

<div class="one-third">Sub-navigation (optional)</div>
<div class="one-third">Contenido de la primer columna.</div>
<div class="one-third">Contenido de la segunda columna.</div>