Recopilación de las herramientas de diseño web WordPress que necesitas

Aquí encontrarás las herramientas de diseño web que necesitas, desde el hosting hasta aspectos de diseño, imágenes, fuentes y otras muy interesantes!

Divulgación de afiliados: Algunos de los enlaces de esta entrada son enlaces de afiliados. Esto significa que si pulsas en el enlace y haces una compra, recibiré una comisión sin ningún coste para ti. ¡Gracias por tu soporte! 

En el proceso de creación de una página web, necesitamos herramientas y recursos para tener un contenido y diseño de calidad.

Este post es una recopilación de las herramientas de diseño web WordPress para tenerlo todo a mano. A parte del Hosting, la mayoría son herramientas gratis, las otras que son de pago a veces realmente vale la pena hacer una inversión para ahorrar tiempo y tener material de calidad. Te lo detallo a continuación: 

recopilacion herramientas muy utiles crear pagina web wordpress diseño visual

Tabla de contenido

lista-herramienta-diseño-web-wordpress

Los tres mejores Hosting para WordPress

Empezando por la base de una página web, la herramienta de diseño web WordPress indispensable es el Hosting para nuestro dominio y poder instalar WordPress. En este caso no existe una opción gratuita y es una de las pocas inversiones que tendremos que hacer.

Antes de decidirte por el Hosting, tanto si es uno de los que te recomiendo como otro, un detalle importante a tener en cuenta es que incluya el certificado SSL. Si no sabes lo qué es un certificado SSL, te lo cuento en este post. Además mira que sea compatible con la instalación de WordPress. Los tres que te propongo tienen tanto el certificado SSL incluido y son perfectamente compatibles y de fácil instalación de WordPress:

Hosting con Webempresa

Hosting con Siteground

Hosting con 
Raiola Networks

Si te hace falta un dominio, es el siguiente paso una vez hayas contratado el Hosting, en la mayoría verás que está incluido al menos 1 dominio. Ante cualquier duda, contacta con el servicio de Hosting que quieras contratar para tener claro que la renovación del dominio está incluida en el precio (es anual).

lista-herramienta-diseño-web-wordpress

Herramientas para el aspecto y diseño de la página web

Una gran parte del diseño web WordPress es visual, y para ello las herramientas y recursos que más uso en mis diseños son los siguientes:

recopilacion herramientas muy utiles crear-pagina web wordpress diseño visual
lista-herramienta-diseño-web-wordpress

¿Qué es Elementor? Para mí Elementor es el Plugin WordPress estrella. Permite editar las páginas web de forma visual y ver los resultados al momento. Si ya estás usando este potente Plugin, quizás te interesa este post donde te cuento trucos útiles. 

Te recomiendo usar Elementor para el diseño visual de la página, tiene una gran variedad de widgets y su método de arrastrar y soltar es muy cómodo e intuitivo. Una vez tengas el Hosting y el dominio, ya podrás instalar WordPress, entrar en modo administrador, instalar el Tema que quieras usar, hacer los ajustes iniciales e instalar el Plugin Elementor para empezar a crear páginas web.

Personalmente para diseñar las páginas web uso Elementor Pro, tiene un pago anual pero la verdad que sale mucho a cuenta por las ventajas que ofrece. Si te estás preguntando si vale la pena comprar este Plugin, estas son para mí unas de las ventajas por las que merece la pena tener Elementor Pro:

Simplemente con Elementor Pro, te puedes centrar en el diseño visual de la página web e invertir más tiempo en el proceso creativo. Para mí hubo un antes y un después en el diseño de páginas web.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Canva? Canva es una herramienta de diseño online con muchas plantillas personalizables y con infinidad de opciones. Tanto se puede usar en PC como en versión móvil, e igual como Elementor, funciona con el método de arrastrar y soltar. Es una buena alternativa a programas de diseño caros y con muchos recursos añadidos, plantillas, imágenes y fuentes. Las plantillas que ofrece son Redes Sociales (historias de Instagram, Posts para Facebook, Pines para Pinterest…), Personales (invitaciones, tarjetas, postales…), para Negocios (presentaciones, sitios web, logos, facturas,…), Marketing (posters, flyers, newsletters,…), Educación (hojas de trabajo, planes, horarios…) y Tendencia (variedad de las últimas novedades). 

Las principales ventajas de la versión de pago por las que merece la pena hacer la inversión son las siguientes:

Aquí puedes consultar el resto de ventajas de Canva además de todos sus planes anuales. La diferencia entre el Pro y Enterprise, es que este último se centra para el trabajo en equipo.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Creative Market? Creative Market es un mercado digital de productos para incluir en tus diseños. Ofrece  fuentes, gráficos, temas para WordPress, imágenes y plantillas únicas. El material es de calidad y está hecho por diseñadores independientes de todo el mundo. La verdad que son productos que ayudan a ir más rápido con los diseños, ya que estan listos para usar. Cuidan mucho los detalles y estan hechos por grandes profesionales. Los precios varían dependiendo de cada producto.

Si quieres probar la calidad y originalidad, cada semana ofrece diferentes productos gratis descargables muy interesantes, sólo hace falta registrarse.

lista-herramienta-diseño-web-wordpress

Imágenes y vectores para tu web

Siempre se ha dicho que una imagen vale más que mil palabras, y en el diseño web además tiene que ser de calidad si no queremos que nuestros visitantes se vayan corriendo de nuestra página y no vuelvan.
Las imágenes son muy importantes en el diseño web porque captan la atención del visitante y se traducirá en una mejor experiencia de usuario y aumento del tiempo que se quedan navegando en tu sitio. También son positivas a nivel de on-site SEO, con un nombre de archivo descriptivo y descripciones Alt ayudan a los buscadores a saber que hay en tu página y a mejorar los resultados de búsqueda. Todo esto también es aplicable a elementos gráficos, ilustraciones e infográficos.

recopilacion herramientas muy utiles crear-pagina web wordpress diseño visual

Te propongo bancos de imágenes gratuitos y de pago para encontrar imágenes de calidad. Los bancos de imágenes gratuitos muchas veces son muy útiles y encuentras exactamente la foto que necesitas. Pero sí que es verdad, que si buscas algo muy específico, los bancos de imágenes de pago tienen mejor variedad y es más fácil encontrar lo que estás buscando.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Pixabay? Pixabay es una de las páginas más conocidas de bancos de imágenes, vectores y videos gratis. La calidad y variedad de las imágenes que ofrece es buena, y si encuentras la imagen que necesitas, es una buena alternativa gratis a otras de pago. Por contra, al ser la más conocida mucha otra gente usa sus imágenes y puede ser que luego tu contenido no parezca tan original. También si buscas algo muy concreto, es posible que no lo encuentres. Lo bueno es que es gratis y no es necesario hacer un reconocimiento al autor ni poner el enlace a la fuente original. 

lista-herramienta-diseño-web-wordpress-2

¿Qué es Pexels? Pexels es otro de los bancos de imágenes y videos gratis más conocidos. Es una buena opción para combinar con Pixabay y poder encontrar la imagen que buscas. Igual que Pixabay, es gratis y no es necesario hacer un reconocimiento al autor ni poner el enlace a la fuente original.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Unsplash? Unsplash es el tercer banco de imágenes gratis que en combinación con los otros dos hacen una buena fuente de imágenes a usar. Como te comentaba antes a veces es difícil encontrar algo muy especifico y necesitas buscar en más de un sitio.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Shutterstock? Shutterstock es uno de los bancos de imágenes más conocidos y con más cantidad de imágenes, vectores, vídeos, imágenes de editorial y música que existe. Gracias a su riguroso proceso de aceptación de archivos, hace que la librería que dispone sea de gran calidad. Además las búsquedas dan buenos resultados, reduciendo el tiempo a invertir en la búsqueda de contenido. 

En el momento de escribir este artículo, en Shutterstock tienen una oferta de 10 imágenes gratis en un período de prueba de 30 días. Se puede cancelar en cualquier momento y puedes quedarte con las imágenes. Es una buena manera de probar como funciona y la calidad de estas. Cuando trabajo para clientes de un nicho muy específico, termino encontrando aquí las mejores imágenes y que mejor se adaptan al nicho. Es difícil disponer uno mismo de imágenes de calidad profesional y Shutterstock ayuda a dar una buena impresión.

Si entras en una página con contenido visual de mala calidad, no te dará confianza y no te resultará atractivo, lo que vas a hacer es salir y no regresar. Por eso a veces es necesario invertir en contenido digital de calidad para obtener beneficios en un futuro.   

lista-herramienta-diseño-web-wordpress-2

¿Qué es Adobe Stock? Adobe Stock es otro de los bancos de imágenes más conocidos y con una gran variedad y cantidad de imágenes, ilustraciones, vectores, vídeos, imágenes de editorial, audio, plantillas para trabajar con los programas de Abobe (Photoshop e Ilustrator) y contenidos 3D. Si trabajas con los programas de Adobe, tendrás la ventaja de poder buscar y usar directamente dentro de los programas. Puedes usar las imágenes con la marca de agua, y una vez terminado el diseño, comprar la licencia para las imágenes usadas.  Lo mismo puedes hacer al crear la página web. Puedes descargarte las imágenes con las marcas de agua, y una vez terminado el diseño, cambiarlas por las imágenes con licencia.

Además de la imágenes de pago, Adobe Stock dispone de un apartado de archivos stock gratuitos. Vale la pena pasarse por aquí en el proceso de búsqueda de imágenes para la creación de la página web. Ofrecen fotos, vectores y vídeos gratis.

Adobe Stock también tiene en este momento una oferta de 10 imágenes gratis durante el primer mes. Se puede cancelar la suscripción en cualquier momento durante este mes y si continuas con la suscripción puedes acumular acceso a contenidos.

lista-herramienta-diseño-web-wordpress

Comprimir imágenes antes de subirlas a la página web

Antes de subir tus imágenes a WordPress, es muy recomendable reducir el tamaño a uno que se ajuste a la columna o sección donde va a ir, y además si las comprimimos, haremos que la página sea más ligera y tarde menos en cargar.

wordpress compresion imagenes online gratis
lista-herramienta-diseño-web-wordpress-2

¿Cómo comprimir imágenes online? Con compressor.io comprimir imágenes para tu página web o entrada de blog es fácil, rápido y gratis. Tiene dos niveles de compresión predeterminados gratuitos: Lossy y Lossless. Para tener acceso a la opción personalizada es necesario ser miembro premium.

Pero las dos opciones predeterminadas son muy efectivas, puedes comprimir hasta 10 imágenes a la vez y un máximo de 10Mb. Luego puedes descargarte las imágenes comprimidas, borrar la lista de imágenes y volver a comprimir 10 más. Acepta archivos JPEG, PNG, SVG, GIF y WEBP. 

La opción Lossy comprime más las imágenes que Lossless, dependerá de tus imágenes y de la calidad y tamaño que necesites. Si son imágenes grandes a pantalla completa, es posible que con la opción Lossy sea demasiado y se note la perdida de calidad. En estos casos es mejor usar Lossless. Te animo a probar compressor.io,  yo la tengo en mi barra de favoritos para tenerla a mano ya que la uso muy a menudo.

lista-herramienta-diseño-web-wordpress

Colores

El color en el diseño web es sinónimo de emoción. Para crear una reacción física y emocional en nuestros visitantes, la elección de los colores de nuestra página es una decisión importante a tomar.

colores en el diseño web

¿Cómo elegir los colores para una página web? Para escoger un esquema de color atractivo tenemos que tener en cuenta, que los diferentes colores envían mensajes diferentes a tus visitantes. Mi consejo es elegir un color primario, que muy posiblemente sea el de tu logo y el que va a dominar en la página web. Luego combinar este color con otros dos y si es necesario con otros colores secundarios sutiles, pero mejor no abusar.
Considera usar colores neutros, como el blanco, negro y gris o tonos más claros u oscuros de tu color primario. Esto le va a dar harmonia al diseño de la página y será agradable a la vista. Te pongo de manera muy resumida las emociones relacionadas con los colores, quizás te ayude a decidir cuáles son los mejores para tu diseño:

lista-herramienta-diseño-web-wordpress-2

¿Qué es coolors.co? Es un generador online de esquemas y paletas de color de manera muy rápida, práctica y gratis.   Coloors.co tiene la opción Generate que te permite generar paletas de colores y obtener los códigos para usarlos. Por defecto genera una paleta de 5 colores, pero al pasar el cursor por encima entre los colores puedes añadir más o en cada color está la opción de eliminar. Además en cada color tiene la opción de ver las diferentes tonalidades, guardar el color como favorito, arrastrar para moverlo, copiar el código HEX o bloquear el color. Esta última opción es para que al pulsar la barra espaciadora, los colores bloqueados se quedan y cambian los demás. Cada vez que pulsas la barra espaciadora se crea una paleta nueva.

En este ejemplo he bloqueado dos colores y eliminado uno, he pulsado la barra espaciadora para cambiar los dos colores restantes:

ejemplo paleta coolors.co tendencia

También tiene la opción Explore que te muestra paletas con combinaciones de colores que están en tendencia, últimas guardadas o populares. Al pasar el ratón por encima de las paletas de colores, nos aparecen los códigos HEX de cada color, y al clicar se copia el código para poder usarlo.

Paleta en tendencia de coolors.co
ejemplo paleta coolors.co tendencia
Al pasar el ratón muestra el código
ejemplo paleta coolors.co tendencia
Al pulsar lo copia automáticamente
ejemplo paleta coolors.co tendencia

Otras funcionalidades muy útiles e interesantes pulsando la opción More:

lista-herramienta-diseño-web-wordpress-2
¿Qué son las imágenes duotone? Las imágenes duotone son imágenes en blanco y negro con escala de grises a las que le añadimos dos todos de color, uno más oscuro para las sombras y otro claro para las iluminaciones.  ¿Cómo crear imágenes duotoneCon la herramienta que nos proporciona duotone shapefactory es muy fácil, rápido y gratis crear imágenes duotone online para nuestros diseños web. Basta con acceder la la página, subir la imagen y jugar con los colores. La imagen creada se puede descargar en un sólo clic. Además en duotone.shapefactory.co se pueden hacer búsquedas directamente en Unsplash, el banco de imágenes gratuito del que te he hablado en el apartado Imágenes y Vectores para tu web. Y como decía en este apartado, que una imagen vale más que mil palabras, te dejo una captura de pantalla de una imagen Duotone hecha en duotone.shapefactory.co con una foto de Unsplash:
ejemplo imagen duotone
lista-herramienta-diseño-web-wordpress

Código HTML y CSS

Usando WordPress y Elementor no tienes porque saber el código HTML o CSS, pero si tienes conocimientos de ambos te puede ser de gran utilidad si los necesitas en un momento puntual. En este post sobre cómo modificar CSS fácilmente, te cuento donde puedes usar CSS en tu página web WordPress tanto si usas Elementor como Elementor Pro.

Además de código CSS, en Elementor también puedes usar el Widget HTML para añadir código HTML y crear un elemento personalizado.

lista-herramienta-diseño-web-wordpress-2

¿Qué es w3schools.com? El sitio W3schools.com es el sitio de desarrolladores web más grande del mundo y te puedo asegurar que es así. Si buscas algo sobre el código HTML o CSS seguro que lo encontrarás allí. Es un sitio web muy completo con toda la teoría que necesitas y con opciones online para poner en práctica el código y ver los resultados al momento. Si te interesa, también tienen gran cantidad de información sobre Javascript y otros lenguajes de programación.

lista-herramienta-diseño-web-wordpress-2

¿Dónde encontrar los códigos de color para CSS? En quackit.com también encontrarás gran cantidad de información referente al código CSS y a mí particularmente me parece muy útil el apartado sobre los códigos de colores para CSS. Tiene la herramienta de Color Picker, que al escoger el color te da el resultado en los diferentes tipos de códigos de color HEX, RGB, HSL, HSV, HWB y CMYK. Y si sigues leyendo, debajo de los códigos de color te explican como aplicarlos al código CSS.

lista-herramienta-diseño-web-wordpress

Fuentes gratis

A veces necesitamos fuentes para crear diseños para nuestra página web o para poner en redes sociales. Puede ser muy útil para crear un Logo o para añadir texto en imágenes. Aquí de dejo las páginas con fuentes gratis para usar en tus diseños:

lista-herramienta-diseño-web-wordpress-2

¿Qué es dafont.com? En dafont puedes encontrar fuentes muy originales y 100% gratis. Al escoger un tipo de fuente de la lista superior, aparecerán los filtros para obtener un resultado más preciso. Entre otras opciones está la de mostrar las fuentes 100% Gratis. Debajo del botón de descarga tienes la opción de hacer una donación al autor para agradecerle su aportación y su diseño de la fuente.
En la búsqueda, tiene la opción de escribir el texto que vas a usar para poder previsualizar el resultado.

lista-herramienta-diseño-web-wordpress-2

¿Qué es 1001fonts.com?En 1001fonts puedes encontrar, en el momento de escribir esta entrada, una librería de casi 5000 fuentes gratis para uso comercial. Para ver el resultado de las fuentes gratis, tienes que seleccionar el icono con el símbolo de etiqueta $, al seleccionarlo aparecerá en verde y el resultado serán las fuentes gratis. Tiene una gran cantidad de etiquetas para filtrar según el tipo de fuente que necesites y también tiene la opción de escribir el texto que vas a usar para poder previsualizar el resultado.

lista-herramienta-diseño-web-wordpress-2

¿Qué es fontspace.com?En fontspace encontrarás una enorme librería, al escribir esta entrada tiene más de 9500 fuentes gratis para uso comercial. El en enlace que te dejo ya te lleva directamente en la página con las fuentes gratis. Aunque tiene menos filtros para precisar la búsqueda, también se puede escribir el texto que vas a usar, cambiar el tamaño, el color y ordenar por diferentes categorías (Popular, trending, Newest, Name).

lista-herramienta-diseño-web-wordpress

Organización de las tareas en la creación de una página web

Al iniciar el proceso de creación de una página web tenemos que llevar cierto orden para no olvidarnos ningún detalle y tener controlado lo que tenemos hecho y falta por hacer. La herramienta gratis que uso y encuentro muy práctica es Trello.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Trello? Trello es la herramienta perfecta para organizar cualquier proyecto. Funciona con un sistema de tableros y dentro puedes crear listas que estan compuestas por tarjetas. Sólo hace falta registrarse y ya puedes empezar a usarlo. Funciona tanto en página web online en PC y en app tanto para iOS como Android, muy práctico para llevarlo contigo.

Los tableros se pueden compartir con otros usuarios de Trello si estás trabajando en equipo. Lo que a mi me funciona es:

De esta manera con Trello tienes el control de lo que queda por hacer, no lo pierdes o se traspapela, no hay gasto de papel ni necesitas impresora y lo puedes llevar contigo a todas partes. La versión gratis tiene la limitación de 10 tableros, si lo necesitas puedes adquirir la versión premium o si te es posible puedes compartir tableros para varios proyectos. 

Te pongo un ejemplo de proyecto así puedes familiarizarte con el aspecto. Cada columna es una lista y dentro de las listas están las tarjetas:

Ejemplo como funciona trello
lista-herramienta-diseño-web-wordpress

Chequeador de links rotos online gratis

Una vez tienes tu página web o blog funcionando, a medida que vaya creciendo se hace más complicado detectar si se ha roto algún link, sobre todo después de actualizaciones o cambios. Si tu página web tiene enlaces rotos, impactará negativamente en el rendimiento, en el SEO y en experiencia del usuario, por eso te recomiendo que en el mantenimiento de tu página incluyas un chequeo para encontrar enlaces rotos. Sobre el mantenimiento web, tengo un artículo que quizás te pueda interesar, Los 7 puntos más importantes del mantenimiento web. Yo no soy una gran fan de tener muchos plugins en WordPress, para mí cuanto menos mejor, por eso para chequear los links rotos uso una herramienta online.

lista-herramienta-diseño-web-wordpress-2

¿Qué es brokenlinkcheck.com? 
Con 
brokenlinkcheck puedes comprobar online y gratis si tu página tiene links rotos, así sin tener que instalar un plugin extra, puedes detectar y localizar el problema fácilmente para poderlo reparar lo antes posible. El chequeo lo puedes hacer en dos rápidos pasos:

chequeo enlace roto online gratis
lista-herramienta-diseño-web-wordpress

Cursos online de diseño web WordPress

Si estás empezando tu aventura en la creación de una página web WordPress o quieres empezar un blog des de zero, una buena manera de seguir el camino correcto es haciendo cursos sobre diseño web y WordPress. Es una inversión inicial que verás recompensada en el futuro.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Udemy? En Udemy encontrarás cursos bajo demanda sobre WordPress o las temáticas en las que estés interesad@, los puedes realizar a tu ritmo sin fechas límite o plazos de entrega. Se trata de una plataforma para aprender online que ofrece cursos hechos por creadores expertos en las materias. En el momento de escribir esta entrada, he hecho una búsqueda en Udemy con la palabra WordPress y me han salido 840 resultados de cursos en español relacionados con el diseño web WordPress. Y si dominas el idioma inglés incluso llega a los 10.000 resultados. No son cursos acreditados, pero los conocimientos adquiridos son muy útiles para poner en práctica. Puedes adquirir cursos que te interesen, empezarlos y continuar cuando a ti te vaya bien.

lista-herramienta-diseño-web-wordpress-2

¿Qué es Skillshare? Es una comunidad de Estados Unidos de cursos online hechos por creadores expertos. Skillshare ofrece una enorme cantidad de cursos online en cualquier materia, eso sí, esta plataforma está centrada en el idioma inglés. Es una comunidad llena de clases muy interesantes que puedes realizar a tu paso y cuando quieras. Requiere de una suscripción anual para poder tener acceso a todas las clases, pero por la cantidad de material que ofrecen, vale mucho la pena.

Y hasta aquí la guía de todo en uno para la creación de páginas web WordPress. Pensé que era una buena idea tener todas la herramientas juntas en una misma entrada, de manera resumida.

Si estás empezando en el mundillo WordPress y te has quedado estancad@ o necesitas ayuda con tu página web WordPress, contrata bolsas de horas y te ayudaré en lo que necesites:

O si quieres que sea yo tu sastre web y cree tu página web, envíame un mensaje y nos pondremos manos a la obra lo antes posible:

Compartir:
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on email
Directamente en tu correo

Suscríbete a Web Sastre para recibir nuevas entradas, ofertas y novedades!

Te prometo que no envío spam, puedes cancelar la suscripción en cualquier momento.

Utilizo cookies propias y de terceros para que navegues perfectamente por mi web. Si sigues utilizando este sitio asumiré que estás de acuerdo. Si quieres más info, visita mi política de cookies en el siguiente enlace: