Mis plugins favoritos para Diseñar una Web

WordPress sin plugins y con CSS y JS a lo loco

El otro día os hablaba de los plugins más necesarios para WordPress y que esté optimizado para SEO y ahora os voy a comentar los que más me gustan para maquetar una web, como verás solo son dos uno más para programar y otro para diseñar rápido usando Drag and Drop

Sobre el diseño en WordPress de Drouiz

A día de escribir este artículo he de decir que el tema creado en Drouiz es totalmente hecho a mano, he cogido las cosas que me han molado de uno y otro lado, he cogido un tema que me lo daba todo más o menos hecho para meter un boostrap cualquiera como tema de WordPress y me lo he currado enterito. He diseñado todo usando HTML, CSS y JS, quizás me falte ir poco a poco añadiendo y modificando cosas.

¿Porqué este curro?

Hice esto para tener un control total sobre el diseño y los efectos, si mañana quiero poner unas gráficas, un juego o lo que sea, el tema es mío y siempre puedo programar lo que quiera en JS y PHP y ponerlo, por ello aquí viene mi primer plugin favorito para diseñar. Pero antes comentaros que tenia mil plugins instalados cada cual añadía un efecto, cuando quise meter diferentes servicios en cada página de un servicio concreto, con perdón de la redundancia. Utilicé un plugin, para añadir vídeos otro… total que tenia mil plugins que ralentizaban la web, por otro lado cuantas más cosas tengas instaladas más fácil que una falle y se te caiga la web. Solución mi propio tema, con boostrap mis librerias propias CSS y JS, de esta forma evito que haya otro millón de liberias adicionales que mete cada componente. Por si alguien pensó que da igual el número de plugins si tienes una buena cache, además de relentizar el procesamiento de WordPress cuanta más basura tengas más librerias y cosas meten que afectan al SEO y la carga de la web.

Un plugin para meter código a pelo

¿que son los Shortcodes de WordPress?

Son códigos que al añadirlos en una página o entrada ejecuta un determinado código que hace algo, por ejemplo una galería de imagenes o el famoso embed que nos añade un Youtube. Estos códigos están entre corchetes y cada uno tiene una palabra, como el ya mencionado embed o gallery. Hay plugins que tienen sus propios shortcodes y a continuación vamos a ver como crear los nuestros.

Shortcodes fáciles de hacer.

Aquí os voy a hablar de un plugin muy sencillito para WordPress, se llama Shortcoder y es para gente que quiera usar los CSS y HTML. ¿como funciona? muy fácil creamos un código y un nombre, ese código yo meto ahí un diseño, por ejemplo suscripción a Mautic (un software open source similar a Mailchimp pero Open Source) o un Call To Action. En cualquiera de mis páginas de servicios podéis ver como queda. Por ejemplo en la de Diseñador WordPress. Cada sección es código reutilizable de una a otra página. Vamos a centrarnos un botón call to action. Estos botones suelen ser algo como, si quieres un presupuesto para tu Wordpres pincha aquí: Ejemplo:

Esto lo hago con un Shortcode, en el le digo que color quiero de fondo, que color de letra el titulo y el subtitulo, usando el mismo shortcode y cambiando los colores tengo lo siguiente:

El Shortcode que usa Shortcoder, soy más repetitivo que el ajo, es sc. luego ponemos name=»nombre-personalizado» esto es, el nombre para el código que hemos creado, en mi caso se llama call-presupuesto y luego otras opciones, aquí tengo bg (color fondo), color (color de letra) title (titulo), sutitle subtitulo. Si ahora quiero cambiar todos los botones porque hay una nueva tendencia. Cambio el código en el plugin de shortcoder y ya cambia en toda la web.

Como vemos, podemos reutilizar código en todo nuestro WordPress, en mi caso combino mi tema propio con los shortcodes, creo una clase y la meto en el CSS de todo el tema, pero añado código al Shortcode, imagina que quiero crear una gráfica de visitas a la web o currarme una programación con Google Maps que diga quienes estan conectados ahora y de donde. Puedo crear toda la programación JS en el archivo global y luego añadir el shortcode en las páginas donde quiero que aparezca.

Elementor, WordPress sin código para diseñadores

Shortcoder es un gran plugin y muy sencillo, pero como vemos es para usar código, realmente es para maquetadores y programadores. Si queremos hacer webs en cuestión de minutos de forma intuitiva y solo usando el ratón, bueno a veces el teclado pero no para picar código. Elementor es el mejor plugin que he visto, es el más nuevo de los editores visuales, su competencia como Visual Composer, Divi o Beave Builder para empezar son propietarios, esto quiere decir no solo que tienes que pagar, si no que no puedes modificar su código, Elementor es open source eso permite que la comunidad lo mejore se puedan mejorar o crear nuevas cosas tanto gratis como de pago.

Os dejo este vídeo para que veáis que rápido se crea una página web con Elementor, ha sido realizado por los creadores del Plugin y usando un tema hijo del tema por defecto de WordPress:

Como se puede ver es muy sencillo, además el propio plugin nos permite ver como va quedando la web en los diferentes dispositivos. Sin duda un gran plugin que debemos tener siempre en mente.

Conclusión

Las dos opciones están bien y pueden incluso complementarse ¿que pasa si quiero crear una Landing que cargue un juego en JavaScript o unos datos? pues que lo programamos con Shorcoder y podemos realizar la Landing con Elementor. En la web que estás, la de Drouiz, mi web principal me la hago enterita a mano, si creo algo seguramente, pique el HTML o el CSS pero en webs de clientes o Landings lo diseño con Elementor, de hecho quiero adaptar este tema a Elementor de esta forma puedo crear el «encofrado» con un Boostrap y luego sobre él usar Elementor. Se puede hacer lo mismo con ciertos temas como GeneratePress, pero para mí prefiero usar este tema e ir editando.