Un template de WordPress que llama mucho la atención y que incluso muchas personas están utilizando es el de tema hijo de Genesis Framework llamado Metro Pro de StudioPress, pero cuando instalas el tema en tu wordpress es cuando empiezan a surgir algunos inconvenientes o detalles técnicos que pudieras no saber cómo resolverlas.
Es por lo anterior que en este post vas a aprender a cómo dejar tu sitio web tan profesional con el tema Metro Pro, lo primero que vamos a ver es como instalar el template y vamos ir viendo cómo replicar las secciones del demo.
Pero además, en este post vas a aprender como darle ese toque especial a tu tema de tal manera que te haga diferenciar tu blog o web de los demás sitios, es decir, personalizarlo a tu gusto, así que te debes de seguir leyendo, no te arrepentirás.
Pre requisitos:
- Instalar en tu Hosting el gestor de contenido WordPress
- Descargar el Genesis Framework
- Descargar el template de Metro Pro
Veamos los pasos que tienes que llevar a cabo para alcanzar el objetivo planteado, instalar el child theme metro y además realizar las adecuaciones para que se vea diferente al demo.
Contenido
- 1 Instalado Genesis Framework
- 2 Instalando el tema hijo Metro Pro de Genesis Framework
- 3 Personalizando el tema Metro Pro…para diferenciarte de las demás webs
- 4 Configurando la página Home del tema Metro Pro – Genesis
- 4.1 Insertar un formulario para captar suscriptores en nuestra home con el plugin Thrive Leads
- 4.2 Modificando un tema de genesis con el plugin Genesis Extender
- 4.3 Agregar un menú en el encabezado derecho
- 4.4 ¿Qué otras áreas podemos modificar con Genesis Extender?
- 4.5 Agregando dos nuevas secciones en el home (Middle Left y Middle Right)
- 4.6 Sección de Home Bottom
- 4.7 Sección de Píe de Página
- 5 Conclusión
Instalado Genesis Framework
Paso 1. Dentro del administrador de wordpress tienes que dirigirte al siguiente menú: “Apariencia >> Temas”
Paso 2. Después tienes que dar clic en el botón de “Añadir nuevo“, tal como aparece en la imagen de abajo.
Paso 3. Siguiente paso dar clic en el botón de: “Subir tema”
Paso 4. Luego tienes que dirigirte al botón de “Browse” y de igual manera dar un clic, tal como lo puedes ver en la imagen a continuación:
Paso 5. Después tienes que seleccionar el archivo zip del Genesis Framework que ya debiste haber descargado anteriormente ya que lo necesitas para poder continuar con esta guía sobre como instalar el framework y el tema metro pro.
En la siguiente imagen puedes observar que he seleccionado el archivo genesis.2.2.7 y luego hay que dar clic en el botón open.
Paso 6. Siguiente paso es dar clic en el botón “Instalar ahora” tal como lo puedes ver en la imagen…
Paso 7. Por último te debe de aparecer la siguiente pantalla en donde te muestre el avance y el mensaje de que el tema de Genesis se ha instalado correctamente, este tema no hay que activarlo ya que es el tema padre…
Instalando el tema hijo Metro Pro de Genesis Framework
Ahora lo que tienes que hacer es instalar el child theme Metro Pro siguiendo los pasos del 1 al 4 del proceso anterior, antes de continuar debes de asegurarte que ya tengas descargado el tema hijo en tu computadora.
A continuación, te voy a mostrar los pasos que cambian.
Paso 5. Selecciona el tema metro pro y procede a dar clic en el botón open.
Paso 6. Una vez seleccionado te debe aparecer la siguiente pantalla en donde tienes que darle clic al botón “Instalar ahora”
Paso 7. Se va a mostrar si se instalo correctamente el tema y este si procedemos a activarlo, mediante la liga respectiva que te muestro abajo en la imagen.
Paso 8. Validar que se haya instalado correctamente el tema padre Genesis y el tema hijo Metro Pro, para ello debes de verlos de la siguiente manera:
Si es así, entonces felicidades, vas por buen camino y avanzando..
Paso 9. Ahora toca el turno de ver el tema metro funcionando y para ello tienes que dirigirte a tu dirección de tu sitio web y debes de visualizar algo parecido a como te lo muestro en la imagen de abajo.
Ahora ya puedes decir que instalaste el tema de genesis y metro en menos de 3 minutos…
Personalizando el tema Metro Pro…para diferenciarte de las demás webs
Lo que vamos a modificar a continuación son los siguientes áreas o secciones:
- Logotipo
- Menú
- Imagen de fondo
Modificar el icono y datos del sitio
Para modificar tu logotipo tienes que dirigirte al siguiente menú: “Apariencia >> Personalizar >> Identidad del Sitio”
En la siguiente pantalla puedes modificar el título de tu sitio, colocar una descripción corta de tu web, y también insertar un icono o favicon.
Logotipo
Algo que tienes que verificar antes de crear tu logotipo es ver el tamaño del logotipo de tu tema y una recomendación es que el diseño de tu logotipo se adapte a tu tema.
En el ejemplo que estás viendo la imagen o logotipo necesita una dimensión de 270 x 80 píxeles y se adaptó a esas medidas para que vaya acorde al tema y sin tener que recortar la imagen y así evitamos que se vea mal.
Imagen de Fondo
En la sección Imagen de Fondo vas a poder agregar una imagen de fondo para tu sitio web, solo la tienes que subir y listo, puedes ver la vista previa que te muestro en la imagen.
En este caso se buscó una imagen libre de la página Pexels la cual contiene una gran cantidad de fotografías profesionales y listas para usar en tu web.
Personalizar Menú Principal y Secundario
WordPress también nos da la oportunidad de personalizar el menú principal y el menú secundario para ello tienes que haber creado con anticipación dichos menús, te recomiendo para este paso ver alguno de los muchos videos sobre cómo crear un menú en wordpress.
Las opciones que debes de modificar las puedes ver en la imagen, en la cual solamente tienes que seleccionar el menú correspondiente a cada combo, es decir en:
- Menú de navegación primaria. En este combo he seleccionao el menú “primario”.
- Menú de navegación secundaria. En este combo no he seleccionada ningún menú.
El menú primario contiene las siguientes opciones: “INICIO AQUÍ” y “CONTACTAME”
Como puedes ver en la imagen anterior el menú ya es diferente.
Cambiar color esquema de wordpress
Para cambiar el color de tu blog te tienes que dirigir al siguiente menú: “Apariencia >> Personalizar >> Color Scheme”
En la opción de “Color Scheme” vas a poder modificar el color que tu desees, pero en esta guía vas a aprender más adelante a cómo elegir otro color para adaptarlo de acuerdo a tus necesidades o de acuerdo al color de tu logotipo.
Bueno, ya hemos configurado algunos puntos esenciales lo que sigue es darle forma a nuestra home o página principal. Así que manos a la obra.
Configurando la página Home del tema Metro Pro – Genesis
El primer paso que vamos a realizar en la home es agregar un formulario de suscripción, veamos los pasos a ejecutar.
Insertar un formulario para captar suscriptores en nuestra home con el plugin Thrive Leads
Si por ejemplo te dedicas a ofrecer servicios como fotógrafo, nutriólogo, terapeuta o lo que tú ofrezcas entonces estarás de acuerdo que necesitas atraer clientes para que tu negocio funcione, y por ello el tener un formulario de suscripción es importante ya que te dará las bases y una lista de posible personas interesadas en tus servicios, esto solo es una parte de estrategias de email marketing.
Es por ello que desde un inicio debes de crear un formulario para captar suscriptores y aquí te recomendamos que adquieras el plugin llamado Thrive Leads, el cual a nosotros nos ha dejado más que satisfechos, nuestros blogs utilizan esta potente herramienta ya que en pocos minutos puedes tener uno varias cajas de formularios funcionando correctamente.
Te voy dar una idea general y más adelante vas a poder tener acceso a un webinar en donde vamos a hablar de la forma de utilizar dicha herramienta, guía en vivo y a todo color para que sea más fácil de entender y aplicar en tu blog.
Para ello, una vez que tengas instalado el plugin entonces tienes que dirigirte al menú: “Thrive Dashboard >> Thrive Leads”
A continuación, tienes que agregar un nuevo formulario y te debe de aparecer una ventana como la de abajo, y tienes que introducir el nombre del formulario en cuestión.
Siguiente paso, seleccionar la plantilla para nuestro formulario, aquí puede escoger algunas de las prediseñadas que nos ofrece thrive theme o puedes personalizar una.
Aquí te dejo la pantalla que deberías visualizar, si te fijas he seleccionado la segunda plantilla marcada con la flecha color verde.
Te voy a mostrar como quedo el formulario a continuación. Si quieres saber el detalle de cómo modificar un template de thrive leads registrate al webinar al final del post.
Aquí el resultado..esto es solo un ejemplo, se puede hacer otras modificaciones al formulario como por ejemplo un borde, tipo de texto, entre otras cosas.
Insertar formulario con un Widget
Para insertar el formulario de suscripción solo tienes que dirigirte al menú: “Apariencia >> Widgets” y agrear el Widget de texto en la sección de Home Top e insertar el código short code (este código te lo proporciona thrive leads) tal como en la imagen de abajo y listo, tu formulario se debe de visualizar en la página de inicio.
Modificando un tema de genesis con el plugin Genesis Extender
¿Qué es Genesis Extender?
Si tú eres un diseñador web Genesis Extender te va a ayudar a modificar ciertas secciones de una manera muy rápida, como por ejemplo una hoja de estilo, y lo mejor de todo… sin ser un experto. Y aunque no seas diseñador o programador web de igual manera esta herramienta es para ti ya que la curva de aprendizaje es muy sencilla y corta.
Aquí vas a aprender a utilizar un nuevo plugin que se llama Genesis Extender, con el cual vas a poder modificar áreas que sin el definitivamente seria más difícil o nos tomaría mucho más tiempo el hacerlas, es un plugin que nos va a facilitar mucho la vida, altamente recomendable.
Una vez instalado el plugin tienes que dirigirte al menú: “Genesis >> Extender Custom”
Con este plugin no necesitas ser un experto en temas de CSS3, aquí te dejo una prueba de cómo modificar el color de menú secundario para el tema metro pro de genesis.
De igual manera para saber a detalle todo lo que tienes que hacer para saber utilizar el Genesis Extender te recomiendo entrar a el webinar que se encuentra al final de este artículo.
La plantilla metro pro ofrece un apartado para poder insertar información en el encabezado derecho, entonces, en este ejemplo lo vamos a utilizar para agregar un menú, para ello tienes que haber ya creado el menú correspondiente.
El encabezado lo tienes que configurar de la siguiente manera:
Necesitas insertar en el widget “Menú Personalizado” y escoger el que tu necesites, tal como aparece abajo.
El resultado final te lo muestro abajo:
Si regresas a las primeras imágenes te darás cuenta que el menú que se encuentra a un costado del logotipo no estaba y aparece debido al resultado del paso anterior.
Ahora, con la configuración anterior sale sobrando el menú que se encuentra abajo del logotipo, para ello tenemos que desactivarlo dirigiéndonos al menú: “Apariencia >> Menús >> Gestionar Lugares”
En el combo de Menú de navegación primaria no debes seleccionar ninguna opción, es decir, escoger “Elige un menú” y con esto ya no se debería de ver el menú mencionado anteriormente.
Con el plugin Genesis Extender modifiqué lo siguiente:
- El color del fondo del menú primario que ya agregue en un paso anterior
- El tipo y tamaño de letra utilizado
- Cambiar el color de fondo del menú al momento de pasar el puntero encima de la opción
¿Qué otras áreas podemos modificar con Genesis Extender?
Ya anteriormente viste un poco de lo que puede hacer el plugin genesis extender, es una navaja suiza, en poco tiempo puedes modificar un template, pero obviamente tienes invertirle un poco de tiempo para aprender a utilizarla, y es por eso que es importante que veas el vídeo al final del post.
Pero una vez que domines esta herramienta tu trabajo va hacer mucho más fácil y lo terminaras en menos tiempo, el cual lo puedes invertir en otras cosas.
Pero…¿Qué otras cosas puede modificar con Genesis Extender?
- Colocar un margen al Header (Puedes ubicar esta sección mediante el logotipo y el encabezado de lado derecho)
- Cambiar el color de fondo, en este caso lo hemos dejado transparente
- Cambiar el color de fondo y ancho de los widgets
- Cambiar el color de fondo de contenido las páginas, en este caso hemos utilizado la página de “Contáctame”
Estas modificaciones las puedes observar a detalle en la siguiente imagen:
Creo que si se nota la diferencia a como empezó la página cuando instalamos el tema hijo de metro pro. ¿Qué opinas? Por cierto te invito a dejar tus comentarios al final del post.
Agregando dos nuevas secciones en el home (Middle Left y Middle Right)
La página principal o home es muy importante ya que en ella van a llegar personas que no son recurrentes en tu blog, son visitas esporádicas y por ello debes de aprovechar la home para mostrar el contenido que más llame la atención de tus usuarios.
Por lo anterior vamos a agregar dos nuevas secciones en la home y que van a estar colocadas justamente debajo del formulario de suscripción que ya trabajamos anteriormente.
Para ello tenemos que ir de nuevo al menú de: “Apariencia >> Widgets”
Antes de continuar, en este ejemplo vamos a utilizar dos páginas que queremos resaltar y las cuales ya han sido creadas con anticipación.
Ahora si…veamos los dos secciones (Home Middle Left y Home Middle Right) que tienes que utilizar.
Por ejemplo, en la sección Home Middle Left podemos destacar una página y para eso tenemos que configurar la sección de la siguiente manera:
Observa bien y fíjate que agregué un widget llamado “Genesis – Página destacada” para insertar la página que quiero resaltar y que se llama “10 Lugares para tomarte fotos el día de tu Boda” y con la siguiente configuración.
De igual manera tienes que hacer lo mismo para la sección Home Middle Right y el resultado es el siguiente:
Sección de Home Bottom
Esta sección es para destacar otros artículos, pero justo debajo de la sección anterior que acabamos de agregar, se muestra en forma de lista, pero primero tienes que configurarlo a través de las siguientes opciones que te voy a mostrar.
Algunos parámetros no se ven en la imagen, pero si debes de modificarlos, son los siguientes:
- Categoría: Debes de seleccionar la categoría de los posts que deseas que se muestren.
- Números de artículos a mostrar: Te recomiendo que sean tres artículos.
- Activar la opción de “Mostrar imagen destacada” con la finalidad que aparezca una imagen en un recuadro pequeño.
- Tamaño de la imagen debes de seleccionar: “Home Bottom” que son 150 x 150 Píxeles.
- Alineación a la izquierda.
- Debes activar la opción “Mostrar el título del artículo”
- Tipo de Contenido: Se refiere si quieres mostrar un extracto, una cantidad de contenido especifica de caracteres después de la imagen.
- En verdad son varias opciones que puedes ir verificando y viendo su comportamiento en tu web.
Una vez terminada la configuración el resultado se ve así, me ha gustado mucho:
Sección de Píe de Página
Para agregar un píe de página el tema Metro Pro de Genesis te ofrece tres secciones:
Si observas detenidamente, veras que en cada sección se ha agregado un widget el cual contiene información específica a desplegar.
El resultado final ya con las adecuaciones al tema Metro pro de Genesis framework es el siguiente:
Conclusión
Con todo lo que hemos visto y con las herramientas que has aprendido a utilizar puedes crear temas hijos de genesis en un tema único para tu web y con un diseño en verdad profesional y en muy poco tiempo.
Y como te habrás dado cuenta… que teniendo las herramientas indicadas y haciendo uso correcto de ellas podemos hacer cosas fenomenales con cada tema de genesis.
Si quieres aprender como crear un blog con Genesis y Metro Pro Profesional y personalizado registrate al webinar donde te mostraremos las técnicas y las herramientas que utilizamos y que seguramente a ti te van a ayudar. El formulario de registro se encuentra abajo.
Gracias!
Hola Gerardo, es un excelente articulo, gracias por ello y nos vemos en el webinar.
Hola Walter,
Gracias por tu comentario, espero verte en los siguientes webinars 😉
Saludos
Hola gerardo
Voy a realizar unas pruebas y te cuento estupendo artículo
Saludos
Saludos Gerardo, gracias por el articulo, la verdad es que Genesis Framework junto al tema Metro Pro es muy famoso, se puede tener un sitio bien optimizado, el problema es configurarlo tal y como uno quiere, yo mismo estoy liado con ese tema Metro pro, y vale la pena coger la lucha porque una dispondrá de una página rápida y limpia de errores lo cual ayuda mucho con el SEO.