Maquetar una entrada o una página

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.

Ahora vamos a maquetar una entrada o una página

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:

<!-- Ejemplo -->
<div class="page-header">
  <h1>Resultado de maquetación <small>con estilo</small></h1>
</div>
<div class="row">
  <div class="col-md-4">
    <h4 class="text-info"><em>Tres columnas</em></h4>
    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.

    <a href="#" class="btn btn-primary" role="button">Enlace</a>
  </div><!--/md-4-->
  <div class="col-md-4">
     <blockquote class="pull-right text-info">
       <h4 class="text-info text-right"><em>énfasis destacado</em></h4>
       <img class="img-circle alignnone size-medium wp-image-209" alt="Analytics" src="http://www.ibermega.com/img/tutoriales/google_analytics.jpg" width="300" height="247" />
       En esta columna central, podemos destacar cualquier producto, servicio o frase que queramos dar mayor énfasis.

       <small>fácil de implementar gracias a Athenea y Bootstrap</small>
     </blockquote>
  </div><!--/md-4-->
  <div class="col-md-4">
     <div class="well well-sm">
        <h4 class="text-info"><em>Columna resaltada</em></h4>
        <img class="img-rounded" alt="Athenea Responsive" src="http://www.ibermega.com/img/tutoriales/athenea-mobile-300x209.png" />
        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.
     </div><!--/well-->
  </div><!--/md-4-->
</div><!--/row-->
<!-- /ejemplo -->

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