Que si mira qué bonito ese blog hecho con Genesis, que qué colores tiene, que si lleva un diseño pulcro y minimalista…

Seguramente tú también has oído (o leído) alguna expresión como las anteriores.

Como también es muy probable que hayas visto todas las ventajas que dicen que conlleva utilizar el framework de Genesis.

No voy a empezar tan fuerte en este blog diciendo que no creo que Genesis sea la solución ideal para todos los bloggers y emprendedores de la red, pero sí quiero deciros algo:

[dt_quote type=»blockquote» font_size=»big» animation=»none» background=»plain»]Si lo que os gusta de Genesis o, mejor dicho, de sus child themes es el diseño… Que sepáis que estáis pagando por algo que podéis replicar gratuitamente.[/dt_quote]

Sí, has leído bien.

No necesitas comprar Genesis para poder disfrutar de un diseño igual de limpio y minimalista.

[dt_quote type=»blockquote» font_size=»big» animation=»none» background=»plain»]OJO: Hablo de la apariencia, de la estética, del look & feel. Está claro que Genesis es mucho más que eso.[/dt_quote]

De hecho, si este es el único y real motivo por el que estabas dispuesto a pagar cerca de 60$ te digo desde YA que no lo hagas:

Porque si es así significa que no te has interesado tan siquiera en saber qué es Genesis y cuáles son sus bondades. Querrá decir que lo quieres porque lo tienen los demás.

O porque sí has leído para qué vale pero no entiendes lo que significa en realidad, y al final para ti lo que tiene más peso es el diseño.

He conocido a varias personas que únicamente querían hacerse con Genesis [dt_highlight color=»» text_color=»» bg_color=»»]porque les gustaba la estructura y el diseño de la demo[/dt_highlight].

Si has visitado varias webs echas con este framework te habrás dado cuenta de que, si no han tenido a un diseñador por detrás personalizándolo, todas siguen unos patrones visuales muy similares.

Es fácilmente reconocible, a nivel visual, una web realizada con Genesis.

¿Tú también quieres esa apariencia para tu web? Lo único que necesitas hacer es replicar paso por paso todas las instrucciones que voy a compartir contigo en este artículo.

Hoy, en el primer post-tutorial que redacto en Raiola, vas a ver cómo logro replicar el mismo diseño que luce la demo de Genesis en su web oficial utilizando únicamente un tema y un plugin gratuitos.

Tal vez este post ayude a más de uno a plantearse qué framework (de todos los que hay disponibles) es el más apropiado en su caso, en lugar de pensar que Genesis es la única opción disponible.

¿Te quedas a verlo?

Pues vamos a ello.

Índice del artículo

Identificando la estructura de Genesis
Buscando un tema gratuito para clonar el aspecto de Genesis
Modificando la apariencia básica de GeneratePress
Conclusión

Identificando la estructura de Genesis

Antes de ponernos a replicar nada es necesario saber con precisión a qué nos enfrentamos.

En este tutorial voy a imitar el diseño de la demo principal de Genesis que puedes ver aquí.

Si haces un ejercicio de abstracción y sintetización verás que el tema en realidad está compuesto por las siguientes secciones y manchas de color:

Resumiendo:

Cabecera blanca a ancho completo con logotipo, eslogan y 2 menús.
Sección central en la que aparecen listados los posts.
Sidebar a la derecha sobre la que se plasma cada bloque. El primero (y diferente al resto) se corresponde con el formulario de suscripción, el segundo con los iconos a las redes sociales, el tercero a una caja de búsqueda y el cuarto es un listado de comentarios recientes.
El footer, a ancho completo, aparece dividido en 3 columnas (la primera con info sobre Genesis, la segunda con últimos artículos y la tercera con últimos comentarios).
Un «subfooter» a ancho completo con enlaces a redes sociales y referencia a copyright.

Buscando un tema gratuito para clonar el aspecto de Genesis

No necesitas un tema de pago para replicar la estética de Genesis.

El tema con el que he realizado este tutorial es GeneratePress.

Aquí puedes ver cómo es la demo de este theme. Adjunto captura de pantalla:

¡Uy! ¿Es cosa mía o ya se parece muchísimo a Genesis? Imagínate que quitamos el slider y la barra de navegación superior. Nos quedaría algo así:

Ahora se parece mucho más, ¿no? Voy a instalar y a activar el tema y ver qué opciones puedo variar y configurar para que la página principal se parezca lo máximo posible a la home de la demo de Genesis.

Tras buscar el tema en el repositorio oficial de temas de WordPress e instalarlo (Apariencia > Temas > Nuevo Tema –buscas GeneratePress, lo instalas y lo activas-) esta es la apariencia de mi web de pruebas:

¿Qué elementos debo incluir/modificar para llegar a tener el aspecto final?

Establecer un menú principal: ubicado debajo del título del sitio.
Establecer un menú secundario: ubicado a la derecha del título del sitio.
Modificar tipografía.
Aumentar espacio entre header (la cabecera blanca) y el resto de la página.
Modificar márgenes izquierdo y derecho (son más pequeños en Genesis).
Mover la caja de búsqueda para que ocupe el 3er lugar en el sidebar.
Insertar un cuadro de suscripción en el 1er lugar del sidebar.
Insertar un cuadro de iconos de redes sociales en el 2º lugar del sidebar.
Mover la caja de posts recientes al final del sidebar.
Eliminar las cajas de Comentarios recientes, Archivos, Categorías y Meta.
Insertar los widgets en el footer.
Modificar barra inferior del footer: color, añadir enlaces, aumentar altura.

Modificando la apariencia básica de GeneratePress

Colores

Lo primero es ir a Apariencia > GeneratePress y en la pantalla que ves pulsar sobre el botón azul situado a la derecha que reza “Personalizar”.

Ahora haz clic sobre Colores y cambia el Color de los enlaces por este: #c3251d

Personalizador de GeneratePress

Tipografía

Una vez cambies el color, vamos a por la tipografía. Vuelve atrás (pulsando sobre la flecha que está al lado de Personalizar Color) y ahora haz clic sobre Tipografía.

La tipografía que utiliza Genesis es Source Sans Pro, por lo tanto cambia la que trae GeneratePress por defecto (que es la Open Sans) por esa.

Pero esto no es todo. Deberíamos de afinar un poco más con los pesos y tamaños de las tipografías en función de si son encabezados, cuerpo, etc. Esto se puede hacer de forma intuitiva y sin tocar código si añadimos el complemento llamado Generate Typography. Pero se trata de un complemento Premium que cuesta 39,95$, así que pensando en los que quieren ver algo gratuito de principio a fin dejaremos este tema para cuando nos metamos con el código. Es decir: estos cambios habrá que aplicarlos con CSS.

Contenedor

La sección principal de la web no se corresponde con el contenedor que podemos ver en Genesis. Por tanto, iremos a modificarlo.

En el personalizador de GeneratePress haremos clic en Diseño de pantalla > Contenedor y ampliamos el ancho del contenedor de 1100px (por defecto) a 1140px.

Menú

Primero deberemos de establecer un menú. He establecido como menú principal el que dice «Category #1«,»Category #2«,»Category #3» y «Category #4«. Se suponen que son categorías, por lo tanto lo lógico es crearlas primero.

Para eso me voy a Entradas > Categorías y las voy generando.

Una vez listas hay que meterlas en el menú. Para ello nos vamos a Apariencia > Menús y nos fijamos que tras la frase de «Elige el menú que quieras editar:» tenemos seleccionado el Main Menu (Menú principal). Despliegas el apartado de Categorías y lo único que hay que hacer es arrastrar cada categoría a la zona central (arrastrar y soltar). Una vez colocadas marca la opción de Menú Principal y guarda.

Ya tenemos asignado el menú principal. Ahora vamos a crear el menú secundario, el que flota en la parte derecha de la pantalla. Mira si en el desplegable que tienes al lado de «Elige el menú que quieras editar:» existe un «Menú 2«. Si no es así, créalo pulsando sobre este botón:

En él añade las páginas que quieras. En mi caso, para replicar el ejemplo he recurrido a la opción más rápida: añadir Enlaces Personalizados con el nombre que tienen en Genesis (Sample, Layouts, Templates, Contact).

Tras guardar, dirígete a Widgets > Cabecera y arrastra ahí dentro la caja de Menú Personalizado.

Haz clic en la flecha del Menú Personalizado y elige en el desplegable el «Menú 2» que has creado. ¡Listo! Menú secundario establecido. La apariencia y su colocación los manejaremos desde el CSS.

Modificando el sidebar

Ahora vete a Widgets > Barra lateral derecha y mueve la caja de búsqueda para que aparezca en tercera posición, borra las cajas sobrantes (Comentarios recientes, Archivo, Categorías, Meta) e introduce 1 widget de Texto (para la caja de suscripción).

Mueve este último widget a la primera posición en el sidebar (arriba del todo) y asegúrate de que tienes el widget de «Entradas recientes» en la última posición.

Vamos a configurarlo.

Aquí va a depender mucho del gestor de correos que utilicemos. En este caso, haremos la prueba con MailChimp y será desde ahí donde cogeremos el código de formulario a modificar. Para coger el código de formulario en MailChimp bastará con que te dirijas a Lists > Signups forms (dentro de la lista que quieras) > Embedded forms. Copias y pegas el código que te da el formulario “Classic” en el widget de texto correspondiente. En mi caso, este es el código que arroja MailChimp:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="//usuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&amp;id=1acdf2e46b" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><label for="mce-FNAME">Nombre </label>
<input id="mce-FNAME" class="" name="FNAME" type="text" value="" /></div>
<div class="mc-field-group"><label for="mce-EMAIL">E-mail </label>
<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" /></div>
<div id="mce-responses" class="clear"></div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div><input tabindex="-1" name="b_f34786af337810bbda1812dac_1acdf2e46b" type="text" value="" /></div>
<div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" /></div>
</div>
</form></div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email'; /*
 * Translated default messages for the $ validation plugin.
 * Locale: ES
 */
$.extend($.validator.messages, {
  required: "Este campo es obligatorio.",
  remote: "Por favor, rellena este campo.",
  email: "Por favor, escribe una dirección de correo válida",
  url: "Por favor, escribe una URL válida.",
  date: "Por favor, escribe una fecha válida.",
  dateISO: "Por favor, escribe una fecha (ISO) válida.",
  number: "Por favor, escribe un número entero válido.",
  digits: "Por favor, escribe sólo dígitos.",
  creditcard: "Por favor, escribe un número de tarjeta válido.",
  equalTo: "Por favor, escribe el mismo valor de nuevo.",
  accept: "Por favor, escribe un valor con una extensión aceptada.",
  maxlength: $.validator.format("Por favor, no escribas más de {0} caracteres."),
  minlength: $.validator.format("Por favor, no escribas menos de {0} caracteres."),
  rangelength: $.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
  range: $.validator.format("Por favor, escribe un valor entre {0} y {1}."),
  max: $.validator.format("Por favor, escribe un valor menor o igual a {0}."),
  min: $.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
});}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

<div class="mc-field-group"><label for="mce-FNAME">Nombre </label>

</div>

</form></div>

* Translated default messages for the $ validation plugin.

* Locale: ES

$.extend($.validator.messages, {

required: "Este campo es obligatorio.",

remote: "Por favor, rellena este campo.",

email: "Por favor, escribe una dirección de correo válida",

url: "Por favor, escribe una URL válida.",

date: "Por favor, escribe una fecha válida.",

dateISO: "Por favor, escribe una fecha (ISO) válida.",

number: "Por favor, escribe un número entero válido.",

digits: "Por favor, escribe sólo dígitos.",

creditcard: "Por favor, escribe un número de tarjeta válido.",

equalTo: "Por favor, escribe el mismo valor de nuevo.",

accept: "Por favor, escribe un valor con una extensión aceptada.",

maxlength: $.validator.format("Por favor, no escribas más de {0} caracteres."),

minlength: $.validator.format("Por favor, no escribas menos de {0} caracteres."),

rangelength: $.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),

range: $.validator.format("Por favor, escribe un valor entre {0} y {1}."),

max: $.validator.format("Por favor, escribe un valor menor o igual a {0}."),

min: $.validator.format("Por favor, escribe un valor mayor o igual a {0}.")

});}(jQuery));var $mcj = jQuery.noConflict(true);</script>

Guardamos. Este formulario lo tendremos sin apariencia, que se la tendremos que dar (al igual que a todos los elementos de la página) mediante la aplicación de código CSS.

[dt_quote type=»blockquote» font_size=»big» animation=»none» background=»plain»]OJO: Si estás pensando en copiar el anterior código de MailChimp para utilizarlo en tu web, te diré desde ya que no te funcionará. Necesitas generar tu propio código desde tu proveedor de mensajería.[/dt_quote]

Para incluir la caja de las redes sociales antes tendremos que instalar el plugin gratuito Lightweight Social Icons. Una vez instalado y activado ya lo tendremos a nuestra disposición en el apartado Apariencia > Widgets para arrastrarlo al sidebar a la segunda posición, caja a la que le pondremos por nombre «Social Icons«.

Además, ahora nos tocará modificar los colores para que se parezca lo máximo posible a los iconos sociales mostrados por Genesis:

Modifica el azul que hay en Background Color e introduce esta referencia de color al pulsar sobre «Elige un color«: #eeeeee

Modifica el Text Color e introduce esta referencia: #333333

Ahora tendrás que ir añadiendo cada red social pulsando sobre el botón que está abajo a la izquierda de «Add icon«. Siguiendo el orden de los iconos de Genesis, serían estos (sí, la URL no es correcta de ninguno de ellos):

Ahora pulsa sobre Guardar. ¡Sidebar lista!

Modificando el pie de página

Dentro de Widgets vete a Widget de pie de página 1 y pulsa sobre Añadir un widget > Texto.
Ahora vete a Widget de pie de página 2 y pulsa sobre Añadir un widget > Entradas recientes.

Asegúrate de que en Widget de pie de página 3 tienes una caja que dice «Comentarios recientes«.

Así se queda la página si no aplicas el CSS:

Sin CSS

Y este es el resultado aplicando el código CSS adecuado:

GeneratePress es un clon de Genesis Framework

Con CSS

Este es todo el código que he utilizado para conseguir el resultado anterior. Cópialo y pégalo:

ul#menu-menu-2 {
margin-top: 1em;
display:inline-flex;
}

ul#menu-menu-2 li {
margin-right: 1em;
font-weight: 600;
}

nav#site-navigation {
background-color: #fff;
border-top: 1px solid #eee;
}

ul#menu-main-menu li a:first-of-type {
margin-left:0px !important;
padding-left:0px !important;
}

ul#menu-main-menu li a:hover {
background-color: #fff;
color: #c3251d;
text-decoration: underline;
}

.menu-toggle {
color: #333;
}

.inside-header {
padding: 1em 0;
}

.site-branding {
float:left;
padding: 10px 0;
width: 300px;
}

h1.main-title {
font-size: 1.7em;
font-weight: 600;
}

.site-description {
color: #333;
font-size: .9em;
font-weight: 400;
}

.main-navigation .main-nav ul li a {
color: #333;
font-weight: 600;
}

.site-content {
padding-top: 1em;
}

.right-sidebar.separate-containers.site-main {
margin: 20px 40px 20px 0px;
}

form.search-form {
padding: 40px;
}

input.search-field {
background-color: #fff;
border: 1px solid #ddd;
padding: 16px;
font-size: 1.2em;
font-weight: 300;
}

footer.site-info {
background-color: #fff;
border-top: 1px solid #eee;
font-size: 1.1rem;
font-weight: 400;
line-height: 1;
padding: 60px 0;
text-align: center;
}

footer .grid-parent {
color: #333;
}

footer div.grid-container a {
color: #c3251d !important;
text-decoration: underline;
}

.site-main h2 a{
color:#333;
font-weight:600;
}

.entry-meta a {
color: #c3251d;
text-decoration: underline;
}

h4 {
font-size:1em !important;
font-weight:600 !important;
}

aside#text-7 {
background-color: #333;
color: #fff;
}

#text-7 h4 {
color: #fff;
}

#mc_embed_signup .mc-field-group input {
border-radius: 0px;
height: 4em;
margin-bottom: 1em;
width: 100% !important;
font-size: 0.8em;
font-weight: 300;
}

input#mc-embedded-subscribe {
background-color: #c3251d !important;
color: #fff;
border-radius:0px !important;
height: 4em !important;
width: 100% !important;
}

#recent-posts-2 a {
text-decoration: underline;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

ul#menu-menu-2 {

margin-top: 1em;

display:inline-flex;

}

ul#menu-menu-2 li {

margin-right: 1em;

font-weight: 600;

}

nav#site-navigation {

background-color: #fff;

border-top: 1px solid #eee;

}

ul#menu-main-menu li a:first-of-type {

margin-left:0px !important;

padding-left:0px !important;

}

ul#menu-main-menu li a:hover {

background-color: #fff;

color: #c3251d;

text-decoration: underline;

}

.menu-toggle {

color: #333;

}

.inside-header {

padding: 1em 0;

}

.site-branding {

float:left;

padding: 10px 0;

width: 300px;

}

h1.main-title {

font-size: 1.7em;

font-weight: 600;

}

.site-description {

color: #333;

font-size: .9em;

font-weight: 400;

}

.main-navigation .main-nav ul li a {

color: #333;

font-weight: 600;

}

.site-content {

padding-top: 1em;

}

.right-sidebar.separate-containers.site-main {

margin: 20px 40px 20px 0px;

}

form.search-form {

padding: 40px;

}

input.search-field {

background-color: #fff;

border: 1px solid #ddd;

padding: 16px;

font-size: 1.2em;

font-weight: 300;

}

footer.site-info {

background-color: #fff;

border-top: 1px solid #eee;

font-size: 1.1rem;

font-weight: 400;

line-height: 1;

padding: 60px 0;

text-align: center;

}

footer .grid-parent {

color: #333;

}

footer div.grid-container a {

color: #c3251d !important;

text-decoration: underline;

}

.site-main h2 a{

color:#333;

font-weight:600;

}

.entry-meta a {

color: #c3251d;

text-decoration: underline;

}

h4 {

font-size:1em !important;

font-weight:600 !important;

}

aside#text-7 {

background-color: #333;

color: #fff;

}

#text-7 h4 {

color: #fff;

}

#mc_embed_signup .mc-field-group input {

border-radius: 0px;

height: 4em;

margin-bottom: 1em;

width: 100% !important;

font-size: 0.8em;

font-weight: 300;

}

input#mc-embedded-subscribe {

background-color: #c3251d !important;

color: #fff;

border-radius:0px !important;

height: 4em !important;

width: 100% !important;

}

#recent-posts-2 a {

text-decoration: underline;

}

Conclusión

GeneratePress es un theme que ha sido creado pensando exactamente en ofrecer una versión de Genesis gratuita. A día de hoy lleva 795.270 descargas, está presente en más de 50.000 páginas web activas y su versión premium tiene un coste de 39.95$.

[dt_highlight color=»» text_color=»» bg_color=»»]TIP: Si quieres personalizarlo de forma cómoda desde el personalizador de WordPress y te gusta este tema, mi recomendación es que te hagas con la versión premium. En ella tienes 12 extensiones que te facilitarán mucho la vida si lo tuyo no es el código.[/dt_highlight]

En cuanto a sus características, sus desarrolladores prometen que se trata de un tema liviano y rápido, responsive, con microdatos, seguro y estable, personalizable, compatible con los plugins más populares (WPML, WooCommerce…), traducible, con Font Awesome incluido y developer friendly. Curioso que en su web oficial ofrezcan un artículo muy bien explicado de cómo optimizarlo para conseguir un 98/100 en el test de Pingdom Tools y un 99%-98% en GT Metrix.

Además, funciona a la perfección con un maquetador visual que llega pisando fuerte: Elementor.

Ahora queda analizar si realmente GeneratePress merece la pena o no, y si únicamente estamos hablando de una apariencia similar a Genesis o si por lo contrario su código y funcionamiento también son dignos de estar a la altura.

Pero eso…

Eso tendría que hablarse en otro post.

Espero haberte descubierto algo que desconocías, hacer que te hayas planteado si Genesis es tu mejor opción o descubrir que odias (mucho) el poquito código que hay en esta entrada.

[Total: 10 Promedio: 4]

Cómo clonar Genesis sin pagar ni un euro

Identificando la estructura de Genesis

Buscando un tema gratuito para clonar el aspecto de Genesis

Modificando la apariencia básica de GeneratePress

Colores

Tipografía

Contenedor

Menú

Modificando el sidebar

Modificando el pie de página

Conclusión

Autor: Lua Louro