Diseño

Portfolio sin márgenes en Genesis Sample 2.6.0

30 mayo, 2018 por Luis Colome Dejar un comentario

Hace bien poco publiqué un artículo sobre como crear un portfolio con flexbox en Genesis Sample. Pues bien, basándome en ese mismo tutorial, he creado un portfolio con un estilo que siempre me ha enamorado. Un portfolio a pantalla completa. Sin espacios, ni márgenes entre fotos, ni con ningún borde. Con el título oculto que sólo se desvela al hacer un mouse hover (pasar el cursor por encima). Por supuesto, ese efecto lo eliminamos en las pantallas pequeñas, que suelen ser las táctiles. Y como tales, no usamos ratón.

Como una imagen vale más que mil palabras, ahí os dejo unas capturas de Genesis Sample con el portfolio ya implementado para que veáis a lo que me refiero.

Portfolio a pantalla completa en Genesis Sample

Como he dicho antes, en tablets la información (el título en este caso) que en pantallas de escritorio se ve haciendo un hover, lo he hecho fijo en la base de las imágenes. Y se vería así.

Vista en tablets del Portfolio sin márgenes en Genesis Sample

Y claro está, de igual manera se verá en móviles.

Vista en móviles del Portfolio sin márgenes en Genesis Sample

No descarto crear un tema de Genesis basado en este diseño de portfolio. Así que agradecería que si estás interesad@ me lo hicieses saber. O bien en los comentarios o bien por el formulario de contacto.

Sigamos. Como en el otro tutorial, hará falta que tengas instalado un plugin de Portfolio. Si no lo tienes echa un vistazo a Portfolio Post Type.

Este código está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Alinear imágenes fuera del margen del texto en Genesis Sample

16 mayo, 2018 por Luis Colome Dejar un comentario

Es algo que vi en un par de webs y me gustó mucho. Sin mirar el código pensé como lo haría yo y al principio me pareció un poco chapucero, pero me llevé una grata sorpresa al ver que es precisamente como estaba hecho.

Es un simple código de CSS, pero el efecto es bastante llamativo y puede ser hasta práctico al mismo tiempo. Puedes crear espacios y romper visualmente un texto, simplemente añadiendo una imagen.

Imágenes fuera del margen del contenido en Genesis

El Código

Dependiendo como esté maquetado el tema que uses habrá que variar el código, pero lo que quiero es dejar reflejado es la idea general. Lo voy a hacer con Genesis Sample que se presta mucho a ello por tener una caja de contenido estrecha.

A la imagen que incluyamos en el contenido y que queramos que tenga este efecto, tan sólo tendremos que agregarle una clase extra que será a la que le apliquemos el ancho extra. Esta clase se la aplicaremos a cualquier imagen que en el futuro le queramos dar este efecto.

En mi caso por seguir las directrices de Genesis y un poco la lógica del inglés, he usado alignwide. Pero ya os digo que podéis usar la que queráis.

Ahora tan solo queda agregar el código CSS para permitir a la imágen que se salga del margen. Esto sólo lo haremos para pantallas grandes, luego el código ha de ir en las media queries respectivas. Bastará con añadir este código al final del archivo style.css del tema Genesis Sample.

@media only screen and (min-width: 960px) {
	img.alignwide {
 		margin-left: -200px;
		margin-right: -200px;
 		max-width: calc(100% + 400px);
	}
 }

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.

Como quitar el sitemap de la página 404 en Genesis

1 mayo, 2018 por Luis Colome Dejar un comentario

No sólo vamos a quitar el sitemap de la página de error 404 de Genesis si no que añadiremos una mascota para hacer esta página menos molesta. Porque que aunque siendo error nuestro, no gusta llegar a esta página :).

Copiaremos el archivo 404.php de la plantilla padre de Genesis a nuestro tema hijo. Da igual el que sea. Para eliminar el sitemap sólo tendremos que comentar las siguientes líneas:

if ( genesis_a11y( '404-page' ) ) {
	echo '<h2>' . esc_html__( 'Sitemap', 'genesis' ) . '</h2>';
		genesis_sitemap( '<h3>' );
} else {
	genesis_sitemap( '<h4>' );
}

Quedaría así.

//if ( genesis_a11y( '404-page' ) ) {
//	echo '<h2>' . esc_html__( 'Sitemap', 'genesis' ) . '</h2>';
//		genesis_sitemap( '<h3>' );
//} else {
//	genesis_sitemap( '<h4>' );
//}

Y para añadir la ilustración, en mi caso ese gracioso monstruo negro, tan sólo descargar lo que queramos poner y subirlo previamente a nuestro WordPress. Después añadiremos tres sencillas líneas de código.

Este condicional…

if ( genesis_html5() ) :
 /* translators: %s: URL for current website. */
 echo apply_filters( 'genesis_404_entry_content', '<p>' . sprintf( __( 'The page you are looking for no longer exists. Perhaps you can return back to the site\'s <a href="%s">homepage</a> and see if you can find what you are looking for. Or, you can try finding it by using the search form below.', 'genesis' ), trailingslashit( home_url() ) ) . '</p>' );
 
get_search_form();

Quedaría de esta manera…

if ( genesis_html5() ) :
 /* translators: %s: URL for current website. */
 echo apply_filters( 'genesis_404_entry_content', '<p>' . sprintf( __( 'The page you are looking for no longer exists. Perhaps you can return back to the site\'s <a href="%s">homepage</a> and see if you can find what you are looking for. Or, you can try finding it by using the search form below.', 'genesis' ), trailingslashit( home_url() ) ) . '</p>' );
 
 echo'<div class="monster-404 aligncenter">';
 echo'<img alt="" src="https://engenesis.demo.site/wp-content/uploads/27.png" width="245" height="231">'; //sustituye la url de la imágen por la tuya
 echo'</div>';
 
get_search_form();

No es gran cosa, pero le da otro aire. Podríamos profundizar mucho más en la confección de una página 404 para nuestro site ne Genesis. Dejadme saber si queréis o bien en los comentarios o por el formulario de contacto.

Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.

Ilustración: Vecteezy

Como crear un portfolio en Genesis con Flexbox

20 abril, 2018 por Luis Colome Dejar un comentario

Algo muy común en trabajos para clientes es un portfolio. Hoy vamos a ver como crear un portfolio en Genesis Sample Theme con flexbox, de manera que sea completamente adaptativo a todo tipo de tamaño de pantalla.

Con Genesis crear un portfolio es sencillo y complicado a la vez. Me explico ;). Es sencillo implementarlo. Si haces una búsqueda verás que hay muchos plugins, cada uno con sus particularidades. Pero es complicado dar el estilo y las clases necesarias para dejar el portfolio con la apariencia de eso mismo, un portfolio, como muestro en la foto. De hecho voy a intentar dejar algo parecido a eso, sólo que el título irá debajo, dado que al ser portfolio, las imágenes han de tener mayor protagonismo. Y además serán títulos más pequeños.

Particularmente para Genesis me gusta trabajar con Portfolio Post Type. De hecho mi propio portfolio está hecho con este mismo plugin.

El plugin

Instalamos Portfolio Post Type como cualquier otro plugin. Bien a través del FTP o a través del escritorio de WordPress buscando en el repositorio. Una vez instalado y activado verás que se ha añadido un nuevo elemento en el menú de WordPress. Veo que le faltan muchas cadenas por traducir. Veré si puedo sacar algo de tiempo para terminar de traducirlo por si hay alguien que quiera instalarlo y usarlo.

En este nuevo elemento del menú de WordPress, Portfolio, podemos ver varias opciones. No deja de ser un tipo de contenido personalizado o CPT, así que piensa en él como otro tipo de entrada. Pero no dejan de ser artículos que escribes bajo la nomenclatura de «portfolio». Entonces si hacemos la prueba y escribimos algún artículo al visualizarlo veremos que tiene la misma apariencia que el blog. Eso lo vamos a cambiar.

Lo primero, añadimos una línea que nos dará soporte para los ajustes del archivo. Es decir, que podamos editar los ajustes desde el escritorio de WordPress. Lo añadiremos al archivo functions.php de nuestro tema.

Este código está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Para cualquier duda, aportación o pregunta puedes dejarme un comentario justo debajo. O también puedes mandarme un mensaje a través del formulario de contacto. Si eres suscriptor@ no te olvides de hacerlo a través de la Intranet, pues tendrás preferencia a la hora de que me ponga a contestar emails :).

Feliz día!

Como forzar una disposición (o Layout) en Genesis

2 abril, 2018 por Luis Colome Dejar un comentario

Muchas veces nos hemos encontrado con que en alguna página, artículo, categoría o etiqueta en particular queremos forzar una de las distribuciones de nuestra plantilla de Genesis. O incluso en un CPT o contenido personalizado en concreto.

[Leer más…]

«Header» más delgado en tema Boss Pro de Genesis

13 octubre, 2017 por Luis Colome Dejar un comentario

Los menús pegajosos, o Sticky Menu, por horrible que suene la traducción, junto con los menús fijos (fixed menu), son hoy día muy populares. Facilitan al cliente o lector de nuestra web, una mejor experiencia de navegación (factor importantísimo de la UX), ya que le proporcionan constantemente acceso a casi todas las partes de la web. Son estos detalles los que hacen que aumente el tiempo de permanencia medio de una visita en nuestra web.

Boss Pro

Boss Pro es el tema de Genesis es uno de los que más uso en mis proyectos de diseño. Una de sus ventajas es ese Sticky Menu o en este caso sticky header o cabecera fija, que bajo mi opinión es demasiado grueso. El espacio en la pantalla en limitado y cada pixel cuenta. Por eso, lo primero que hago cuando trabajo con este tema es quitarle altura al menú.

Hay uno sólo, pero para la explicación que quiero dar y que todo el mundo lo entienda, digamos que hay dos menús o cabeceras en Boss Pro. Una, la transparente, la que sin tocar el ratón podemos ver claramente en la portada. Como se muestra en la imagen de abajo.

Y otra la que se muestra en cuanto hacemos algo de scroll con el ratón. Por poco que movamos la página, toda la cabecera se vuelve opaca y se adhiere a la pantalla. Es esta cabecera la que es demasiado gruesa para mi gusto.

Menú original del tema Boss Pro de Genesis

Y como he dicho antes, en diseño web cada pixel cuenta. Con unas pequeñas modificaciones en el CSS podemos hacer este menú o mejor dicho la cabecera completa, aún más delgada.

Cabecera mejorada del tema Boss Pro de Genesis

El código

Las modificaciones las haremos en el archivo style.css de la carpeta de nuestro tema Boss Pro. Las siguientes líneas de código las añadiremos al final de nuestro archivo CSS.

@media only screen and (min-width: 800px) {
.header-scroll .site-title {
       line-height: 60px;
    }

.header-scroll .nav-primary .genesis-nav-menu > li > a {
        padding: 16px 0 14px;
    }
}

Esto modifica el tamaño de la cabecera en pantallas con un mínimo de 800px de ancho. Esto concuerda con las mayoría de tablets. Es decir, que sólo afectará a PC y portátiles. Si además queremos estrechar la cabecera de las pantallas de móviles y tablets, debemos modificar estas otras lineas de nuestro archivo CSS.

Estas líneas de código:

.site-header, .header-image .site-header {
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    position: relative;
    background: #fff;
}

Quedarán así:

.site-header, .header-image .site-header {
    width: 100%;
    z-index: 999;
    padding: 6px 0 3px; /* Sólo hemos bajado un poco el margen externo */
    position: relative;
    background: #fff;
}

Esta parte es opcional, ya que en pantallas de 800px para abajo, el menú no es fijo y se desplaza con el resto de la página. Pero yo cuido mucho los detalles en mis diseños y la concordancia es una de las cosas en las que pongo muhca atención. Me parece coherente con el cambio que hemos hecho antes ;).

Añadido

Ya publiqué un artículo sobre como sustituir el título de la web por código HTML. Este tema se presta mucho a ello. Tiene un diseño pensado para un título tipográfico. Desde luego eso me ha dado muy buenos resultados en varios clientes.

Ya me diréis que os parece la modificación. Se que es sencilla, pero creo que merecía la pena compartirla.