Manual de genesis extender en castellano españolGenesis Extender.

El mejor plugin para personalizar Genesis Framework de WordPress.

Esta extensión de Pago, que la podemos encontrar en la web de CobaltApp nos permite de una forma rápida y simple; modificar, ampliar y cambiar características del child theme que tengamos instalado en la plantilla Padre del framework de Genesis.

Entre sus multiples características destacamos:

  • Custom Css Editor: herramienta de personalización a través de código Css a Tiempo Real.
  • Google Font Control: más de 600 fuentes diferentes para personalizar títulos y la tipografía del cuerpo del contenido.
  • Static Home Page: le da un aspecto personalizado y casi único a la página de inicio.
  • Extender Custom: esta opción nos permite insertar código y condicionales para personalizar el theme a nuestro gusto.

Este manual de Genesis Extender pretende explicar de forma sencilla y en Castellano (Español) las bondades que nos brinda esta maravillosa extensión que es considerada como el mejor plugin para la personalización del framework Genesis.

Vamos a dividir este manual de Genesis Extender en dos partes, una donde explicaremos todas las opciones del menú Extender setting y posteriormente trabajaremos extensamente con el menú más potente de este plugin para genesis framework que es Extender Custom.

Pero antes de empezar a desglosar estos menús, tendremos que comprar y descargar la extensión Genesis Extender y posteriormente instalarla en wordpress desde las opciones de Plugins–>Añadir nuevo.

Una vez instalado el plugin Genesis Extender, en el panel de opciones de wordpress, dentro de la opción Genesis nos aparecerán dos nuevas opciones; Extender Setting y Extender Custom las cuales repasaremos una a una.

opciones del plugin genesis extender

– Extender Settings.

Este menú consta de tres opciones:

  • Plugin Info: 

    En esta pantalla básicamente nos da información de la versión del plugin, nos permite insertar la clave adquirida para poder recibir soporte (sólo en Ingles) y las actualizaciones.

  • General setting:

    Aquí nos detendremos para explicar una a una las opciones de este menú.

configuracion de General setting opcion de extender setting en el plugin genesis extender

1. Static Homepage.

Esta opción nos permite personalizar el aspecto de nuestra página de inicio (Home) de una forma muy sencilla a través de widget que se generar según la selección que hagamos.

Para lograr esto, tenemos que seleccionar la opción Activate the Genesis Extender Static Homepage y posteriormente elegir una de las multiples opciones de Select An EZ Home Widget Area Structure. Por ejemplo, si elegimos la opción EZ Home 1 2 obtendremos una página dividida en fila, la primera ocupara todo en ancho de espacio y la segunda fila tendrá 2 columnas.

Maquetación Ez Home 1 2 de la extensión genesis extender

Ahora nos queda introducir el texto, imagen, shortcodes o código en cada una de las zona habilitadas en esta opción. Para ello nos dirigimos a  Apariencia–>Widgets, aquí encontraremos un nuevos widgets que adoptan unos nombre bastantes descriptivos. En nuestro ejemplo son los siguientes, EZ Home Top#1, para la primera Fila y EZ Home Bottom #1 y EZ Home Bottom #2 para la segunda fila con 2 columnas respectivamente.

maquetado de EZ Home 1 2 del plugin genesis extension

 

Veamos como quedaría un ejemplo donde en la primera fila pondremos una imagen de todo el ancho de la web y en la segunda fila 2 textos informativos con imágenes en los que ofrecemos los servicios de la empresa.

Ejemplo pratico de maquetacion en la extensión para genesis framework genesis extender

Para lograr la Home que se muestra en la imagen anterior, lo único que hemos hecho es pegar el código Html de la imagen en el widget Texto  que nos brinda este apartado.

código html de una imagen insertada en un widget para conseguir una maquetacion con el plugin genesis extender

 

Una forma muy sencilla de poder disponer del editor de texto como el que encontramos en las página y entradas de wordpress, es instalando el plugin Black Studio TinyMCE que nos ayudara a insertar ese código Html, sobre todo sino estamos muy sueltos o lo desconocemos. Para utilizarlo lo único que tenemos que hacer es localizar en los widgets Editor Visual, añadirlo al widget que queremos editar y trabajar como lo haríamos con una página.

plugin Black Studio TinyMCE  para edita en los widget de forma sencilla

 

Otras opciones que nos brinda la zona de Static Home page es Static Homepage Type la cual nos brinda 2 opciones de personalización; una es Full Page que nos muestra la personalización anterior en todo el ancho de la página y Content Column, que nos deja añadir sidebar de diferentes maneras.

variaciones de insertación de sidebar en  la homepage

Y por último, Add the “.entry” class to the EZ Home Container Wrap div  que marcándola, desactivamos la clase Css .entry en el caso que queramos usar otra clase de personalización diferente.

2. Google Font Control.

Esta opción nos deja añadir más de 600 fuentes diferentes que nos brinda Google a nuestra página web. La forma de añadirlas es sencilla, primero pulsamos en la ruta que nos brinda la página http://www.google.com/fonts/ seguidamente elegimos la fuente y pulsamos en el botón Quit use  quit use de google font para saber como insertar fuentes de google al framework genesis este nos mostrara una página donde tendremos que copiar el código que nos suministra, algo como esto, <link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>. Esto lo pegamos en la zona link code goes here… del apartado de la opción del plugin (ver imagen), pulsamos en sans-serif, serif  o cursive según corresponda, esto lo podemos saber en el punto 4 de la página de google font donde nos indica a que fuente se refiere, en nuestro ejemplo nos dice font-family: ‘Open Sans’, sans-serif, si nos fijamos, en la ultima palabra pone sans-serif, pues este es el botón que pulsaremos. Ya tenemos la nueva fuente lista para usar en la lista de Google fonts.

como añadir una fuente de google font al framework genesis

 

3. Page Titles.

La opción Page Titles esta diseñada para eliminar de toda la web los títulos de todas las página si marcamos el parámetro, pero también podemos seleccionar sólo alguna de ellas poniendo el IDs de las páginas separadas con una coma (,) Esta opción nos brinda un buscador para la selección de estas de forma sencilla.

4. Custom Post Type.

Marcando esta función, incluimos en Genesis Extender (menú de Genesis) y en las entradas los tipos de contenido que añaden los plugin como woocommerce. De esta manera, podemos añadir de forma más rápida estas opciones en la edición de cualquier articulo. Y cómo en el punto anterior, sólo lo podemos hacerlo con algunos de los plugin de nuestra elección.

Añadir opciones de los plugins a la opcion custom post types del plugin genesis extender

Para añadir estas opciones que nos instalan algunos plugin, nos dirigimos al menú de Genesis, hacemos clic en Extender Custom–>Label, aquí, asignamos un nombre a la opción que deseamos añadir, marcamos la opción Automatically create a Custom Conditional for this Label y hacemos clic en Save Change. La pantalla que muestra a continuación nos muestra ya la opción añadida y lista para utilizar.

como añadir custom post types a los post type d genesis extender

 

Ahora ya tenemos los Custom Label listos para ser usados en nuestras páginas o entradas.

selección de custom label en la páginas o entradas

 

5. WordPress Post Formats.

Marcado este parámetro, añadimos a las entradas de wordpress la opción de poder seleccionar el tipo de formato a que hace referencia ese Post.

Formats para las entradas de los post en wordpress

 

6. Stylesheet Option.

De las dos opciones que nos brinda esta sección, la primera, Include Genesis “Column Classes” with the Default Stylesheet, a quedado obsoleta debido a que con la nueva version de Genesis (2.1.2, al día de la publicación de este Post) ya lo incorpora por defecto. La segunda opción, Combine & Minify The Default & Custom Stylesheets, es muy recomendable tenerla siempre marcada, su función principal es optimizar las Hojas de estilos (Css) para que la web corra más rápido.

7. Font Awesome Icons.

Esta opción nos permite añadir de forma sencilla los Icono que encontremos en la web Font Awesome. Una vez activada este parámetro y elegido el icono que vamos a insertar en el texto, copiamos la linea de código que no proporciona la web y la pegamos en el editor de Texto de nuestra página o entrada. Estos iconos los podemos personalizar mediante una serie de códigos que nos proporcionan en los ejemplos.

como insertar los icon awesome a las web con genesis con el plugin genesis extender

 

Ejemplo de iconos insertados en una página de genesis extender

 

8. Custom Thumbnail Sizes.

Añade tamaños personalizados de imágenes en Ajustes–>Medios. Sirve para añadir distintos tamaños personalizados para poder usarlos en nuestras entradas o páginas.

9. Code Editor Syntax Highligthing.

Opción que permite una mejor visualización del código en los editores del apartado Extender Custom.

10. Genesis HTML5 Markup.

Activa o desactiva la utilización de código HTML5. La versión actual de Genesis ya lleva este código por defecto y no hace falta su activación.

11. Genesis “Fancy Dropdowns”

Otra opción que ya viene por defecto las nuevas versiones de Genesis y que en las antiguas servia para activar sub indicadores en los menús desplegable así como un efecto mas vistoso.

12. Genesis Extender URL Protocols.

Activa los protocolos de las Url relativas. Esto significa que las Url de la web empezaran desde el .com o .es y esto le permite que la web funciona de forma más fluida y evita problemas de incompatibilidad.

13. Plugin Settings Reset.

Restablece las opciones de todo el plugin (Extender Setting y Extender Custom) a su configuración por defecto.

  • Import/Export

La opción Import/Export nos da la posibilidad de exportar o importar las configuraciones del apartado anterior haciéndonos más fácil la configuración de futuros proyectos. Su funcionamiento es my sencillo, para exportar las configuraciones pulsamos en el botón Export Custom Options, esto nos genera un archivo llamado genesis_extender_customXXXXXX.zip que es el que posteriormente usaremos en otras instalaciones desde este mismo apartado buscando el archivo desde Choose File y haciendo clic en Import Custom Options.

– Extender Custom. (En proceso)

Este apartado, Extender Custom, es la funcionabilidad más potenete que ofrece este plugins para el framewok genesis, así pues, lo veremos en distintos Post punto por punto. De esta forma pienso que este Manual de Genesis Extender sera más ameno y entendible.

Para hacer un resumen, esta opción nos deja introducir código a través de los asistentes que vienen en este plugin: CSS Builder y PHP Builder, de esta manera, esta opción viene muy bien para personas inexpertas en programación Php o Css y es el paso intermedio entre la programación tradicional para el desarrollo de paginas webs.

Los siguientes guías que viene a continuación, son explicadas íntegramente con los siguiente elementos y es imprescindibles su instalación:

  • Theme Genesis
  • Child Theme Genesis Simple (Sirve con cualquier otro child theme para genesis)
  • Plugin Genesis Visual Hooks Guide.
  • Plugin Genesis Extender (Evidentemente)

1. Custom Css.

Esta pestaña nos permitirá modificar los estilo de nuestra web, o sea, que podremos personalizar de manera sencilla el aspecto de la página web como queramos.