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

Renting Web, la revolución web ha llegado

Renting Web, la revolución web ha llegado

Renting Web es un servicio organizado pensando en pequeñas y medianas empresas, consiste en el diseño y mantenimiento de páginas web abonadas en cómodas cuotas. La idea es abonar mensualmente una cuota similar a la que pagaría por disponer de servidor, este pago incluye lo que conocemos como todo incluido. Esto se refiere a los […]

Enlace permanente de WordPress

Enlace permanente de WordPress

El enlace permanente de WordPress tiene influencia en el ranking de tráfico y motores de búsqueda de tu sitio web, aunque no sea muy evidente. No es recomendable pasar desapercibidos estos enlaces. Elegirlos erróneamente puede ser perjudicial y es difícil de cambiar, a futuro se puede perder la conexión a su sitio. El enlace permanente […]

¿Qué es Google Authenticator?

¿Qué es Google Authenticator?

Si deseas mantener un buen nivel de seguridad en WordPress, debes considerar utilizar el plugin de la autenticación de dos pasos para cuentas Google y otros servicios. Existe una manera sencilla de habilitar la autenticación de 2 pasos en WordPress utilizando Google Authenticator, con esto darás valor a tu blog y seguridad. Google Authenticator funciona […]

¿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 […]


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-2024 by IBERMEGA TSEO, S.L.