Accesos
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 -->

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

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

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.


¡SIGAMOS EN CONTACTO!

¡Nos encantaría tenerte al día con nuestras últimas noticias y ofertas! 😎

¡No enviamos spam! Lee nuestra política de privacidad para más información.

Publicaciones relacionadas

¿Qué es el multisite de WordPress?

¿Qué es el multisite de WordPress?

El multisite de WordPress es un CMS (es decir, no hay que instalar nada especial, sólo activarla) que permite gestionar una red de webs desde una sola instalación de WordPress que, aunque nació como solución para blogs, actualmente cuenta con funcionalidades y capacidades que le hacen capaz de adaptarse a multitud de necesidades. Una de […]

¿Qué es Akismet? Plugin nº1 de WordPress

¿Qué es Akismet? Plugin nº1 de WordPress

Akismet es un plugin para WordPress que se encarga de filtrar los comentarios de spam en tu web o blog. Fue creado por Automattic, la misma empresa que creó WordPress, así que es totalmente compatible y no da ningún problema. Básicamente el plugin Akismet se encarga de identificar los comentarios que son de spam para no hacerlos públicos […]

Elementor perjudica el SEO

Elementor perjudica el SEO

Hablemos un poco del alrededor de Elementor, uno de los principales problemas con los temas que afectan el SEO de un sitio es que estos no están optimizados para SEO en el sentido que están pésimamente estructurados y afectan negativamente el tiempo de carga. Por ello, es mejor usar temas que tienen un historial probado […]

Black Hat SEO, evita estas técnicas

Black Hat SEO, evita estas técnicas

Los expertos en SEO saben que pueden hacer uso de muchas técnicas diferentes para conseguir un mismo objetivo: posicionar más alto en Google y otros buscadores. Pero no todas las técnicas son igual de válidas: algunas de ellas están expresamente prohibidas por los motores de búsqueda y pueden meterte en un buen lío si las usas. Uno […]


2 Comentarios

Deja un comentario

  Acepto losPolítica de privacidad

Muy importante.- No es necesario registrarse para publicar una opinión o comentario, pero si es necesario introducir su nombre y correo electrónico para evitar el SPAM. Además, no utilizaremos los datos insertados para otras cuestiones que difieren de esta publicación. En cualquier momento puede solicitar la eliminación de los mismos, enviando una solicitud al correo de contacto y con el mismo correo que ha emitido la opinión o comentario para que en un plazo máximo de 72 horas se elimina.

INFORMACIÓN ADICIONAL SOBRE PROTECCIÓN DE DATOS:

  • Responsable: IBERMEGA TSEO, SL
  • Finalidad del tratamiento: Control de spam, gestión de comentarios, comunicaciones y promociones.
  • Legitimación: Su consentimiento
  • Transferencia de datos: Tus datos no se cederán a terceros, salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Email de contacto: oficina@ibermega.com

Copyright © 2002-2021 by IBERMEGA TSEO, S.L.