Maquetar una entrada o una página

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.


Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

Agregar gráficos de Bootstrap en la barra del menú superior de la plantilla web

ejemplo del Menú Pharma

Agregar iconos a los botones del menú superior o cualquier otro botón o link de las plantillas para WordPress, es extremadamente fácil. Solo tenemos que ir a la url de Bootstrap donde se encuentra la información de los iconos gráficos: http://getbootstrap.com/components/ y elegir aquel que nos interese.

Bootstrap Glyphicons

En nuestro caso, escogemos el gráfico glyphicon glyphicon-fire que es la llama para insertarlo en Ofertas. Tras seleccionar y copiar el nombre, entramos en la administración del WordPress y nos dirigimos a Menús. En Estructura del Menú, desplegamos el botón Ofertas y, en Atributos del Título, pegamos el nombre seleccionado tal y como mostramos en las siguientes imágenes:

Finalmente, le damos en Guardar Menú y nuestro icono o gráfico ya aparece antes del nombre del botón de nuestro menú superior.

Puntualizar que en nuestro ejemplo, hemos elegido el gráfico glyphicon glyphicon-fire, pero solo tenemos que copiar y pegar el nombre compuesto con guión en medio y descartar el primer nombre. Así para todos los gráficos de Bootstrap.

 

Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

Plantilla Athenea

Configuración, edición y maquetación con Bootstrap.

Plantillas Web AtheneaLa plantilla web Athenea, ha sido desarrollada con el framework Bootstrap en su versión 3.0, para que el usuario que la utilice pueda maquetar los contenidos en páginas, en entradas o en ambas, de forma muy profesional.

Con este artículo, iniciamos una serie de tutoriales para poder dar formato y maquetar aquellos artículos de su interés con la plantilla Athenea o sus derivados, como es el caso de la plantilla web Pharma para las Farmacias o en la siguiente en publicar que será el tema Iber-TV Streaming y que se encuentra en pleno desarrollo.

¿Qué es Bootstrap?

Bootstrap (manos a la obra) es un conjunto de herramientas de software libre en un marco de trabajo (framework) para crear y dar estilo de diseño a páginas y aplicaciones web de una forma muy sencilla sin apenas, conocimientos de programación. Desarrollado por Mark Otto y Jacbod Thornton de Twitter, Bootstrap se ha convertido en uno de los framework más utilizados por la comunidad internacional de desarrolladores web.

Diseño responsive
Diseño responsive

Todas las web que utilizan Bootstrap tienen la particularidad, en la mayoría de ellas, de ser webs totalmente responsive (adaptables) a cualquier formato de dispositivo de visualización, ya sea en dispositivos de sobremesa (PC) como portátiles (móviles smartphone y tablet’s).

Actualmente, millones de sitios webs por todo el mundo están siendo diseñados con Bootstrap y una gran cantidad de tutoriales en diversos idiomas están dando soporte al usuario interesado. Sin duda alguna, Bootstrap es una de las mejores formas de empezar en el mundo del desarrollo web. Aunque es muy imprescindible, inicialmente, tener nociones básicas de HTML y CSS.

Athenea y todos sus derivados, tienen implementado al 100% el framework Bootstrap.

Cómo empezar

Si todavía no tiene instalado en su WordPress la plantilla Athenea, puede adquirla gratuitamente desde esta página de descarga, desde la propia página de WordPress.org o desde el instalador de temas de su CMS WordPress buscando el tema por su nombre.

En caso de que usted esté interesado editar y dar formato en la plantilla Pharma para las Farmacias, puede ver una demo en: http://farmacias.arcillaypie.es y/o descargar la misma con un coste de 21 euros (IVA incluido) desde el siguiente enlace: Comprar Tema Pharma.

De una forma u otra, elija en el siguiente sumario el tutorial con el que desea aprender a editar el formato de su propia web. En este sumario se irá editando y añadiendo nuevos conceptos según se avance.

Sumario

Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.