Maquetación Profesional

En este nuevo tutorial vamos a maquetar con Bootstrap una entrada o una página de WordPress para mostrar un formato totalmente profesional con tan solo unas línea de código.

Es importante contar con la plantilla de WP Athenea o cualquier otra que lleve integrado el framework Bootstrap 3.0 o superior, para la práctica de este tutorial.

Para empezar, añade una nueva entrada o página y pega el siguiente contenido desde la pestaña “Texto” de la caja de redacción de tu WordPress. Es muy importante tener la plantilla web Athenea para poder hacer este tutorial:

Tres columnas

Como vemos en este sencillo ejemplo, con solo editar código desde la pestaña “Texto” de tu WordPress, podemos dar un estilo único a tu nueva entrada o página en la plantilla web Athenea.

En este ejemplo, agregamos un título principal con tres columnas dentro de una nueva publicación.

La columna central la alineamos hacia la izquierda y damos formato en círculo a la imagen para completar la columna destacada.

Además podemos, como mostramos abajo, convertir un enlace en botón.

Enlace

énfasis destacado

Google Analytics
En esta columna central, podemos destacar cualquier producto, servicio o frase que queramos dar mayor énfasis.

fácil de implementar gracias a Athenea y Bootstrap

Columna resaltada

Athenea Responsive
También podemos resaltar una de las columnas como en este ejemplo.

Resaltar una columna junto a un énfasis destacado o sin este, nos da la sensación que estamos observando una publicación completamente profesional que nos incitará a leer el artículo por completo.


Como podemos observar, lo que hemos hecho es agregar varios div con las clases en CSS 3 que lleva integrado la plantilla web Athenea gracias al framework Bootstrap, en la caja de redacción de una entrada o página sin necesidad de más código. El contenido va encerrado entre las clases page-header para el título y col-md-4 para las columnas con sus respectivos contenidos. Así mismo, todas las columnas están dentro de una única clase que es row.

En la columna central, dentro del div col-md-4, hemos puesto un blockquote alineado a la izquierda con texto color azul gracias a la siguiente clase: pull-right text-info. La imágen la hemos redondeado con la clase img-circle. Y La frase que termina la columna central se encuentra dentro de las etiquetas de apertura y cierre small.

Para la última columna, solmente se ha añadido dentro de la clase col-md-4, un nuevo div con la clase well well-sm dando formato a la tercera columna con un fondo gris claro y bordes redondeados.


Fuente: http://getbootstrap.com/css/#grid

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde http://www.ibermega.com/themes e instalarlas para practicar con este y otros tutoriales. Ver índice.

Aconsejamos que cuando crees una entrada o una página no la publiques directamente. Solo guardala y si quieres ver los resultados, pulsa en “Vista previa”. Cuando la tengas lista, publícala con garantías de una perfecta visualización exenta de errores.

Por experiencia, nada más publicar una entrada o una página, los robots del buscador Google que pasaban en ese momento, nos han indexado la publicación en sus directorios mostrándo los errores y fallas que estaban por corregir. Si esto ocurre, no podremos hacer nada hasta que vuelva a pasar el rastreador del buscador, que en algunas ocasiones, puede tardar hasta 30 días.


También te puede interesar

Un pensamiento en y Maquetar una entrada o una página & rdquo;

Inserta un comentario

El correo no se mostrará ;)