genesis framework español

Genesis Framework en español: La Guía Prohibida para iniciar tu blog

Si estoy en lo correcto, te encuentras en la situación de quererte pasar a genesis framework o ya te pasaste pero te hallas perdido y no sabes cómo configurarlo a tu gusto.

Ambas condiciones tienen solución y las tienes aquí en este mismo artículo.

Así que, si quieres corregir uno de esos problemas o quizás los dos, ponte cómodo que hoy tienes mucho que aprender.

Te quieres pasar a Genesis Framework? Esto te interesa has click aqui y descubrelo.

 

¿Qué es Genesis Framework de StudioPress?

A estas alturas creo que ya deberías estar familiarizado sobre que es Genesis Framework. La mayoría de blogs que frecuento han hablado sobre él,  pero si no es así, ya te cuento que es este framework que se ha vuelto tan popular desde hace ya un tiempo.

Genesis Framework y sus child theme son un producto desarrollado pos StudioPress.

El framework y los temas hijos funcionan por separado, aunque por si solo el tema padre puede ser utilizado como tema principal sin la necesidad de instalar algún child theme, pero su diseño es muy básico y su función es hacer que el tema hijo trabaje correctamente.

Para que lo entiendas mejor.

La función principal del tema padre (Genesis Framework) es hacer que todo marche a la perfección ya que en él se encuentran los ajustes principales del framework, en pocas palabras su  funcionamiento es interno.

Ahora bien, los child theme componen el diseño estético y visual del blog, y acudimos a ellos cuando no deseamos meternos con los archivos del tema padre para personaliza el aspecto visual del mismo.

La ventaja de utilizar un child theme es que podemos personalizar nuestro blog a nuestras necesidades sin tocar en nada al tema padre.

Muy pocos temas diseñados para wordpress te ofrecen las ventajas que aporta genesis framework.

Te lo digo porque grandes bloggers influyentes que conozco lo usan y lo recomiendan. Además, este mismo blog funciona con genesis framework mas un tema hijo que he personalizado a mi gusto.

Justamente por eso te he traído la opinión de grandes bloggers que utilizan, trabajan y recomiendan   Genesis Framework.

 

Javier Gobea de Hormigasenlanube.com

javier gobea

 

Trabajo con Genesis Framework, por la limpieza de su código y su filosofía de uso.

La mayoría de temasestán pensados para tener un montón de opciones: compartir en redes sociales, editar páginas, etc. y confundimos el uso que tiene un tema (porque estas no son funciones que deba incluir).

Puede que tengas un tema supervitaminado, que haga de todo, pero solo uses el 20%. 

En ese sentido, Genesis Framework te aporta justo lo que necesitas: dar apariencia a la web en general (con estética) y dejar las demás funciones para plugins individuales.

Gracias a esa limpieza, su código es muy sencillo de entender, por lo que los programadores podemos hacer cosas maravillosas con él.

Y si eres un usuario estándar, realmente no necesitas estar tocando siempre colores del tema, fuentes, etc.Para tener libertad y poder editar páginas sin entrar en código,solo tienes que instalar un plugin maquetador, como Beaver Builder o Elementor, pero no te ates al que incluye el tema o te resultará muy difícil cambiar si en un futuro quieres hacerlo.

En definitiva, me encanta su sencillez, la limpieza de código y que hace justo lo que se espera de un tema para WordPress. Eso sin contar con su gran comunidad y la documentación disponible (tiene respuesta para cualquier duda que te surja).

Todo esto no lo encuentras en ningún tema deThemeForest por famoso que sea, y casi ni en el famoso Divi.

 

Rubén Alonso de miposicionamientoweb.es

ruben

La verdad es que es una pasada, mejor de lo que me pensaba al principio cuando empecé a cambiar el theme del blog con Genesis Framework. Noté una mejoría brutal en la velocidad de carga del blog, y eso al final se notó también en el SEO. Así que no puedo estar más contento, más feliz que un regaliz.

 

Oscar Fernández de creativolandia.com

Genesis me ha aportado una estructura sólida sobre la que montar mis diseños a medida y así poder olvidarme, del tema de la seguridad, actualizaciones de wordpress, velocidad de carga, etc.
Antes cuando creaba temas a medida, había actualizaciones de WordPress que dejaban partes de mis temas inservibles, usando Genesis Framework son la gente de Studiopress quienes se ocupan de eso, y al ser un equipo responden bastante más rápido y efectivamente que yo, ahora sólo tengo que preocuparme de diseñar temas hijo atractivos.

 

Franck Scipion de LifestyleAlCuadrado.com

Utilizo Genesis Framework porque tiene una gran comunidad y soporte tras él, porque es muy fácil de personalizar y editar aunque no sepas nada de diseño, porque es fácil de escalar a medida que crece el negocio y porque se adapta muy bien a la mayoría de herramientas y plugins que siempre he utilizado.

Victor Lloret de www.surfeatuvida.com

En mi opinión Genesis es uno de los Frameworks más completos y potentes de WordPress. Para un diseñador es un placer poder trabajar con Genesis ya que está bien programado y modularizado. Lo que más destacaría es la optimización y la velocidad de carga del tema. Comparado con otras plantillas Genesis va que vuela!!

También me encanta que puedo personalizar lo que quiera y no se me machaca con cada actualización como sucede con otras plantillas de WordPress.

Sin embargo no lo recomendaría para alguien que no tiene conocimientos de diseño o programación y quiere hacerse la web él mismo, al modo Do it Yourself.

Entiendo que Genesis puede ser algo complicado de customizar. Si te quieres salir mucho de lo que ofrece por defecto el Child Theme elegido, puede ser un buen dolor de cabeza. Hay otras plantillas más flexibles y más fáciles de usar para «novatos».

Por eso, si quieres utilizar Genesis en tu proyecto, siempre recomiendo trabajar con un profesional que te pueda ayudar a dejar tu web tal y como quieres. Luego mantener la web ya es igual que cualquier otro tema para WordPress.

Ahora que has vistos la opinion de varios bloggers vamos a darle con el articulo.

Es genesis framework lo que realmente necesitas

Eso depende de lo que estés buscando, si quieres un blog optimizado para el Seo y te de la libertar de rediseñarlo por completo, entonces Genesis es tu elección.

Pero por lo contrario, si lo que quieres es un tema donde solo tengas que arrastrar y soltar para construir tu blog. Pues Genesis  Framework no es tu opción.

No es que no lo sea, solo que, al momento de querer personalizarlo tendrás que meterle mano al código y si no te llevas bien con ellos, estos te traerán grandes problemas.

Si estas indeciso entre pasarte o no, te voy a dar mis motivos personales por los cuales lo recomiendo y utilizo en los blog que he montado a algunos clientes.

  • El precio de génesis framework es de 59,99$ y a esto debemos incluirle el precio de un child theme, aunque su precio es elevado comparado con otros temas para wordpress, esto supone un único gasto de por vida ya que te permite instalarlo en todos lo blog que desees, una opción que otros temas no te lo permiten.
  • Su peso de carga es mínimo, génesis más un child theme no pesan más de 2MG y si lo comparamos con otros temas que pesan entre 5 y 8MG, esto solo sería el 40% del peso, este fue uno de los beneficios que mas considere al momento de pasarme a génesis framework.

Ya que quería tener un blog lo más optimizado posible para el seo, y el peso y la velocidad de carga fue un aspecto crucial en mi decisión al momento de elegirlo.

  • Es muy fácil de configurar y si deseas cambiar de child theme no afectara en las configuraciones que hayas hecho anteriormente, porque génesis framework y el child theme funcionan por separado.
  • No necesitas ser un diseñador o programador, aunque si debes tener unos conocimientos sobre css3 y php, y si no es tu caso, esto los puedes aprender con el paso del tiempo mediante lo vallas configurando y dándole el aspecto que buscas.

Te lo digo porque, este blog trabaja con el child tema altitudepro, pero esta personalizado a mi gusto y lo pude hacer sin realizar estudios avanzados de diseño o programación.

 

Teniendo claro esto, vamos a comenzar de lleno con Genesis Framewrok y a su configuración.

 

Iniciándonos con Genesis framework

El primer pasó que debemos dar es hacerse con el génesis framework, pero existes varias opciones que StudioPress nos ofrece al momento de adquirirlo.

1-  Comprar solo el framewok por 59,99$, esta opción es la mas económica de todos pero no incluye ningún child theme, puedes usarlo como tema final pero debes de tener claro que su diseño es muy básico.

Genesis framework es el tema padre y es imprescindible su instalación ya que un child theme no funcionaria por sí solo.

 2- Adquirir el framework mas un child theme por 99,99$, es una de las opciones más comunes de las personas que no tienen conocimientos en programación, ya que con solo realizar los ajustes necesarios del child theme puedes tener el blog funcionando.

3- Comprar el Pack completo de Genesis Framework por 495,99$, si eres diseñador o programador web esta opción es la adecuada para contar con todos los child theme, además esta opción viene con un gran descuento si compras por separados los temas hijos.

Una vez elegida la opción que más se adapta tus necesidades, es momento de realizar la compra.

Te quieres pasar a Genesis Framework? Esto te interesa has click aqui y descubrelo.

Como comprar Genesis framework de StudioPres

Las tres opciones que te ofrece studiopress para adquirir el framework más los child theme son similares.

Por ello, voy a guiarte a realizar la compra paso por paso.

Dirígete a la web de Studiopress y has click sobre el botón azul Buy Genesis Framework.

 

comprar genesis

Luego tendrás que rellenar un formulario con tus datos y elegir si pagar con tarjeta de crédito o Paypal.

comprar genesis 1

Una vez completado este pasó, serás dirigido a paypal (si elegiste esta opción) para que completes el pago y puedes descargar el framework  en tu ordenador.

 

Pasos para instalar génesis en tu wordpress

Una vez tengas descargado los archivos en tu ordenador, es momento de instalarlos en tu wordpress de la misma forma que instalarías cualquier otro tema.

Dentro del panel de administración de tu blog acude a Apariencia > Temas.

suber genesis

Lugo en Añadir Tema > Subir tema, selecciona primero el tema padre en este caso el Genesis Framework .

subir genesis 2

Cuando lo hayas cargado y activado, sigue el mismo procedimiento para instalar y activar el child theme si has elegido uno.

Hasta aquí ya tenemos instalado y activado el framework mas el tema hijo.

Ahora la siguiente fase será realizar las configuraciones y ajustes de génesis fremework acorde a nuestras necesidades.

Pero antes de esto, debemos traducir el framework al español  ya que por defecto viene en ingles.

 

Traducir Genesis Framework al español.

Para traducir génesis framework solo necesitas instalar el plugins Genesis Translation y activarlo.

Este plugins traducirá automáticamente el framework de génesis al idioma que hayas configurado previamente tú wordpress sin la necesidad de añadir ningún archivo .mo o .po.

Genesis Translation no cuenta con ninguna interfaz de configuración o ajuste, bastara con solo tenerlo instalado y activado.

Nota: Si quieres saber a cuales idiomas esta traducido génesis y los child theme puedes consultarlos aquí: http://translate.studiopress.com/.

Al Igual que cualquier otro plugins, instala Genesis Translation y actívalo.

1- Dirígete a la sección de Plugins > Añadir Nuevo

añadir plugin

Escribe en el buscador de plugins, Genesis translation, cuando lo tengas en la mira procede a instalarlo y luego a activarlo.

 

Existen otros texto que no los traduce génesis translation, como el texto en el formulario de comentario (Comment, Leave a comment, Post a comment, No comments).

En este caso, debemos instalar el plugins Genesis Simple Comments, con el podremos traducir todo los texto del apartado de comentarios.

simple coment

Por otro lado, Cuando un usuario entrar a una sección de tu blog que no existe, este será redirigido automáticamente a la página de error 404.

 

error 404

Esta página viene escrita igualmente en ingles, y para modificar el texto en ella tendremos que instalar el plugins Genesis 404 Page.

pagina error 404 español

 

Como configurar Genesis framework paso a paso.

Teniendo el framework traducido al español, es momento de realizar las configuraciones y ajustes necesarios para dejar el diseño del blog a nuestras medidas.

Todos los ajustes y configuraciones que realices en el tema padre se reflejaran en el tema hijo que hayas instalado.

En este caso vamos a utilizar el child theme Metro Pro, que es uno de los temas más populares.

Ajustes principales de Genesis.

En el Panel de control de tu wordpress, podrás ver que hay una nueva sección “GENESIS”, dirigirte y has click sobre ella.

Vea Genesis > Opciones del tema

ajustes de genesis

En esta sección configuraremos los ajustes principales del tema, Estilo de color, Feeds Personalizados, LayouT o columnas, Breadcrumbs etc.

Estilo de Color.

El child theme Metro Pro, nos ofrece 5 colores, el que viene por defecto, el azul, el verde, el rosa y el rojo.

 

color de metropro

En esta opción seleccionaremos el color que tendrá nuestro blog, este color solo afectara algunas partes del tema como los botones y links.

 

Feed Personalizados.

Si cuentas con una url personalizada para los feeds de tu blog, en estos campos tienes la opción de añadir una url personalizada para los feeds de los post y otro para los comentarios.

feeds de genesis

Layout o Columnas.

Metro Pro, nos ofrece 6 tipos de diseño:

  1. Contenido a la izquierda, barra principal a la derecha.
  2. Barra principal a la izquierda, contenido a la derecha.
  3. Contenido a la izquierda, barra principal y secundaria a la derecha.
  4. Barra principal y secundaria a la izquierda, contenido a la derecha.
  5. Barra secundaria a la izquierda, contenido al medio, barra principal a la derecha.
  6. Sin barras laterales.

La elección que hagas será el diseño predeterminado en todo tu blog, tanto en páginas como en los artículos.

Pero si deseas algunas paginas o artículos con un diseño de columnas distinto, esta misma opción podrás encontrarla debajo de las paginas o artículos que estés creando

columnas

Breadcrumbs

Los breadcrumbs son esas líneas de texto que aparecen sobre el titulo del artículo y que le dicen al lector en que sección de tu blog se encuentra.

breadcreumbs

Aquí podrás elegir si activar los breadcrumbs y en que parte de tu blog quieres que se visualicen,  si en tu caso quieres que solo salgan en los post, bastara con marcar la opción Single Posts

migas de pan

 

Comentarios y Referencias.

Esta opción puede pasarse por alto o no, todo depende si quieres habilitar lo comentarios en tu blog. Aquí podrás seleccionar si mostrar los comentarios solo en los post, en los artículos o en ambos.

comentarios

Archivos de contenido

Este hace referencia al estilo de la pagina de BLOG, si mostramos solo un extracto de los artículos o el contenido completo.

También en esta opción podremos elegir si habilitar la imagen destacada de cada post, el tamaño de la imagen destacada y a la alineación de la misma.

archivos de genesis

Además, podremos elegir entre sí mostrar un estilo de paginación numérica o anterior/siguiente para acceder a los artículos más antiguos.

 

Blog Page Template

Desde esta opción puedes predeterminar las categorías de los artículos y elegir si mostrar una lista de todas tus entradas en la pagina del blog o de una categoría determinada.

También podrás elegir el número de post a mostrar por página.

pagina blog

Scripts en el encabezado o al final

En muchas ocasiones necesitaremos añadir algún código a nuestro blog como el de Google Analytic, la url de una fuente de texto de Google Fonts u otra aplicación.

Esta opción nos facilita la inserción de scripts en el Header como en el Footer de nuestro sitio sin la necesidad de acceder a los archivos del tema.

scripts en genesis

Nota: Luego que hayas realizado todos los ajustes y modificaciones, recuerda hacer click en el botón Guardar Cambios o Save Changes

 

Como configurar el child theme Metro Pro y personalizar nuestro blog

Ya hemos realizado los ajustes necesarios a Genesis para que nuestro blog funcione según nuestras especificaciones y necesidades.

Ahora debemos configurar el tema hijo Metro Pro para que se vea tal cual lo apreciamos en la DEMO.

genesis framework español

En esta fase tengo que dejarte claro que previamente debes de tener un esquema de cómo será tu blog, con esto me refiero a las categorías y paginas que lo compondrán más los artículos que compondrán la sección del blog.

Cuando instalo cualquier tema en wordpress siempre comienzo desde el logo, y con el tema metro pro esto es muy sencillo.

Añadir el logo a nuestro child theme

Nos dirigimos a Apariencia > Personalizar

subir logo

Luego en esta sección no vamos a Imagen de Cabecera > Add New Image, seguido de esto seleccionaremos nuestro logo.

 

Después de seleccionar nuestro logo, guardamos y publicamos los cambios, ya con esto habremos  añadido nuestro logo al blog.

En este paso muchos han tenido el problema que al cargar el logo este es recortado, esto ocurre porque el tema hijo Metro Pro trae unas medidas especificas para el logo  280 px de largo por 80px de alto.

Por ese motivo, si tú logo cuenta con unas medidas mayores será recortado. Para evitar este inconveniente tendrás que realizar estos 2 pasos y meterle mano al código del child theme, no te asustes que esto será muy sencillo.

subri logo 2 antes de meterle mano a cualquier archivo del tema, procura crear una copia por si algo sale mal.

1 – Dirígete a la sección de Apariencia > Editor.

subir logo3

Allí encontraremos los archivos del tema hijo con el que estamos trabajando, y seleccionaremos el archivo Functions.php

sibir logo4

En este archivo podremos ver varias líneas de código puro, en total son una 135 líneas, pero las que nos interesa se encuentra en la linea 58,  esas líneas definen el ancho y alto del logo, aquí vamos a sustituir las medidas que trae por defecto Metro Pro por las medidas de nuestro logo.

subir logo 9

Width: determina el ancho del logo y sustituiremos el 270 por el ancho de nuestro logo.

Height: Aquí modificaremos la altura y remplazaremos el  80 por las medida de alto del logo que cargamos hace un momento.

El segundo paso será realizar otra modificación en la hoja de estilo, y  seleccionamos el archivo Style.css

hoja de estilo

Allí veremos los códigos del estilo del tema Metro Pro, en ella vamos a realizar unos ajustes parecidos al anterior.

En la linea 984 necesitaras modificar el condigo que allí se encuentra, un truco para encontrar rápidamente estas líneas es presionando Ctrl + F luego aparecerá una barra de búsqueda en wordpress donde pegaras estas linea: .header-image .site-title a y luego presionas enter.

Cuando ya las tengas visualizadas modificaremos las líneas max-width: 270px; y min-height: 80px;  Por estas:

stilo logo

El cambio que hemos hecho es solo eliminar el max-width por width y min-height por height, No debes olvidar cambiar las medidas de estas líneas por las medidas de tu logo:

En width colocaras las medidas del ancho del logo, y en height las medidas de alto. Cuando hayas realizado este cambio, solo faltara  hacer click en el botón azul Actualizar archivo para guardar los cambios que hemos realizado.

Ya realizado estos pasos podemos subir nuestro logo al blog sin preocuparnos.

En Width, sustituyes el 270px por el tamaño de largo de tu logo, en Heigt, cambiaremos el 80px por las medidas de alto de igual forma que lo hicimos cuando editamos el archivo functions.php

 

Configurar los Menus de metro pro.

Para iniciar a configurar  el theme metro pro, nos dirigimos a Apariencia > Menús, aquí gestionaremos los menús que compondrán el blog.

Elegimos el Menu Top, las paginas que lo compondrán y seleccionamos el menú de navegación secundaria.

menu top

 

Luego de esto damos en guardar menú.

Ahora, si recargamos nuestro blog pondremos ver que sea configurado el menú secundario.

menu top ok

Para configurar el Menu Primario, debemos realizar los mismos pasos anteriores pero marcando la casilla Menu de Navegacion Primaria

Aquí añadiremos las paginas, entradas o categorías que queramos aparezcan en este menú.

menu primario

Al realizar estos ajustes podemos ver que el menú primario se ha configurado correctamente en nuestro blog.

menu primario ok

Hasta este punto hemos configurado el menú primario y secundario como lo vemos en la demo.

menus de genesis

Ahora, el siguiente paso será añadir la caja de búsqueda que se encuentra de lado derecho del encabezado.

widget busqueda

Para ello de vemos acudir a la sección Apariencia > Widgets

widget de genesis

Luego elegimos el sidebar Encabezado Derecho y arrastramos la caja de búsqueda (Search)

widget de genesis2

Y luego damos en guardar.

Ya con esto tendremos la caja de busque en el encabezado derecho.

widget busqueda de genesis

Nota: No es obligatorio añadir la caja de búsqueda en esta sección, también puedes añadir los botones sociales u otra casa, siempre y cuando no afecte la apariencia del blog.

 

Como configurar la pagina principal de Metro Pro

Una vez realizados los ajustes del menú, el siguiente paso es configurar el aspecto que tendrá la página de inicio de nuestro blog.

Esta configuración dependerá de la opción que hayas elegido en  la configuración inicial de génesis framework.

Si has elegido una opción que mostrara en la página de inicio, el contenido y columnas como viene por defecto.

Nota: Quiero resaltar que estas configuraciones las puedes hacer basándote en el aspecto que deseas que tenga tu blog y no precisamente como la muestro aquí, ya que solo me baso en las configuraciones del tema metro pro como lo vemos en su demo

columnas

Lo primero que debes hacer será dirigirte nuevamente a la sección de widgets, ya que desde allí  configuraremos la página inicial y las columnas del sidebar derecho,  como las columnas del footer.

Te vas a Apariencia > Widget

widget de genesis framework

La página de inicio es widgetzable lo que indica que para configurarla debemos trabajar desde la sección widget.

Cada uno de estos widget representa una sección de la From Page, y para configurarla debemos instalar varios plugins para génesis framework, de ellos te hablare más adelante.

childt theme metro pro widget

Ya teniendo claro esto, vamos a comenzar con la configuración de las secciones de la From Page.

Home – Top.

hemo top

En la sección de widget de tu wordpress, busca y arrastra el Widget Genesis – Post destacado al sidebar Home Top y aplicas los siguientes ajustes.

 home top 2

Home Middle Left

Este sidebar lo configuraremos de la misma manera que el anterior. Busca y arrastra el widget Genesis – Post destacado al sidebar Home Middle Left, y aplica estas configuraciones:

middle feft

Home Middle Right

De la misma manera configuraremos el sidebar Middle Right como el sidebar anterior, con la diferencia que el número de artículos a compensar serán 2, el resto de los ajustes quedaran como el Middle Left.

 

Home Middle Right

Home Bottom

Para configurar esta sección arrastras el widget Genesis – Post destacado al sidebar home bottom y efectúas estos ajustes.

home bottom

Pie de Página 1, 2 y 3

Estas secciones dependerá si añadirlas o no en el diseño de tu blog. Los pasos para configurar estos sidebar es idéntico a los que hemos visto hasta ahora.

Pero deberás añadir contenido en los 3 sidebar de lo contrario al que no le añadas contenido quedara en blanco.

Los sidebar que conforman estas secciones son:

Pie de Página 1, 2 y 3

Los Widget que utilizarían estos sidebar serian:

  1. Pie de página 1: Widget de Texto.
  2. Pie de página 2: Widget de últimas entradas.
  3. Pie de página 3: Widget de nube de etiquetas y Search.

 

After Entry

Esta sección también es opcional. Este sidebar te permite añadir cualquier cosa debajo de los artículos, como una llamada a la acción, formulario de suscripción etc, pero solo después de cada post.

After Entry

Barra Lateral primaria.

Este sidebar se mostrara dependiendo del estilo de Layout que hayas seleccionado. Si nos basamos en la demo, este sidebar utiliza los widget:

  1. Genesis Perfil Usuario.
  2. Genesis eNew Extended.
  3. Entradas Recientes.

El plugins Genesis – Perfil de Usuario, Lo puedes configurar de dos maneras.

  • Eligiendo como opción la Nota biográfica del Autor para que muestre la biografía que añadiste en tu wordpress.

usuario

  • Añadiendo un párrafo con tu biografía en el recuadro de texto personalizado.

 

Como añadir un formulario de suscripción en genesis

Todo blogger tiene como objetivo engordar su lista de suscriptores para luego informarles de las últimas novedades del blog o hacer Email Marketing.

Existen plugins como Trive Leads, Sumome o Monsterlead que podemos usar para crear estos formularios de suscripción.

Pero con el plugins Genesis eNew Extended especifico para Genesis, nos permitirá añadir un formulario de suscripción al sidebar de la barra lateral primaria.

Genesis eNew Extended

De igual forma que los anteriores pluging, debes buscar, añadir y activar Genesis eNew Extended, pare luego configurarlo de la siguiente manera.

Visualiza y arrastra el widget Genesis eNew Extended al sidebar Barra Lateral Primaria.

Genesis eNew Extended 2

 

Aquí ajustaremos los datos que deseamos recopilar de los suscriptores, Nombre, Apellido, Emails, etc.

Lo primero que necesitaras hacer será crear tu formulario de suscripción en tu proveedor de email marketing, en mi caso utilizo Mailrelay, nos vamos a Formulario de Suscipcion > Formularios Personalizados

mailrelay.com

Luego de esto, crearemos un formulario con los datos que deseamos obtener de nuestros suscriptores.

Nombre: Colocaremos el Nombre que tendrá el Formulario de suscripción.

Tipo de campo del grupo: Aquí seleccionaremos el campo oculto.

Grupos: Seleccionaremos el/los grupos donde se suscribirán los nuevos suscriptores.

Como puedes ver en la imagen disponemos de dos recuadros, uno con los campos disponibles y otro con los campos que dispondrá nuestro formulario.

Ahora, debemos arrastrar todos los campos que hay en Campos disponibles y arrastrarlo a Campos en el formulario.

campos de formulario

Luego de haber arrastrados los campos, le damos en el botón Salvar para guardar el formulario creado.

Después de esto, nos dirigimos a la sección donde tenemos todos los formularios que hemos creado en nuestra cuenta de mailrelay.

todos los formulario

Seleccionamos el formulario que acabamos de crear y hacemos click en Ver código para visualizar el código del formulario.

codigo formulario

De este formulario vamos a extraer unos parámetros necesario para configurar el plugins génesis eNews Extended.

En los ajustes de este widget configuraremos el titulo y los textos que lo compondrán.

widget formulario

En Text To Show Before Form, estará el texto que saldrá antes de los campos del formulario

En Text To Show After Form, se verá el texto después de los campos del formulario.

Más abajo podrás visualizar unos campos que debemos completar obligatoriamente para que nuestro formulario de suscripción funcione correctamente.

formulario widget 2

Acción de Formulario: Aquí añadiremos la linea del cogido que nos proporciono Mailrelay al crear nuestro formulario.

Este código lo encontraras en la linea nº 3 donde puedes esncontrar la palabra action=

Campo del email: en este campo será suficiente con añadir la palabra email.

Campo de Nombre: Igual que en el capo anterior, bastara con añadir name.

Para el campo de apellido solo complétalo si añadiste este capo el momento de crear el formulario, de no ser así, déjalo en blanco.

Campos Ocultos: Este capo es utilizado para añadir la url de éxito y de error cuando un usuario se suscriba a tu lista.

Para finalizar de configurar Genesis Enews Extended, debemos completar los últimos campos visibles para tus usuarios.

widget formulario 3

Nombre de entrada de texto: Aquí agregaras el texto que visualizaran los usuarios en el campo del nombre.

Apellido de entrada de texto: Como te comente hace un momento, este capo lo debes completar solo si lo añadiste a tu formulario de suscripción.

Email de entrada su texto: Igual que el campo de nombre, aquí añadirás el texto que quieres que los usuarios vean, por defecto lo nombraras como E-mail.

Texto de botón: Este es el texto que saldrá en el botón para suscribir al usuario.

Al finalizar estos pasos solo basta con guardar los ajustes que hemos realizados al widget. Y de este será el aspecto que tendrá el formulario de suscripción.

formulario creado

Ahora,  si quieres añadir la imagen del ebook o de tu zqueese page, solo debes añadir el código de la imagen al campo Text To Show Before Form.

imagen en el formulario

Con este ajuste ya podrás visualizar la imagen que has añadido en el formulario de suscripción.

 

Como configurar la pagina de BLOG del child theme Metro-Pro en Genesis

Hasta ahora solo hemos configurado la página de inicio, pero como en toda web hay una página de blog donde se listan todos los artículos en orden cronológico.

Nuestro siguiente paso será configurar dicha página de BLOG.

Para ello nos vamos a Paginas > Añadir Nueva  y la nombramos como BLOG, luego de esto nos dirigimos al lado derecho y  en atributos de pagina seleccionamos la plantilla blog.

pagina de blog genesis framework

Luego de esto, nos dirigimos a Apariencia > Personalización > Portada Estática.  Aquí solo especificamos la página inicial y la pagina del blog.

genesis pagina blog

Ya con estos ajustes hemos configurado la página de BLOG de nuestro tema hijo metro pro.

 

Como añadir un formulario de contacto en genesid framework

En todo sitio web o blog podemos encontrar una sección de contacto que cuenta que un formulario para poder contactar al administrador del sitio web.

Para configurar este formulario necesitaremos instalar el plugins Contact Form 7. Por ello, nos dirigimos a Plugins > Añadir Nuevo e instalamos y activamos Contact Form 7

Luego de esto, nos dirigimos a una nueva sección que tenemos ahora en el panel de control de wordpress.

Nos dirigimos a Contact > Add New

contactform7

En esta sección podemos encontrar los ajustes para el formulario de contacto, allí configuraremos los campos que compondrán dicho formulario mas otras opciones extras.

El primer paso será ponerle el nombre al formulario.

formulario de contacto

Ahora podemos comenzar a añadir los campos que conformaran el formulario.

formulario de contacto 2

Por defecto el formulario ya incluye los campos de Nombre, Email, Sujeto y Mensaje, ya con estos campos son suficientes para que  nos contacten a través de nuestro blog,

Aun falta el paso más esencial para que el formulario funcione correctamente, y es configurar el correo a donde queremos que nos lleguen los emails que nos envíen a través del formulario.

Por ello nos vamos a la sección de Mail, allí aremos los siguientes ajustes:

formulario de contacto 3

To:  Estara el correo donde recibiremos los emails, por defecto se añadirá la cuenta de correo que hemos configurado en la sección de ajustes de nuestro wordpress pero la podemos cambiar a una de nuestra preferencia.

From: Es la sección del remitente, el nombre de quien nos envía el email.

Sujeto: El asunto del mensaje.

Additional Headers: Esta sección nos indica que el autor del mensaje recibirá una copia del email.

Ahora, la siguiente sección Message Body contendra el contenido del mensaje y no ara falta modificar nada en ella.

formulario de contacto 5

Luego que hayamos realizados estos ajustes, toca guardar el formulario, al hacer esto, se creara un código que deberemos añadir a la página de contacto.

Este código lo encontraremos en la sección de Contact > Contact Forms

formulario de contacto 6

Dentro de esta sección se encuentran todos los formularios que habremos creado con el plugins Contact Forms 7, solo tendremos que copiar el código del formulario que creamos hace un momento y pegarlo en la página de contacto.

formulario de contacto

Ya con el formulario creado y el código copiado, nos dirigimos a la página de contacto, si aun no la has creado solo ve a paginas > añadir nueva y nombrara como contacto, luego deberemos pegar el código del formulario de contacto en el contenido de la página de la siguiente forma.

formulario de contacto genesis

Después de haber pegado el código del formulario, proseguiremos a guardar la pagina ya con esto tendremos el formulario de contacto en nuestro blog.

formulario de contacto en la pagina

Hasta ahora  hemos configurado los siguientes puntos:

  1. Instalado y configura los ajustes esenciales de Genesis Framework.
  2. Instalado el Child Theme Metro Pro.
  3. Configurado la página de inicio y blog.
  4. Configurado los menús, logo del blog, y los sidebar que componen el blog.
  5. Ajustado el plugins eNews Extended para captar suscriptores.
  6. Creado la pagina de contacto y añadido el formulario de contacto

Ya con estas configuraciones básicas nuestro blog estará listo para comenzar a recibir las primeras visitas.

Plugins de Genesis Framework para potenciar aun más nuestra web.

Si buscas en el repertorio de wordpress, los plugins para Genesis Framework, seguro encontraras decenas de plugins específicos para genesis.

Pero muchos de ellos no lo necesitas  y todo dependerá de las funcionalidades que desees añadirle a tu blog para hacer uso de ellos.

Por ello, voy a listarte los plugins mas esenciales para génesis que seguro necesitaras si quieres potenciar tu blog.

Genesis Design Palette Pro

Si quieres modificar el estilo de tu child theme, con Desing palette pro puedes modificar el estilo css de génesis sin la necesidad de meterle mano al código.

Genesis Simple Edits

Con este plugin podras modificar las ares de : Fecha, autor, categorías, etiquetas y modificar el texto del pie de página.

Genesis Translations

Este plugin te lo mencione cundo te explicaba como traducir génesis framework al español, solo basta con tenerlo instalado y activado y automáticamente tendrás las opciones de génesis traducidas al español.

Genesis Extender

Otro plugin para añadir o modificar algún aspecto de tu child theme sin tocar el código.

Genesis Visual Hook Guide

Con este plugin podras tener una vista de los hooks y filtros de génesis, para así saber en qué sección deberás añadir el código que quieres.

Genesis Simple Hooks

Uno de mis favoritos para personalizar el child theme, Con este plugin podrás añadir los códigos sin editar el archivo functions.php a través de los hooks.

Genesis Simple Share

Un plugin para añadir los botones sociales a tus artículos, solo para génesis framework . Lógicamente solo vale para Genesis Framework. Lo puedes descargar desde la misma web de creador Brian Gardner

Genesis Title Toggle

Si quiere eliminar el titulo de una pagina este plugins te permite decidir si mostrar o no el titulo, es perfecto para usarlos en las landing page.

Genesis Simple Sidebars

De nuevo otro plugin que nos facilita la modificación de génesis, pero con este plugin podemos crear nuevas áreas de widget y asignarlas a un post o pagina especifica.

Genesis Enews Extended

Otro plugin mas del que hable en el post, con el podemos crear un formulario de suscripción en el blog y es soportado por todos los child theme de génesis.

Genesis Simple Menus

Con este plugin podemos añadir menús de navegación y asignarlos a paginas o post de manera independiente.

Genesis Connect for WooCommerce

Quieres mostrar productos en tu blog o crear una especie de tienda, con este plugins puedes conectar WooCommerce con génesis framework.

Genesis Responsive Slider

Con este plugin podemos añadir un slider a nuestro blog, además es adaptable a los dispositivos móviles.

Te quieres pasar a Genesis Framework? Esto te interesa has click aqui y descubrelo.

Para concluir

StudioPress ha creado uno de los framework que ha revolucionado el diseño y la programación de blogs y sitios web.

También has podido ver la opinión grandes bloggers que se dedican al diseño web como la opinión de bloggers como tú, que han elegido pasarse a Genesis Framework para mejorar sus blogs.

Genesis es uno de los mejores framework que está enfocado al SEO, a la velocidad de carga y a la adaptación de los dispositivos móviles, además de contar con una gran comunidad a su alrededor para resolver todas los percances que puedas tener.

Ahora te toca a ti darme tu opinión sobre Genesis Framewrok!

¿Has utilizado o utilizas Genesis Framework en tu web/blog? ¿Qué ventajas o desventaja has tenido al momento de probarlo?

Como siempre te espero en los comentarios para que compartas tu opinión.

4 comentarios en “Genesis Framework en español: La Guía Prohibida para iniciar tu blog”

  1. hola Eduardo gracias por la guía ha sido de ayuda en algunos atascos que tenia con génesis, ahora me queda uno por resolver a ver si me puedes echar un cable, resulta que el menú en la versión móvil no es clickable en la zona donde pone el nombre de los productos, solo es clickable en la zona de la derecha de cada producto que sale una flechita paro que apenas se percibe, viendo las grabaciones de los usuarios con hotjar la gente hace click en el nombre del producto pero como no funciona y no ven la flechita de la derecha al final se van y pierdo posibilidades de conversión.
    Podrías ayudarme en este tema de hacer clickable toda la zona del menú no solo el área de la flechita.
    Gracias por la ayuda y el aporte que haces a la comunidad de génesis.

    Responder

Deja un comentario