Cómo crear una Web corporativa con WordPress y Genesis Framework

Si buscas en Google “cómo crear una web corporativa con wordpress” vas a encontrar muchos artículos, pero la mayoría te hablan de las ventajas e inconvenientes de crear un sitio web con esta herramienta, pero en esta entrada te voy a explicar a detalle pasos a seguir para crear una web con WordPress y Genesis Framework y cómo modificar ciertas características para dejarlo a tu gusto, como por ejemplo:

• Color el color de fondo de tu plantilla en WordPress.
• Modificar los colores de las diversas secciones de una página principal hecha con Genesis Framework.
• Configurar un carrusel de imágenes en tu página principal con el plugin Genesis Responsive Slider.

Antes de escoger WordPress desde luego que tienes que realizar una evaluación y estudio de qué es lo que se necesita, por ejemplo si  requieres un sitio web corporativo y además quieres crear un blog que sea un eje central para generar contenido y atraer más tráfico a tu web entonces una muy buena opción es WordPress.

Te recomiendo que leas el siguiente post de Enrique Dans el cual explica el tema de WordPress y el futuro y como la idea de una página corporativa ha evolucionado de una simple página estática a una página muy dinámica y fácil de actualizar con WordPress y como dice el mismo Dans en su post:

“más centrado en la visita recurrente, en la suscripción, en la monitorización por parte de aquellos interesados en ver a la compañía como una referencia asociada a una temática concreta”

Bueno aclarado el punto vamos a lo que nos interesa 😉

Herramientas a utilizar

Las herramientas que vamos a utiliza son las siguientes, por favor descarga cada una de ellas:

• El gestor de contenido WordPress, el cual ya debes de tener instalado en tu hosting. Si quieres una guía aquí te dejo este post: Cómo instalar WordPress en un servidor de hosting
• Genesis Framework. La descarga tiene un costo.
• Plantilla o Child Theme – Executive Pro. La descarga tiene un costo.
• Plugin Genesis Responsive Slider.

Instalar Genesis Framework y Child Theme

La instalación de Genesis Framework con WordPress es muy sencilla, una vez que hayas comprado el framework en studiopress ellos mismos te proporcionan toda la información necesaria para llevar con éxito esta actividad.

Pero también en la red existe información de calidad sobre este tema y en español, para muestra aquí estos dos post, el primero de ellos es de Omar de la Fuente: Genesis Framework: la guía re-definitiva que debes consultar si estás pensando en cambiarte a Genesis y el otro es de Fabrizio Ayala: ¿Cómo Instalar Genesis Framework?

Mi receta para instalar Genesis Framework y el tema Pro Executive de manera express.

• Debes de dirigirte al siguiente menú Apariencia > Temas. En dicha ventana tienes que dar clic en el botón de Añadir nuevo y te debe aparecer la siguiente imagen.

• Luego tienes que seleccionar la opción de subir y debes seleccionar el archivo en .zip, como te habrás dado cuenta en mi ejemplo ya he seleccionado el archivo genesis.2.0.2.zip ahora solo me queda dar clic en el botón Instalar ahora. Si la instalación salió correcta debes de ver algo como la imagen de abajo.

Después tienes darle clic al botón Activar para ponerlo en funcionamiento y el mismo procedimiento vas a utilizar para instalar el template. A continuación un avance preliminar de como se ve el sitio con: WordPress + Genesis Framework + Executive Pro.

Como te habrás dado cuenta el sitio web cuenta con varias secciones, las cuales son: El título del sitio web, un post y la sección de Primary Sidebar Widget Area, esta última sección la voy a eliminar de la página principal, para ello tienes que ir al menú de Genesis >> Theme Settings y dirigirte a el apartado de Default Layout y seleccionar la opción Full Width Content la cual es la tercera opción, con esta estructura lo que vamos a provocar es solo mostrar el encabezado y abajo el contenido completo.

Modificar apariencia del tema

Bueno, una vez que se ha instalado WordPress, Genesis y la plantilla entonces lo siguiente es modificar la apariencia del tema, para lo cual nos vamos a dirigir al siguiente menú: Apariencia > Personalizar.

En dicha opción de personalizar te da una vista previa de como se va a ver tu web, en la imagen de abajo te muestro la vista previa sin haber modificado algunas de las características que te permite como son: Título del sitio, colores, imagen de fondo, etc.

Ahora voy a cambiar lo siguiente:

• Titulo del sitio y descripción corta: Pastelería Lupita y La mejor repostería mundial.
• Color de Fondo: Debido a que es una pastelería he decidido el color Rosita 😛
• Imagen de fondo: No selecciono nada.
• Portada Estática: No selecciono nada.

El sitio web con estos cambios va quedando de la siguiente manera:

Crear páginas

Ahora vamos a proceder a crear algunas páginas de ejemplo para luego utilizarlas en el menú principal, para ellos vamos a dirigirnos al menú: Páginas >> Añadir nueva y creamos las siguientes páginas: “Quienes somos y Ubicación”.

Configurar menú

Si quieres ver a detalle la explicación de cómo configurar el menú en wordpress te dejo la siguiente liga: Cómo crear menús en WordPress.

El crear un menú en WordPress es sencillo, aquí te dejo la imagen de cómo configure el menú para la pastelería Lupita 😉 en mi caso a este menú lo he nombrado: “home1”

Configurar el menú con un Widget

Lo que sigue es dirigirse al menú de Apariencia >> Widgets y configurar el menú home1 de la forma como te lo muestro abajo.

En este caso lo que hice fue llevarme el widget de Menú personalizado a la sección de Header Right y configurarlo:

• La opción Título: Lo dejo en blanco.
• la opción Elegir menú: home1 (así se nombre al menú que hice en el paso anterior).

Configurar páginas de productos

En esta paso vamos a crear dos páginas de ejemplo de los productos que va a ofrecer la “Pastelería Lupita” pero dichas páginas las vamos a utilizar en la siguiente sección (Home Slider).

Por ahora solamente entonces las vamos a crear y algo muy muy importante es colocar una imagen destacada en cada página para que el slider que vamos a utilizar en el siguiente paso se visualice correctamente, entonces lo tienes que realizar de la siguiente forma:

Primero procedemos a darle un título a la página y luego colocamos algo de contenido a modo de ejemplo, quedando así:

Luego viene algo muy importante, el colocar la imagen destacada, para ello solo tienes que dar clic en la liga de Asignar imagen destaca, esta opción se encuentra de lado derecho al final de las secciones, se debe de ver de la siguiente forma:

Una vez realizado lo anterior es hora de obtener el enlace corto de la página, para lo cual solo tienes que dar clic en el botón “Obtener enlace corto” y con ello vas a anotar el número de la página ya que dicho valor o id lo vas a utilizar en la siguiente sección, en mi caso el número es el 14.

Configurar la sección Home Slider

Esta sección es la que va a aparecer al inicio de la página principal y en ella podemos colocar un slider o carrusel de imágenes, pero para ello necesitamos primero tener instalado el plugins Genesis Responsive Slider.

Una vez instalado el plugin entonces es necesario entrar a configurar dicho plugin, para ello te vas a dirigir al menú Genesis >> Slider Settings y ahí debes de configurar lo siguiente, para ello te voy a explicar cada una de las secciones que yo he modificado, empecemos:

Type of Content

Aquí solo modifique los siguientes valores u opciones:

• Would you like to use posts or pages? Aquí lo voy a modificar a Page, ya que quiero que algunas páginas salgan en el slider, si quisieras colocar algunas entradas o post entonces la opción seria post.
• Include or Exclude by page ID. Aquí voy a seleccionar en el combo la opción de: Include, ya que quiero especificar que páginas incluir en el slider principal.
• List which page IDs to include / exclude. (1,2,3,4 for example). En esta opción voy a especificar los ids o números de páginas que deseo incluir en el slider, para ello voy a colocar el número 14 el cual corresponde a la página de pastel de fresas, por cierto ya hasta se me antojo un postre 😛
• Number of Slides to Show.  Lo voy a modificar a solo dos slider.

Transition Settings

Esta sección del plugin Genesis Resposive Slider te va a servir para controlar el tiempo entre cada slide, la velocidad del slide, así como el efecto, solo hay dos, solo es cuestión de probar para ver cual te gusta más.

Display Settings

En esta sección de Genesis vas a poder modificar lo ancho y alto en pixeles de las imágenes a utilizar en el slider, también puedes elegir si quieres desplegar las flechas de siguiente o anterior en el slider o si quieres mostrar la paginación mediante botones al pie de cada slider.

Content Settings

En esta sección las opciones que he modificado son las siguientes, lo demás déjalo igual o puedes probar moviendo la configuración.

• More Text (if applicable): Cambie el link a español “Continuar Leyendo…”
• Excerpt Location (horizontal): Esta opción te sirve para definir si quieres colocar de lado derecho o izquierdo el recuadro que aparece a un costado de la imagen el slider. 

Pero en esta sección también vas a poder configurar si quieres desplegar o no el link, el titulo o el contenido del post.

Bueno ya con estas modificaciones el portal de la “Pastelería Lupita”  tiene otra pinta, para muestra checa la imagen de abajo 😉

Algo que se me estaba pasando mencionarte es que agregue en el menú una nueva página la cual se llama “Productos” y abajo de ella coloque la página del pastel de fresa y otra de ejemplo. Por cierto sigo sin comer algún postre 😛 tanto hablar de pasteles me esta dando hambre 🙂

Configurar el logotipo

Si quieres colocar un logotipo en tu sitio web entonces tienes que dirigirte al menú Apariencia >> Cabecera y ahí te da la opción de subir una imagen para utilizarla como logotipo pero debe de tener un tamaño especifico de 260 x 100 pixeles.

Configurar la sección Home Top

Esta sección es la segunda importante en la página principal, va justo debajo de la sección home slider, en ella vas a poder colocar las páginas que desees visualizar en forma de recuadros y con el título de la página, para configurarla debes seguir los siguientes pasos:

• Debes de dirigirte al menú Apariencia >> Widgets.
• Luego tienes que buscar el widget con el nombre de Genesis – Featured Page.
• Después debes de colocar el widget anterior dentro de la sección Home Top.
• Posteriormente tienes que configurar dicho widget, a continuación te muestro la configuración que he utilizado.

Como te habrás dado cuenta las opciones que he modificado son sencillas, te voy a explicar cada una de ellas.

• Title: Es el título que va a aparecer encima de la imagen. Voy a dejar el siguiente texto: “Nuestro Equipo”
• Page: Te permite seleccionar la página que quieres colocar, en mi caso he seleccionado la página titulada Equipo.
• Show Featured Image. Lo he dejado seleccionado ya que con ello se va a poder visualizar la imagen destacada de la página seleccionada, en caso contrario no se mostrara ninguna imagen.
• Imagen Size: Es un combo en el cual vamos a poder seleccionar el tamaño de la imagen a mostrar, para este ejemplo he seleccionado el tamaño de 300 x 100.
• Image Alignment:  Te permite decidir en que posición quieres mostrar la imagen: Ninguna, izquierda o derecha.
• Show Page Title: Con este check box si lo dejeas seleccionado vas a mostrar el título de la página pero a diferencia de la primera opción Title este va a aparecer abajo de la imagen y con un link.
• Show Page Content: Al mantener seleccionado este check box vamos a mostrar parte del contenido de la página a manera de introducción, en mi caso lo he dejado seleccionado.
• Content Character Limit: Esta opción te permite delimitar el número de caracteres del contenido.
• More Text: Si quieres colocar algo extra esta es la opción y todo el texto se va a mostrar como un link a la página.

Haz el mismo ejercicio y coloca tres páginas más dentro de esta sección, ya con estos cambios la página me ha quedado de la siguiente manera.

Modificar Color de Fondo de Home Top

Ahora como observaras el fondo de la imagen anterior es de color blanco, si quieres cambiar dicho fondo entonces tendrás que entrar a modificar la hoja de estilo, para ello tienes que entrar al menú de Apariencia >> Editor. Al entrar al editor debes de buscar de lado derecho el archivo style.css y te debe mostrar una pantalla como la siguiente:

 Por favor antes de continuar te voy a solicitar que respaldes el archivo style.css. Entonces para modificar el color de fondo de la sección home top tienes que buscar y modificar el siguiente código:

Código original:

.home-middle,
.home-top {
background-color: #fff;
clear: both;
overflow: hidden;
padding: 60px 30px 0;
padding: 6rem 3rem 0;
}

Código modificado: Aquí solo voy a cambiar el código la propiedad background-color. El valor #e5a375 corresponde a un color carne o algo así.

.home-middle,
.home-top {
background-color: #e5a375;
clear: both;
overflow: hidden;
padding: 60px 30px 0;
padding: 6rem 3rem 0;
}

El resultado con el cambio de color es el siguiente:

Configurar la sección Call To Action

La siguiente sección importante de la página principal es la de Call to action, esta sección o espacio te va a servir para llamar la atención de tu público, puedes poner como ejemplo ofertas especiales, un concurso, etc.

Para configurarlo tienes que realizar los siguientes movimientos:

• Debes de dirigirte al menú Apariencia >> Widgets.
• Luego tienes que ubicar el widget con el nombre de Texto.
• Posteriormente llevar el widget Texto dentro de la sección Call To Action y colocar dentro del texto el siguiente código:

<div class=”three-fourths first”>Este espacio se puede utilizar para llamar a la acción de algo en específico.</div>

<div class=”one-fourth”><a class=”button alignright” href=”#”>Contactamos hoy </a></div>

Te debe quedar a como te lo muestro abajo en la imagen:

El resultado es el siguiente:

Ahora si quieres modificar el color de la imagen de la sección Call To Action entonces tienes que modificar el siguiente código en la hoja de estilo, debes de seguir los mismos pasos que utilizaste para la sección Home Top.

El código a modificar es el siguiente:

.executive-pro-home .home-cta {
background-color: #222;
color: #ddd;
float: left;
padding: 60px;
padding: 6rem;
width: 100%
}

Código modificado, solo vamos a cambiar el valor de  la propiedad background-color. El valor #f27210; corresponde a el color naranja.

.executive-pro-home .home-cta {
background-color: #f27210;
color: #ddd;
float: left;
padding: 60px;
padding: 6rem;
width: 100%
}

El resultado es el siguiente:

Configurar Home Middle

Si ya configuraste la sección de Home Top entonces para no aburrirte más con este post tan largo jeje te voy a decir que es lo mismo, solo tienes que insertar los widgets necesarios para que aparezca la información que requieras, aquí puedes utiliza por ejemplo también el widget de Genesis – Featured Post, digo eso si ya tienes configurado el blog y quieres colocar alguna entrada.

Voy a utilizar las mismas páginas que utilice en la sección de Home Top solo a modo de ejemplo.

La configuración del blog lo voy a dejar para otra entrega 😉

Configurar las tres secciones de footer

Esta es la última sección de la página principal, vaya creo que ya estamos llegando al final del post, no te me desesperes je, aquí puedes insertar todos los widgets que crear necesario, pero esta parte de la página esta dividida en tres footers.

Vamos a configurar cada uno e ellos, manos a la obra:

Para ello voy a instalar el plugin Simple Social Icons para colocar los iconos de las diferentes redes sociales de la pastelería.

Una vez instalado el plugin anterior me voy a dirigir a la sección de Widgets y voy a buscar el widget Simple Social Icons y lo voy arrastrar hasta el footer 1 y la configuración es intuitiva, solo necesitas escribir las redes sociales y con ello te debe de aparecer en el primer footer.

En el segundo footer voy a colocar el widget de Buscar y con ello se debe de visualizar la opción o recuadro para buscar cualquier palabra en el sitio web.

En el tercer footer voy arrastrar el widget de texto hacia dicho footer y voy a escribir la dirección ficticia de la Pastelería Lupita .

La configuración me ha quedado de la siguiente manera:

El resultado es el siguiente:

De igual manera si quieres cambiar el color o tamaño de la letra tienes que entrar a la hoja de estilo el cual ya mencione anteriormente los pasos para llegar a dicho archivo y luego tienes que buscar el siguiente pedazo de código:

.footer-widgets {
background-color: #848484;
font-size: 14px;
font-size: 1.4rem;
}

Como te habrás dado cuenta el modificar ciertas aspecto de tu plantilla en WordPress no es tan difícil como a veces pensamos.

El resultado final es el siguiente, pero aclaro que este solo ha sido un ejemplo, no he cuidado ciertos detalles como la combinación de colores 😛

Primera parte del sitio web corporativo de la Pastelería Lupita, las secciones son: Home Slider y Home Top.

Segunda parte de la página principal, las secciones son: Call To Action, Home Middle y Footer.

Conclusión

Bueno espero no haberte aburrido ya que el post es muy técnico, este es una muestra de lo que se puede realizar en conjunto con WordPress, Genesis Framework y el tema executive pro de studiopress, esta es una web con páginas e información básica, pero combinando con Genesis hace que tu sitio web sea muy flexible y adaptable a móviles y si llegas a tener un blog en tu web pues dicho framework te va a ayudar al posicionamiento web de tus artículos. Más adelante quizás este tipo de post los haga en vídeo 😉

También aprovecho para invitarte a que visites otro artículo relacionado a la temática en el cual  vas a aprender a cómo crear una Web tipo revista con el tema Metro Pro de Genesis.

Por último, si quieres externar tu punto de vista o alguna otra idea …adelante, me gustaría leerla, puedes expresarte a través de la sección de comentarios y desde luego si te ha gustado y te ha parecido interesante anímate a compartirlo en tus redes sociales, te lo voy agradecer infinitamente.

Por Gerardo Hernández Arias

@gerardoharias