Genesis Framework: Instalarlo en 6 simples pasos

Es muy probable que seas un excelente profesional, quizás el mejor en tu especialidad, y que te entregues de lleno a cada tarea que te encomiendan. Pero lamentablemente eso no alcanza si tus posibles clientes no te perciben como tal.

Así que preparé esta mega guía donde te explico paso a paso cómo elegir, comprar e instalar Genesis Framework de StudioPress en tu blog. Así estás preparado para cuando te decidas a dar el paso.

Por qué Genesis Framework

StudioPress, y su framework llamado Genesis, son una de las familias de plantillas para WordPress que más éxito está teniendo en la actualidad, incluso está desplazando un poco a fuertes líderes como Woothemes y Elegant Themes. ¿A qué se debe ésto?

Principalmente a que las plantillas para WordPress de StudioPress están desarrolladas de una forma que las hace muy rápidas de cargar. Por esta razón están siendo adoptadas por sitios y blogs con altó volumen de tráfico.

Estas plantillas de Genesis se desarrollan en dos capas, y es muy importante entender este concepto antes de comprar e instalar uno de estos temas.

Capa A: El framework Genesis

Por un lado tenemos una capa que contiene toda la programación del tema, lo que lo hace funcionar, y que es necesario mantener actualizado permanentemente para evitar fallos de seguridad e incorporar mejoras técnicas.

En la práctica es un tema de WordPress que se instala como cualquier otro.

Capa B: El child theme

Por otro lado está la capa que contiene todo lo referente al diseño, que podemos personalizar e incluso modificar a nuestro gusto.

En la práctica esta capa se trata de un tema hijo del anterior.

Tema Padre y tema Hijo

WordPress brinda la posibilidad de desarrollar temas (llamados hijos) que heredan todas las funciones de otro tema  (llamado padre). ¿Para qué sirve ésto? Para permitirnos modificar el código de este tema hijo sin que lo afecten las actualizaciones periódicas.

Porque si hacemos modificaciones en la hoja de estilos CSS de una plantilla (o en cualquiera de sus archivos) estos cambios se pierden cuando el tema se actualiza. Y no podemos dejar desactualizado el tema porque podríamos tener problemas de seguridad y otros fallos.

Al crear un tema hijo podemos hacerle todas las modificaciones que queramos sin preocuparnos, porque el tema hijo no se actualiza nunca. Pero sí actualizaremos el tema padre que es el que contiene todas las funciones importantes que hacen andar a tu página.

StudioPress aprovecha esta posibilidad que ofrece WordPress y la potencia al máximo. ¿Cómo?

Creando un tema padre (llamado framework Genesis) desarrollado de forma excelente, lo que logra que tu sitio cargue mucho más rápido y por lo tanto sea mejor visto a los ojos de Google, de cara al posicionamiento. Además de muchas otras ventajas técnicas.

Y luego están los child themes, los encargados de aportar el diseño. y que pueden ser modificados a gusto de cada uno, sin preocuparte de perder cambios con las actualizaciones.

Es importante aclarar que no solo StudioPress crea temas hijos para Genesis, también existe una gran comunidad de desarrolladores que crean nuevos temas basados en Genesis.

¿Y a qué viene toda ésta explicación? Porque quiero que tengas claro que cuando hablamos de comprar un tema en StudioPress en realidad se trata de comprar dos temas: Genesis (tema padre) y el child theme que te guste (tema hijo). Excepto que sea tu segunda comprar y, por lo tanto, ya tengas Genesis.

Habiendo aclarado esta cuestión vamos directo a StudioPress a elegir el child theme que más te guste.

 

#1 . Elegir el tema de StudioPress que te gusta

El primer paso de esta guía sobre cómo instalar Genesis Framework, y seguramente el que más tiempo te va a llevar, es elegir el child theme más adecuado para tu página o tu blog, y que además te guste. Por suerte StudioPress te brinda muchas herramientas para poder decidir y estar seguro de cuál es la mejor opción antes de comprar.

Así que vámonos directo al sitio web de StudioPress:

Acceder a StudioPress >>>

Una vez que estás en el sitio web de StudioPress vas a ver un menú con las distintas secciones del mismo. Ahora hay que ingresar al listado de temas con la opción del menú Shop For Themes.

 

Como elegir tema StudioPress 01

 

Vas a pasar a una pantalla similar a la siguiente donde te muestra todos los temas en forma de cajas ordenadas en filas de a dos. Lo que podemos ver acá es simplemente el nombre de cada tema y una miniatura de la vista previa.

Si vas pasando el mouse por encima de cada tema vas a notar que aparece un botón con la leyenda See Details and Pricing. Haciendo clic en ese botón podemos acceder a muchos más detalles del tema y a la vista previa full, que es lo que más nos interesa.

Como elegir tema StudioPress 02

 

Ahora sí estás dentro de lo que sería la ficha técnica del tema, una página descriptiva con bastante información para ayudarte a decidir si este tema te sirve o no. Para el ejemplo yo elegí el Parallax Pro Theme, pero es lo mismo con cualquier tema que elijas.

Lo primero que nos muestra es el nombre del tema y apenas más abajo podemos ver el precio en dólares, y la indicación de que incluye tanto el tema hijo en cuestión como Genesis Framework (las dos cosas).

Las otras dos cosas más importantes que tenemos en esta página son:

  1. la sección de Características del Tema y…
  2. el botón para acceder a la Vista Previa Full (Full Theme Demo).

 

Como elegir tema StudioPress 03

Característica Obligatorias

Dentro de las características lo más importante según mi criterio es considerar que incluya las siguientes:

  • HTML5: ya que es la última tecnología en diseño web, y por lo tanto va a tener un mejor rendimiento y va a ser mejor visto a los ojos de Google y demás buscadores de cara al posicionamiento.
  • MOBILE RESPONSIVE: significa que el tema se adapta a diferentes tamaños de pantalla y puede ser visto sin problemas tanto en PC de escritorio como en celulares y tablets. Además, desde hace poco Google valora esta característica dentro de los factores de posicionamiento de una página o blog.

Otras características

Otras características que podemos encontrar pueden ser:

  • COLOR STYLES: es la cantidad de estilos de colores que te ofrece para elegir. Esto podemos apreciarlo mejor en la vista previa full.
  • CUSTOM BACKGROUND: indica que se pueden personalizar las imágenes y colores de fondo.
  • CUSTOM HEADER: indica que el tema permite personalizar el encabezado con tu propio logo o imagen de cabecera.
  • FOOTER WIDGET: nos dice que incluye áreas de widgets en el pie de página. Esto es muy útil para añadir cierto tipo de información, como teléfonos, dirección, horarios, etc., o incluso un menú.
  • LANDING PAGE: esta no la puse dentro de las obligatorias aunque sí lo es si te interesa ofrecer servicios a través de tu página o blog. La landing page es un formato de página sin distracciones, ideal para la descripción de tus servicios y colocar botones de compra ya que mejora muchísimo la tasa de conversiones.
  • PARALLAX SCROLLING: el efecto parallax es ese que cuando hacés scroll el fondo de la página se mueve a una velocidad diferente del resto. Da un aspecto profesional aunque también se trata de una moda.
  • THEME OPTIONS: esto creo que lo incluyen todos los temas, es el panel desde al cual personalizar todos los aspectos del tema.

Vista Previa Full

Pero más allá de las características es importante poder ver cómo quería tu blog una vez instalado y personalizado el tema y para eso la Vista Previa Full o Demo Full que ofrece StudioPress es excelente.

Si te vamos para abajo de todo vas a encontrar un botón Full Theme Demo con el que accedemos a la demo del tema. Vamos a ver cómo aprovecharla mejor.

Explorando la Demo Full de StudioPress

Lo primero que vamos a ver al acceder a la demo es cómo sería la Home de tu página.

Te recomiendo ir haciendo scroll para ver todas las secciones que incluye la home. Y no te preocupes de que los textos están en inglés, todo eso lo podemos reemplazarlo con nuestros propios textos.

Como elegir tema StudioPress 04

Pero no solo la Home es importante, la demo de StudioPress también te permite explorar las demás secciones para poder ver cómo es el diseño de:

  • las Páginas (Page),
  • las Entradas del blog (Blog Post),
  • los listados de Categorías (Category),
  • de Autor,
  • el Formulario de Contacto,
  • la Landing Page,
  • los Menús.

A todo ésto podemos acceder utilizando el menú del sitio de demostración, como te indico en la imagen siguiente.

También desde ese menú podemos ver:

  • las distintas Opciones de Colores que brinda el tema,
  • los diferentes Layouts que ofrece el tema:
    • con barra lateral a la derecha (Content/Sidebar),
    • con barra lateral a la izquierda (Sidebar/Content),
    • sin barra lateral (Full Width Content).
  • la Tipografía que utiliza.

Te recomiendo explorar todas las secciones para ver no solo el diseño general de cada página o entrada sino hasta los más mínimos detalles como ser:

  • diseño de los comentarios,
  • foto del autor de comentarios,
  • cómo se ve el nombre del autor y la fecha en las entradas del blog,
  • cómo son los párrafos,
  • tamaño de los diferentes subtítulos,
  • viñetas y listas ordenadas,
  • si permite escribir en dos o tres columnas,
  • etc.

Y en celulares y tablets…

Cómo si fuera poco todo lo que hasta ahora pudiste ver con la Demo de StudioPress, en la parte inferior vas a encontrar unos botones que te permiten cambiar la vista de Escritorio y simular que lo estás viendo desde una Tablet o desde un Celular.

De esta forma podemos estar seguros de cómo se va a ver el sitio web, no solo en una PC de escritorio sino también desde cualquier dispositivo móvil.

Una aclaración final sobre la Demo

No te preocupes de los textos y menús en inglés, todo eso se personaliza con las palabras, textos y frases que vos le pongas.

No te fijes en las fotos de la demo, todas se pueden cambiar por otras más apropiadas a la temática de tu blog.

Las imágenes caracterizan una página, de manera que si ves que la demo tiene fotos de gastronomía podrías pensar que ese tema solo sirve para un restaurante o un bar pero no es así. Es necesario hacer un esfuerzo de abstracción y mirar todo lo que el tema ofrece sin pensar en las imágenes.

 

Ahora que ya estás seguro de qué tema vas a querer para darle un aspecto bien exclusivo a tu blog profesional vamos a ver cómo adquirirlo.

#2 . Cómo Comprar un Tema de StudioPress

El segundo paso consiste en comprar el tema que elegiste siguiendo las indicaciones del punto anterior. Esto no encierra ningún secreto pero te lo voy a explicar de forma detallada para que no te compliques.

Habíamos visto que cuando entramos al detalle del tema, lo primero que aparece es el precio. Junto a éste se puede ver un botón verde que dice Buy Theme + Framework.

Hay que hacer clic ahí para pasar a otra página donde te van a pedir los datos necesarios.

Como comprar tema StudioPress 01

 

Te vas a encontrar con un formulario como el siguiente. La primera parte consiste en ingresar tu nombre, apellido e email para crear una cuenta en My StudioPress, ésto te va a permitir descargar tus temas después de la compra y acceder a los tutoriales detallados.

En la columna de la derecha podemos verificar que estamos comprando el tema correcto ya que te muestra el precio, el nombre del tema y te dice que incluye Genesis.

 

Cómo comprar tema StudioPress 02

En la segunda parte del formulario tenemos que elegir el medio de pago, puede ser Tarjeta de Crédito o PayPal. Si elegimos tarjeta de crédito nos va a solicitar los datos de la misma.

Mi recomendación es que, si ya tuvieras una cuenta de Paypal vinculada a tu tarjeta, utilices esta opción. Yo cuando hice la primera compra intenté hacerlo directo con tarjeta de crédito y el sistema rechazó la operación. Un momento después volví a probar con mi cuanta de Paypal, que está vinculada a la misma tarjeta de crédito, y lo aceptó.

Una vez que completos todos los datos y hacemos clic en el botón azul el sistema procede a debitar el importe.

Si todo sale bien vas a recibir un email de StudioPress en el que te confirman la compra envían los datos para acceder a tu cuenta de My StudioPress, desde donde vas a poder acceder a tus temas y a los tutoriales.

#3 . Conociendo My StudioPress

Para acceder a la cuenta en StudioPress podemos ir nuevamente al sitio web y buscar el botón My StudioPress en el menú principal. Luego te va a pedir que ingreses tu email y la contraseña que elegiste.

Como descargar tema StudioPress 01

 

Ni bien ingreses vas a ver tu pequeño listado de productos (temas) adquiridos, el Child Theme, Genesis Framework y un tema básico que viene de regalo, Genesis Sample.

Junto al nombre de cada uno vas a encontrar dos botones, uno para descargarlo y otro para acceder a los tutoriales detallados (Theme Setup).

Vas a descargar Genesis y el Tema hijo, Genesis Sample no es necesario. Ambos se van a descargar en archivos .zip que podés guardar en algún lugar de tu disco para luego instalarlos en WordPress.

Luego de descargar Genesis y el tema elegido podemos darle una mirada a la guía de configuración del tema hijo haciendo clic en el botón Theme Setup. Está todo en inglés pero nos podemos ayudar con el Traductor de Google.

Como descargar tema StudioPress 01

Estos tutoriales son realmente muy útiles. Si recién estás empezando a conocer Genesis te recomiendo mucho que los leas y los utilices para aclarar dudas a medida que vas personalizando tu tema. Explican todo bien detallado.

Dentro de ellos está la posibilidad de descargarte también las imágenes de la Demo, para quienes no quieren empezar desde cero.

#4 . Instalar Genesis Framework

Por fin llegó el momento. No te hago esperar más. Vamos a instalar Genesis Framework en tu WordPress para luego poder instalar también el Tema Hijo. Para hacerlo hay que ir a Apariencia -> Temas y hacer clic en el botón Añadir nuevo.

En la siguiente pantalla hacemos clic en el botón Subir tema, ya que no vamos a instalar un tema del repositorio gratuito sin que vas a cargar los que compraste en StudioPress.

Cómo instalar Genesis framework de StudioPress 01

Lo siguiente es hacer clic en Examinar para buscar el archivo de Genesis que descargaste en el paso anterior. Lo buscás navegando por tus carpetas y hacés clic en Abrir.

Ahora nos fijamos de haber seleccionado el archivo correcto, el que se llama por ejemplo genesis.X.X.X.zip y hacemos clic en Instalar ahora.

Cómo instalar Genesis framework de StudioPress 02

Para finalizar lo Activamos o Volvemos a la página de temas, es indistinto porque no es necesario activar Genesis, con que lo tengas instalado ya es suficiente.

#5 . Instalar el child theme

Ahora vamos practicamente a repetir el proceso del paso anterior pero para instalar el Tema Hijo. Tengamos en cuenta de no confundir al seleccionar el archivo, en el paso anterior elegimos el archivo de genesis y ahora el del tema hijo. El nombre del archivo normalmente coincide el nombre del tema.

Cómo instalar Child theme de StudioPress 01

Cómo podemos ver, el instalador verifica que ya esté instalado el tema Padre, Genesis, y luego instala el tema Hijo.

En este caso sí es importante Activar el tema para finalizar y que quede funcionando.

Cuando volvemos a la página de temas ya se puede ver al child theme instalado y activo, y a Genesis instalado. Es recomendable que borres todos los demás temas que ya no vas a utilizar. No tiene sentido que los sigas teniendo consumiendo espacio y actualizaciones. Lo ideal es que te queden instalados solo Genesis y el Child Theme.

Cómo instalar Child theme de StudioPress 02

Solo una cosa más

Para completar la instalación y que todo funcione correctamente es necesario que hagas una cosa más.

Hay que ir a Ajustes -> Enlaces permanentes y seleccionar la opción Nombre entrada. Guardamos los cambios y listo.

Cómo instalar Child theme de StudioPress 03

 

#6 . Personalización y Ajustes del tema

Y el último paso es personalizar el tema. Por suerte con estos temas todo es más fácil y podemos ajustar hasta el más mínimo detalle.

Si tu tema incluye una Home compleja, con varias secciones a medida que vas bajando y varias imagenes de fondo, etc., puede que al principio no entiendas ni cómo empezar. Porque lo más probable es que al instalarlo no esté tan completo cómo se ve en la Demo, todo eso hay que ir haciéndolo.

No desesperes, en los tutoriales que están en My StudioPress, te explican todo muy bien.

Todos los ajustes se hacen desde el personalizador al que se accede por Apariencia -> Personalizar. En la columna de la izquierda vas a ver un listado desplegable con todas las opciones. Te recomiendo ir explorando y probando. Cuando no entiendas algo siempre están los tutoriales.

Personalizar tema de StudioPress

 

Eso es todo sobre cómo instalar Genesis framework para WordPress y cómo configurarlo.

Estoy de acuerdo con que estas plantillas para WordPress están dentro de las más caras del mercado pero creeme si te digo que no es nada comparado a lo que podría costarte encargar un sitio web con resultados similares a un profesional.

Lógico que puede ser que los diseños no te gusten, que ya estés acostumbrado a otro proveedor, etc. En general los diseños de StudioPress son algo austeros comparados con otros proveedores. Porque su premisa es la velocidad de carga.

Genesis está siendo adoptado por blogs que tienen un alto volumen de tráfico, justamente por esa razón.

Catálogo de plantillas de Genesis

 

Si esta guía sobre cómo instalar Genesis en WordPress te pareció útil podemos ayudar a otras personas compartiéndola. ¡Muchas Gracias!