Multiples diseños con nueva actualización de Athenea

Theme AtheneaCada día son más las empresas y particulares que utilizan WordPress como Gestor de Contenidos por lo rápido y barato que es crear una nueva página web, utilizando los plugins y plantillas web que se acompaña en la administración del gestor. También son muchos que cuando lo instalan por primera vez, configuran la estructura completamente desordenada mezclando información entre Páginas y Entradas.

Las páginas son para la información acerca de la empresa como por ejemplo, la clásica quienes somos, los avisos legales, la página personal de cada integrante de la empresa u organización, el portafolio, etc. Mientras que las entradas son para publicaciones periódicas como noticias, catálogo de productos, eventos, etc.

Atributos PáginaDesde versión 1.1.3 de la plantilla web gratuita Athenea y la plantilla premium Pharma en su versión 1.0.8, llevan integradas nuevas plantillas de Página para dotar a su web de múltiples nuevos diseños y poder diferenciarlos del contenido ubicado en las entradas de su web.

Para dotar a una página de uno de los diseños agregados en las plantillas Athenea o Pharma, dirígete al menú de tu administración de WordPress y cliquea en Páginas -> Todas las páginas y elige editar en una que tengas creada. Si no tienes, crea una ahora. Por ejemplo la clásica página de Quienes somos.

Cuando hayas insertado el título y el contenido, dirígete a la derecha de tu pantalla y busca el bloque “Atributos de página”, tal y como te mostramos en la imagen adjunta y en Plantilla elige del desplegable la que mejor plantilla se ajuste a tu contenido.

En el desplegable, por defecto aparecerá Plantilla predeterminada. Simplemente despliega y elige la presentación adecuada.

Características de cada plantilla de página

– Front page Full (no entry)

Con Front page Full (no entry), podemos crear una página de portada en tu sitio web sin lista de entradas. Sería como una página de presentación sencilla pero con mucho diseño. Ésta página es ideal para minimizar el peso de apertura, tan necesario para el posicionamiento SEO de hoy día.

Para crear esta página, entra en Páginas del menú del administrador de WordPress y crea, por ejemplo, Portada o Home y sin poner contenido te diriges a “Atributos de página” y seleccionas esta opción (Front page Full (no entry)). Seguidamente, en Apariencia, te diriges a Personalizar y en Portada estática, señalas la opción de “Una página estática” y a continuación, en el desplegable Portada seleccionas la página creada, llámese Portada o Home.

Puedes comprobar que la página creada (Portada o Home) corresponde con la página principal de tu página web. Toda una página de inicio en portada.

– Full Page

Con Full Page (página completa), se mostrará el contenido careciendo completamente de bloques laterales con sus respectivos widgets.

– Logo not in head. Full Page

Igual que el anterior, Logo not in head. Full Page, elimina la información que hay justo debajo del menú principal, mostrando a página completa el contenido sin los bloques laterales.

– Logo not in head. Sidebar Left y Right

Estas plantillas de página actúan igual que la anterior con la información debajo del menú principal. Además, eligiendo Izquierda (Left) o Derecha (Right) se desplaza el bloque lateral a un lado o al otro.

– Sidebar Left

Esta plantilla lo que hace es cambiar del lado izquierdo al derecho el bloque lateral de la Plantilla predeterminada.


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

Convertir enlaces en botones

Convertir enlaces en botones
Agregar botones en el cuerpo del mensaje es tan sencillo que, cuando aprendas a hacerlo, dotarás a tu web de un estilo único.
Para poder agregar botones, tienes que saber muy poco de html y sobre todo, saber escribir en la pestaña Texto de la caja de redacción de tu WordPress. Si te fijas en la caja de redacción, cuentas a tu derecha de dos pestañas: “Visual” y “Texto”. La mayoría de usuarios de WordPress escriben en “Visual” ya que es muy parecido a los clásicos documentos en Word de Microsoft Office y una gran minoría lo hace en Texto o en ambas para poder maquetar elementos y textos fuera de la visualización normal. Prácticamente, en Texto es escribir en código fuente (html).

Imaginemos que has añadido un enlace desde Visual:

Enlace

Si observamos este enlace desde Texto, veremos su código fuente así:

Ahora añadiremos muy poco de código para convertir el enlace en un botón:

Siendo el resultado el siguiente:

Enlace

Símplemente hemos añadido la clase btn btn-info y el código role="button" que también corresponde con un botón de color azul celeste. La característica del color del botón está justamente en btn-info. Si por ejemplo queremos un botón verde, debemos cambiar “info” por “success” de esta forma:

Enlace

En la siguiente lista mostramos los colores por defecto que cuenta el framework Bootstrap 3.0 con el código completo:

  • btn btn-default gris claro
  • btn btn-info azul celeste
  • btn btn-primary azul índigo
  • btn btn-success verde
  • btn btn-danger rojo
  • btn btn-warning naranja claro
  • btn btn-link solo enlace

Tamaños

Si necesitas destacar el botón tipo enlace, estos estos son los códigos que debemos de añadir según sus características de tamaño: .btn-lg, .btn-sm, o .btn-xs

Botón Grande

Botón por Defecto

Botón Pequeño

Botón extra pequeño

En siguientes tutoriales veremos donde insertar estos enlaces estilo botón con la maquetación de cada publicación.


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

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.