Jul 222013
 

En este tutorial vamos a ver la estructura del tema Suffusion y al mismo tiempo conocer los diseños de páginas web más utilizados.

Los diseños que ves a continuación se basan en una imagen de la cabecera del siguiente tamaño 1000px x 204px.

Vamos a mirar a los diseños más comunes. Ver siguientes imágenes:

Diseño 1: Cabecera, barra lateral izquierda, el contenido, la barra lateral derecha y el pie de la pagina.

izquierda-contenido-derecha

Diseño 2: Cabecera, 2 barras laterales en el lado izquierdo, contenido y el pie de página.

2barras-izquierda-contenido

Diseño 3: Cabecera, contenido y pie de la página

tema-suffusion-contenido

Diseño 4: Cabecera, contenido, 1 barra lateral del lado derecho y el pie de la pagina.

contenido-1barra-derecha

Diseño 5: Cabecera, contenido, 2 barras laterales del lado derecho y el pie de la pagina. Nota como una barra lateral es más grande que el otra.

contenido-2barras-derecha

Paso 1: Ingresar a su cuenta de administrador y vaya a Apariencia >> Suffusion Options >> Layouts >> Default Sidebar layout. Ver la siguiente imagen:

suffusion-Diseño

Paso 2: Configure las barras laterales y la posición. Tienes 3 opciones, barras laterales 0, 1 o 2 barras laterales y fijar la posición. Ver la siguiente imagen:

configuracion-normal

Paso 3: El Ancho del diseño de la página. Aquí puedes elegir entre el tema y el margen de los elementos predeterminados o tamaños y márgenes personalizados. En Custom sizes and margins, “Diseños Personalizados” tienes 2 opciones, tamaño fijo o el tamaño fluido. Para este tutorial he escogido el tamaño personalizado y el ancho flexible e fluido. Ver la siguiente imagen:

anchura

Paso 4: La Configuración del ancho fluido para su sitio web. Esta parte es importante debido a su cabecera. Si se aumenta el ancho máximo y es más grande que la imagen de la cabecera, te darás cuenta porque la imagen se achicara o sera muy grande. Así que pon mucha atención a la selección que elijas. Ver la siguiente imagen:

configuracion-fluido

Paso 5: Esta configuración es obvio, se ajusta el tamaño de las barras laterales. Si tienes 2 barras laterales y sabes que una barra lateral tendrá un tamaño diferente a la otra, es aquí donde puedes configurar el tamaño de las barras laterales. Ver la siguiente imagen:

configuracion-barra-lateral

Sugerencia: Depurar de nuevo el tema y volver a comenzar si no estas satisfecho con la configuración.

Hay más opciones que puedes cambiar de acuerdo a tu gusto. Este tutorial te ayudara con la estructura de tu blog o pagina web.

Si tienes alguna pregunta, por favor deje un comentario o mandeme un mensaje.

Volver para más tutoriales de Suffusion, suerte :)

Me llamo Manuel Ballesta Ruiz. Trabajo en informática desde 1999 y disfruto de los desafíos que me trae. Me encanta desarrollar sitios con WordPress. Paso mucho tiempo ayudando en los foros de wordpress.org. He estado escribiendo tutoriales desde 2011. Ahora estoy aprendiendo a administrar mi propio servidor virtual privado VPS.

 Deja un Comentario

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)