Categorías
Crear un blog

Cómo usar Page Builder en WordPress

Page Builder es el maquetador visual para WordPress gratuito más popular del mercado. Con más de 700.000 descargas activas, es sin duda el referente. Para poder tenerlo en tu web simplemente tienes que dirigirte al directorio oficial de plugins de WordPress, instalarlo y activarlo.

La interfaz de Page Builder

Al instalar y activar el plugin de Page Builder no vamos a ver ningún nuevo apartado en el panel de control de nuestro WordPress. Simplemente, en Entradas o Páginas tendremos una nueva pestaña en el editor visual por defecto al lado de las ya existentes Visual y Texto.

La interfaz de Page Builder no es atractiva. El diseño se mimetiza con los estilos de WordPress y simula ser un nuevo apartado del editor visual.

Esta es la interfaz de Page Builder

Las opciones entre las que podemos elegir son:

  • Agregar widget: desde aquí podremos incluir cualquiera de los widgets que trae WordPress por defecto. Esta función también está presente en Visual Composer a través de la opción “”. También podemos añadir 3 widgets propios de este plugin.
  • Agregar fila: desde aquí añadimos una nueva línea, una nueva sección en nuestro diseño. De forma muy visual podremos decidir por cuántas columnas estará formada.
  • Predefinir: aquí accederemos al listado de diseños predefinidos (23). Para poder verlos, tendremos que pulsar sobre el botón “Enable” la primera vez que lo usemos.
  • Historial: funciona como el autoguardado de WordPress, permitiéndonos volver a una versión anterior de lo que estamos haciendo en el diseño.
  • Editor en vivo: cada vez que pulses en él accederás a una especie de vista previa de lo que estás haciendo.

Luego las tres primeras opciones se vuelven a repetir en la zona central del editor.

Principales diferencias entre Page Builder y Visual Composer

  • En Page Builder la sección de widgets acapara todos los elementos que vas a poder incluir en tu diseño, por eso entremezcla los widgets de WordPress con otros diseñados por los desarrolladores del plugin. En Visual Composer se trata de elementos diferenciados y existe mayor variedad.

Diferencia entre Page Builder y Visual Composer

  • El modo de trabajar con filas y columnas se hace más sencillo en Page Builder, al poder ver en la ventana que se despliega el resultado antes de escoger una opción. Incluso después de aplicar un diseño de fila con columnas, podemos cambiar el ancho de cada una simplemente moviendo la línea vertical que las separa.

En Page Builder puedes trabajar con columnas

  • El listado de diseños predefinidos es más amplio en Page Builder que en Visual Composer. Al implementarlo al diseño la estructura que podemos ver es muy parecida a VC. Un gran inconveniente es que estos diseños utilizan muchos de los widgets desarrollados por los chicos de Site Origin y, para poder disfrutarlos, estamos obligados a descargar su paquete de widgets. Este paquete es en realidad un plugin a mayores.

Plantillas de Page Builder

  • El editor en vivo no tiene nada que ver con el que podemos disfrutar con Visual Composer. La interfaz es la misma que la del personalizador de apariencia de WordPress y no es tan cómodo trabajar desde él. Sin ninguna duda, es un apartado que deben mejorar en futuras actualizaciones.

El editor en vivo de Page Builder

  • No existe la posibilidad de desplazar los elementos por el diseño con total libertad, ya que únicamente se nos permite moverlos verticalmente. Esto sin duda es una gran diferencia con Visual Composer.

El editor en vivo de Page Builder

Modos de trabajar con Page Builder

Al igual que con Visual Composer, podemos empezar a diseñar desde cero o utilizando una plantilla predefinida. Si es la primera vez que utilizas un maquetador visual lo más indicado es que empieces utilizando las plantillas, modificándolas y entendiendo su funcionamiento. Cuando ya estés familiarizado con ellas, lo aconsejable es que empieces a hacer diseños desde cero para crear lo que quieres y salirte un poco de las opciones más utilizadas.

Cómo trabajar a partir de una plantilla prediseñada

Para este ejemplo voy a utilizar la plantilla “Fitness Gym” (Predefinidos > Fitness Gym > Use). Una vez implementada verás algo como esto:

Esquema con el que trabajas en Page Builder

Como puedes ver en la imagen anterior, al posar el cursor sobre el rectángulo de una sección en concreto aparecen los comandos Editar, Duplicar y Eliminar. Obvio para que sirve cada uno, ¿no?

En este caso, estoy utilizando para el ejemplo el tema Twenty Eleven de WordPress. Al aplicar la plantilla Fitness Gym las imágenes aparecen cortadas, ya que el cuerpo de la página está pensado para no ocupar el ancho total de la pantalla. ¿Cómo corregir esto?

Problema con las plantillas de Page Builder

Voy a trabajar desde la opción de Editor en vivo. Para solucionar este problema me dirijo al primer widget, denominado SiteOrigin Hero.

Cómo modificar uno de los diseños de Page Builder

Dentro de la sección Design and Layout nos iremos a la opción Maximum container width. Ahí será donde tengamos que establecer el ancho máximo de la imagen. La novedad es que no solo puedes introducir un valor en px, sino que puedes escoger la unidad de medida (que sea porcentaje, em, rem…). Para el ejemplo voy a usar los píxeles del ancho del blog: 960px. Así queda ahora:

Tutorial de Page Builder en español

Ahora vamos a modificar el texto. Para ello volvemos a seleccionar el mismo widget en el editor visual y nos dirijimos a la sección Hero frame.

Cómo cambiar un texto con Page Builder

Cambias la frase por el texto que desees. Fíjate en que hay un shortcode que dice [buttons]. Ahora la pregunta es, ¿cómo cambiamos el texto que sale en el botón, si no podemos tocarlo desde ahí?

Cambiar Page Builder

Fíjate bien en la ventana en la que estabas en el editor en vivo. Debajo de la pantalla del texto existe un rectángulo azulado que dice “Buttons“, y luego una frase que dice “Find out more“. Es esta la frase que quieres cambiar o traducir, así que si haces un click sobre ella se te desplegarán todas estas opciones:

Cambiar el texto del botón en Page Builder

Desde ahí ya ves que puedes cambiar no solo el texto sino el enlace, el color del icono y del botón, etc. Y este es el resultado:

Cómo maquetar una página con Page Builder

Videotutorial de Page Builder en español

 ACTUALIZACIÓN  Estás viendo este apartado gracias al comentario realizado MIGUEL A. el 12 de marzo, en el que me sugería la idea de realizar un videotutorial sobre Page Builder en español. Me pareció una muy buena idea, así que aquí tenéis en vídeo cómo se utiliza este maquetador visual.

Si estás interesado en saber más sobre los maquetadores visuales te recomiendo que te pases por este otro post en el que desgrano mucha información sobre ellos.

¿Te gustaría que publicase una guía (en PDF) desgranando un diseño real de una página en especial? ¿Si, no…?

Categorías
Crear un blog

El error imperdonable que pone en peligro tu WordPress

Se trata de un error que comete el 80% de la gente de forma sistemática y rutinaria. Lo más curioso es que dicho fallo es fruto de la pereza y dejadez, ya que se trata de una tarea sencilla de realizar y que se reduce a un determinado número de clics.

De poco (o nada) sirve que hayas puesto toda tu mejor intención blindando tu WordPress con plugins de seguridad, códigos en el .htaccess, medidas antiSPAM y diseños de pago conseguidos de forma legal (es decir: pagando). Todo, y repito TODO, este trabajo puede irse al garete en menos de un minuto.

De hecho estoy totalmente convencida de que un alto porcentaje de personas que vayan a leer este post se darán cuenta de que también estaban descuidado la seguridad de su WordPress y que, sin ser muy conscientes de ello, estaban cometiendo el error garrafal del que hablaré hoy.

Consecuencias de esta mala práctica

  • Aparición del temido error de la página en blanco en WordPress.
  • Problemas con plantillas y plugins.
  • Altísima probabilidad de hackeo.

Como has podido ver, no se trata de problemas menores. Es más: dependiendo del tipo de sitio que manejes, la gravedad de estas consecuencias puede ser mucho mayor. Con esto me refiero a que no es lo mismo no poder acceder a tu WordPress por la temida página en blanco durante 4 horas si tienes un blog personal, que si tienes un blog generando ingresos recurrentes vía publicidad de adsense o afiliados. ¿Te das cuenta de la cantidad de dinero que puedes perder?

Imagínate que tienes una tienda online creada con WooCommerce y te pasa lo mismo, durante 4 horas o 5 días. ¿Qué volumen de perdidas te supondría eso?

Y si nos vamos a la tercera consecuencia, las perdidas ya no solo son económicas, sino que nos podemos ver inmersos en un problema legal: ¿qué ocurre si te hackean tu tienda online? Datos personales, bancarios, dinero… ¡El alcance del desastre puede ser inmenso!

A estas alturas estarás ya un tanto impaciente preguntándote de qué narices estoy hablando.

No actualizar tu WordPress es tu peor enemigo

Pues sí. Todo esto puede suceder por no actualizar alguna parte de tu sitio. ¿No te parece una “tontería” de tarea? Pues por eso, precisamente, existen tantos problemas. Por menospreciar la que probablemente sea la rutina más delicada de mantenimiento de tu sitio.

Tipos de actualizaciones en WordPress

Existen 3 tipos de actualizaciones y me atrevo a decir que no todas disfrutan de la misma importancia que le otorgamos:

  • Actualización de WordPress: del corazón de nuestro sitio. Sin duda alguna es la más importante de todas. Ahora mismo estamos en la versión 4.4.2, pero todo apunta a que no tardaremos en ver la versión 4.5. Como mucho se producen unas 3 o 4 actualizaciones de este tipo al año.
  • Actualización de tu tema: o de los temas que tengas instalados. Como el corazón de nuestro sitio va avanzando, evolucionando y mejorando, también lo tienen que hacer los temas y adaptarse a las nuevas reglas de juego que el core les solicita. Como mucho, se producen 2 actualizaciones al año de un mismo tema (y ya digo, como mucho).
  • Actualización de TODOS tus plugins: sucede lo mismo que con los temas. Probablemente se trate de la actualización que más veces tendremos que realizar a lo largo del año. Esto dependerá del número de plugins que tengamos instalados. Un solo plugin puede llegar a necesitar una actualización mensual.

Mi recomendación, siempre es la misma: actualízalo TODO. Incluso los temas o plugins que tienes desactivados en tu sitio.

¿Hay actualizaciones que puedo pasar por alto?

Como ya he dicho, yo prefiero siempre actualizarlo todo y tenerlo al día. Pero es cierto que no todas las actualizaciones son iguales.

Importancia de las actualizaciones de WordPress

Fíjate en la imagen anterior. Una vez tengas eso claro, pasa a este ejemplo:
Pongamos, por un casual, que tienes activado WordPress 4.3 (o lo que es lo mismo: 4.3.0).
Si en tu panel de administración te pide que actualices a la versión 4.3.1, se trata de una actualización poco relevante.
Si en cambio te pide que actualices a la versión 4.4, ya se trata de un cambio más significativo. Pero también podrías pasarlo por alto (aviso: poco recomendable).
Si te pide que actualices a la versión 5: amigo mío, esto ya no es ni una opción. Hay que actualizar sí o sí.

Lo mismo sucede con los plugins y con las plantillas.

Casos reales

Lo que no es normal es encontrarse casos como estos:

WordPress muy desactualizado
Pasarme una compañera un cliente para hacer una actualización de contenido (subir un par de textos, imágenes y renovar el enlace a redes sociales) y ver un WordPress versión 3.7 pidiendo a gritos el cambio a la versión actual, que era la 4.4.2. Es decir: se habían pasado por alto más de 7 actualizaciones.

Hay que tener mucha precaución con las actualizaciones y efectuar siempre antes una copia de seguridad. En casos como estos, en los que el WordPress en cuestión tiene que hacer un salto tan grande entre una versión y otra, aumenta el riesgo de que se rompa algo tras la actualización. Mucho cuidado con esto.

WordPress muy desactualizado
Tener instalados más de 50 plugins de los cuales 10 estaban desactivados por desuso. En total había 25 plugins desactualizados.

Ya hable en este otro post de cómo el número de plugins afectaba en el rendimiento de tu blog.

Y hasta aquí el post de hoy. Ten la costumbre de, antes de ponerte a redactar un nuevo post, actualizar todo lo que sea necesario. Si te habitúas a hacer esto, llegará un punto en que ya ni pensarás que tienes que hacerlo, sino que te saldrá de forma inconsciente.

¿Tú también eres de los que evita actualizar?

Categorías
Crear un blog

Avada Fusion Page Builder

Si Avada es el tema premium más popular para WordPress tampoco lo es menos su plugin Fusion Page Builder. Es imposible conocer esta plantilla sin verlo, ya que forma parte de su núcleo (aunque con una particularidad). A continuación un post en el que desgrano todas las posibles preguntas que te pueden surgir acerca de Fusion Page Builder.

¿Qué es el Fusion Page Builder?

Fusion Page Builder es un plugin que forma parte del tema Avada. Es necesario activarlo para poder completar la instalación de esta plantilla en tu WordPress. Si no lo haces, estarás desaprovechando parte del potencial de este tema multipurpose.

Este plugin es el maquetador visual que trae Avada incorporado.

Para qué se utiliza

La utilidad de Fusion Page Builder es la misma que la de cualquier otro maquetador visual: facilita la maquetación de los posts. Se trata de una herramienta que facilita al usuario la tarea de diseñar un artículo, página o landing de una forma muy visual y (a veces) intuitiva. Ya no es necesario saber y teclear código CSS para añadir un botón, dividir el texto en varias columnas o darle algún efecto de animación en concreto a una caja; basta con arrastrar un elemento de entre una serie de opciones y soltar en el lugar en el que queremos que aparezca.

Me atrevería a decir que el buen uso de un maquetador visual aumenta el tiempo de permanencia en página del lector, disminuye el porcentaje de rebote y aumenta el CTR.

Cómo se consigue

Al tratarse de un plugin que forma parte de Avada, la única posibilidad de conseguirlo es la de comprar este tema a través de Themeforest. Una vez comprado, descargado e instalado el tema Avada, te aparecerá señalado como un plugin recomendado y será ahí cuando puedas activarlo.

NO se vende por separado, por si es tu pregunta.
De hecho, este plugin se entiende únicamente como parte de Avada. No tendría sentido alguno querer utilizar Fusion Page Builder en otro tema que no fuera ese, ya que la compatibilidad no está garantizada. Si quieres disfrutar de un maquetador visual en tu blog, te recomiendo que te pases por este otro post en el que hablo de más maquetadores visuales (gratuitos y de pago).

Puntos a favor de Fusion Page Builder

  • Puedes prescindir de este maquetador visual en cualquier momento, aunque quieras continuar utilizando Avada. Al tratarse de un plugin bastará con desactivarlo y eliminarlo.
  • Si estás buscando un maquetador visual que te permita tocarlo absolutamente TODO, te encantará. Alineación, color de fondo y de borde, grosor, tamaño, enlace, icono…
  • Se integra a la perfección con Avada, ya que está pensado para él, y su uso no repercute enormemente en su rendimiento: hay que tener en cuenta que ya se trata de un tema lento de por sí.
  • Trae opciones específicas para WooCommerce: Woo Carousel, Woo Featured y Woo Shortcodes.

Puntos en contra de Fusion Page Builder

¿Cómo se usa Fusion Page Builder?

Para acceder a Fusion Page Builder tendrás que dirigirte a Entradas o Páginas y disponerte a crear un nuevo elemento (post o página, dependiendo de donde estés). Una vez dentro del editor visual que trae WordPress por defecto, debajo del cuadro que corresponde al título, podrás ver un botón azul que dice Fusion Page Builder.

Escribiendo un nuevo post en Avada

Hay cuatro botones que encabezan el editor:

  • Column Options: te permitirá escoger en cuantas columnas quieres que se divida el contenido (tienes 12 opciones).
  • Builder Elements: aquí están los elementos que puedes añadir a tu contenido (46 figuras a elegir).
  • Custom Templates: desde aquí puedes guardar tu propio diseño para reutilizarlo en futuras ocasiones.
  • Pre-Built Templates: aquí residen las plantillas predefinidas que trae el plugin.

Maquetador visual de Avada

Lo primero que tienes que hacer es decidir si quieres utilizar una plantilla predefinida o quieres probar a diseñar tu solo. Si escoges la primera opción, tendrás que irte al último botón y seleccionar la plantilla que desees; si prefieres diseñar desde 0 lo primero es decidir y poner las columnas que correspondan.

Imagínate que quieres un texto dividido en 2 columnas. Tendrás que elegir en el apartado “Column Options” el primer elemento que dice 1/2. Pinchas, arrastras al espacio del contenido de tu post y sueltas en el lado izquierdo. Repites el mismo paso y sueltas en el lado derecho. ¡Listo! 2 Columnas creadas… Pero sin texto.

El siguiente paso es ir llenando el contenido con los elementos del apartado “Builder Elements“: con texto, imágenes, botones… Lo que quieras.

Principales diferencias con otros maquetadores

Las columnas, los elementos, las plantillas predefinidas… Todas son opciones comunes a los plugins disponibles en el mercado bajo el nombre de maquetadores visuales o page builders. Las mayores diferencias las podemos apreciar a nivel interfaz y usabilidad.

Fusion Page Builder es único permitiendo configuraciones hasta el extremo. En ningún otro maquetador veremos la posibilidad de configurar hasta 27 parámetros para implementar un simple botón en nuestro contenido.

No tiene opción (por ahora) de edición en vivo, un punto muy destacable de un plugin de pago como Visual Composer.

Categorías
Crear un blog

Cómo los plugins afectan a la optimización de tu WordPress

Un WordPress no está completo hasta que instalas el primer plugin. Ya sea de seguridad, SEO o para insertar formularios, todos tenemos instalado 1 plugin como mínimo en nuestro sitio. Y permíteme decirte que, con total seguridad, tienes más de 3.

Si buscas información en Internet sobre cuántos plugins debemos tener instalados o, viéndolo desde el otro lado, cuántos plugins podemos llegar a instalar sin que se resienta nuestra web… La respuesta no es específica. Todos los artículos se limitan a decirnos “no tengas muchos plugins“, “tener demasiados plugins“… ¿Pero cuántos son muchos o demasiados?

Lamento decirte que en este post no voy a darte una respuesta.
De hecho, creo que no es fácil dar una cifra generalista. Pero puede dar para otro post…

Lo que sí puedo demostrarte es que según qué plugins tengas instalados, tu web se verá afectada en mayor o menor medida. Además, gracias a este ejercicio podremos saber cuáles son los peores plugins para WordPress y qué alternativas tenemos.

Descubriendo al plugin traidor con P3 Performance Profiler

Cada pocos meses me gusta revisar mi sitio para ver qué está fallando a nivel técnico y encontrar una solución. Como tenía la ligera sensación de tener demasiados plugins instalados, me propuse investigar y ver si estaban afectando y en qué medida a mi blog.

Para hacer esto instalé el plugin P3 Performance Profiler, uno de los mejores inventos de la historia. Puedes encontrarlo en el repositorio oficial de plugins de WordPress porque es gratuito: lo instalas y listo.

Para que el plugin pueda analizar todo nuestro sitio tendrás que dirigirte a Herramientas > P3 Performance Profiler. En la pantalla que aparece ante ti, pulsa sobre Scan Now y espera a que la barra de progreso llegue al final. Una vez termine, podrás seleccionar el botón View Results.

¿Preparado para ver mis escalofriantes resultados?

Mi panorama: una selva de plugins

Antes de la optimización de los plugins

Total de plugins instalados: 23. Madre mía, ¡me he pasado!
Tiempo de carga de plugins: 4.56 segundos por cada visita. Esto significa que cada persona que entra en mi web invierte 4 segundos y medio en que los plugins carguen. Teniendo en cuenta que si una página tarda más de 3 segundos en cargar nos vamos sin verla, ¡este dato es horrible!
Impacto de los plugins: 73.1%. Se refiere al impacto que tienen los plugins sobre el rendimiento total de la página.

Así que tras esta sorpresa que me he llevado y que me ha valido para saber que no solo basta con tener un theme rápido y optimizado, me he puesto manos a la obra.

Procedimiento

Ante un panorama tan tenebroso lo primero que hay que plantearse es lo siguiente:
¿Qué plugins para WordPress de los más pesados son imprescindibles para mi sitio y no puedo eliminar?

O también llamados “los intocables”, que en mi caso estaban muy claros:

  • Akismet: para evitar el SPAM en los comentarios.
  • AMP: para que el tema siga los estándares de las Accelerated Mobile Pages Project. Estoy convencida de que esto influirá, tarde o temprano, en el SEO.
  • Autoptimize: para minificar archivos JS y CSS. Podría minificar los archivos manualmente y prescindir de este plugin. Lo estudiaré.
  • W3 Total Cache: sistema de caché para que el sitio tarde menos en cargar.
  • Wordfence Security: para tener mi web blindada contra posibles ataques.
  • WP-Optimize: para optimizar la base de datos de vez en cuando.
  • WordPress SEO by Yoast: para trabajar el SEO de todo el contenido.
  • Testimonios: plugin creado por mí para mostrarlos (puedes ver uno aquí).
  • Funciones de Lúa: otro intocable que me sirve para no sobrecargar el archivo de funciones.

De esta forma, de los 23 plugins instalados 9 son imprescindibles para que el mundo siga girando. Por tanto se quedan en 14 los plugins a los que puedo meterles mano.

Si quisiera, podría combinar (meter en un único archivo) los dos últimos plugins de este listado y prescindir del AMP y Autoptimize. Pero no quiero cambiarlos ni eliminarlos: prefiero sacrificar otros plugins.

Descartando plugins

Contact Form 7 es el plugin más conocido para la creación de formularios de contacto en WordPress. De hecho, he buscado en el directorio oficial alternativas y ninguna me ha llamado especialmente la atención. Desde aquí aprovecho para decirte que, si tu sabes de algún otro plugin para hacer exactamente lo mismo, te animes a contármelo en un comentario para poder ponerlo a prueba.

Por lo tanto el panorama que tenía era el siguiente: un plugin que estaba ralentizando la carga de todo mi sitio web, ¡utilizándolo solo en 3 páginas! ¿No es de locos? Así que me arremangué y me dije eso de Lúa, si no puedes con tu enemigo únete a él.

¿Para qué cargar todo el código de Contact Form 7 en todas las páginas, si solo es necesario en 3? Así que me puse a hacer un arreglillo por aquí y otro por allá: tocar el código para hacer que este plugin cargue única y exclusivamente en las páginas en las que se muestra.

Tras terminar este post, estoy estudiando la posibilidad de olvidarme de Contact Form 7 para siempre. He decidido crearme mi propio plugin para crear un formulario rápido y sencillo, con sistema reCAPTCHA para evitar SPAM. Este lo utilizaré en mi página de Contacto. En cuanto a las cajas de suscripción… ¡Es el reto que tengo pendiente! Encontrar la forma de que se sincronice el plugin con MailChimp.

Lo mismo sucede con el plugin WP Post Ratings: me interesa que las estrellas se carguen tanto en el blog como en cada post individual, pero no lo uso en mi página principal, sobre mí, contacto… Así que toca hacer otro apaño con código a medida para limitar la carga de este plugin donde no debe.

En cuanto al plugin Easy Social Share Buttons, he decidido sustituirlo (consumía un 20%) por otro más liviano llamado Monarch (que consume nada más que un 3%). También es un plugin de wordpress para redes sociales de pago con funcionalidades más que suficientes para el uso que le doy, además de consumir muchos menos recursos que el anterior.

Y si te estás preguntando por el plugin Revive Old Post, sencillamente he decidido eliminarlo sin más. Aunque sirve para autopublicar posts y dirigir tráfico a tu blog, lo que estaba notando era que desde que lo había activado estaba perdiendo seguidores en Twitter. Y aunque también los ganaba, no al mismo ritmo. Esa imagen de automatizado que estaba teniendo mi perfil no me estaba gustando: por mucho tiempo que pusiese entre cada autopublicación, no era el suficiente (no soy tan activa en Twitter como para que no se note). Así que ver los resultados que me arrojaba P3 Performance Profile ha sido el último empujón que necesitaba para dejar de darle más oportunidades.

El plugin Cookie Law Info no me convencía, así que decidí cambiarlo por otro plugin de cookies para wordpress llamado Cookie Notice.

He eliminado el plugin Font Awesome 4 Menus. Lo tenía instalado y la verdad es que no me hacía falta, ya que la librería de Font Awesome ya estaba cargada en la plantilla del tema (¿en qué momento decidí meterlo?).

He decidido prescindir del plugin wBounce. No me gustan los popups, pero como sé que aumentan la conversión de suscriptores decidí instalarlo en su momento y ahora creo que para qué molestar a nadie con ventanas emergentes. Si estás buscando un plugin gratuito, este cumple totalmente con su función (y es bastante liviano).

Otro plugin que me he cargado: WPSecureOps Easy Firewall. Espero que con Wordfence Security y teniendo el buen hosting que tengo sea suficiente 😉

Así que todas estas pequeñas mejoras, viéndolas independientemente, pueden no significar gran cosa. Pero en un resultado global… ¡Vaya que si influyen!

Sería bueno prescindir del plugin Ultimate Shortcodes. Como puedes ver en el pantallazo inicial, es el tercer plugin (sin contar con los imprescindibles) que más ralentiza la web. El problema es que, si lo desinstalo ahora, tendré que eliminar manualmente todos los códigos que ha puesto. Probablemente lo haga, pero ahora mismo me resulta imposible por falta de tiempo (y ganas, para qué nos vamos a engañar). Ahora entiendes porqué estoy en contra de los shortcodes, ¿no?

Resumiendo

  • He eliminado los plugins Revive Old Post, Font Awesome 4 Menus, wBounce y WPSecureOps Easy Firewall.
  • He cambiado Easy Social Share Buttons y Cookie Law Info por otros plugins más livianos.
  • He optimizado la carga de Contact Form 7 y WP Post Ratings.

Resultados tras la optimización de plugins

Resultados tras la optimización de los plugins de WordPress

ANTES DESPUÉS
Plugins instalados 23 19
Tiempo de carga de los plugins (segundos) 4.56 0.92
Impacto de los plugins 73.1% 72.8%
Llamadas MySQL 53 40

Eliminando 4 plugins, sustituyendo algunos por otros más livianos y optimizando el código donde era necesario, conseguí mejorar el tiempo de carga de los plugins un 80%. El otro dato relevante es el de la reducción en número de llamadas a la base de datos, que pasamos de 53 a 40 (-7). Aún así, el impacto de los plugins sobre el rendimiento de la página sigue siendo bastante elevado (aunque lo lograse reducir un 0,3%): no puedo permitir que afecten cerca de un 73%.

Este ejercicio forma parte del proceso que hay que llevar a cabo para optimizar wordpress. Voy a continuar investigando sobre los formularios de contacto y sobre la elaboración de un plugin propio, y después volveré a hacer un test con el objetivo de ver si consigo reducir más el impacto de los plugins: menos del 50% sería un valor aceptable. ¿Cuento contigo para verlo?

Categorías
Crear un blog

Cómo usar Visual Composer en WordPress

Visual Composer es un plugin premium que entra dentro de los conocidos como maquetadores visuales. Estas herramientas empezaron a aparecer en el 2012 y creo que en España ha sido el 2015 el año en el que se han echo notar con mayor fuerza. Esta tendencia del “drag & drop“, arrastrar y soltar, parece haber llegado para quedarse y hacer felices a muchos bloggers.

Probablemente Visual Composer haya sido de los primeros maquetadores visuales que salieron a la luz. Este lo hizo en el año 2011, y según el contador de Codecanyon lleva desde entonces más de 111.000 compras.

Ahora que, al menos en España, no parece hablarse de otra cosa que de los maquetadores visuales y de los temas multipurpose, surge la pregunta de si esto se tratará de una moda pasajera o de si por lo contrario habrá llegado para cambiar el modo de trabajar con WordPress para siempre. Sea como fuere, no cabe duda de que con la enorme cantidad de blogs que nacen a diario uno debe estar informado de todo lo que sale y tendrá que valorar si subirse a la ola o quedar viendo lo que pasa desde la orilla.

En este post voy a hablar sobre Visual Composer con las principales dudas que suelen surgir entorno a este plugin y aportaré mi valoración personal sobre él. Si tienes alguna duda que no queda resulta con el post, crees que puedo ampliar información sobre algún otro punto o te interesaría que hablara de algún aspecto en concreto, no dudes en hacérmelo saber en los comentarios.

Aviso importante sobre este post
Antes de que sigas leyendo me gustaría informarte de algo. Todos los enlaces referidos a Visual Composer y extensiones de este post son enlaces de afiliados. Lo que esto quiere decir es que, si decides comprarlo desde aquí, yo me llevaré una pequeña comisión sobre el precio del producto. Te va a salir igual de precio que comprándolo desde la página oficial, la única diferencia es que estarás dándome el 30% de lo que pagas. Por ejemplo, si compras Visual Composer desde este post estarás dándome 10,2$ = unos 9,15€ (no es que vaya a hacerme rica pero motiva 😉). Antes de que lo hagas, yo te recomiendo que leas el post hasta el final. Y si quieres comprarlo sin darme nada, también puedes hacerlo eliminando de los enlaces el código &ref=lualouro. Y ahora sí que sí, ¡vamos al lío!

Cómo tener Visual Composer

Visual Composer es un plugin de pago. La mayoría de los temas comprados en Themeforest lo traen incorporado, pero si este no es tu caso tienes la opción de comprarlo desde Codecanyon por 34$.

Cómo instalar Visual Composer

Al tratarse de un plugin hay que instalarlo como cualquier otro. En caso de que hayas comprado una plantilla con él, te aparecerá como un plugin recomendado y tendrás simplemente que activarlo con un par de clicks siguiendo las instrucciones que te aparecerán o bien en el dashboard de WordPress (el panel de control que te aparece al acceder con usuario y contraseña desde la dirección http://www.tuweb.com/wp-login.php) o en el apartado de Plugins.

Si lo has comprado, una vez descargado el archivo de Codecanyon con un nombre parecido a este:
codecanyon-242431-visual-composer-page-builder-for-wordpress.zip
Tendrás que descomprimirlo para poder ver la carpeta.

Luego tendrás que posar tu ratón sobre el apartado de Plugins del panel de control de tu WordPress y, sin pulsarlo, se te desplegará un cuadro en el que verás la opción de “Añadir nuevo“. Pulsas ahí y a continuación sobre el botón gris con letras azules que dice “Subir plugin“, arriba del todo, al lado de “Añadir plugins“. Por último pulsas sobre “Seleccionar archivo” y buscas el .zip que está dentro de la carpeta que has descomprimido y que tiene el nombre de js_composer.zip. Luego pulsa sobre “Instalar ahora“.

Una vez lo hayas instalado, pulsa sobre “Activar plugin“. ¡Listo!

Cómo usar Visual Composer

Podemos utilizar VC tanto en Entradas como en Páginas, por lo que tendremos que dirigirnos a cualquiera de estas dos pestañas para poder acceder al maquetador. Una vez estemos dentro de cualquiera de ellas, seguiremos viendo el editor visual que trae WordPress por defecto y justo entre este y la casilla en la que introducimos el título de la página, podremos ver un par de botones como los de la imagen:

Botones de Visual Composer

Estos son los botones que nos dan acceso al maquetador de Visual Composer. Tendremos que activar alguno de ellos para hacer uso de este plugin. ¿Cuál es la diferencia entre un botón y otro?

Formas de trabajar con Visual Composer en WordPress

Backend Editor: desde aquí podemos añadir elementos, añadir bloques de texto o añadir plantillas tal y como trabajamos con el maquetador visual de WordPress. Trabajamos viendo el código y los textos, pero sin saber cómo será el resultado final hasta que veamos la Vista previa.

Formas de trabajar con Visual Composer

Frontend Editor: el paraíso. Trabajaremos viendo en todo momento nuestra web, pudiendo contemplar de forma inmediata cómo queda la maquetación que estamos haciendo. Incluso podremos ver cómo se comporta nuestra maquetación en diferentes dispositivos para comprobar cómo responde. En la imagen puedes ver cómo es en el sitio que instalé de prueba para hacer este post.

Qué opciones de maquetación tenemos con Visual Composer

Tenemos acceso a 49 elementos diferentes, clasificados dentro de 5 categorías distintas según el ámbito al que afectan: contenido, social, estructura, widget de WordPress y “deprecated” (obsoletos).

Cómo usar Visual Composer

📖 Contenido: desde aquí podremos añadir texto, iconos, separadores, cajas, imágenes, pestañas horizontales y verticales, acordeones, contenedor tipo slider, encabezado personalizado, botones, sliders, reproductores de vídeo, mapas, barras de progreso, gráficos, espacio en blanco y decidir la estructura de contenido que pongas a posteriori. Será el apartado en el que más tiempo pases, ya que en él se encuentran los elementos más utilizados.

Cómo añadir botones de redes sociales con Visual Composer

🚻 Social: desde aquí puedes introducir el botón de “Me Gusta” de Facebook, el “tuitéame” de Twitter, el botón de Google Plus y el de Pinterest.

Añadir otra sidebar en una página con Visual Composer

🗝 Estructura: desde aquí podrás añadir una sidebar a tu contenido, picar HTML puro o JS.

Visual Composer para maquetar tus posts

🛠 Widget de WordPress: desde aquí podrás incluir los widgets que trae WordPress por defecto dentro de tus páginas o tus entradas.

Visual Composer indica los botones que se quedan obsoletos

🚫“Deprecated” (Obsoletos): son aquellos que no van a seguir teniendo soporte desde los desarrolladores del plugin en próximas actualizaciones y, por tanto, debemos evitar utilizarlos.

Pros y contras de usar Visual Composer

Como todo, trabajar con esta herramienta tiene sus ventajas y sus desventajas. Voy a hablar a continuación, desde mi punto de vista, de cuáles son.

A favor de Visual Composer

  • El poder maquetar un post o una página “en directo” es una gozada.
  • Sin ninguna duda, el resultado visual es mucho más potente. Utilizar un maquetador visual nos recuerda la cantidad de elementos que podemos añadir para presentar un contenido de forma más atractiva, incitar al usuario a hacer clic en donde queremos que lo haga y, en definitiva, impulsar una mejor experiencia de lectura.
  • Sin un maquetador como Visual Composer obtener el mismo resultado supone inversión de tiempo picando código, algo que no está al alcance de la gran mayoría de usuarios de WordPress. Se podría decir que se ha “democratizado” la maquetación de contenidos web gracias a ellos, ya que está al alcance de cualquiera.
  • Los diseños más utilizados por nosotros podemos guardarlos para reutilizarlos en otras ocasiones, ahorrándonos tiempo.

En contra de Visual Composer

  • Se trata de un plugin que ralentiza la carga del backend de tu WordPress. Esto quiere decir que quien más va a sufrir la lentitud de tu sitio vas a ser tú mismo (y las personas que escriban posts en él). Aún así, no son valores que sobrecarguen mucho tu web.
  • Un plugin más siempre significa tener que andar con pies de plomo en cuanto a actualizaciones y compatibilidades con otros plugins y con tu mismo tema. Lo que hay que valorar es si realmente es un plugin relevante para ti, si le vas a sacar partido y va a aportar algo a tu sitio o no.
  • Sin algunas nociones de diseño corremos el riesgo de sobrecargar el post o página con demasiados elementos que, en lugar de ayudar al texto, lo rompen y provocan que el lector se distraiga. Hay que tener muy presente la frase del “menos es más”.
  • Su curva de aprendizaje no es muy pronunciada, pero al principio es lioso saber qué elemento debemos modificar para conseguir un resultado determinado y qué tamaño debe tener cada columna para hacer coincidir más cajas en nuestra misma fila. Comprender el uso de elementos que contienen otros elementos, y que todo funciona en base a una rejilla compuesta por filas y columnas puede ser un poco desesperante al principio, sobretodo si pretendemos maquetar contenido de una forma rápida. Si has utilizado algún maquetador visual en otras ocasiones probablemente ya estarás familiarizado con esta manera de trabajar y por lo tanto no te supondrá gran sacrificio aprender a manejarte con Visual Composer.
  • El elemento “Empty Space” (espacio vacío) únicamente permite definir una altura para todos los dispositivos (escritorio, smartphone, tablet…). Esta es la gran desventaja de este plugin, ya que aunque utilicemos un valor variable como un porcentaje o un valor en medida em o rem, es muy posible que en función de la orientación del dispositivo y de su tamaño necesitemos establecer más o menos espacio. Para mí, sin ninguna duda, es el mayor defecto de Visual Composer y que espero que solucionen pronto. Este defecto se puede solventar instalando una extensión específica de la que hablo en el siguiente apartado.

Extensiones para Visual Composer

Ultimate Addons (18$). Lo compré para el proyecto de unos clientes que usaban el tema Shopkeeper. Más concretamente, lo único que necesitaba de este plugin era el elemento “Spacer Gap” para solventar los problemas de adaptabilidad con el elemento “Empty Space“. Lo que permite “Spacer Gap” es precisamente suplir la carencia de este elemento, permitiéndonos otorgar diferentes alturas según el dispositivo del lector. Mientras Visual Composer no incorpore esta funcionalidad, seguiré creyendo indispensable el uso de esta extensión.

Visual Composer Extensions (18$). Trae más de 80 elementos que se incorporan a Visual Composer, sobretodo animaciones y efectos hover.

Existen más extensiones, pero desde mi punto de vista estas son las más destacables a nivel general.

Mi experiencia con Visual Composer

No lo utilizo en mis proyectos personales, pero es cierto que a los clientes que adquieren una plantilla de Themeforest les enseño a usarlo (porque ya lo traen integrado). Es una herramienta con la que, de entrada, no es fácil trabajar. Hay que echarle tiempo y paciencia para familiarizarse con lo que ya dije en otros puntos: ese sistema de organización con contenedores que trabajan como columnas o filas. Creo que es interesante invertir tiempo en aprender a usarlo, sobretodo para bloggers que se toman enserio sus artículos y quieren que el lector disfrute del contenido. En la maquetación de textos marca claramente un antes y un después, pero también creo que sin tener cierto gusto visual se puede arruinar fácilmente un post épico. Al tener a nuestra disposición la posibilidad de incluir botones, sliders, iconos, gráficos que se mueven… Si no nos contenemos nuestro impulso será la de querer usarlos todos y eso, sin duda, es un gran error.

El aspecto más negativo de Visual Composer, sin ninguna duda, es la falta de adaptabilidad de los espacios verticales añadidos con el elemento “Empty Space”. Me parece increíble que, actualización tras actualización, no hayan solventado esta carencia clara del plugin. Por el precio que tiene por separado VC (34$, como ya dije) me parece demasiado tener que hacerse con una extensión del mismo por 18$ (como Ultimate Addons) para poder solucionar ese error. En total, con las bromas nos quedamos en 52$: un precio muy cercano al valor de cualquier plantilla premium para WordPress.

Por fortuna, Visual Composer por fin es compatible con los Custom Post Types (antes era obligatorio instalar una extensión a mayores para poder maquetar un post personalizado). Para que esto sea así, deberás de configurarlo en el apartado “Role Manager” del plugin.

Y tú, ¿usas Visual Composer? ¿Te gustaría compartir tu experiencia con él?