En esta lección te enseñaré a configurar las opciones básicas de diseño y homepage de Metro Pro de Genesis.

Metro Pro es un tema muy simple, pero extraordinariamente limpio y práctico para crear webs de afiliación. Su sistema de Widgets, como en muchos temas de Genesis, puede resultar poco intuitivo al principio, pero en el vídeo verás como en realidad es muy sencillo 🙂

Para configurar la homepage, yo recomiendo Thrive Architect por su gran capacidad de personalización. Además, te permitirá maquetar muchos otros contenidos a tu gusto, con lo que es una inversión a la que sacarás partido. De todas formas, si prefieres no invertir en Architect, en esta lección te enseñaré a crear una portada directamente con widgets de Metro Pro.

Nota: para que te aparezcan las imágenes de las entradas en portada, deberás asignar una imagen destacada a cada entrada.

Estos son los códigos que uso durante el vídeo:

Para personalizar el footer con Simple Edits:

<p>[footer_copyright before="Copyright "] &middot; <a href="https://tuweb.com/politica-de-privacidad/" target="_blank" rel="nofollow">Política de privacidad</a> - <a href="https://tuweb.com/informacion-sobre-las-cookies/" target="_blank" rel="nofollow">Información sobre cookies</a> - <a href="https://tuweb.com/afiliacion/" target="_blank" rel="nofollow">Afiliación</a></p>

Para ajustar el diseño de la web (contenedor más estrecho, títulos más grandes y centrados):

.site-container {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}

.entry {
max-width: 800px;
float: none !important;
margin-left: auto;
margin-right: auto;
}

.entry-title {
text-align: center;
font-size: 40px;
}

.featured-content .entry-title {
font-size: 28px;
}

.sidebar {
max-width: 250px;
margin-left: 0.5rem;
}

@media only screen and (max-width: 767px) {
.sidebar {
max-width: 500px;
margin-left: 0rem;
}
}

Recursos mencionados

• Lunapic (editor de imágenes para modificar canvas)