Enfold Toolkit. Personalizando Enfold a tu gusto

Área: Diseño Web & Ecom

Enfold es uno de los temas más populares para WordPress y en nuestra opinión uno de los mejores, por su gran adaptabilidad y su buena relación entre facilidad de uso y prestaciones. Con el tiempo y el uso, hemos ido recopilando una serie de recursos que hemos necesitado y que juntamos ahora en un «toolkit», que iremos evolucionando mientras sigamos utilizando este tema.

Aviso: esto no es un tutorial de cómo personalizar Enfold con las opciones ya incluidas en la gestión del tema, sino un recopilatorio de buenas prácticas y de recursos adicionales que habremos de introducir en nuestro código y que nos permitirán hacer cosas que con el Setup propio del tema no podríamos lograr, o bien acciones que rebasan en cierta medida las prestaciones «de usuario» del propio tema.

Preparando Enfold: cosas a hacer justo tras la instalación

  • Descargar el Enfold Child Theme desde http://www.kriesi.at/documentation/enfold/downloads/
  • Opcional: si quieres dar una imagen más profesional, puedes editar los 3 archivos que contiene para personalizar el nombre del tema hijo y la imagen que lo acompaña
  • Copiar el tema por FTP en la carpeta wp-content/themes de tu wordpress (puedes llamarle enfold-child o ponerle el nombre de la web que estás personalizando, siempre queda más profesional 🙂
  • Activar el tema desde Apariencia > Temas

Es necesario activar la licencia de Enfold para que el tema se vaya actualizando a medida que su autor lo mejora. Para ello:

  • Activa el tema si no lo estuviera (si estás usando un tema hijo, momentáneamente tendrás que activar el propio Enfold para activar la licencia, así que mejor si haces la activación  antes de empezar a personalizar un tema hijo)
  • Ir a Themeforest.net (donde se compra Enfold):
    • Apuntarnos nuestro Username que encontraremos en el apartado «Envato Account» de nuestro perfil
    • Ir a SETTINGS, API Keys, y generar una nueva API KEY para la web en cuestión (etiquetarla con un label que nos permita reconocerla, nosotros le ponemos siempre el nombre del dominio)
  • Volviendo a nuestra web, en el gestor de WordPress, en el menú «Enfold», ir a la última opción (Theme Update)
    • Introducir el User Name de Themeforest
    • Introducir la API KEY que hemos generado en Themeforest
    • Guardar los cambios
  • Si estamos usando un tema hijo, no olvidar volver a activar el tema hijo. Recibiremos notificaciones de las actualizaciones de Enfold aunque no sea el tema activo

Con este recurso, conseguiremos que todos los bloques del Editor Avanzado Avia incluyan un campo para una clase CSS personalizada, que luego nos permitirá utilizar el style.css de nuestro tema hijo con mucha más libertad.

  • Acceder por FTP a nuestro tema hijo (wp-content/themes/nombre-del-tema-hijo/ )
  • Bajarnos el functions.php, añadirle la siguiente línea y volver a subirlo modificado
add_theme_support('avia_template_builder_custom_css');

Te será mucho más fácil con una galería de todas las que puedes utilizar

Ver galería

Personalizaciones de la cabecera

Es muy frecuente que queramos modificar la opacidad de la cabecera de nuestra web, especialmente cuando ésta la colocamos superpuesta a alguna imagen o slider de fondo.

Establecerle un determinado color y opacidad es muy sencillo, bastará con establecerlo así:

#header {
	background-color: rgba(0,0,0,0.8) !important;
	}

Si además queremos aplicar ese mismo efecto a la cabecera «scrolled» (es decir, cuando hemos usado el scroll y queremos seguir viendo arriba un Sticky Header también con transparencia) tendremos que añadir un estilo más, y quedará así:

#header {
	background-color: rgba(0,0,0,0.8) !important;
	}
.header_bg {
	background-color: rgba(0,0,0,0.1) !important;
	}

Es bastante frecuente dejar nuestra cabecera fijada a la parte superior de la página, para que el menú siga visible en todo momento aunque el usuario haya hecho scroll. Lógicamente, esta cabecera fija (sticky header) ocupa un trozo del monitor del usuario, y es interesante que ese trozo sea pequeño, que no le restemos demasiada zona de navegación con esa cabecera.

Enfold permite que nuestro logo disminuya de tamaño para que nuestro sticky header no sea demasiado grande. Pero a veces eso puede complicar su legibilidad, y tal vez nos interese utilizar para ese caso una versión alternativa de logo (en la que por ejemplo hayamos eliminado algún claim que sería totalmente ilegible en tamaño pequeño).

Para conmutar la versión de logo que utiliza Enfold al hacer scroll, podemos usar un pequeño truco: hacemos nula la visibilidad de logo original, y metemos la versión alternativa como background del enlace a la home que siempre hay en el logo:

.header-scrolled .logo img { 
     opacity: 0; 
     }
.header-scrolled .logo a { 
     background-image: url(la-url-absoluta-del-logo-alternativo); 
     background-repeat: no-repeat; 
     background-size: contain; 
     }

Personalizaciones de la navegación

Enfold nos permite elegir si queremos que el menú tipo móvil (botoncito que lanza el menú) aparezca sólo en móviles o también en tablets. Esa opción la tenemos en Opciones del tema > Header > Menú móvil.

Pero en ocasiones, queremos utilizar menús tipo móvil en toda resolución  (como era el caso de esta misma web cuando se redactó este contenido).  Para ello, tenemos que añadir en el style.css de nuestro tema hijo el siguiente código:

#advanced_menu_toggle, #advanced_menu_hide {
     display: block !important;
     }
.main_menu { 
     display: none !important;
     }

Nos referimos aquí al típico botón con 3 rayitas que permite desplegar el menú en su versión móvil. Muchas veces será necesario atacar por CSS ese botón para darle un aspecto personalizado.

Usaremos como ejemplo el botón de menú de este mismo sitio web, el cual hemos modificado para que tenga la forma, colores y posición deseados, pero serviría igual como referencia para cualquier otra modificación deseada, lo importante es localizar las clases que atacar: 

a#advanced_menu_toggle:before { 
	content: url(https://www.cubicfactory.com/wordpress/wp-content/uploads/2016/04/menu_icon.png); 
	}
#advanced_menu_toggle, #advanced_menu_hide {
	border:none; 
	margin-top:-35px;
	background:none;
	}

Enfold ofrece un menú móvil relativamente práctico y bastante sencillo, pero será muy frecuente que deseemos alterar su comportamiento nativo. Aquí van algunas formas de hacerlo, donde lo interesante es principalmente ver a qué clase hay que llamar, más que el hecho de aplicar un estilo u otro. Identificar claramente la clase es lo que nos permitirá personalizar el menú a nuestro gusto, el resto son ejemplos que utilizamos para que sea más comprensible:

Cambiar el color de fondo del menú:

#mobile-advanced {
	background:black;
	}

Cambiar características del icono triangular (o el propio icono) que acompaña a cada item de menú:

#mobile-advanced li > a::before, .html_header_mobile_behavior #mobile-advanced span > a::before, #mobile-advanced .mega_menu_title::before {
    content: "►";
    font-family: "Arial";
    font-size: 7px;
    margin-left: -10px;
    position: absolute;
    top: 13px;
    }

En algunas ocasiones, nos puede interesar que un menú de WordPress tenga subtítulos, una pequeña descripción que indique al usuario qué va a encontrar en cada apartado del menú. Un ejemplo real sería el siguiente:

Menu WP con subtitulos

El proceso para insertar subtítulos en Enfold (y en general en cualquier tema wordpress) es el siguiente:

  • Vamos a Apariencia > Menús, y en las propiedades de pantalla (pestañita arriba a la derecha) activamos la DESCRIPCIÓN, que por defecto está desactivada
  • Eso hace que en todos los items del menú tengamos un nuevo campo Descripción, que utilizamos para rellenar con el texto que queramos (sí, sólo admite texto, el logo Ford que ves en la imagen superior se explica más adelante cómo insertarlo)
  • El siguiente paso es editar el functions.php de nuestro tema-hijo y añadir lo siguiente:
function prefix_nav_description( $item_output, $item, $depth, $args ) {
    if ( !empty( $item->description ) ) {
        $item_output = str_replace( $args->link_after . '', '<span class="menu-item-description">' . $item->description . '</span>' . $args->link_after . '', $item_output );
    }
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

Con ello hemos activado los submenús, y se verán en nuestro frontend. Además, hemos aprovechado para dotarlos de una clase (menu-item-description la hemos llamado) que nos permitirá atacar el formato de esos submenús.

Para asignar formatos a esa clase, simplemente la definiremos en nuestra hoja de estilos del tema hijo y le asignaremos los parámetros que queramos. Si estos parámetros son genéricos para todos los submenús, bastará con definir la clase sin más. Pero si queremos que alguno de ellos se comporte diferente (por ejemplo para meter ese logo Ford en el primero de ellos) tendremos que saber cómo llamar eficazmente a ese item. Siguiendo el mismo ejemplo, la llamada sería así:

.av-main-nav > li:first-child  > a > .menu-item-description {
    (aquí los estilos que queramos, por ejemplo una imagen de background como es el Ford de la captura)
}

Para completar este recurso, habría que añadir la posibilidad de ocultar esos subtítulos cuando hacemos scroll en la página y si es que queremos dejar el menú superior siempre visible, puesto que en un sticky header el subtítulo probablemente moleste porque nos hace muy ancha la banda de menú. Para ocultarlo en esos casos:

.header-scrolled .menu-item-description {
	display:none;
}

El efecto de línea horizontal bajo el menú onmouseover es un rasgo muy reconocible de Enfold en su implantación estándar. Muchas veces nos interesará desactivarlo, y si nos ponemos a buscar con Firebug el elemento que lo genera, nos llevaremos la sorpresa de que es bastante más rebuscado de lo que parece.

Sin entrar en detalles, yendo a lo práctico, tenemos una forma muy ágil de desactivarlo. Basta con este estilo en nuestro CSS:

[CSS]
.avia-menu-fx { display: none; }
[/CSS]

Enfold incluye de serie un sistema de navegación secuencial entre los artículos y entre los items de portfolio. Y si bien en este último caso eso puede tener mucho sentido, en un blog raramente podremos afirmar que el hecho de que un usuario esté leyendo un artículo hace que le vaya a interesar el artículo anterior o el siguiente. Para proporcionar esa navegación por intereses ya tenemos las categorías, las etiquetas y los artículos relacionados.

Para quitar los botones de navegacion secuencial en el blog sólo se necesita una línea en nuestro CSS:

#top .avia-post-nav { display: none; }

Muy útil para elegir la fuente que nos conviene en cada momento, este es el listado de tipografías incluido actualmente en Enfold:

Ver listado

Personalización de elementos de contenido del editor avanzado

Enfold nos ofrece por defecto una batería de iconos de la tipografía Fontello para utilizar en nuestros iconos y listas con iconos. Pero muchas veces no está el que necesitamos, y queremos poner algo personalizado: un icono, un texto, una imagen…

Lo único que tendremos que hacer es asignar una clase específica a ese elemento, y luego definir qué queremos que haya dentro del iconbox en esa clase en concreto. A modo de ejemplo, veamos cómo hemos personalizado las cajas con icono de nuestra página de Servicios de Transformación digital para empresas, para que muestren una lista con los números 1 al 4:

  • Primero, hemos asignado las clases icon-one, icon-two, icon-three e icon-four a cada una de las cajas con icono (si no sabes cómo, en este mismo artículo, en la sección de «cosas a hacer justo tras la instalación» explicamos cómo asignar clases específicas a todo elemento del editor Enfold.
  • Después, sólo tenemos que llamar a estas clases y definir su icono así:
.icon-one .iconbox_icon:before {
    content: "1" !important;
    }
.icon-two .iconbox_icon:before {
    content: "2" !important;
    }
.icon-three .iconbox_icon:before {
    content: "3" !important;
    }
.icon-four .iconbox_icon:before {
    content: "4" !important;
    }
.icon-one .iconbox_icon, .icon-two .iconbox_icon, .icon-three .iconbox_icon, .icon-four .iconbox_icon  {
    background: #1936d0 !important;
    }

(esta última instrucción sólo define el color de fondo del icono)

Desde julio de 2016, para insertar Google Maps hace falta enlazarlos con el API de Google. El procedimiento es el siguiente:

  • Estando logueados en google con la cuenta pertinente, vamos a https://console.developers.google.com/apis/
  • Junto al icono de GoogleAPIs, desplegamos para crear un nuevo proyecto y le ponemos el nombre de la web en cuestión que vaya a insertar los googlemaps
  • Entrar al proyecto (desplegable superior) y estando en él, ir en el menú lateral a la biblioteca, buscar y habilitar las siguientes APIs:
    • Google Maps JavaScript API
    • Google Maps Geocoding API
    • Google Maps Directions API
    • Google Maps Distance Matrix API
    • Google Maps Elevation API
    • Google Places API Web Service
  • Siempre dentro del mismo proyecto, ir en el menú lateral a la opción de «Credenciales» y crear una credencial tipo «Clave de API» restringiéndola por URL de referencia, indicando para ello la url del dominio en el campo que nos ofrecen, tipo http://www.nombre-de-tu-dominio.com. Esto impedirá que otros dominios puedan hacer uso de tu credencial (lo cual no es muy habitual que siquiera intente nadie, pero hay gente para todo en la red)
  • Después copiar esa credencial en el apartado Google Services de la zona de Settings de tu tema-hijo (o del propio Enfold si has pasado de todas las recomendaciones al respecto y no has creado un tema hijo)
  • Esperar 5 minutos y tachan… el google map a funcionar.

Solución alternativa: mi Enfold está desactualizado y no tengo esa opción de Google Services en los ajustes del tema.

Si «has perdido» las credenciales del tema Enfold y no puedes registrarlo para obtener una actualización, o aunque tienes las credenciales te da pánico actualizar el tema porque cuando lo montaste no creaste un tema hijo y pudiera ser que todo se te desmonte con la actualización, hay una forma alternativa de inyectar la clave de API en el tema.

Es una solución bastante más farragosa, que encontrarás en esta página de ayuda de Enfold, y que no vamos a repetir entera aqui. A título de resumen, en esa página te dicen dónde tocar para que las llamadas a la API de Google Maps incluyan la correspondiente Key:

  • En js/shortcodes.js
  • En framework/php/class-framework-widgets.php (ojo que éste no lo menciona esa página, pero es necesario)
  • En config-templatebuilder/avia-template-builder/assets/js/avia-element-behavior.js

Editando esos 3 archivos y añadiendo el parámetro key, funcionará. Problema… si posteriormente actualizas el tema, se pierden esos cambios (pero ya habíamos quedado en que esta solución era sólo para los que no pensaban actualizar el tema).

En muchos componentes de Enfold, las imágenes que actúan como enlace tienen un efecto onmouseover que nos atenúa la imagen y nos muestra una flechita encima. Si queremos desactivar ese efecto, que queda demasiado precocinado a nuestro gusto, bastará con esto:

.image-overlay {
	visibility:hidden;
	}

Enfold ofrece un buscador integrado en el menú principal, y un widget de buscador que usualmente se coloca en la barra lateral del blog.

Sin embargo, a veces podemos necesitar un buscador colocado en cualquier otra parte de la página. Para ello, el procedimiento es el siguiente:

  1. En Apariencia > Widgets, creamos un área de widget personalizada
  2. Arrastramos a ese área el elemento buscador que se nos ofrece en la columna izquierda de widgets (y guardamos)
  3. En el editor avanzado, insertamos donde lo necesitemos el componente de Contenido > Área de Widgets
  4. Seleccionamos el Widget de búsqueda personalizado que habíamos creado, y ya lo tenemos !

Si utilizas caracteres especiales (como & por ejemplo), pronto descubrirás que Enfold incluye un estilo específico para ellos. Si quieres devolverles el aspecto del resto del texto, tendrás que añadir ésto a tu CSS:

.special_amp { color: inherit!important; font-family: inherit; font-size: inherit; }

Las galerías de imágenes estándar de Enfold te permiten escoger el número de columnas, pero no se comportan de forma responsive en ese sentido, es decir, sea cual sea la resolución de pantalla, se mostrará la galería con el número de columnas establecido. Obviamente, una galería que queda bien a 6 columnas en un monitor grande, va a quedar microscópica en un móvil.

Podemos alterar por Media Queries ese comportamiento llamando a los thumbs de la galería, así:

@media only screen and (max-width: 900px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
width: 33% !important;
}}

Este ejemplo hará que una galería que en tamaños grandes tenía un número cualquiera de columnas, en pantallas hasta 900px tenga 3 columnas. Combinándolo con más media queries y anchuras, podemos regular a nuestro gusto el número de columnas de la galería en cada resolución.

Personalización de la barra lateral

El widget de últimas noticias o últimos artículos es muy útil, pero en Enfold está configurado de modo que utilice un pequeño thumbnail de la imagen destacada del artículo. Si vuestro blog no tiene habitualmente imágenes destacadas en los artículos, eso nos lleva a que se muestre un feo cuadrado vacío.

Para quitarlo, simplemente añadir a la hoja de estilos personalizada esta línea:

.newsbox .news-thumb, .newsbox .news-time {display: none;}

Personalizaciones del footer

Es frecuente que incluyamos en el footer de una web un kit de botones sociales que permitan acceder a la presencia social de la empresa propietaria de la web. Enfold no incluye «de serie» (o no al menos en el momento de escribir este contenido) un recurso como éste.

Pero podemos solucionarlo fácilmente con un widget de texto con el siguiente contenido:


<ul class="noLightbox social_bookmarks icon_count_4">

<li class="social_bookmarks_facebook av-social-link-facebook social_icon_1">
		<a target="_blank" href="http://facebook.com/lo-que-sea aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook">
			<span class="avia_hidden_link_text">Facebook</span>
		</a></li>

<li class="social_bookmarks_twitter av-social-link-twitter social_icon_2">
		<a target="_blank" href="http://twitter.com/@lo-que-sea" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter">
			<span class="avia_hidden_link_text">Twitter</span>
		</a></li>

<li class="social_bookmarks_gplus av-social-link-gplus social_icon_5">
		<a href="https://plus.google.com/lo-que-sea" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Gplus">
			<span class="avia_hidden_link_text">Gplus</span>
		</a></li>

<li class="social_bookmarks_youtube av-social-link-youtube social_icon_6">
		<a href="https://www.youtube.com/channel/lo-que-sea" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube">
			<span class="avia_hidden_link_text">Youtube</span>
		</a></li>

</ul>

Con Enfold podemos definir cuántas columnas queremos en el footer, pero lo que hará el tema es dividir el espacio disponible entre todas ellas. Si queremos utilizar el footer para incluir una banda horizontal que se muestre en todas las páginas (como el menú que hay encima del pie de página en este mismo artículo) podemos hacer lo siguiente:

Primero definimos el número de columnas del footer, pensando en las que tendremos en el footer como tal, y sumando una más para esa banda horizontal previa (Opciones del tema > Footer > Número de columnas)

A continuación, ajustamos el footer para una anchura del 100% de pantalla, si queremos que la banda horizontal que estamos creando vaya de lado a lado. Para ello tenemos que sobreescribir un par de directivas del CSS original, así:

#footer > .container {
	width:100% !important;
	max-width:100% !important;
	padding:0 !important;
	}

Modificamos por CSS la anchura que el tema asigna por defecto a cada columna (en el código mostrado hemos modificado las columnas de un sistema de 4 columnas, si fuera por ejemplo uno de 3 columnas, habría que sustituir donde pone .av_one_fourth por .av_one_third). Al hacerlo, pensamos ya en que la primera no contará porque irá al 100%. Es decir, en un sistema de 4 columnas asignaremos un tercio de anchura a cada una (no exactamente, vigilar margins para no pasarse):

#footer div .av_one_fourth {
	width:30%;
	margin-left:3%
	}

Por último, establecemos que la primera columna tenga un 100% de anchura, y si queremos le ponemos un fondo diferente para que visualmente parezca ya una banda independiente del footer como tal:

#footer div .av_one_fourth:first-child {
	background:red;
	width:100% !important;
	margin-left:0 !important;
	margin-top:0;
	}

Sólo nos quedará ajustar detalles (espaciados, márgenes, paddings…) y tendremos el efecto deseado !

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CAPTCHA

*