Si vas a diseñar tu sitio y estás dudando sobre cómo hacerlo este post es para ti, ya que te vamos a contar todos los pasos necesarios para crear tu página web o blog, desde el tipo de plataforma a emplear hasta consejos de estilo para escribir tus artículos, pasando por recomendaciones para contratar tu hosting y dominio, recursos gratuitos para imágenes, plugins, SEO, etc.

A lo largo del artículo te vamos a dar consejos útiles que nosotros utilizamos y que nos funcionan muy bien. Toma nota:

1. Diferencias entre una página web y un blog

Desde un punto de vista técnico una web y un blog no son cosas diferentes. Es decir, ambos necesitan un hosting (espacio en un servidor) y un dominio (URL o dirección web) para estar en internet. De hecho, puedes integrar un blog dentro de una página web, como hacen muchas empresas para atraer tráfico de usuarios a su web corporativa mediante una estrategia de marketing de contenidos.

Básicamente, la diferencia entre una página web y un blog está en el contenido y en la estructura:

Una página web normalmente suele tener un enfoque más corporativo, institucional o comercial. En una web solemos poner secciones estáticas con nuestros servicios, ofertas, tarifas, galerías, productos, datos de contacto, etc. Los contenidos de la web, por norma general, se actualizan con menor frecuencia y los usuarios no los suelen compartir en redes sociales a menos que incluyan algún contenido de valor.

Un blog tiene un enfoque más personal. Los contenidos de un blog son las entradas o artículos. Estos artículos deben contener valor en sí mismos, en lugar de una intención claramente comercial. Con esto consigues que los usuarios compartan tu contenido si éste es verdaderamente útil, y así atraes tráfico a tu sitio. Un blog sueles actualizarlo con bastante frecuencia, pues se trata de publicar con cierta regularidad.

2. Qué plataforma utilizar

Hay diversas opciones para crear y diseñar tu web o blog. La elección de una u otra va a depender de tu presupuesto, proyecto que vayas a realizar y nivel de conocimientos.

2.1 Gestores de contenido o CMS

Para diseñar tu sitio web o blog puedes usar un gestor de contenidos profesional. ¿Qué es un gestor de contenidos? Es una herramienta que te va a permitir crear y administrar tu web de una manera rápida, sencilla y económica, y con un resultado muy profesional.

Para crear tu página web o blog te recomendamos que uses un gestor de contenidos por su facilidad de uso y sus excelentes resultados, además de ser en estos momentos la opción más extendida en todo el mundo. En algunos casos, como WordPress.com o Blogger, puedes tener tu sitio de manera totalmente gratuita. En los otros casos, tendrás que contratar un plan de hosting y dominio.

2.1.1 Gestores de contenidos más importantes:

WordPress.org

Para los que quieren dar el salto a una página web o blog realmente profesional. Requiere unos conocimientos un poco mayores que la versión .com, y la compra de un hosting y dominio propios. Puedes instalar plantillas avanzadas y plugins, crear tiendas online, etc.

Joomla

Otra de las grandes plataformas de gestión de contenidos, algo más compleja que WordPress aunque con mayor flexibilidad en cuanto a diseño. Las plantillas para Joomla suelen ser también muy avanzadas y visuales.

Magento

Dentro de los sistemas de gestión de contenido, tenemos algunos especializados en la creación de e-commerce. Magento es una de las opciones más famosas por su flexibilidad y funcionalidad, así como por la posibilidad de instalar plantillas avanzadas.

Prestashop

Prestashop, al igual que Magento, está enfocada en la implementación de tiendas online. Ofrece un panel de gestión sencillo y potente, además de plantillas muy atractivas. En España tiene una estupenda acogida.

2.1.2 ¿Cuál es el gestor de contenidos más recomendable?

Recapitulando todo lo dicho anteriormente, nosotros te recomendamos que uses WordPress, la plataforma que usan más personas y empresas para gestionar sus sitios web y blogs, basada en la filosofía del código abierto (open source).

Con un Gestor de Contenidos como WordPress vas a poder crear una web o blog y lo vas a poder hacer relativamente rápido, sin necesidad de ser un experto en diseño y desarrollo web y además con un resultado mucho mejor que empleando otras opciones.

La gran ventaja de WordPress es que posee un panel de administración bastante sencillo y se ha convertido en un estandard para crear páginas web y blogs. Pero ojo, dentro de WordPress hay dos opciones diferenciadas: WordPress.com y WordPress.org.

2.1.3 ¿Qué diferencias hay entre WordPress.com y WordPress.org?

WordPress.com

Si quieres crear una web o blog de manera totalmente gratuita, es decir, sin pagar un sólo euro, puedes optar por WordPress.com. Esta versión gratuita de la herramienta te permite crear tu sitio en poco tiempo y con un estupendo resultado, sin necesidad de tener un conocimiento avanzado, pues la instalación es automática.

Dentro de esta versión .com puedes aprovechar muchas de las funcionalidades clásicas de WordPress: elegir entre varias plantillas predefinidas, asignar categorías a los posts, crear menús personalizados, etc.

Por contra, no puedes instalar los famosos plugins de WordPress y tienes cierta limitación a la hora de personalizar la plantilla, sobre todo si sabes código y quieres exprimir las posibilidades del tema.

Además, por defecto, la dirección URL incluye la extensión /wordpress.com, que no es del todo profesional. No obstante, este /wordpress.com puede retirarse de la URL pagando una pequeña cantidad, entre otras muchas ampliaciones que puedes hacer a la herramienta previo pago.

Esta opción es perfecta para los blogueros que recién empiezan y quieren poner en marcha un blog personal rápidamente, centrándose sobre todo en el contenido, por encima del diseño y las funcionalidades.

WordPress.org

Si lo que quieres es crear un sitio web más avanzado en cuanto a diseño, funcionalidades, etc., te recomendamos claramente que elijas WordPress.org. Con esta versión necesitarás tener un dominio propio, es decir, una URL para tu sitio web, y un hosting, es decir, un servidor con espacio suficiente para alojarlo.

Además, te aconsejamos que te formes antes de lanzarte a trabajar con WordPress.org, pues se trata de una herramienta un poco más compleja que requiere de ciertos conocimientos previos para poder extraerle todo el jugo. Para facilitarte la tarea, te dejamos este artículo donde tienes una explicación paso a paso para instalar y configurar WordPress en tu servidor.

Las ventajas de esta opción son enormes: puedes instalar plantillas premium muy avanzadas con las que puedes crear un sitio web profesional con multitud de posibilidades y visualmente muy atractivo.

Aparte de esto, puedes instalar los célebres plugins para WordPress, que son aplicaciones en su mayor parte gratuitas que te van a servir para implementar tiendas online, optimizar el posicionamiento SEO de tu sitio, disminuir los tiempos de carga de la página y miles de cosas más.

Y además, si sabes un poco de código HTML, CSS, Javascript o PHP, podrás editar y personalizar el código de la página, con lo cual lograrás un gran resultado. Otra importante ventaja es su universalidad: existe una enorme comunidad de desarrolladores de la herramienta que aseguran su buen funcionamiento y optimización, así como la creación de plugins para casi cualquier cosa que se te ocurra. Y casi todos ellos gratuitos.

En esta infografía del Curso de Community Manager puedes ver las principales diferencias entre WordPress.com y WordPress.org:

2.2 Plataformas online gratuitas

Si no quieres gastar dinero pero al mismo tiempo deseas una plataforma fiable y de calidad puedes optar por herramientas como las que te listamos a continuación:

WordPress.com

La versión gratuita de WordPress para crear tu sitio web, sobre todo enfocada a blogs. No necesitas pagar alojamiento ni dominio, aunque no puedes contar de entrada con la infinidad de opciones que ofrece la versión .org. (pagando una serie de mejoras puedes ampliar tu espacio de servidor, comprar un dominio propio, aumentar las opciones de personalización etc.). Ideal para iniciarse en el mundo de los blogs.

Blogger

Uno de los clásicos. Blogger fue una de las primeras herramientas online para la publicación de contenidos. Permite mucha personalización accediendo directamente al código de la plantilla, pero para un usuario no experto en código se convierte en una opción más complicada si se pretende un resultado profesional.

Medium

Medium es una nueva red social pensada para generar contenidos de calidad y que está comenzando a crecer bastante. Su punto fuerte es la posibilidad de crearte de manera gratuita un blog estéticamente muy atractivo inspirado en publicaciones online premium. Ofrece bastante interacción para promocionar tu contenido, edición compartida, colecciones, etc.

Tumblr

Tumblr es una plataforma gratuita de microblogging que te permite crear una web o blog y subir todo tipo de contenidos como textos, fotos, audios y vídeos, citas, enlaces, etc. Al ser una red social fomenta mucho la interacción y la difusión del contenido mediante reblogueos, me gusta y comentarios. Además, si eres un usuario un poco más avanzado, te puede resultar útil la opción de modificar el código HTML de la página.

2.3 Código

Por último, si eres muy experto, puedes crear un sitio web sin ninguna plataforma previa, es decir, directamente con código HTML, CSS, PHP, Jquery, etc. y empleando un software de edición de código. Las principales herramientas para edición manual de código que recomendamos son:

• Dreamweaver
  
• Coda
  
• Sublime Text

Para hacer una web con código necesitas ser un verdadero especialista y tener bastante experiencia previa. El principal inconveniente si eliges esta opción, aparte de la dificultad, es que los tiempos de desarrollo se pueden alargar mucho. Para evitarlo, te recomendamos que utilices una plantilla ya prediseñada sobre la que empezar a trabajar.

3. Contratar un servicio de hosting

Para acertar a la hora de contratar tu hosting debes tener en cuenta diversos aspectos como el precio, la velocidad, el servicio de soporte, espacio, sistema de copias de seguridad automáticas o backups, etc.

En cuanto a la velocidad. Un hosting rápido será muy positivo para el rendimiento de tu sitio web y esto beneficiará a tu posicionamiento SEO. En cambio, si la respuesta de servidor es lenta, aparte de ser perjudicial para la velocidad de carga de tu sitio, puede convertirse además en una molestia si tarda demasiado en guardar cuando haces cambios en tu web.

En cuanto al servicio de soporte, si vas a trabajar con WordPress supone una gran ventaja contar con un servicio de soporte técnico específico, el cual te va a ayudar a solucionar posibles problemas puntuales. Además, los servidores especializados en WordPress tienen todas las configuraciones necesarias para que puedas trabajar con la herramienta sin ningún problema.

Respecto al espacio de servidor, para trabajar con WordPress correctamente, te recomendamos que elijas un plan que incluya como mínimo un 1GB de espacio. Ten en cuenta que hay plantillas que instalan una gran cantidad de contenido demo. No es aconsejable estar al límite de espacio en tu servidor, ya que puede darte bastantes problemas al subir contenidos, instalar plantillas y plugins, etc.

En lo que respecta a los backups, ni que decir tiene que un servidor que tenga un buen sistema de copias de seguridad te puede salvar en más de una ocasión y evitarte malos ratos.

Qué proveedor de hosting recomendamos

Nosotros te recomendamos Webempresa, pues se trata de un hosting que usamos para alojar algunas de nuestras páginas web y lo conocemos bastante bien. Ofrece un servicio de soporte técnico rápido y eficaz. Además, incluye el dominio en el precio del hosting. Este es el servicio de hosting que recomendamos en el curso de WordPress en Aula CM.

4. Elegir un dominio

Antes de adquirir tu dominio debes hacer una reflexión previa y escoger la mejor opción, pues una vez comprado no podrás cambiarlo, a menos que adquieras otro, con el consiguiente gasto extra. También es posible que ya tengas comprado un nombre de dominio con un proveedor y quieras usarlo con el nuevo servicio de hosting que has contratado.

4.1 ¿Cómo traerte un dominio que ya tienes a otro hosting?

Para usar un dominio que hayas comprado con otro proveedor, tienes dos opciones:

a) La opción más recomendable y rápida es realizar un apuntado DNS del dominio al hosting nuevo. Para hacer un apuntado de DNS de tu dominio, de modo que puedas usarlo con el hosting recién contratado pero sin dejar de tenerlo con el proveedor actual, debes pedir al hosting las DNS, que normalmente son dos códigos (a veces incluyen la dirección IP) que tienes que insertar dentro del panel de control de tu proveedor del dominio, en un apartado que diga algo así como “Configuraciones DNS”, “Configuración de direcciones DNS”, etc.

b) La otra opción es transferir el dominio de un hosting a otro. Para ello, en primer lugar necesitas pedir un Auth Code o Código de Autorización al proveedor actual del dominio. Posteriormente, deberás acceder al panel de control del nuevo servicio de hosting que hayas contratado y una vez ahí solicitar una Transferencia de Dominio. Durante el proceso te pedirán que insertes el Auth Code, el cual servirá para validar la operación. La ventaja de transferir el dominio es que centralizas todo con el mismo proveedor. El inconveniente, que suele tardar bastante.

4.2 Consejos para elegir tu nombre de dominio

1. Intenta incluir palabras clave en el dominio. Esto va a ser muy importante para el posicionamiento SEO de tu página web o blog.

2. Evita nombres de dominio ambiguos. Intenta que el dominio sea fácil de entender y de deletrear, de modo que no cause dificultad a la hora de teclearlo.

3. Busca un dominio memorable, es decir, fácil de recordar.

4. Empieza por comprar el dominio genérico .com. También es recomendable que compres otros dominios con extensiones genéricas para evitar que otro pueda suplantar tu nombre de marca en internet.

5. Si tu estrategia se focaliza en un país específico, emplea el dominio propio de ese país. Por ejemplo, en España es el .es.

6. Busca un nombre de dominio corto, de máximo 20 caracteres.

7. Evita el uso de guiones, mayúsculas, eñes, etc.

 5. Elegir plantilla

Uno de los puntos clave a la hora de crear tu página web o blog es la correcta elección del tema. Una buena plantilla te va a permitir comenzar a diseñar sobre una base adecuada en cuanto a diseño y estructura, y también en lo que respecta al SEO. Una plantilla bien estructurada con los encabezados h correctamente codificados y que sea responsive supone una gran ventaja de cara al posicionamiento en buscadores. Además, hay otros aspectos que has de tener en cuenta para detectar una plantilla premium que realmente merezca la pena:

5.1 consejos para elegir una plantilla premium

1. Que sea compatible con todos los navegadores principales y se adapte a todos los dispositivos.

2. Que ofrezca la posibilidad de importar contenido demo o contenido ficticio, de modo que puedas comenzar a diseñar sobre páginas ya creadas. De hecho, las mejores plantillas suelen incluir bastantes demos predefinidas y específicas según el tipo de web que quieras crear, ya sea una web de una agencia, un bufete de abogados, una clínica dental, un fotógrafo, un artista, un e-commerce, etc.

3. Que incluya plugins premium y, sobre todo, algunos de pago como LayerSlider, Revolution Slider, Visual Composer, etc

4. Que sea compatible con los plugins más importantes.

5. Que tenga un buen número de descargas. Una plantilla que lleve mucho tiempo a la venta y tenga un número reducido de descargas probablemente no ofrezca garantías.

6. Que reciba actualizaciones constantes. Las plantillas que son actualizadas a menudo suelen estar al día en cuanto a compatibilidad con la actual versión de la plataforma, plugins más importantes, etc. Además, siempre hay pequeños fallos o retoques que hacer a una plantilla y gracias a las sugerencias de la comunidad de usuarios los desarrolladores reciben un feedback sobre los aspectos que pueden ser mejorados y los implementan en cada nueva actualización. Si has encontrado un tema y hace tiempo que no recibe una actualización será mejor que te lo pienses dos veces, ya que probablemente el desarrollador de la plantilla la ha abandonado a su suerte y no vas a tener un soporte óptimo si encuentras algún problema en el futuro.

7. Que tenga una amplia sección de opciones del tema o theme options. Cuando mejor es una plantilla, más posibilidades de personalización te ofrece sin que tengas que recurrir a tocar código. Funciones como elegir tamaños de logo diferentes según el dispositivo, modificar todas las tipografías del sitio, colores, estructuras de página, zonas de widgets, etc. Esto no puedes saberlo antes de adquirir el tema, pero siempre puedes preguntar a otros diseñadores, pues todos tienen sus favoritas y si lo son es porque realmente funcionan bien y te facilitan las cosas.

Además, en este post te damos más consejos para elegir plantilla de WordPress, diferencias entre unas y otras, etc.

5.2 Dónde conseguir plantillas premium

Hay diversos sitios en internet donde adquirir plantillas para diseñar tu sitio web. Sin duda el mejor lugar donde conseguir plantillas es Themeforest, pues contiene una recopilación inmensa de temas de calidad para diversas plataformas como WordPress, Prestashop, Magento, Drupal, etc.

Los temas que puedes encontrar en este sitio son por lo general muy buenos y se suelen actualizar con frecuencia. Además, si tienes dudas sobre alguno de ellos, tienes un foro de soporte en cada tema para preguntar al diseñador cualquier duda que pueda surgirte.

Aparte de Themeforest, hay otros lugares donde adquirir plantillas:

• Elegant Themes
  
• WooThemes
  
• Template Monster

Además, te invitamos a visitar nuestro panel de Plantillas de WordPress en Pinterest, donde encontrarás una amplia recopilación de temas que hemos seleccionado por su calidad, aspecto atractivo, funcionalidades, opciones, etc.

5.3 Plantillas premium para hacer una tienda online

Si además quieres implementar un e-commerce en tu sitio web, en este artículo te ofrecemos un listado de las 20 mejores plantillas para hacer una tienda online con las plataformas WordPress, Magento y Prestashop.

6. Cómo diseñar el contenido

Cuando trabajas con un gestor de contenidos ya tienes todo a tu favor, pues diseñar sobre una buena plantilla te va a ahorrar tener que ser un experto en código. Aun así, hay un aspecto que hasta hace relativamente poco no se tenía en cuenta, y es el de la maquetación de los contenidos dentro de las propias secciones.

Hace un tiempo, si no sabías HTML y CSS resultaba muy difícil dar un aspecto profesional y atractivo a tus secciones dentro de la página. Ahora, con la llegada de los plugins para maquetación web tienes a tu disposición herramientas muy avanzadas que te van a permitir realizar diseños espectaculares de manera sencilla y rápida.

De entre todos ellos, nosotros recomendamos especialmente Visual Composer para WordPress, por su facilidad de manejo, eficacia y calidad. Plugins como Visual Composer han revolucionado el modo de diseñar en WordPress. En este enlace te ofrecemos una mega-guía para Visual Composer, con un manual de uso y un listado completo de los elementos que puedes insertar con esta magnífica herramienta. En el curso de WordPress de Aula CM te enseñamos a crear una página web completa y profesional con el plugin Visual Composer.

Aparte de Visual Composer existen otras opciones similares:

• Page Builder
• Live Composer
• Awesome Builder
• Elegant Builder

7. Optimizar el posicionamiento SEO

Un elemento esencial cuando creas una página web o blog es el posicionamiento en buscadores. Si vas a usar WordPress, en un apartado anterior hemos comentado las ventajas de contar con una plantilla premium para el SEO. Aparte de la buena elección del tema, tenemos disponibles plugins gratuitos muy completos que sirven para optimizar el SEO y que son bastante fáciles de configurar.

7.1 Plugins para mejorar el posicionamiento SEO

• SEO Yoast
• All in One SEO

En este artículo te hemos hecho una lista de 40 plugins de posicionamiento SEO para WordPress.
Además, podemos emplear plugins para optimizar el tiempo de carga del sitio web, que constituye otro punto a tener en cuenta de cara a Google. Los dos que te listamos a continuación son también gratuitos:

• W3 Total Caché.Optimiza el rendimiento del servidor al guardar la página en caché.
• Smush It. Optimiza el peso de las imágenes del sitio, ayudando a reducir los tiempos de carga.

Si estás usando otros gestores de contenido como Joomla, Drupal, etc., tienes también a tu disposición todo tipo de módulos y extensiones que te ayudarán con el posicionamiento y optimización.

7.2 consejos SEO

Aparte de los aspectos técnicos de la plantilla, existen una serie de trucos que te van a ayudar a posicionar mejor tu sitio.

1. Detecta cuáles son tus palabras clave y usa una buena densidad de ellas en el contenido, tanto en las secciones de tu página como en los artículos de tu blog, además de las meta descripciones, las URL, títulos y negritas. Para un estudio de palabras clave puedes utilizar estas herramientas:

• Google Adwords
• Google Trends
• Keyword Tool

2. Emplea una buena cantidad de imágenes y pon palabras clave en los campos de título y texto alternativo. Esto potenciará la visibilidad de tus imágenes en Google, que pueden ser otra fuente de tráfico entrante a tu sitio.

3. Añade vídeos de Youtube en tu sitio. Google posiciona muy bien los contenidos que incluyen vídeos de Youtube.

4. Crea contenido de valor. Artículos útiles e interesantes para los usuarios. De este modo conseguirás que tus contenidos se compartan en redes sociales, mejorando el posicionamiento. Además, si tus contenidos son buenos y aportan valor a la comunidad, puedes lograr backlinks o enlaces entrantes a tu sitio, que también son tenidos en cuenta por Google para posicionar.

5. Publica contenido regularmente y con un ritmo adecuado de publicación, de modo que consigas un tráfico estable de usuarios hacia tu sitio.

6. Inserta una buena cantidad de enlaces internos a tu propio contenido.

7. Evita el contenido duplicado. A Google le gustan los contenidos originales e inéditos. Nada de copiar a otros sitios web.

8. Conclusión: 20 cosas que no debes olvidar

1. Reflexiona sobre lo que necesitas y traza una buena estrategia. ¿Necesitas una página web completa o un blog? ¿Qué quieres conseguir con tu sitio?
2. Elige bien tu nombre de dominio. Es clave para posicionar en SEO y para ocupar nichos de mercado.
3. Contrata un hosting de calidad, que sea rápido, intuitivo y seguro.
4. Elige una plataforma adecuada. Un buen gestor de contenidos te hará la vida más fácil.
5. Evita plataformas gratuitas que no cumplan los estándares mínimos de calidad.
6. Dedica el tiempo necesario a buscar un tema adecuado. No uses plantillas copiadas, pues no dispondrás de las actualizaciones.
7. Instala buenos plugins para optimizar todo lo posible tu sitio. SEO Yoast, W3 Total Caché, etc. En este post te recomendamos 60 plugins WordPress muy buenos para tu sitio.
8. No uses imágenes de Google para ilustrar tus secciones y artículos. Usa imágenes propias o cómpralas en sitios como Shutterstock o Dollar Photo Club. También puedes descargarlas gratis en sitios como Freepik.
9. Optimiza bien las imágenes de tu sitio con plugins como Smush It. Hay también herramientas online eficaces como JPEGmini.
10. Desarrolla una imagen de marca profesional, ya seas una persona o una empresa. Si tienes poco presupuesto, puedes contratar servicios de diseño en páginas como Fiverr.
11. Monitoriza las estadísticas de tu sitio con Google Analytics. Esto te dará pistas sobre qué estás haciendo bien y qué contenidos deberías mejorar. Aquí te dejamos una guía para usar Google Analytics.
12. Escribe contenido de valor. Aporta consejos útiles, tutoriales, recursos, etc.
13. Usa un estilo cercano, evita el academicismo y trata de explicar de manera sencilla. Sé generoso.
14. Busca tu propia voz. Aunque es difícil diferenciarse, trata de encontrar un estilo único.
15. Interactúa activamente con tus lectores y potenciales clientes. Mantén viva tu web.
16. Si vas a dirigirte a un público internacional, considera la posibilidad de traducir los contenidos y secciones de tu sitio. Hay plugins como WPML que funcionan muy bien.
17. Instala plugins para gestionar listas de correo y captar suscriptores, una estrategia esencial para fidelizar y ampliar tu comunidad. MailChimp, Sumo Me, Magic Action Box, Mail Poet.
18. Diseña y estructura bien los contenidos del sitio. Utiliza espacios, iconos, subtítulos.
19. Ten en cuenta la legalidad. Política de cookies, condiciones legales para vender productos online, ley de Protección de datos, etc.
20. No copies a nadie. Sé tú mismo en cualquier circunstancia y transmítelo con personalidad en tu sitio web.

¿Cuáles son tus consejos y recomendaciones?

Danos tu opinión sobre tu plataforma favorita para diseñar sitios web, qué hosting usas, tus plantillas preferidas, trucos SEO, estrategias, etc.

Además, si tienes alguna duda o quieres que te ampliemos algún punto de este post o quieres saber más sobre el curso de WordPress presencial y el curso de WordPress Online, déjanos un comentario.

Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr. ¡Te lo cuento en este post!

Si vas a tu web y das a botón derecho y a continuación Ver código fuente de la página, lo que verás es el código HTML y CSS con el que está construido tu sitio. Estos códigos los crea automáticamente tu CMS para que tu web pueda verse en internet. Si trabajas con un gestor de contenidos no tienes que implementarlos manualmente, pero conociéndolos un poco puedes hacer verdaderas maravillas.

Las plantillas premium suelen tener una amplia sección de opciones para modificar fácilmente casi todos los elementos de tu web, como colores, fondos, estilos de letra, etc. Pero, ¿y si hay elementos y zonas de la plantilla que no puedes modificar porque no vienen incluidos en las opciones?

Aprende a modificar tu plantilla y hacer todo lo que quieras en tu web

Combinar el buen manejo de tu plantilla con el conocimiento de códigos básicos para webs te permite hacer páginas totalmente profesionales sin limitación ninguna. Y lo vas a poder hacer de un modo bastante rápido y fácil.

En este artículo no voy a enseñarte a ser un experto en código web, sino que te voy a tratar de explicar de manera amena cómo saber lo básico y después, cuando ya hayas aprendido lo necesario, te daré un listado de trucos con código para que puedas hacer cosas como:

• Quitar la fecha de publicación de tus posts
• Hacer desaparecer cualquier elemento de tu página
• Cambiar colores y tamaños a tipografías, botones, fondos
• Añadir código en tus widgets
• Cambiar márgenes o espacios entre elementos
• Personalizar al 100% el comportamiento responsive de tu plantilla según dispositivos
• Añadir banners con HTML

Qué es CSS y para qué sirve

CSS es un código que funciona junto a HTML y sirve para modificar todo lo relacionado con el estilo, es decir, colores, tipografías, tamaños, etc.

Por ejemplo, mediante una regla CSS puedo redefinir el estilo de todas las etiquetas h1 (títulos 1 de mi web) para que a partir de ahora tengan un tamaño de 36 píxeles, color negro y tipografía Open Sans. El modo de hacerlo sería colocando el siguiente código en la hoja de estilos CSS:

h1 {
font-size: 36px;
color: #000;
font-family: 'Open Sans';
}

Con CSS también puedes hacer desaparecer los elementos de tu plantilla que quieras quitar introduciendo una simple línea de código. Lo verás en este post un poco más adelante.

Además con CSS puedes personalizar por completo el comportamiento responsive de tu plantilla, es decir, que se vea como quieras en cada dispositivo.

Qué es HTML y para qué sirve

A grandes rasgos podemos decir que HTML es un código que sirve para crear la estructura básica de un sitio web, cabecera, contenido, pie de página, barras laterales, etc. Funciona mediante etiquetas predefinidas a las que puedes modificar sus estilos mediante CSS.

Por tanto, se podría decir que el código CSS sirve para modificar y personalizar el HTML.

Aprender HTML y CSS no es difícil, con un poco de práctica y usando la lógica vas a poder convertir una plantilla básica en una web profesional, a pesar de que tu plantilla no incluya muchas opciones de personalización.

Pon mucha atención a la explicación inicial en la que te voy a enseñar a seleccionar los elementos de tu web para luego poder modificarlos en tu hoja de estilos.

Conceptos básicos de CSS

Qué es un selector y tipos

Un selector es el nombre que tiene un determinado elemento dentro del código de tu web. Conociendo el nombre del selector puedes modificar ese determinado elemento a tu antojo. Hay dos tipos de selectores: identificadores y clases.

– Un identificador es el nombre de un elemento concreto que no se repite más que una vez en toda la web. Es un nombre único, y aplicándole una modificación vas a modificar únicamente este elemento. Los identificadores se definen en la hoja de estilos CSS con # (almohadilla), y dentro del HTML aparecen escritos así: id=”nombre del identificador”.

– Una clase es el nombre de una regla que se repite en varios sitios de tu web. Por ejemplo, puedes tener una clase llamada .negro que puedes aplicar tanto a textos como a botones para que se pongan de este color. Es decir, defines un estilo genérico que puedes aplicar a cualquier elemento cuantas veces quieras. Las clases se definen en CSS con un . (punto) y dentro del código HTML se aplican así: class=”nombre de la clase”.

El nombre de los selectores viene determinado por el desarrollador de la plantilla, es decir, son nombres arbitrarios elegidos por el creador del tema, aunque a menudo tienen cierta lógica. Por ejemplo, las clases para botones suelen llamarse .button, el identificados de la cabecera de la web suele llamarse #header.

Qué es una propiedad

Una propiedad es la modificación o modificaciones concretas que aplicas en la hoja de estilos CSS a un elemento de tu web mediante un selector. Por ejemplo, al selector llamado #boton (que da estilo a un tipo concreto de botón dentro de mi sitio) le puedo aplicar las siguientes propiedades de color, ancho, relleno y borde:

• background-color: #ccc; (color de fondo gris especificado en código hexadecimal)
• color: #fff; (color del texto dentro de la caja en blanco)
• width: 100px; (ancho de 100 píxeles)
• padding: 20px; (relleno o margen interior de 20 píxeles por cada lado)
• border: 1px solid #000; (borde de color negro continuo de 1 píxel de grosor)
• border-radius: 5px; (redondeado de un ángulo de 5 píxeles en todas las esquinas de la caja)

Cómo aplicar propiedades a una clase o identificador

Siguiendo el ejemplo anterior, el código quedaría expresado así en la hoja de estilos CSS:

#boton {
background-color: #ccc;
color: #fff;
width: 100px;
padding: 20px;
border: 1px solid #000;
border-radius: 5px;
}

Es decir, estamos asignando una serie de propiedades de color, ancho, relleno, borde a todos los botones del sitio que tengan asignado el id #boton.

El selector o nombre va precedido de punto (.) o almohadilla (#) según sea una clase o identificador y a continuación entre {} se colocan las propiedades y sus valores.

Más adelante te voy a poner un listado de las propiedades más usadas actualmente en las webs para que las puedas aplicar en la tuya propia.

Un poco de HTML

También puedes aplicar propiedades directamente a etiquetas HTML. Una etiqueta HTML es un elemento concreto de la web definido entre < y >, de este modo: <etiqueta>. Las etiquetas HTML representan partes concretas de la estructura y el contenido del sitio.

Por ejemplo, hay una etiqueta <html> que indica que el contenido de la web está en HTML. Hay una etiqueta <head> donde se ponen códigos específicos como el código de Google Analytics y muchas cosas más. La etiqueta donde está el contenido visual de la web (el que ve el usuario) es <body>. La etiqueta para dar formato de párrafo a un texto es <p>, y así con todo el contenido de la web. Hay muchas más etiquetas que te listaré más adelante.

Las etiquetas suelen tener una apertura y un cierre. Por ejemplo, la etiqueta body se abre como <body> y se cierra como </body>. ¿Qué quiere decir esto? Que todo el contenido que haya entre <body> y </body> está dentro y es afectado por la cualidad de esta etiqueta. En este caso concreto, todo lo que esté comprendido entre <body> y </body> es lo que se verá en la parte visual de la web.

Otro ejemplo, en el caso de la etiqueta de párrafo, los textos que están entre las etiquetas <p> y </p> adoptan los estilos definidos en la hoja de estilos para esta etiqueta (y que puedes modificar siempre que quieras).

Y otro más, un texto contenido entre la etiqueta <h1> y </h1> adopta estilos de encabezado o título 1, es decir, mayor tamaño y también mayor relevancia de cara a Google.

Cómo aplicar propiedades a una etiqueta HTML

En la hoja de estilos del sitio puedes aplicar propiedades para etiquetas concretas, de modo que las modificas globalmente en todo el sitio.

Por ejemplo, si quieres que todos los párrafos de tu web estén escritos en tipografía Open Sans, 14px de cuerpo de letra, color gris, interlineado de 18px y que haya siempre una separación de 20 píxeles entra párrado y párrafo, en la hoja de estilos escribes lo siguiente:

p {
font-family: 'Open Sans';
font-size: 14px;
color: #ccc;
line-height: 18px;
margin-bottom: 20px;
}

Más adelante te voy a mostrar un listado de las etiquetas más comunes que suele haber en las webs.

Cómo obtener el nombre o selector de un elemento de tu web

Inspector de elementos

Para saber cómo se llama un determinado elemento de tu web para después poder modificarlo en la hoja de estilos puedes usar el Inspector de Elementos. Casi todos los navegadores actuales ofrecen una herramienta similar. Yo te recomiendo especialmente el Inspector de Google Chrome por su excelente usabilidad y funcionalidades.

Cómo usar el inspector

Ve a tu web y coloca el puntero del ratón sobre un elemento concreto. Por ejemplo, vamos a obtener el nombre o selector de un botón real del sitio. A continuación, estando sobre el botón, pulsa botón derecho y haz click en Inspeccionar. Verás que en seguida aparece en la zona de abajo (o lateral) una ventana que muestra código. Este es el código HTML con el que está hecha tu página, y concretamente, al haber hecho click sobre el botón, te está mostrando la porción de código en la que está implementado el botón.

En el código dice class=”btn btn-primary btn-lg btn-icon-right”. Esto quiere decir que este botón tiene varias clases (separadas por espacios y sin comas). Un elemento puede tener asignadas diversas clases para modificar diferentes aspectos. Es decir, que en la hoja de estilos hay varias clases definidas mediante los selectores .btn .btn-primary .btn-lg  y .btn-icon-right que tienen aplicadas una serie de propiedades cada una por separado y que influyen en que el botón sea rojo, de 394 píxeles de ancho y con el texto en color blanco, etc.

De este modo, si quieres modificar las propiedades o estilos de este botón, te bastaría con ir a tu hoja de estilos y buscar las expresiones .btn .btn-primary .btn-lg y .btn-icon-right, y dentro de las llaves {} introducir o modificar lo que desees para que este botón y todos los que tengan aplicadas estas clases adopten los nuevos estilos que quieras darles.

Cómo y dónde añadir código CSS para definir y modificar estilos de tu web

Mediante la hoja de estilos

Todas las webs tienen una hoja de estilos donde se definen las propiedades para todos los elementos de la web. Normalmente las propiedades se aplican a etiquetas HTML, clases e identificadores. Las hojas de estilos son archivos de extensión .css que tienes subido en tu servidor junto con el resto de archivos de tu web.

Hay hojas de estilo generales donde están definidos casi todos los estilos globales de la web, que suelen llamarse styles.css o stylesheet.css. También hay hojas de estilo secundarias para cosas concretas. Lo ideal es que no tengas muchas, sino que todo esté definido en unas pocas para mejorar el tiempo de carga del sitio y facilitarte poder modificarlas luego.

Cómo editar la hoja de estilos

Directamente en la hoja de estilos original (modo menos recomendable)

Lo primero es acceder al archivo de hoja de estilos .css mediante tu FTP o administrador de archivos de tu hosting. Una vez lo localices (en WordPress suele estar dentro de la carpeta principal del tema en una ruta parecida a esta: wp-content/themes/nombredeltema/css/styles.css), puedes editar directamente la hoja mediante editores como Dreamweaver, Coda, etc.

Los hostings te suelen dejar que edites directamente las hojas de estilos. Ten cuidado al hacerlo, te recomiendo hacer una copia previa. Si modificas algo y no sabes qué es lo que has tocado puedes estropear los estilos del sitio. Es por esto que este modo lo he marcado como menos recomendable, ya que requiere ser un poco más experto y además puede provocar algún accidente

También puedes acceder a los archivos de tu plantilla desde dentro de tu Escritorio de WordPress, en Apariencia > Editor. Como en el caso anterior, no es recomendable editar desde aquí ya que estarías modificando directamente los archivos y esto podría generar problemas en caso de que borres algo por error.

Con tu plantilla o con un plugin (modo más recomendable)

Este modo es más aconsejable ya que lo que modificas lo haces desde fuera, sin tocar la hoja de estilos original, de modo que en caso de equivocarte te bastaría con borrar el código que hayas escrito o desactivar el plugin.

Hay plantillas premium que incluyen una zona que suele llamarse Custom CSS o Custom Code donde puedes añadir tus propios estilos CSS a la hoja original de la plantilla. Esto suele encontrarse, en las Theme Options de tu plantilla, en alguna sección General o en una sección CSS.

Si tu plantilla no incluye una zona donde puedas añadir código CSS, puedes hacerlo fácilmente mediante un plugin como Simple Custom CSS. Al instalarlo y activarlo, en Apariencia tendrás una pestaña llamada Custom CSS o CSS personalizado.

Cómo es una hoja de estilos CSS

Una hoja de estilos CSS tiene un montón de etiquetas y selectores y para cada uno de ellos establece una serie de reglas mediante propiedades agrupadas entre {}.

Recapitulando lo dicho anteriormente:

– Dentro de la hoja de estilos, las etiquetas de HTML que quieras modificar debes escribirlas sin los <>. Por ejemplo, para todas las etiquetas <p> (párrafo) del sitio, escribes simplemente la letra p y a continuación sus propiedades específicas entre {}:

p {

}

– Los identificadores o elementos únicos debes escribirlos con #. Por ejemplo, escribes #botón y a continuación las propiedades concretas que quieres dar al identificador botón metidas entre {}:

#boton {

}

Los espacios entre definiciones CSS no importan, es decir, da igual si pones un espacio o das varias veces a Enter. Lo importante es que respetes SIEMPRE la estructura siguiente:

etiqueta o selector {
propiedad1: atributo;
propiedad2: atributo;
propiedad3: atributo;
propiedad4: atributo;
propiedad5: atributo;
}

Qué pasa si defines dos reglas iguales para un mismo elemento en distintas partes de la hoja de estilos

Si has definido propiedades para el identificador #boton dos veces en dos puntos diferentes de la hoja de estilos, bastaría con que vayas a las propiedades que quieres que sean preeminentes sobre las otras (que se apliquen sí o sí por encima de las otras) y antes del punto y coma que cierra cada una pongas !important:

p {
font-size: 14px !important;
}

Si en algún otro lugar de la plantilla, en las opciones del tema o en la hoja de estilos ya había una definición previa de estilos para la etiqueta p, con !important sobreescribimos esta regla y le forzamos a que a partir de ahora todos los párrafos se muestren siempre a un tamaño de 14 píxeles.

Códigos CSS más usados

A continuación te voy a mostrar los códigos CSS más usados en webs y que tú mismo puedes aplicar en la tuya para que consigas personalizarla al máximo. Los he clasificado según sirvan para modificar elementos de texto, elementos gráficos (cajas, fondos, botones, etc) y otro tipo de elementos.

Para textos

Las propiedades y sus atributos más comunes para modificar la apariencia de tus textos web son las siguientes:

• font-family: Establece una familia o fuente tipográfica.
• font-style: Estilo normal, cursiva u oblicua. Atributos [ normal | italic | oblique ]
• font-variant: Convierte las minúsculas en mayúsculas pero en tamaño menor. Atributos [ normal | small-caps ]
• font-weight: Grosor de la tipografía especificado en medidas de 100 a 900.
• font-size: tamaño o cuerpo de letra especificado en píxeles (px).
• text-indent: cantidad de desplazamiento lateral de la primera línea del texto, expresado en px.
• text-align: alineación del texto. Atributos [ left | right | center | justify ]
• text-decoration: aplica efectos de subrayado, tachado, parpadeo. Atributos [ none | [ underline || overline || line-through || blink ] ]
• letter-spacing: espaciado entre caracteres especificado en px.
• text-transform: para transformar los textos a matúsculas o minúsculas [ capitalize | uppercase | lowercase | none ].
• line-height: interlineado entre renglones de texto expresado en px.
• vertical-align: alineación vertical del texto. Atributos [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <longitud> ]

Para elementos gráficos de la web

• width: ancho de un elemento o imagen. Puede definirse en píxeles (px), unidades em (em) y porcentajes (%).
  Ej.: #content {width:960px;}
• height: altura de un elemento o imagen. Igual que la anterior.
  Ej.: #header {height: 250px;}
• background-color: color de fondo de un elemento. Se expresa en valor hexadecimal con # y seis caracteres. Ej.: #boton {background-color: #1CBACC;}
• background-image: imagen de fondo para un elemento.
  Ej.: #content {background-image: url(“http://www.aulacm.com/fondo.jpg);}
• background-repeat: repetición o no de la imagen dentro del fondo (ideal para crear patterns o fondos con texturas). Se puede repetir en x (en horizontal) o en y (en vertical).
  Ej.: #content {background-repeat: repeat-x;}
• background-position: posición de la imagen dentro del fondo. Se puede definir al centro, izquierda o derecha. También con píxeles y porcentajes.
  Ej.: #content {background-position: center;}
• border: borde de un elemento o imagen. Tiene 3 parámetros: tipo de borde (liso, punteado, rayas, etc), grosor (expresado en píxeles) y color (expresado en valor hexadecimal). También puede definirse sin borde (none).
  Ej.: #boton {border: solid 1px #000000}
• display: modo en que se muestra un elemento o imagen o no mostrarlo nunca. Tiene diversos valores, los más comunes son: mostrar elementos en bloque (block),
• z-index: posición de un elemento o imagen en el eje z (para poner elementos tapando a otros elementos)

Para añadir espacios o márgenes

• margin: margen a partir de un elemento hacia afuera expresado en px. Suele empujar a otros elementos cercanos
• padding: relleno o espacio interior desde el borde de un elemento hacia dentro. Ampliar padding suele arrastrar hacia fuera los bordes y por consiguiente aumenta el tamaño del elemento

En sendos casos, puedes expresar el valor en píxeles pero también en porcentajes. Los porcentajes son ideales para definir espacios proporcionales, de modo que no haya una distancia fija entre elementos, sino que en función del tamaño de la pantalla o dispositivo, los elementos se coloquen proporcionalmente.

Esta es la clave para definir tamaños de elementos que sean responsive (que se adapten automáticamente a todos los dipositivos). De este modo, una caja con un ancho (width) al 100% siempre ocupará el 100% de la pantalla, ya sea una pantalla grande o un smartphone.

Además, tanto el margin como el padding pueden definirse para una dirección concreta arriba, derecha, abajo o izquierda:

• margin-top: margen hacia arriba
• margin-right: margen hacia la derecha
• margin-bottom: margen hacia abajo
• margin-left: margen hacia la izquierda
• padding-top: relleno desde arriba hacia adentro
• padding-right: relleno desde la derecha hacia adentro
• padding-bottom: relleno desde abajo hacia adentro
• padding-left: relleno desde la izquierda hacia adentro

Nota: Puedes especificar márgenes y rellenos en las cuatro direcciones sin necesidad de declararlos por separado. Basta con que dentro de la propiedad general escribas las cuatro direcciones todas seguidas y en el sentido de las agujas del reloj. Por ejemplo, si quieres poner a un elemento #boton un margen de 20 píxeles por arriba, 0 por la derecha, 20 por abajo y 5 por la izquierda, puedes escribir lo siguiente:

#boton {
margin: 20px 0 20px 5px;
}

Códigos CSS para mejorar tu web

De todos los códigos anteriores, voy a destacar los que te pueden resultar de más utilidad y te voy a mostrar ejemplos concretos de cómo implementarlos en tu sitio:

Cómo hacer desaparecer un elemento de tu web

• display. Con la propiedad display puedes ocultar cualquier elemento de tu web. Para implementarlo, lo primero es que obtengas el nombre del selector del elemento en cuestión. Por ejemplo, si lo que quieres es quitar la fecha de los artículos del blog, lo primero es ir a cualquiera de tus artículos, ponerte encima de la fecha, clickar botón derecho e Inspeccionar.

En la zona inferior se despliega el Inspector de Elementos y aparece marcada la parte de código que sirve para mostrar la fecha. Dentro de esa línea, hay un class=”date”. Eso quiere decir que “date” es la clase que se aplica a la fecha para darle los estilos de letra, tamaño, color, etc.

Pero en este caso concreto no queremos modificar estos estilos, sino directamente eliminar la visualización de la fecha. Para ello, ve a la zona de CSS Personalizado de la plantilla (o al plugin Simple Custom CSS) y escribe lo siguiente:

.date {
display: none;
}

La clase “date” lleva un punto al inicio porque este es el modo de escribir los nombres de las clases en las hojas CSS. La orden “display: none;” significa “dejar de mostrar un elemento”. Por tanto, en este caso concreto, estamos ordenando lo siguiente: todos los elementos que tengan asignada la clase “date” dejarán de mostrarse en la web.

Cómo cambiar el tamaño y color de una tipografía concreta de tu web

• font-size, color. ¿Y si en lugar de ocultar la fecha lo que queremos es simplemente modificar su tamaño de letra y color?

En ese caso, ve al CSS personalizado de la plantilla (o al plugin Simple Custom CSS) y escribe lo siguiente:

.date {
font-size: 36px !important;
color: #F00 !important;
}

Ahora la fecha se muestra en un cuerpo de letra mayor y en color rojo.

Recuerda, ¿por qué ponemos !important?

Para que las nuevas propiedades definidas “pisen” a las propiedades que trae la plantilla por defecto, ya que estamos tocando propiedades que ya vienen predefinidas en la plantilla con unos estilos concretos.

¿Qué es eso de #F00 que hemos puesto en la propiedad color?

Es un color (en este caso rojo) que hemos definido mediante valor hexadecimal. Este es uno de los modos más habituales de introducir un color exacto en entorno web. Con la aplicación Paletton puedes hacer pruebas y obtener valores de color hexadecimal para poner en tu web.

Aquí tienes un ejemplo de paleta hexadecimal de colores:

Cómo añadir código HTML a tu web

En una entrada o página

Puedes añadir códigos HTML dentro de tus entradas y páginas para conseguir un resultado mucho más personalizado. Normalmente, se editan las entradas dentro de la pestaña Visual, pero si quieres editarlas con HTML haz click en la pestaña Texto o HTML.

Si te fijas, en esta captura de pantalla de este mismo post he cargado la pestaña HTML y se ve el texto en código HTML puro. La palabra WordPress del primer renglón está entre las etiquetas <strong> y </strong>, lo que quiere decir que esta palabra toma un estilo negrita en la parte visual.

En un widget de texto

Puedes añadir código puro HTML en tus widgets en Apariencia > Widgets y arrastrando un widget de tipo Texto. Dentro de este widget puedes escribir cualquier código HTML y WordPress lo va a interpretar correctamente para que muestre lo que quieras.

Por ejemplo, si quieres añadir una imagen banner enlazada a una URL concreta de tu sitio web o externa, y que se vea en una zona de widgets de tu sitio, dentro de la caja texto que arrastras al área de widgets correspondiente escribes lo siguiente:

<a href="URL DEL ENLACE" target="_blank">

<img src="URL DE LA IMAGEN">

</a>

Códigos HTML para mejorar tu web

A continuación, te pongo las etiquetas HTML más comunes en una web y que puedes insertar donde quieras o modificar las ya existentes mediante código CSS:

• <p></p> Párrafos
• <a href=””></a> Enlaces
• <b></b> Negritas
• <i></i> Cursivas
• <strong></strong> Negritas más gruesas
• <h1></h1> Encabezado o título 1
• <h2></h2> Encabezado o título 2
• <h3></h3> Encabezado o título 3
• <h4></h4> Encabezado o título 4
• <h5></h5> Encabezado o título 5
• <h6></h6> Encabezado o título 6
• <li></li> Elemento de lista
• <span></span> Selección de texto con un estilo determinado
• <u></u> Texto subrayado
• <em></em> Texto enfatizado
• <small></small> Texto pequeño
• <br /> Salto de línea (etiqueta única, no tiene cierre)
• <img src=””> Para insertar una imagen. Con el código <img src=”URL de la imagen”> puedes poner en cualquier zona de widgets un banner o imagen que quieras. Te aconsejo que antes de obtener la URL de la imagen la subas a tu propia Biblioteca de Medios y de ahí obtengas la URL que después pegas en el código.
• <form></form> Formulario.
• <table></table> Tabla
• <iframe></iframe> Incrustar elementos de otras webs

Cómo generar código HTML fácilmente

¿Y si no sabes absolutamente nada de HTML pero quieres insertar códigos a tu web y hacerlo de manera sencilla? Con la herramienta Quackit puedes crear estilos de texto y estructuras de maquetación con tablas y generar automáticamente el código para insertarlo en tu web.

Cómo modificar los estilos CSS directamente sobre la web

¿Y si te digo que todos los cambios de CSS puedes hacerlos directamente sobre la web de manera visual y después llevarte ese código a tu hoja de estilos? Esto puedes hacerlo muy fácilmente con una extensión para Chrome llamada StyleBot. Esta estupenda herramienta te permite previsualizar las modificaciones que hagas a los estilos de la web y copiar todo el código resultante para ponerlo en tu hoja de estilos.

Para ello, haz click aquí y añádela a tu navegador Chrome. A continuación, la extensión se coloca en la zona superior derecha de tu navegador (en un botón donde dice CSS). Ahora, ve a tu web y haz click en el icono CSS y abre StyleBot. Aquí puedes modificar cualquier aspecto de la web: colores, tipografías y tamaños, bordes, etc.

Haz una modificación (en el ejemplo he cambiado a rojo el color de fondo o background-color de nuestra web) y a continuación pincha en Edit CSS para obtener el código. Este código lo pegas en tu hoja de estilos y ¡listo! Ya tienes hecha la modificación, así de fácil.

Recuerda que puedes pegar el código en tu hoja de estilos en un archivo que suele llamarse styles.css o stylesheet.css, o usar el plugin Simple Custom CSS si prefieres hacerlo de manera más sencilla y sin arriesgarte a tocar directamente los archivos de la web.

Importante: Aunque hagas modificaciones mediante StyleBot y veas tu web con los estilos ya cambiados, hasta que no los pegues en tu hoja de estilos no se realizarán las modificaciones realmente para que las puedan ver el resto de usuarios.

Cómo hacer tu web totalmente Responsive

Gracias a un código especial de CSS llamado Media Queries puedes controlar absolutamente cómo se muestra tu web en cada dispositivo.

Mediante media queries puedes indicar estilos CSS concretos para tu web en función del ancho de pantalla. Las media queries se ponen directamente en tu hoja de estilos CSS y se declaran del siguiente modo:

/* Smartphones (horizontal) ----------- */
@media only screen and (min-width : 321px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Smartphones (vertical) ----------- */
@media only screen and (max-width : 320px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (horizontal) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPads (vertical) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/**********
iPad 3
**********/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}
/* Ordenadores de escritorio y portátiles ----------- */
@media only screen  and (min-width : 1224px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Pantallas grandes ----------- */
@media only screen  and (min-width : 1824px) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 4 ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* AQUÍ ESCRIBES LOS ESTILOS CSS */
}

¿Todo esto sólo me sirve para WordPress?

Realmente, si sabes HTML y CSS puedes modificar cualquier CMS o gestor de contenidos, y por supuesto cualquier web hecha con código puro. Basta con que sepas cómo hacerlo en cada caso, ya sea accediendo a los archivos de la plantilla o mediante plugins o extensiones. Al fin y al cabo, todas las webs, independientemente del gestor de contenidos que usen, muestran su contenido en HTML y CSS.

¿Qué te ha parecido este artículo?

¿Quieres preguntar alguna duda o dar tu opinión? ¿Te gustaría compartir algún truco de código que uses en tu web? Déjanos un comentario.

La entrada Códigos CSS y HTML para editar tu página web en WordPress aparece primero en Aula CM.

Si eres diseñador gráfico ya tienes unas habilidades y conceptos de diseño muy avanzados. Te cuento mi experiencia de qué cosas me han sido útiles para reciclarme en internet y convertirme en un Diseñador Web avanzado. Si eres un buen diseñador gráfico tienes muchísima ventaja para destacar en internet. Vamos a ello.

El diseño web te puede servir como complemento a tus servicios. Resulta muy interesante que puedas ofrecer a tu cliente el diseño de su web además de su imagen gráfica. Para ti va a ser más rentable. Por el otro, el cliente se beneficia de que sea un único diseñador el que se encarga de manera integral de todo el proyecto. O también puede servir como especialización única.

A esto le sumamos que hoy en día existen gestores de contenido como WordPress que permiten hacer una web de calidad de una manera accesible para todo el mundo. Ya no es imprescindible que seas un experto en código para hacer webs profesionales.

Dicho todo lo anterior, si actualmente eres diseñador gráfico y aún no haces webs, ahora es el momento. Además, como diseñador gráfico siempre vas a tener cierta ventaja frente al resto ya que posees bastante experiencia manejando programas de diseño y edición.

Conviértete ya en un súper diseñador web

En este post te voy a dar un montón de consejos para que consigas adquirir la capacidad de diseñar webs del mismo modo que diseñas elementos gráficos en el entorno offline. Para ello, debes comenzar a familiarizarte con el mundo online y empezar a hablar el lenguaje de las webs.

10 Diferencias entre el diseño gráfico y el diseño web

Para diseñar en entorno web es necesario que entiendas bien las diferencias esenciales entre el papel y la pantalla, pues cada uno tiene sus particularidades. Resoluciones, tamaños de pantalla, color, unidades de medida, formatos de imagen, etc. Toma nota:

1. Resolución para imprimir VS resolución web

Para imprimir en papel normalmente se pide una resolución que oscila entre los 150 píxeles por pulgada de la impresión digital a los 300 ppp del offset.

En internet no es necesario subir las imágenes con tanta resolución. Tradicionalmente, las pantallas de los ordenadores vienen ofreciendo una resolución de 72 píxeles por pulgada, por tanto esta es la calidad en la que debes guardar tus imágenes para que se vean correctamente en las webs.

Es muy importante que no subas las imágenes a la web con más calidad de la necesaria, ya que estarías aumentando el tiempo de carga y perjudicando la usabilidad y el posicionamiento SEO de tu web.

Pero ojo, a pesar de que el standard ha sido siempre 72ppp, en los últimos tiempos comienzan a proliferar dispositivos retina que aumentan la resolución y requieren que subas tus imágenes al doble de calidad.

2. Tamaños del diseño en papel VS tamaños de pantalla

En impresión física, a veces puedes enviar un archivo a imprimir con un tamaño y peso mayor del necesario por si acaso te quedas corto en cuanto a calidad de impresión, pero en web no, ya que por mucho que aumentes el tamaño o la resolución de los elementos, la pantalla va a mostrar las imágenes en la resolución exacta y en el ancho exacto que tengan.

Cuando generas imágenes para una web, debes subirlas al tamaño exacto en el que se van a mostrar, ya que ponerlas a un tamaño mayor aumentaría el tiempo de carga.

Si vas a subir imágenes en modo pantalla completa, debes subirlas al tamaño de la pantalla más grande en la que preveas que va a verse tu web, para que en ningún caso la imagen quede pixelada o cortada.

Por ejemplo, si en tu web tienes imágenes de cabecera en full width (ancho completo), debes subirlas a 2560px de ancho si quieres que se vean óptimamente en un iMac de 27 pulgadas.

A continuación te pongo un listado de dispositivos con sus respectivos tamaños de pantalla más comunes en píxeles de ancho:

• Pantalla normal de escritorio o portátil: a partir de 1224 píxeles.
• Pantallas grandes: de 1824 a 2560 píxeles (tamaño del iMac de 27”).
• Tablet: de 768 a 1024 píxeles.
• Smartphone: de 320 a 480 píxeles.

3. Formatos de color en impresión física VS formatos de color en pantalla

En impresión física, se manejan parámetros de color como CMYK o Pantone. En web, los colores se codifican en RGB (Red, Green, Blue) o hexadecimal (código de color con # y 6 caracteres). Cuando trabajas en color de pantalla, los colores tienen mayor viveza.

Si trasladas un color web a color de impresión física, el color suele presentar una pérdida de luminosidad, con lo cual si quieres hacer la equivalencia entre colores de impresión y web tendrás que recalcular manualmente para que queden lo más parecido posible.

Con una herramienta como Paletton puedes elegir una buena paleta de colores web a partir del color que quieras y obtener sus valores hexadecimales para usarlos en tu proyecto.

4. Unidades de medida diferentes

En impresión física los elementos se miden en milímetros, centímetros, etc. En webs, las dimensiones se miden en píxeles. La cantidad de píxeles que tiene una pantalla depende del dispositivo: monitores, tablets, smartphones, etc.

Además, no todos los dispositivos tienen la misma resolución, es decir, en el mismo espacio hay pantallas que ofrecen más píxeles que otras. Todo esto debes tenerlo en cuenta a la hora de diseñar.

Para saber cuántos pixeles mide un elemento de tu pantalla puedes instalar la extensión Page Ruler para Google Chrome.

5. Formatos de imagen para imprimir VS formatos de imagen web

Los formatos de imagen más habituales en las webs son JPG y PNG. El formato PNG va genial para subir imágenes recortadas sin fondo o con transparencia. En cambio, en impresión física, los archivos se suelen enviar a imprimir en formato PDF, AI o EPS, estos dos últimos son formatos vectoriales.

Cuando trabajas en papel, cualquier impresora puede imprimir vectores directamente en formatos de vector como .ai, .eps, .svg, etc.

En entorno web, a priori el navegador no puede interpretar ni mostrar estos formatos de vectores, con lo cual lo ideal es que exportes tus vectores en formato .png o .jpg. No obstante, si trabajas en WordPress, puedes subir directamente vectores a una web mediante plugins como SVG Support.

Al subir los vectores a la web te aseguras de que las imágenes se verán siempre perfectas, independientemente del tamaño y la resolución de la pantalla.

6. Costes y tiempos para crear el diseño y realizar modificaciones

En diseño offline tradicional, se suelen incluir bastantes modificaciones dentro del servicio que ofreces, porque normalmente no tardas demasiado en cambiar un logo de posición o modificar el color de un elemento si te lo pide el cliente.

En web, las modificaciones sobre el diseño realizado son más laboriosas y costosas en tiempo, con lo cual deberías tenerlo en cuenta a la hora de planificar y cobrar el trabajo.

No empieces a diseñar hasta que el proyecto esté bien definido y el cliente esté bastante convencido sobre la línea a seguir. Además, estaría bien que contemples cierto margen extra en los tiempos para realizar el proyecto, ya que en una web influyen bastantes factores y a veces tienes que solucionar cosas que te van a llevar varios días.

El diseñador web debe dar un margen lo más amplio posible para trabajar con mayor tranquilidad y cubrir las eventualidades.

7. Optimización para diferentes navegadores y optimización de la velocidad

Cuando haces un diseño para imprimir y lo envías a imprenta, las únicas dudas que te suelen surgir son: ¿Se verán bien los colores impresos? ¿Las fotos quedarán bien?

En cambio, cuando haces una web, debes tener en cuenta que existen diferentes navegadores y que no todos muestran el contenido exactamente igual, algunos efectos, animaciones y elementos pueden varias en función del navegador.

Por ello, es recomendable que a medida que diseñas vayas comprobando que todo se ve correctamente en los principales navegadores como Chrome, Firefox, Safari y Explorer. Además, cuando envías un archivo a imprimir no importa el peso, pero en una web debes optimizar el tiempo de carga a conciencia.

Con herramientas como GTMetrix puedes medir la velocidad de carga de una web y obtener datos muy valiosos sobre cómo mejorarla.

Para que tu web tenga un buen rendimiento en velocidad te aconsejo que contrates un hosting premium y profesional, ya que la diferencia entre un buen hosting y otro menos bueno suele ser notable.

8. Interacción del usuario con el diseño

En diseño gráfico offline, lo más importante de todo es la composición correcta y atractiva de los elementos, que quede bonito y, por supuesto, que el diseño transmita lo que necesita el cliente. Sin embargo, el usuario no interactúa demasiado con la pieza gráfica, pues ya está impresa y no cambia su aspecto.

En diseño web hay que tener en cuenta la interacción con el usuario, hay que incentivar que los usuarios hagan clicks, naveguen por la página y permanezcan el mayor tiempo posible, se suscriban a nuestras listas de correo, compren nuestros productos, compartan en sus redes sociales, y que todo ello lo hagan con la máxima facilidad.

Por ello, debemos prestar especial atención en disponer la estructura y los elementos de modo que todo sea muy entendible para el usuario y se fomente esa interacción.

9. Tipografías que puedes usar para diseñar

Cuando diseñas una pieza gráfica offline y la envías a imprimir, puedes incluir el paquete de tipografías junto al archivo de impresión o directamente incrustarlas en el documento. En cambio, en diseño web, tradicionalmente tenías que ceñirte al paquete básico de fuentes que venían en los ordenadores Windows (Arial, Times New Roman, Verdana, etc…).

Si usabas una tipografía diferente que sólo tú tenías instalada en tu ordenador, el usuario que veía la web desde su ordenador no podía ver la tipografía y en su lugar aparecía una de sustitución, con lo cual tipográficamente los diseños eran un poco pobres.

De un tiempo a esta parte, gracias a bibliotecas online de tipografías como Google Fonts (gratuita) o Adobe Typekit (de pago), puedes insertar en la web letras bastante más modernas y con la seguridad de que el usuario las verá correctamente.

Pero, ¿y si quieres usar una tipografía que no está en ningún paquete de fuentes online? ¿Y si el cliente te pide usar su propia tipografía corporativa?

Gracias al código CSS (o con plugins o extensiones para gestores de contenidos como WordPress) puedes implementar cualquier tipografía que quieras en una web.

Con una herramienta como What Font, que es una extensión para Google Chrome, puedes obtener el nombre de cualquier tipografía que aparezca en tu pantalla para después usarla en tu proyecto.

¿Cómo instalar una tipografía propia en una página web?

Si quieres subir una tipografía propia a tu sitio puedes generar un Webfont Kit mediante herramientas como esta que ofrece FontSquirrel. Subes la fuente, generas el pack, subes los formatos generados y finalmente insertas el código CSS que te da la herramienta en tu hoja de estilos CSS.

10. Posibilidad de editar el diseño una vez terminado

En diseño gráfico offline, cuando envías un diseño a imprimir has de tener muy presente que una vez impreso no puedes modificar la pieza, a no ser que modifiques el diseño y vuelvas a enviarlo a imprimir, con el consiguiente aumento en el coste ya que estarías haciendo más de una tirada.

En cambio, en diseño web el contenido es editable todo el tiempo y puedes modificarlo cuando quieras.

A pesar de esto, no deberías confiarte, pues cada cierto tiempo Google rastrea tu web y la muestra en resultados de búsqueda, con lo cual si cometes un error puede que modificarlo sea fácil, pero luego tendrás que esperar a que Google vuelva a rastrear tu web y actualizar el modo en que ha indexado el contenido para que se vea correctamente en el buscador.

Consejos para convertirte en diseñador web

Teniendo en cuenta todos estos factores y diferencias entre diseño gráfico offline y diseño web online, voy a recomendarte una lista de consejos para que realmente consigas convertirte en diseñador web, fruto de mi experiencia vital:

1. Elige una plataforma adecuada

Antes de ponerte a diseñar webs, decide en qué tecnología vas a especializarte. Hacer webs en HTML y CSS como se han hecho toda la vida tiene el inconveniente de que requiere estudio y experiencia para realmente sacarle provecho. ¿Por qué no mejor un gestor de contenidos que te permite diseñar fácil y relativamente rápido?

Decide qué gestor de contenidos o CMS es el ideal para ti. Hay diversas opciones: ¿WordPress? ¿Joomla? ¿Drupal? Yo te recomiendo sin duda que elijas WordPress, ya que es la más económica y al mismo tiempo la que te ofrece mayores posibilidades de personalización y diseño.

Hoy en día, además, casi todos los clientes que quieren una web piden que sea en WordPress por su facilidad para actualizar el contenido y modificar ajustes, lo cual brinda la cliente mucha independencia y control sobre su propia web.

Aquí tienes una guía completa para aprender a diseñar webs con WordPress. Y si te interesa, nosotros hacemos un curso práctico de WordPress en el que sales con tu página web terminada, y sabiendo hacer más. Lo hacemos en modalidad presencial o en modalidad online con clases en directo en streaming + tutorías individuales.

2. Elige plantillas premium para obtener mejores resultados

Si vas a trabajar con un gestor de contenidos, debes saber que la elección de una buena plantilla es esencial. Hay bastante diferencia entre elegir una plantilla realmente buena y otra que lo sea menos.

Una plantilla de calidad estará bien estructurada y codificada, y funcionará con mayor fluidez, sin fallos, con mayor velocidad de carga, etc.

Además, las plantillas premium suelen incluir muchas más opciones para personalizar el contenido y conseguir un mejor resultado, tienen mejor servicio de soporte, efectos y animaciones modernas, compatibilidad con otras plataformas y extensiones, etc.

3. Diseña de manera global y pensando en los múltiples dispositivos que existen

Ten en cuenta que cuando diseñas webs tienes que adoptar una mentalidad más amplia que cuando diseñas en offline, ya que el contenido se debe adaptar y funcionar perfectamente en todos y cada uno de los dispositivos del mercado, y no puedes prever cómo se verá la web en todas las pantallas que existen porque hay miles de dispositivos distintos.

Por tanto, a la hora de diseñar, asegúrate de que el contenido es responsive y se adapta proporcionalmente a todos los tamaños, y sobre todo no te centres únicamente en cómo se ve la web en tu propio ordenador. Ten siempre a mano otros dispositivos para hacer pruebas, o usa herramientas como ScreenFly  que te permiten ver tu web en diferentes tamaños y formatos de pantalla.

Las plantillas premium son ya responsive, por tanto esto no es algo que deba preocuparte en exceso. Simplemente, no te olvides de testear la web en múltiples dispositivos para evitar sorpresas.

En este post tienes un listado de tamaños de pantalla según cada dispositivo y cómo adaptar la web a cada uno de ellos mediante código HTML y CSS.

4. Piensa aún más en el usuario y analiza bien la usabilidad del sitio

En diseño gráfico, por supuesto que también debías tener en cuenta el modo en que el usuario iba a consumir tu contenido. Pero en diseño web debes prestarle incluso más atención, porque en gran medida el éxito o fracaso de una web estará relacionado con que los usuarios interactúen, generen conversiones, leads, ventas, etc.

Por tanto, diseña estructuras que fomenten esta interacción, dispón los elementos de modo que de alguna manera orientes el modo en que el usuario va navegando por el sitio. Piensa siempre en la usabilidad, que todo sea entendible, que los elementos estén donde deberían estar, que los botones sean fácilmente clickables, que los menús principales siempre sean visibles.

Con una herramienta como Hotjar puedes monitorizar mapas de calor de tu sitio web para saber dónde hacen click los usuarios y grabar sesiones para observar cómo navegan por la web.

5. Optimiza y reduce el peso de las imágenes siempre que puedas

No olvides optimizar siempre tus fotos, esta debería ser una obsesión constante como diseñador web si quieres que tus sitios realmente carguen rápido, lo cual va a incidir positivamente en el posicionamiento SEO y por supuesto en la usabilidad.

Te recomiendo subir las imágenes al tamaño que se van a ver en pantalla, no más. Si es para pantallas retina, súbelas al doble de resolución. Utiliza herramientas como Photoshop para optimizar tus fotos, colocándoles el tamaño exacto y la resolución adecuada. Tienes alternativas gratuitas online a Photoshop como Fotor, Gimp.

Si además quieres una reducción extra de peso, te recomiendo dos aplicaciones online muy buenas: TinyPNG y JPGMini.

En este post tienes un montón de consejos para reducir el tiempo de carga de tus webs.

6. Haz un seguimiento y mantenimiento constante de la web

Como diseñador web, tu labor no termina al acabar el diseño del sitio. Una vez diseñado, deberás prestar atención a su funcionamiento y llevar a cabo tareas de mantenimiento para que todo siga estando correctamente. Las webs reciben actualizaciones cada cierto tiempo: nuevas versiones del software, plantilla, plugins, etc.

Una web actualizada funcionará de manera óptima y evitarás problemas puntuales. Además, será más segura. Pero ojo, el mantenimiento de una web tiene un coste en tiempo y debes cobrarlo aparte del diseño del sitio, según las tareas que vayas a llevar a cabo.

7. Mantente actualizado y no pierdas la curiosidad

Lee muchos blogs y publicaciones sobre diseño web, busca webs que te sirvan como fuente de inspiración y analiza su funcionamiento, empápate de buenas ideas para tener siempre inspiración a la hora de diseñar tus webs, aprende cada día.

En el entorno online los diseños antiguos no quedan nada bien y además piensa que una web tiene un periodo de vida útil de unos años, por lo que deberías diseñar webs muy modernas para que no queden obsoletas demasiado pronto.

A diferencia del diseño gráfico tradicional, el diseño web está en constante cambio y evolución, por tanto si no quieres quedarte atrás deberías suscribirte a blogs interesantes, leer foros donde se plantean problemas y soluciones, etc.

8. Comparte tu contenido y trabaja tu marca

Si quieres tener muchas propuestas de trabajo y proyectos web, te recomiendo que hagas una web o blog donde compartir tus conocimientos. Esto te sirve para darte a conocer y trabajar tu marca personal como diseñador, además de traer tráfico a tu sitio y posibles clientes.

Sé generoso, comparte lo que sabes, crea comunidad en torno a tu blog y los resultados llegarán. Por supuesto, dedica el tiempo necesario para diseñarte una buena página ya que tu propia web es tu verdadera carta de presentación online.

Coloca tu portfolio online para que tus potenciales clientes puedan ver tus trabajos, pues son al fin y al cabo el mejor modo de demostrar tu valía como diseñador web.

9. No olvides que eres diseñador y aprovéchalo

Muy bien, estás haciendo webs y ahora tu entorno ha cambiado, pero sigues siendo diseñador y eso implica que tienes cierta ventaja frente al que no lo es. Eres capaz de generar fácil y rápidamente los elementos de diseño para la web como franjas, banners, iconos, etc.

Además, ves todo el sitio como una entidad global con coherencia gráfica. Entiendes de colores y sus combinaciones más acertadas. Tienes ojo para diferenciar algo elegante de algo que visualmente no funciona.

En definitiva, aprovecha tu factor diferenciador y aplica toda tu experiencia del offline en el entorno online.

Diseña tu imagen de marca de manera que se vea coherente y atractiva en todos los soportes, tanto tu web como las imágenes que compartas en redes sociales, fotos de perfil, aplicaciones corporativas, etc.

10. Ponte a diseñar webs ya

Empieza a aceptar propuestas para hacer webs. Si eres diseñador gráfico offline, probablemente tendrás una cartera de clientes que son la base de tus ingresos.

Aquí te voy a recomendar algo muy importante: lánzate con decisión al entorno web y comienza a aceptar proyectos online aunque al principio te sientas un poco más inseguro y pienses que lo más cómodo es seguir diseñando offline ya que es un ámbito en el que te manejas perfectamente y has conseguido minimizar los problemas.

No te acomodes. Si realmente quieres ser diseñador web, ten en cuenta que para aprender a hacer buenas webs lo mejor es hacer muchas webs y enfrentarte a problemas reales que irás dominando con el tiempo y la experiencia. Asume el reto y a por ello.

Para que empiecen a llegarte solicitudes de proyectos desde tu página web, sé muy claro a la hora de estructurar tus servicios y coloca tus tarifas en un lugar visible para que el cliente sepa cuáles son tus precios aproximados.

Otra cosa que te aconsejo es que diseñes un formulario atractivo para ganar suscriptores y enviarles buenas promociones de vez en cuando. Como diseñador gráfico, tienes la ventaja de que puedes maquetar newsletters espectaculares que consigan más clicks.

Aquí tienes una guía para diseñar newsletters y programarlas con Mailchimp.

11. Estudia un poco de código o al menos aprende a editar el código de las webs

Conocer código web (HTML y CSS) puede ser muy interesante para ti como diseñador, ya que te da una mayor libertad y capacidad de personalizar las plantillas.

Para hacer una web con un CMS no es necesario ser un experto en código, pero no viene mal saber un poco al menos o tener nociones sobre cómo modificar tu código web.

En este post te muestro cómo modificar y personalizar el código HTML y CSS y un extenso listado con los códigos web más útiles para los diseñadores y cómo aplicarlos.

Además, si sabes código HTML y CSS y usas una herramienta como Mailchimp, puedes crear newsletters totalmente personalizadas y gráficamente muy atractivas.

No olvides que el Email Marketing sigue siendo una estrategia muy recomendable. Aprovecha que eres diseñador para crear newsletters espectaculares que te ayuden a conseguir tus objetivos.

12. Aprende un poco sobre SEO y aplícalo en tus proyectos web

De poco sirve que diseñes webs muy atractivas si luego no posicionan bien en Google.

Quizá no tengas pensado ser un experto en SEO, pero viene muy bien que aprendas herramientas, trucos y consejos para aplicarlos en tus proyectos web.

En este artículo te contamos cuáles son los mejores plugins para SEO en WordPress. Si lo haces con plugins, siempre será más fácil y rápido.

En este otro te mostramos nuestra recopilación de los mejores libros sobre SEO, WordPress, Marketing, etc.

Cómo elaborar un presupuesto de diseño web

Para hacer un presupuesto de diseño web has de tener en cuenta el briefing (documento donde el cliente expone las necesidades del proyecto) o directamente mantener mínimo una reunión con él y tratar de obtener toda la información posible sobre lo que quiere conseguir con su nueva web.

Una vez que tienes toda la información sobre el proyecto, deberías desglosar todas estas cosas en el presupuesto y poner precio a tus servicios en función del tipo de web que vayas a hacer.

También puedes cobrar por horas, pero esto es más difícil de precisar porque no todo el mundo trabaja a la misma velocidad.

Aquí tienes una guía completa en PDF para hacer un presupuesto web paso a paso.

¿Cuánto cuesta una página web?

El precio de una página web puede variar en función del método de trabajo (código, CMS), tipo de web (corporativa, blog, tienda, etc), y otros aspectos importantes del proceso.

Si haces una web con código puro, es decir, sin utilizar un gestor de contenidos, lógicamente el precio ha de ser mayor ya que el tiempo invertido suele ser superior. A día de hoy te desaconsejo que hagas webs corporativas mediante código ya que tendrás que invertir más tiempo, con lo que encarecerás el precio sin que el resultado tenga por qué ser mejor frente a la opción del gestor de contenidos o CMS.

Realmente no son muchos los clientes que van a necesitar un desarrollo a medida, sólo en casos puntuales, ya que existen infinidad de plugins y extensiones prediseñadas a precios realmente asequibles para casi cualquier cosa que necesite tu proyecto.

En Codecanyon puedes encontrar multitud de plugins de gran calidad para hacer casi cualquier cosa que se te ocurra en una web.

Para los desarrollos a medida, podrías colaborar o contratar a un desarrollador que pueda modificar el código de los temas y plugins a petición del cliente.

Si optas por ofrecer un presupuesto web basado en CMS, podrás dar un precio más competitivo y ofrecer un resultado gráficamente incluso superior porque podrás dedicar mucho más tiempo a mejorar la apariencia gráfica sin preocuparte tanto por el código.

Entonces, ¿cuanto cobrar por una página web con un CMS?

Una web corporativa básica, hecha con un CMS por un profesional freelance, suele oscilar de media entre los 1500-3000€.

Si además incluye tienda online o plugins avanzados para hacer cosas como intranets, foros, traducciones, menús avanzados, sistemas de gestión de datos como portales de empleo, anuncios, directorios etc., el precio puede oscilar entre los 3000-5000€ aproximadamente.

Todo esto puede variar en función de la cantidad de funcionalidades extra que requiera el proyecto (ten en cuenta que los precios planteados suelen ser superiores cuando se trata de una agencia la que realiza el desarrollo).

Si el proyecto va a requerir mucha personalización extra en la plantilla, tendrás que incrementar el coste porque modificar el código es más costoso en tiempo y en algunos casos necesitarás incorporar a un desarrollador.

Por tanto, gracias al CMS ofrecemos a nuestro cliente 3 ventajas muy importantes:

• Apariencia gráfica muy profesional basada en plantillas premium
• Independencia del cliente para subir y gestionar su propio contenido
• Menor coste y menor tiempo de desarrollo y modificaciones

¿Merece la pena incluir el precio del hosting en el presupuesto, así como las plantillas, plugins de pago, etc?

Estos servicios te recomiendo desglosarlos aparte de tus propios servicios de diseño, ya que son requerimientos económicos que tiene el proyecto y de cuyo pago debería ocuparse el cliente con total independencia.

Mejor guiar al cliente para darse de alta en las diferentes plataformas: hosting, portales de venta de temas y plugins, suscripciones a servicios. Si los compras tú tendrás que incluirlo en el presupuesto y estar cada año presentándole la factura por un servicio que tú realmente no estás rentabilizando.

Lo ideal es que el cliente tenga total autonomía y pueda gestionar él mismo su propio hosting y demás servicios que haya comprado.

¿Y si mi cliente no tiene ni idea de hostings? ¿Y si va a necesitar mantenimiento de la web?

Si tu cliente no sabe nada de aspectos técnicos, probablemente en el futuro va a requerir tus servicios para cuestiones concretas de la web que no pueda hacer por sí mismo. No olvides que tú estás cobrando por diseñar una web, lo cual no incluye consultoría ni mantenimiento indefinido.

Calcula cuántas horas al mes puede llevar resolver estas necesidades de tu cliente y pon precio a tu hora de trabajo. Recuerda que todos los profesionales (médicos, abogados, profesores) cobran por sus horas de trabajo. El diseño no tiene por qué ser una excepción.

Herramientas para diseñadores web (casi todas gratuitas):

Para optimizar el peso de las imágenes:

• JPGMini
• TinyPNG
• Compressor

Para editar fotos y vectores:

• Fotor
• Gimp
• Inkscape

Para testear la web en diferentes dispositivos:

• ScreenFly
• Responsinator
• Responsive Test

Para medir y optimizar la velocidad de carga de la web:

• GTMetrix
• Google PageSpeed
• Test My Site

Para analizar la web al completo y mejorarla

• Woorank
• Web Developer
• Pingdom

Para obtener paletas de colores:

• Paletton
• Coolors
• Flat UI Colors

Para comprar recursos muy buenos (plantillas, vectores, audio, vídeo):

• Envato
• Elegant Themes
• Template Monster

Para descargar imágenes y vectores gratuitos

• Freepik
• Pixabay
• Pexels

Para conseguir iconos gratuitos y de calidad

• Fontawesome
• Flaticon
• Iconfinder

Para ver tipografías e incluirlas en el sitio web

• Typecast
• Typewonder
• Webfont Test
• What Font

Para buscar nombres de dominio interesantes y creativos

• Domainsboot
• Namemesh
• Domainr

Para analizar enlaces y otras cuestiones SEO

• Hrefs
• Majestic
• Open Site Explorer

Para monitorizar la navegación de los usuarios por la web

• Hotjar

Para medir el tamaño de cualquier elemento de tu pantalla

• Page Ruler

Danos tus consejos o plantea alguna duda

¿Qué te ha parecido este artículo? ¿Tienes algún otro consejo para dar a todos aquellos diseñadores gráficos que quieran ser diseñadores web? Déjanos tu comentario y hagamos de este artículo una guía para ayudar a todos los que quieren dar el salto del offline al online.

La entrada 25 pasos para pasar de ser Diseñador Gráfico a Diseñador Web aparece primero en Aula CM.

Te traigo una recopilación de mitos y errores en la que han colaborado 18 especialistas SEO. Nos rompen falsos mitos del posicionamiento en buscadores y nos cuentan los errores más comunes que suelen encontrar. Es un honor contar con estos grandes del SEO juntos en el mismo post. Espero que te sirvan para aplicar a tus proyectos.

Mitos del Posicionamiento SEO

Fernando Angulo

“Paga 100 Euros al mes y seguro que posicionas #1 en todo”

Esta frase me la encontré pegada en la puerta de varias casas en diferentes países de Europa. Pagar a alguien cierta suma de dinero no te garantiza un posicionamiento. Ahora si ves que esa agencia te cobra por generarte contenidos, te comparte sus estrategias y se integra a los procesos de tu negocio para optimizarlos en la web, eso si que vale la pena pagarlo.

José Facchin

“Cuanto más contenido publicas, mejor te posicionas”

La clave de una estrategia de contenidos enfocada a mejorar el posicionamiento de una página web o blog, pasa mucho más por generar contenidos suficientemente bien optimizados para el SEO y con una alta calidad de cara al usuario.

Mito #SEO: “Cuanto más contenido publicas, mejor te posicionas”. By @Facchinjose
Click To Tweet

“Optimizar tu contenido le hará perder calidad”

En la actualidad, un contenido bien optimizado a las nuevas reglas del SEO, necesita también estar optimizado para mejorar la experiencia del usuario que lo consumirá.

Por un lado, el sacrificar calidad en mis contenidos para potenciar el SEO, le hará perder relevancia ante los usuarios… haciendo disminuir otros factores que también intervienen en el posicionamiento como el CTR, la permanencia en página, el rebote, etc.

Por el otro, el solo preocuparte por la calidad, sin tener en cuenta las nuevas reglas básicas del SEO, te hará perder visibilidad. Por lo tanto, lo ideal es buscar un equilibrio que dé lugar a un contenido tanto optimizado para Google como para las personas.

Miguel Pascual

“El SEO son técnicas secretas”

No hay secretos en el SEO, hay diferentes formas de hacer las cosas en función de la propia experiencia de cada SEO. Prácticamente todo lo importante está publicado un millón de veces y los trucos más que técnicas secretas son formas más rápidas de hacer las cosas o de no engañarse con datos falsos.

“Las posiciones no se pueden garantizar”

Se pueden garantizar y se pueden asegurar igual que cuando te compras una nevera te garantizan que funciona y lo hará durante 2 años. Una garantía de posiciones solo es una compensación económica por no obtenerlas. Lo que es cierto es que difícilmente te garantizarán los ingresos previstos por unas posiciones a precios económicos. Claro que si te piden 5000 al mes por “hotel” y la garantía es si no consigo el top1 te devuelvo un 10% de lo cobrado, el negocio está claro…

Una garantía de posiciones solo es una compensación económica por no obtenerlas.

“El SEO ha muerto”

Cada vez que Google cambia su algoritmo (y lo hace muchas veces al año) o añade nuevos resultados propios a las SERP’s se anuncia la defunción del SEO. Normalmente en que escarbas un poco lo que pasa es que el que lo anuncia se dedica a vender o hacer algo que no es SEO pero que se le parece y quiere desviar el presupuesto de SEO hacia su parcela. Bueno es lícito intentar rascar presupuesto pero no ir matando SEO’s para ello que es tan malo como matar gatitos

Aleyda Solís

“Las señales sociales cuentan como factor de popularidad”

Correlación no implica causalidad.

Natzir Turrado

“Hacer cloaking es malo”

Rubén Alonso

“Hay que evitar las stop words”

Uno de los grandes mitos en el SEO de blogs siempre ha sido la recomendación de no usar lo que se llaman stopwords en las URLs de los posts: artículos, adverbios, conjunciones, preposiciones, etc. Es decir, que se recomendaba una URL del tipo “http://loquesea.com/comprar-coche” en vez de “http://loquesea.com/comprar-UN-coche”.

Es posible que hace años Google no tuviera en cuenta estas palabras para posicionar resultados, pero hoy en día la “naturalidad” que quiere Google en su buscador pasa por interpretar el lenguaje tal y como lo usamos. Y un claro ejemplo de que esto ya es un mito es el post mejor posicionado de mi blog para búsquedas tan competidas como “crear un blog”. En la URL verás que uso una stopword como una catedral: “un” http://miposicionamientoweb.es/como-crear-UN-blog/

Javier Lorente

“Más URL´s = Más tráfico”

Creo que uno de los mayores mitos del SEO es que a más cantidad de urls, más posibilidades de atraer tráfico, ese es el mito. Esto es cierto a medias, incluso me atrevería a decir que en la mayor parte de los casos una mayor cantidad de URLs no se traduce en mayor tráfico si no en menos.

A mayor cantidad de URLs de calidad, mayor tráfico SEO, a mayor cantidad de URLS morralla, menor cantidad de tráfico SEO, esta es la realidad.  Lo importante, independientemente del volumen de contenido es tener una correcta arquitectura de la información, para ello hay que leerse el libro de recuperación de la información de Ricardo Baeza-Yates.

Álvaro Sáez “Chuiso”

“Las señales sociales posicionan”

Esto fue el nuevo boom/moda de los últimos 2 años. Las señales sociales y en general las redes sociales ayudan a posicionar. Para mi es uno de los grandes mitos actuales del SEO, y digo esto porque yo mismo pensaba que así era (y también muchos otros bloggers y SEOs), pero los últimos experimentos que he realizado en condiciones controladas y que pueden leerse en mi blog me han hecho ver que no es cierto. Las señales sociales como tal NO mejoran el posicionamiento (en cambio sí lo hace el tráfico).

Mito #SEO: Las señales sociales no posicionan, en cambio el tráfico sí lo hace. By @Chuisochuisez
Click To Tweet

Javier Marcilla

“El mito del tráfico: cuanto más, mejor”

Cuanto más tráfico tenga mi sitio web, mejor, ¿verdad? Pues no, no siempre es verdad. Es más, en la mayoría de los casos no importa tanto el número de visitantes “en bruto” como el de los visitantes “cualificados”, entendiendo como tales aquellos que están de verdad interesados en lo que ofreces.

Enfocarse únicamente en el tráfico, sobre todo si pretendes vender algo, no siempre es la mejor opción. Es relativamente sencillo conseguir miles de visitantes a través de ciertas palabras clave o mediante PPC, pero al mismo tiempo puede que no consigas vender nada.

En ocasiones, cuando nos obsesionamos con intentar posicionar “esa Keyword con 10.000 búsquedas”, nos olvidamos de que sin importar lo que “vendamos”, debemos encontrar al cliente potencial que puede estar más interesado en nuestra oferta. Sí, el tráfico es muy importante. Pero el tráfico cualificado es todavía mejor. Céntrate en descubrir cual es tu cliente ideal, comprender lo que necesita, y encontrar esas Keywords que te permitirán hacerle saber que tú se lo puedes dar.

Javier Gosende

“Si invierto en Google Adwords eso mejora mi posicionamiento SEO”

Algunos creen que el tener una presencia importante en los resultados patrocinados de Google beneficia el posicionamiento natural en buscadores de la misma página web.

Eso no es así. Son 2 algoritmos diferentes. Google no ha dicho que tengan relación. No tiene lógica. Google quiere que las empresas inviertan cada vez más en Google Adwords. Si una empresa está muy bien posicionada orgánicamente, no tendría mucha motivación para hacer Google Adwords y posicionarse en la zona de anuncios patrocinados.

Pablo Caño

“El mejor SEO es no hacer SEO”

Es cierto que no hay que recurrir a la sobreoptimización, pero la keyword principal y las variantes de ésta deben estar en el texto que queremos posicionar. Los nuevos algoritmos son cada vez más “inteligentes” y el SEO semántico es ahora la prioridad. Los buscadores dejan de centrarse en términos concretos para entenderlos como un contexto. Pero esto no significa que las palabras clave ya no tengan importancia, éstas siguen teniendo peso y es importante tenerlas en cuenta en nuestra estrategia SEO.

Los nuevos algoritmos de Google son cada vez más “inteligentes” . Ahorael SEO semántico es la prioridad.

Verónica Parrilla

Google mató el Linkbuilding: “no al Gray Hat SEO”

Definitivamente el linkbuilding no ha muerto, solo ha evolucionado con las actualizaciones de Google Penguin. Aunque es cierto que ha sido una de las patas del SEO más castigadas en los últimos años.

Matt Cutts nos dice: “el objetivo no es que tus enlaces parezcan naturales, el objetivo es que tus enlaces sean naturales”. Suena muy bien, pero algo complicado de conseguir cuando se trata de una web o marca poco conocida cuyo posicionamiento aún es débil. Por lo que se hace necesario establecer una estrategia de linkbuilding combinada con acciones de content marketing y redes sociales.

Dentro del linkbuilding hay tácticas “Gray Hat SEO” que siguen funcionando, siempre y cuando se realicen de manera moderada y en manos de profesionales ( OJO ). Por ejemplo:

• Hacer uso de palabra clave en el anchor text (lo ideal es tener un perfil de enlaces natural, ¿no? Tampoco sería lógico que todos tus enlaces fueran de Marca)
• Enlaces en foros de webs referentes y de calidad
• Creación de una red de PBN (siempre y cuando estén en diferentes IP’s y subnet)
• Comprar enlaces de calidad
• Como todo en la vida debe de haber un equilibrio.

Tomás de Teresa

“Mejores rankings = Más ventas”

Miguel Florido

“Publicando más contenido voy a conseguir más tráfico”

Hay muchos profesionales que caen en este error y piensan que cuanto más contenido publiquen en su Blog, de alguna forma el buscador Google le otorgará un mayor posicionamiento a los mismos y conseguirá generar más tráfico, pero no es así.

Los blogs que conozco que tiene mejor posicionamiento en Google y mejor tráfico, publican una media de 1 post a la semana. Y ¿por qué ocurre esto? Es muy sencillo, estos blogger saben que la calidad y el valor del contenido a realizar es la clave para conseguir un buen resultado con su trabajo, y no el diluir su esfuerzo en varios contenidos.

“La meta description no es un factor SEO”

Desde el año 2009 Google no tiene en cuenta de manera directa el contenido de esta descripción para el cálculo del algoritmo. De manera indirecta podemos hacer auténticas maravillas con esta “meta description” para que nos ayude a mejorar la experiencia de usuario y con ello aumentar el CTR y los clics que reciben nuestros resultados en Google.

Existen muchos trucos y formas de optimizar la meta description para captar más la atención y conseguir más clics, pero estas son mis preferidas:

• Repetir la keyword. Si el usuario busca esa palabra clave automáticamente aparecerán ambas keywords en negrita, lo que hará destacar más tu resultado.
• Añadir las estrellitas de valoración. Solo el cambio de color capta la atención del usuario y hacen que sea un elemento muy recomendable.
• Añadir símbolos en la parte central. Utiliza símbolos como el de aprobación entre las frases de la descripción para captar mejor la atención.
• Añade enlaces a marcadores del post. Te recomiendo que utilices el plugin Table Content Plus porque te ayudará, además de mejorar la experiencia de usuario, a conseguir más enlaces en tu resultado de búsqueda y que lleve al usuario al punto concreto que busca.

Raúl Miruri

“Escribiendo artículos largos vas a posicionarte mejor”

Esa frase leída de forma literal no es real. Lo que ocurre es que escribiendo post más largos tienes la oportunidad de hacer una mejor optimización utilizando un mayor número de palabras clave long tail y variaciones semánticas que pueden ayudarte a posicionar muchas keywords diferentes.
De todas formas lo más importante en cuanto al contenido es que responda bien a lo que los usuarios están buscando independientemente de su extensión. De hecho la utilización de imágenes, infografías y vídeos también forman parte de una buena optimización que mejore la experiencia de usuario.

“El SEO es gratis”

El SEO es una inversión a medio-largo plazo y como inversión siempre requiere de unos costes. Incluso en el caso de que tú mismo posiciones tus proyectos sin contar con ayuda externa necesitarás invertir si no dinero si al menos tiempo y esfuerzo.

Bruno Vázquez-Dodero

“Comprar enlaces siempre penaliza”

Los enlaces entrantes de calidad hacia tu web siguen siendo uno de los factores más importantes del SEO. Está claro que a Google no le gusta que compres enlaces porque es una manera de hacerle trampa. Pero sin embargo en muchas ocasiones tiene imposible saber que lo haces. Si por ejemplo lo haces con una web que no suele venderlos a menudo… ¿cómo va a saber Google que es pagado y no es natural?

Hay maneras de hacerlo de una manera elegante o a través de contenidos patrocinados. Eso si, si lo haces de manera chusca y masiva entonces prepárate para que te pueda afectar de manera negativa.

Una de las razones por las que mola mucho el SEO es porque hay empresas con un presupuesto moderado que si hacen las cosas bien pueden competir con otras con mucho mayor presupuesto en casi igual de condiciones. En otras áreas del marketing la inversión es mucho más significativa. En SEO puede llegar a tener más valor la creatividad y el saber hacer. En todo menos en la parte del linkbuilding, en esto siempre seguirán teniendo ventaja las empresas con un gran presupuesto porque pueden comprar enlaces muy buenos y que pase inadvertido para Google.

José Márquez

“Posicionar con blasteos está penalizado”

Ernesto G Bustamante

“Para posicionar hay que incluir Meta Keywords”

Fernando Angulo

Creer que el SEO hay que hacerlo una sola vez y después esperar a tener resultados

El SEO es parte de una estrategia que no va solo, va acompañado de muchas otras estrategias como el e-mail marketing, Social Media, Marketing de Contenidos, etc.

Aleyda Solís

Impedir el acceso a los robots de los buscadores por error

Puede que por un descuido tengas en tu robots.txt el acceso bloqueado a los buscadores, de modo que tu página web no puede ser indexada, con lo cual no aparecerá en los resultados de búsqueda. Esto suele ocurrir al pasar una web de la fase de desarrollo, periodo en el que no interesa que el contenido sea indexado, a la fase de producción, sin asegurarse de chequear el archivo robots.txt.

También puede ser debido a sobrecargas en el servidor, es decir, en este caso se bloquea el acceso a propósito. Para controlar esto, lo ideal es que uses una herramienta de monitorización que te informe en todo momento del estado de tu archivo robots.txt, como Monitoring de OnPage.org.

Natzir Turrado

No monitorizar los cambios en el robots.txt

Está herramienta me ha salvado el culo más de una vez, Robotto.org. Te llega una alerta cuando se produce un cambio en el robots.txt y eres el primero en enterarte. Así cuando desarrollo hace un cambio y se “han olvidado de avisarte” puedes arreglarlo rápidamente.

Rubén Alonso

Escribir sin tener en cuenta las palabras clave

Javier Lorente

Centrar la estrategia sólo en el SEO

Otro errores es centrar toda la estrategia de marketing en un solo canal por ejemplo centrarlo solo en SEO, todos los canales presentan fortalezas y debilidades y lo verdaderamente inteligente es sacar lo mejor de cada uno y aprovecharlo al máximo en tu propio beneficio. Es un error pensar que el SEO es el mejor canal de todos porque es “gratis” y a medio largo plazo el más rentable de todos. Pensar que es gratis, es otro gran error ya que la inversión en rrhh para hacerlo bien es muy alta.

Álvaro Sáez “Chuiso”

Seguir montado en el caballo de “El SEO ha muerto”

Es un caballo que salió a galopar hace ya muchos años, y aún sigue haciéndolo. Es un mito, un error, una pérdida de tiempo y un absurdo total. Llevan diciendo que el SEO ha muerto desde que empecé en esto, y desde entonces yo y miles de personas ganan dinero gracias al SEO y lo que logramos con él.

Posicionar un ecommerce, un nicho Adsense, una startup… El SEO sigue siendo efectivo y funciona, pese a que grandes portales de marketing como PuroMarketing nos recuerden cada 2-3 meses que el SEO ha muerto en alguno de sus visionarios artículos. Nadie dijo que el SEO no iba a cambiar, ya que si no lo hiciese (continuamente), gente como yo quedaría obsoleta, pero ¿morir? Nah, gran error.

Javier Marcilla

Usar continuamente las mismas Keywords

En algunas ocasiones nos empeñamos en crear muchos contenidos que giran todos alrededor de ciertas Keywords.

Pensamos erróneamente que si (por poner un ejemplo un poco extremo) escribimos un artículo sobre “las mejores zapatillas para running” y otro sobre “la mejor zapatilla para running” tendremos más oportunidades de conseguir posicionar una u otra página. Por desgracia esto no es lo correcto, especialmente cuando usamos términos muy estrechamente relacionados como los del ejemplo.

Si utilizas las mismas Keywords, o variaciones cercanas, en diferentes páginas de tu sitio estás compitiendo contigo mismo para posicionar estas Keywords, y dificultando el que cada página pueda posicionarse por un conjunto de Keywords único. En su lugar es más conveniente que intentes posicionar una Keyword y sus variaciones en una sola página, tratándolas en profundidad y creando un recurso útil para tus visitantes y autoritario para los buscadores.

Javier Gosende

No tener en cuenta las páginas de categorías de producto

En el caso del SEO aplicado a tiendas online, un típico error es no tomar en cuenta las páginas de categorías de productos dentro de nuestra estrategia de posicionamiento en buscadores. En mi opinión, las páginas de categorías son las que nos pueden traer más tráfico orgánico y con altas posibilidades de convertir. A nivel de SEO on page la gran mayoría de tiendas online se limitan a crear algunas páginas de categorías, etiquetarla de forma muy automática e insertar un listado de 10 o 20 fotos de productos. Y ya está, eso es todo.

Las webs que se posicionan bien en el ecommerce, miman sus páginas de categorías, insertando contenidos relevantes y densos. La página de una familia de productos se debe optimizar su relevancia de la misma manera que otra Landing Page SEO más. Un eficiente etiquetado SEO y sobretodo, contenidos muy relevantes y tremendamente útiles para el visitante. Uno de los principios de marketing es diferenciarnos de la competencia, pues el contenido en una página de categoría, es un buen ingrediente para diferenciarnos.

Pablo Caño

Copiar a otros blogs

Verónica Parrilla

Pensar que la Auditoría SEO lo es todo y descuidar el Linkbuilding

Uno de los mayores errores que he observado en los clientes es que creen que cuando realizas una auditoría SEO no hace falta hacer más.

Es muy importante dejar claro que por mucho que una web esté casi al 100% de optimización al final llega un momento en el que esos cambios tocan techo y no hacen que subas más posiciones en Google.

Dependiendo del sector, es necesario realizar una estrategia de linkbuilding centrada en potenciar los nichos objetivo. A partir de ese momento los cambios en los rankings empezarán a ser visibles de manera positiva.

No hay que olvidarse de la importancia de monitorizar los backlinks para ir llevando un control de los sites que te enlazan y prevenir cualquier penalización.

La problemática que encuentro es que no todos los clientes creen en el linkbuilding.

Tomás de Teresa

Posicionar algo que nadie busca

Cuando empecé a ofertar mis servicios, me dí cuenta de que los términos más interesantes tenían demasiada competencia (posicionamiento web, marketing online, etc.). Así que para tener más posibilidades, se me ocurrió ofrecer servicios más especializados, limitándome exclusivamente a mi zona. Casi de inmediato llegué a primera posición para consultas como “Servicio de Analítica web en Albacete”. El resultado te lo puedes imaginar: no vendí nada.

Lección aprendida: Algo que nadie busca es algo que nadie quiere, y que por tanto, nadie compra. Antes de empezar, asegúrate de que la gente busca lo que vendes.

Atraer a usuarios que no comprarán

Uno de mis primeros clientes tenía una franquicia de papelerías. Quería usar Google para vender su franquicia, pero era reacio a generar contenidos. Sus páginas eran intocables y yo tenía que conseguir visitas haciendo cambios invisibles al usuario. De modo que reuní las palabras clave más prometedoras y las asocié a las páginas que mejor encajaban. Coloqué los términos en las etiquetas título y, por suerte para mi, el sitio fue ganando visibilidad y tráfico (eran otros tiempos). Sin embargo, las ventas no fueron bien. Había un desfase entre lo que buscaba el usuario y lo que encontraba en el sitio. Una persona que busca “franquicias rentables de baja inversión” sólo quiere informarse, aún no ha decidido montar una papelería.

Lección aprendida: Considera la intención del usuario que llega desde la búsqueda. Dale lo que quiere y, si no está listo para comprar, asegúrate de captarlo para poder venderle en el futuro.

No preparar tus páginas para la venta

Evita cometer errores en SEO

Los errores en SEO pueden provocar resultados muy perjudiciales en el posicionamiento y visibilidad de tu web. Es importante evitarlos. Trabajando poco a poco pero bien tu estrategia SEO, tu posicionamiento mejorará sin caer en penalizaciones en ocasiones difíciles de solucionar.

Si conoces algún otro mito o error SEO, o has cometido alguno y quieres darnos tu opinión, cuéntanoslo en los comentarios. Sumemos entre todos.

La entrada Mitos y errores del posicionamiento SEO según 18 expertos aparece primero en Aula CM.

Lo que vas a leer a continuación es una recopilación de consejos de WordPress sobre los mejores plugins, plantillas, presupuestos, SEO y mucho más. Hemos reunido a once de los mejores diseñadores y profesionales para ayudarte. Entre todos te vamos a dar ideas y recomendaciones para orientarte como diseñador web o inspirarte si estás comenzando.

Los consejos que vas a encontrar aquí son fruto de la experiencia real de estos profesionales. Están estructurados en 5 preguntas de diseño web con los aspectos más importantes de WordPress. Te los ofrecemos con ilusión y esperamos que te sirvan y te aporten nuevos puntos de vista. Toma nota:

1. ¿Cuáles son tus 3 plugins favoritos para WordPress?

Arturo García

Si solo pudiera tener tres plugins en mi web elegiría:

• Thrive Content Builder: porque te facilita muchísimo la personalización de contenidos y te permite darle una apariencia profesional a tu web sin necesidad de tocar el código de la página.
• Thrive Leads: la lista de suscriptores es mi fuente de ingresos número uno en el blog y este plugin es el mejor que he encontrado para captarlos.
• iThemes Security: últimamente he visto a mucha gente pasarlo mal porque les han atacado la web, cuanto más popular se vuelve WordPress más probable es que sufras un ataque, así que hay que proteger bien nuestra plataforma.

Omar de la Fuente

• WordPress SEO by Yoast: me parece increíble cómo un solo plugin te sirve para solventar tantas cuestiones de SEO en tu web sin saber de SEO. Al margen de la ayuda que te presta a la hora de redactar tus artículos.
• Thrive Content Builder: editor visual de pago, el cual para mí ha revolucionado la forma de maquetar contenidos en WordPress y se ha convertido en un imprescindible para mí.
• Thrive Leads: plugin hermano del anterior, enfocado en el diseño de formularios para captar suscriptores. Un plugin con infinidad de opciones, muy potente.

Max Camuñas

Los tres plugins que no pueden faltar en todos mis diseños son:

• Sumome: un plugin muy completo. Ofrece diferentes opciones sociales, entre las que destacan los botones sociales en las imágenes, los pop-ups, la página de bienvenida o la barra superior.
• SEO: utilizo tanto SEO by Yoast como All in one SEO pack en función del proyecto y su complejidad.
• Jetpack: otro plugin de lo más completo. Incluye multitud de funcionalidades entre las que destacan los posts relacionados, los botones para compartir o la automatización en redes sociales.

Javier Guembe

• All In One WP Security & Firewall: con tanto intento de intrusión en WordPress, este plugin es una solución muy completa y unificada para poner las cosas mucho más complicadas a los hackers y botnets que tratan de meter spam (o cosas peores) en nuestros WordPresses. La seguridad de la web es fundamental. Te permite hacer Login lockdown (renombrar la ruta de login) y proteger la creación de usuarios entre otras cosas.
• NS Cloner: en instalaciones de WordPress Network (antes llamado multisite) a veces nos interesa copiar “blogs” por diversas razones, como tener un blog-base configurado que luego sólo haya que adaptar, o usar un WordPress Network como sistema para meter distintas versiones de una web. NS Cloner nos facilita muchísimo las cosas ya que clona bien de un sitio del multisite a otro.
• Monarch: es de pago pero Elegant Themes ofrece muchas cosas con su suscripción. Una vez dije que se podía crear un blog exclusivo de plugins, botones y métodos para compartir en redes sociales y lo sigo manteniendo, es un sector muy movido porque dependen de APIs externas (las de las redes sociales), con sus reglas de juego cambiando cada poco.

David Gutiérrez

Primero de todo decir que no soy mucho de utilizar plugins. Cuantos menos mejor, ya que si no tu WordPress cada vez es más pesado y lento. Utilizo pocos pero buenos, eso sí. Aquí os dejo mi selección:

• SEO by Yoast: Es mi plugin favorito en WordPress sin duda es el mejor plugin para SEO en WordPress, te permite hacer de todo, modificar title, meta descriptions, modificar taxonomías, xml, permite quitar el molesto /category/… Es gratis aunque tiene una versión premium, para mi es suficiente con la gratuita.
•  Akismet: para mi es imprescindible para combatir el spam. Ya que sin él te genera mucho spam.
• Contact form 7: Es un plugin que te permite hacer tus propios formularios y diseñarlos de una manera muy fácil con los campos que necesites, etc.

Daniel Nabil

Unai Calleja

• Woocommerce: en este caso es un plugin muy grande, con el cual conseguimos dar a WordPress las características de un comercio electrónico. Es un plugin muy completo, con el que haciendo unas pequeñas modificaciones y configurando unos pocos plugins que lo complementan, se consigue una herramienta muy potente.
• WPML: se trata de un plugin con el cual configurar un sitio multi-idioma. Contiene muchas herramientas para optimizar todos y cada uno de los aspectos necesarios para la configuración multi-idioma completa.
• Gravity Forms: plugin para la realización de formularios complejos. Con este plugin podrás configurar formularios partidos en distintas páginas. Muy útil cuando el formulario es muy largo. Se utiliza para la recogida de datos compleja.

Luis FM

A medida que crece nuestro proyecto, lógicamente también lo hace la necesidad de añadir funciones y suplir carencias que pueda tener WordPress. A continuación, te voy a mostrar mi selección de los que podrían ser los 3 mejores plugins para WordPress.

• Jeckpack: es “la navaja suiza de los plugins” y te digo esto porque en él puedes encontrar casi cualquier funcionalidad que le falte a tu página web, por ejemplo: Editor CSS, para mostrar vistas previas que enlacen a otros artículos del blog, formularios de suscriptores, Photon que funciona como CDN para alojar en cache las imágenes o funciones para conocer las estadísticas de visitas, módulos anti spam y de seguridad.
  El resto de sus virtudes, que no son pocas, te invito a que las descubras instalándolo y manipulando desde su sencillo e intuitivo menú.
• WP Rocket: lo primero que te diré es que es de pago, pero también a su favor, es que su precio lo vale y con creces, por algo está integrado en Cloudflare. Es un pluging de cache, creado con la finalidad de aumentar la velocidad y el rendimiento de nuestra página web.
• Yoast seo: Te ayuda a redactar y crear títulos y descripciones más competitivas para lidiar con más fuerza en los resultados orgánicos del navegador.

Ricardo Prieto

 

Álvaro Peña

• Mailchimp for WordPress: Utilizo y recomiendo este plugin para captar Leads. Permite generar formularios de suscripción integrados con tu cuenta de Mailchimp e introducirlos en cualquier parte de tu web mediante shortcode para captar Leads. Se puede editar su estilo con CSS para darle un nuevo diseño adaptado e integrado en tu sitio.
• Wordfence Security: Tras haber tenido un problema grave de seguridad en mi web no me planteo no utilizar plugins de seguridad en WordPress. Wordfence ofrece firewall, escaneo de malware, protección del login y otras características que te ayudarán a proteger tu plataforma de los ataques.
• Yoast SEO: Este plugin me parece imprescindible, no solo por las opciones de configuración SEO de títulos, metadescripciones, etc, sino porque además permite realizar otros ajustes técnicos. Permite seleccionar que elementos quieres indexar y cuales no, editar archivos como  el Robots.txt o el .htaccess sin salir de la plataforma.

Ernesto G Bustamante

• Visual Composer: el plugin que ha democratizado el diseño web en WordPress, permitiendo que casi cualquier usuario con un nivel muy básico pueda construirse una web totalmente profesional. ¿El secreto? un sencillo pero potente editor que resulta muy intuitivo a la hora de trabajar. Es un plugin imprescindible para diseñar con calidad y rapidez, aunque hay otras opciones similares como Page Builder, Thrive Content Builder, etc.

Además, tocando un poco de código, puedes personalizar el plugin para adaptarlo a tus diferentes plantillas. En mis proyectos suelo implementar módulos específicos o ajustar algunas opciones más a fondo para que el resultado sea aún más personalizado.

• WP Super Simple Speed: este plugin te ayuda a optimizar el rendimiento y velocidad de tu página web y mejora notablemente las métricas de tu sitio en plataformas como GTMetrix. Un modo sencillo y rápido de hacer tu web más competitiva en posicionamiento SEO y al mismo tiempo más amigable para el usuario ya que reduce tiempos de carga.
• 404 Redirected: un plugin fantástico para redireccionar automáticamente todos tus errores 404 a páginas o entradas existentes de tu sitio que sean similares según sus títulos y URL´s, aumentando tus visitas y mejorando tus conversiones. No necesita configuración, simplemente lo activas y él solo se encarga de elegir a qué URL´s redireccionar tus 404.

Visual Composer: el plugin que ha democratizado el diseño web en WordPress by @ernestogbusta
Click To Tweet

2. ¿Y tus plantillas de WordPress favoritas?

Arturo García

•  GeneratePress Es la que utilizo en mi web y estoy encantado con ella. Es rápida, sencilla de manejar y muy personalizable. Me recuerda al framework de Génesis en cuanto a la calidad de su código, las opciones de configuración, como por ejemplo los hooks e incluso en la estética inicial, pero es más sencilla de personalizar para los usuarios menos avanzados. Una excelente opción para aquellos que busquen una plantilla sencilla, ligera y fácil de configurar.
• Betheme: Si quieres una plantilla con muchas opciones de personalización y que se pueda adaptar a múltiples proyectos te la recomendaría. Tiene más de 200 demos pre configuradas listas para instalar, así que solo tienes que elegir la que mejor te encaje y cargarla en unos pocos clics. Además tiene un montón de funcionalidades integradas. La única pega de este tipo de plantillas es que son bastante pesadas y es más difícil conseguir unos tiempos de carga aceptables.

Plantilla Betheme

•  Genesis Framework.Si lo que buscas es minimalismo, velocidad de carga y configurar la mayoría de las funcionalidades a través de código la recomendaría sin duda. Una de las mejores opciones para desarrolladores y usuarios avanzados, aunque no la recomiendo en absoluto para gente que esté empezando en el mundo de WordPress.

Omar de la Fuente

• Metro Pro: es la que utilizo actualmente en mi blog. Me gusta por su versatilidad, y manejando CSS se puede convertir en lo que tú quieras.
• Magazine Pro: es la que utilizo para la mayoría de encargos de mis clientes. También muy versátil, se adapta a lo que necesites.
• Parallax Pro: esta me gusta por el efecto de “bandas” o secciones que tiene en la Home, el cual se crea mediante widgets.

Max Camuñas

Las plantillas que más utilizo en mis diseños de WordPress son:

• Divi: esta plantilla de Elegant Themes es mi tema estrella, me encanta. Te permite crear todo tipo de diseños y página de manera muy sencilla gracias a su editor propio, con el que solo tienes que arrastrar y soltar sus módulos. Es la plantilla que uso ahora mismo en mi blog.
• Simple Mag: este tema de Theme Forest es ideal para magazines, periódicos o revistas. Con un diseño muy limpio, permite organizar las entradas de distintas formas. Incluye unos slides muy visuales y un menú con minuaturas desplegables. Es la plantilla que uso en mi revista digital (www.territoriomag.es)

Javier Guembe

Trabajamos con muchísimas plantillas del principal repositorio de pago Themeforest. Lo malo es que son “válidas para todo” así que eso provoca que sean grandes, pesadas, se meten mucho con el Javascript interno del dashboard. Consumen muchos recursos y todavía no hemos encontrado ninguna a la que no tuviéramos que repararle algo. Vamos, que es “un amor-odio” que tenemos hacia ellas.

Por eso y por tratar de dar un punto de vista diferente, me inclino a recomendar plantillas más simples, más ligeras, y a las cuales hay que hacer aporte de diseño para que luzcan bonitas como:

• Underscores. Es la plantilla “esqueleto” de Automattic, la empresa propietaria de WooCommerce, Jetpack, WordPress.com. Vamos, que de WordPress entienden los que más. Es un tema sin ningún diseño, ya que es precisamente para maquetar todo el diseño a medida a partir de una estructura limpia y liviana. Nosotros trabajamos los diseños a medida con esta base, a la cual añadimos Bootstrap, iconos y la funcionalidad que haga falta, en función de los requisitos y diseño del proyecto.
• Fruitful. De las gratuitas, es una plantilla muy muy simple, para webs sin muchos requisitos y apariencia. Es ligera y mejorando su diseño puede quedar muy bien. Nosotros trabajamos prácticamente todo con plantillas a medida, o plantillas de pago, pero en algún proyecto simple que hemos trabajado, ha dado buen resultado.
• ColorMag. Es gratuita y la que tengo puesta en mi blog personal. Como es de tipo Magazine, no luce si no tenemos unas buenas imágenes, de hecho requiere que todas las entradas a mostrar tengan imagen. Es muy configurable. Como muchas del repositorio gratuito, tiene versión con más funciones, pero de pago.

Plantilla ColorMag

David Gutiérrez

No suelo utilizar plantillas, las únicas plantillas que utilizo son plantillas en blanco y luego allí integro el diseño que he diseñado en Photoshop o me ha pasado el cliente. Las plantillas en blanco van muy bien porque ya te dan todo lo básico para empezar a diseñar y no te olvidaras ninguna página ya que vienen todas las páginas creadas. 

Te dejo 3 plantillas en blanco que me gustan mucho:

• Roots
• Underscores
• Handcrafted WP starter theme

Daniel Nabil

La verdad es que no usamos plantillas comerciales casi nunca. Generalmente están sobrecargadas con opciones y cosas que nuestro cliente nunca va a necesitar, además de limitar muchísimo las posibilidades de creatividad y personalización.

Diseñar tus propias plantillas de WordPress te permite ofrecer una solución más ligera, limpia, simple y fácil de ampliar y personalizar.

Unai Calleja

En este caso no soy partidario para nada de utilizar plantillas premium de repositorios de plantillas. En mi opinión estas plantillas estás orientadas a trabajos de bajo coste o incluso para la realización de webs sin conocimientos técnicos.

Luis FM

Ricardo Prieto

Vaya por delante que no soy muy fan de los temas multipropósito con decenas de plugins incluidos y montones de shortcodes. Son muy completos e intuitivos para el usuario pero el código que generan detrás a día de hoy es muy suicio y a nivel de optimización, carga muchos más recursos de los necesarios. Así que esta selección se basa en otros criterios:

• P2. Una plantilla cuyo objetivo es crear un canal de comunicación entre miembros de un equipo, perfecto para comunicación interna de proyectos con trabajadores en remoto. Está desarrollado por Automattic y actualmente el proyecto ha evolucionado con la inclusión del plugin o2. Muy curioso y útil. 
• Hemingway. Tema sencillo, limpio, ligero y con un buen código tras él. Está diseñado por Anders Noren y es el tema perfecto para comenzar un blog sencillo o como base para diseñar algo encima con un tema hijo. Muy recomendable si buscas un tema rápido que haga un buen uso de las funciones del Core. Está disponible tanto para WordPress.com como WordPress.org. 
• Rosalie. Es nuestro último diseño para WordPress, una plantilla orientada a bloggers de moda, fácil de usar, con un diseño limpio y optimizado para los formatos de imagen, galería y video. Viene con varias zonas de widgets para añadir el feed de Instagram, menú social y muchos elementos con diseño personalizado. También para WordPress.com o WordPress.org.

Álvaro Peña

• Salient: Es una plantilla muy limpia y que se deja optimizar bastante bien a pesar de contener elementos muy visuales. Tiene opciones interesantes como la opción de mover todo el CSS que está en el head por defecto a una hoja de estilos externa.
• Bridge: Esta plantilla super versátil para quien empieza en WordPress. Tiene mas de 200 demos para adaptar el diseño de una forma rápida e intuitiva.
• The Retailer: Para una tienda Online esta plantilla funciona muy bien. Es muy versátil y tiene opciones interesantes, por ejemplo,  la posibilidad de personalización de las páginas de categorías de producto.

Plantilla Bridge

Ernesto G Bustamante

• Bridge: Una plantilla multipropósito con infinitas opciones de personalización y más de 200 demos para que puedas construir casi cualquier sitio web que necesites. Ofrece una carga rápida y multitud de estilos y efectos modernos para que tu proyecto luzca de la mejor manera. Una de las mejores plantillas que he trabajado.
• Uncode: Una plantilla excelente que destaca por sus enormes posibilidades de configuración y su estilo vanguardista. Incluye todo lo que puedes necesitar en una plantilla de nivel premium: plugins top, contenido demo de gran calidad y un código bien optimizado para asegurar el correcto rendimiento de tu web. Destaca también su estupendo servicio de soporte para solucionar cualquier duda que tengas.
• Stockholm: Este tema para WordPress destaca sobre todo por su estilo visual. Elegante, limpia, minimalista y de una calidad gráfica exquisita. Ideal para páginas web de agencias, estudios y freelances del mundo del diseño y el marketing que quieran construir un sitio web de nivel premium.

3. ¿Cómo hacer el presupuesto de una web en WordPress?

Arturo García

La elaboración de presupuestos es una de las partes donde más tiempo se nos va a todos los profesionales, así que hay que optimizar y automatizar el proceso todo lo que se pueda. En mi caso lo que hago es tener presupuestos prediseñados para cada servicio que ofrezco y luego, si el cliente pide algo que se sale de lo normal, o no quiere alguna cosa de las que suelo incluir lo puedo modificar rápidamente.

Casi nunca dedico más de 10 minutos a la elaboración de un presupuesto, salvo que sea un proyecto que se salga mucho de mis solicitudes habituales.

Sobre el diseño y la extensión del presupuesto

No recomendaría enviar nunca un precio sin más en el cuerpo de un email. Ese tipo de respuestas pueden transmitir falta de profesionalidad e interés. En su lugar es mejor tener un documento de Word (que luego enviaremos en PDF) con tu identidad corporativa y el texto debidamente formateado. La primera impresión que causarás en el cliente será mucho mejor y ganarás puntos desde el minuto uno.

Omar de la Fuente

A la hora de hacer un presupuesto, yo lo que hago es tratar de valorar cuántas horas estimo que me va a llevar realizar ese trabajo y teniendo fijado un precio por hora, ya solo es multiplicar por el número de hora.

Seguramente lo complicado es definir ese precio por hora de tu trabajo, pues hay muchos factores y costes implicados, pero hay que hacerlo. Al principio puedes fijarte en las tarifas de tu competencia para el mismo trabajo. Y así puedes tener una referencia en caso de que se pueda aplicar la comparativa.

Te aconsejo poner el precio igual o superior a de tu competencia. Tirar los precios es un error, te posiciona como alguien barato y es una etiqueta difícil de quitarse después.

Max Camuñas

Mi principal consejo a la hora de elaborar un presupuesto es incluir todos los detalles del servicio, establecer las particularidades del diseño, formas de pago y plazos de entrega, para que quede todo claro por ambas partes antes de empezar el trabajo y así evitar malentendidos posteriores. Lo mejor es dejarlo todo por escrito en un documento que tengamos los dos e incluya tanto la propuesta de diseño como el presupuesto.

Otro consejo a la hora de preparar un presupuesto es incluir testimonios o referencias de clientes que ya han trabajado contigo y han tenido un resultado satisfactorio.

Javier Guembe

La primera web que hicimos como UniversoSM acabamos haciendo, para el mismo cliente, más de 300 referencias porque no habíamos puesto un tope de páginas creadas en el presupuesto ni un límite de servicios. Claramente perdimos muchísimo más tiempo del presupuestado. 

Cuando haces una web con gestor de contenido puedes ayudar al cliente a picar la información, pero hasta cierto punto. De hecho es recomendable que el cliente coja las riendas de su propia web así que lo ideal es enseñarles a cargar el contenido.

A la hora de realizar un presupuesto hay que ser honesto, decir lo que entra, lo que no, qué vamos a realizar. Piensa que sobre el papel hacer una web en WordPress puede ser muy diferente entre una empresa desarrolladora y otra, así que contar exactamente qué vas a hacer permitirá al cliente decidirse por la mejor opción. No tiene por qué ser necesariamente la más económica, ya que hay un abismo entre unos trabajos y otros, su profundidad de trabajo, y su calidad.

A la hora de realizar un presupuesto hay que ser honesto, decir lo que entra y lo que no. By @Javig
Click To Tweet

Daniel Nabil

Unai Calleja

Luis FM

Ricardo Prieto

Detalla en el presupuesto las tareas o fases que no incluyas. Hacerlo es casi tan importante cómo registrar el trabajo que vas a hacer, así se evitan frustraciones futuras tanto por tu parte como por la de tu cliente.

Asume imprevistos. Piensa que vas a hacer un viaje con tu cliente y en el presupuesto vas a detallar el recorrido: salimos de Sevilla por la mañana y llegaremos a Barcelona por la noche. Perfecto, pero has dejado muchos flecos abiertos. ¿Vamos por autovía o nacional? ¿qué pasa si hay retraso por una caravana? ¿y si el cliente quiere recoger a medio camino un paquete y quiere tomar un desvío? ¿quién paga esa gasolina extra?

Presupuestos WordPress: detalla las tareas o fases que no vayan incluidas
Click To Tweet

Álvaro Peña

Recomiendo aportar mucho valor en la propuesta y detallar cada una de las fases y pasos que se van a realizar. Nombrar todas las funcionalidades que se van a implementar, incluso las mas sencillas, y describirlas para transmitir el beneficio agregado del trabajo que vas a realizar. Así el cliente verá hasta el último detalle del servicio que va a obtener. Esto aportará valor, dará confianza y transmitirá transparencia.

Siempre suelo enviar los presupuestos especificando al máximo los requerimientos para empezar a trabajar. Que quede todo super claro para que no haya malos entendidos. Lo mas importante del presupuesto es que el cliente entienda que se va a hacer, y que no se va a hacer; es fundamental marcar los límites. Dependiendo del caso también se pueden dar varias soluciones y proponer alternativas.

Ernesto G Bustamante

Lo primero, abre tus oídos y escucha a tu cliente con atención. Esfuérzate por entender sus necesidades reales, reúnete cuantas veces sea necesario hasta que exista un briefing realmente claro sobre el que comenzar a construir el proyecto. En función de estas necesidades, piensa bien el tiempo y el conocimiento que va a requerir cada fase del proyecto y fija tus precios acorde a ello.

Oriéntale, a veces los clientes quieren cosas que realmente no necesitan. Sé honesto, trata de ofrecer a tu cliente el mejor producto posible para que optimice al máximo su inversión, y no le ofrezcas cosas que no necesite. Sé proactivo. Piensa en el cliente como si fueras tú mismo y ayúdale a conseguir el mejor resultado posible mediante un correcto planteamiento inicial.

Un cliente que entiende tu trabajo será posiblemente un cliente más satisfecho porque es capaz de valorar mejor lo que le estás haciendo.

Elabora un presupuesto lo más claro posible. No valen documentos orientativos o subjetivos. Plasma absolutamente todo lo que va a requerir el proyecto, incluido un desglose de los recursos necesarios como coste de plantilla, plugins premium, imágenes, etc. Si no eres metódico en esto, después pueden surgir malentendidos. Más vale ser exhaustivo al principio que tratar de dar explicaciones cuando el proyecto ya ha comenzado.

Trata de explicar a tu cliente en qué consisten todas y cada una de las partes de las que se compone el presupuesto.

4. ¿Qué errores se deben evitar al tratar con el cliente?

Arturo García

Muchos profesionales son muy buenos en lo suyo, pero se les atraganta el trato con el cliente, esto suele ser bastante común entre perfiles técnicos que desarrollan muy bien el trabajo de campo, pero que no se desenvuelven con tanta soltura en la parte comercial.

Hay mil errores que deberías evitar cuando tratas con el cliente, de hecho en mi blog tengo dos entradas en las que hablo sobre este tema en concreto, pero para resumir te voy a dejar un listado con los que considero más importantes:

• No cobrar al menos una parte del proyecto por adelantado.
• Tratar de ganarte al cliente ofreciéndole precios de risa. Si lo haces, estarás devaluando tu trabajo y puedes causar rechazo en el cliente.
• Comenzar a trabajar sin un briefing creativo bien definido. Necesitas tener la máxima información para enfocar el proyecto correctamente desde el principio.
• Decirle que sí a todo y no pararle los pies a tiempo. Tú eres el profesional, no él. Está bien que escuches sus ideas y que las tengas en cuenta, pero no puedes ser un títere que hace todo lo que te piden cuando sabes que el resultado no será el adecuado.
• Tomarte las críticas del cliente como algo personal. No siempre vas a acertar a la primera, habrá propuestas que no le gusten a tu cliente, pero esa no es una crítica personal a tu talento ni a tu profesionalidad.

Como diseñador web, es mejor competir siempre por calidad, no por precio. by @Arturogarciaweb
Click To Tweet

Omar de la Fuente

Estas son mis recomendaciones que hacer buenos presupuestos:

• Pon por escrito las características, precio y tiempos del servicio que le vayas a ofrecer, y que lo firme. No cometas el error de decir las cosas importantes sólo de palabra.
• Otro error sería aun habiendo hecho eso, luego no mantenerse firme con lo estipulado previamente. Es decir, permitir que te contacte por otras vías que no son las acordadas, o en horarios fuera de tu disponibilidad, o exigir cosas que no estaban en lo pactado inicialmente… etc.
• También considero importante dejar bien claras las diferencias entre hacer una web con WordPress y hacer una web programada a medida.
• Dependiendo de tu pericia con PHP y CSS, podrás lograr unos resultados u otros, pero es importante que si has fijado un precio para hacer una web más o menos sencilla con WordPress no te compliques con funciones avanzadas. 

Max Camuñas

Los errores más importantes que debes evitar son:

• No incluir todos los detalles del servicio y del diseño en un documento.
• No hagas acuerdos verbales.
• Hacer trabajos “gratis” o regalados para amigos, conocidos o familiares.
• Permitir que el cliente te llame a horas “indecentes” (yo he llegado a recibir llamadas y correos a las 11 de la noche).
• Ampliar el servicio una vez has comenzado el diseño y no incluirlo en la propuesta.
• Permitir que el cliente pida cambios ilimitados (te pueden volver loco).

Javier Guembe

Estos trucos pueden serte muy útiles:

• Si el proyecto va a ser medianamente complejo hay que agilizar la comunicación con Dropbox y similares. Afortunadamente la mayoría de clientes están acostumbrados así que te lo recomiendo para una correcta coordinación de archivos y agilidad en el proyecto.
• Respecto al trato como tal con el cliente, creo que hay mucha diversidad de los mismos por sus inquietudes, experiencia, trato, expectativas. Ten en cuenta que no es recomendado generalizar. Ponte en su lugar para saber ayudarle mejor. Al fin y al cabo estamos para eso.

Si tienes proyectos web, ponte en el lugar del cliente para saber ayudarle mejor. By @Javig
Click To Tweet

David Gutiérrez

Esta es la parte que me resulta más complicada, ya que hay clientes que no saben exactamente lo que quieren y tienes que ir sacándoselo tu, también esta el caso que te lo dicen de una manera y luego ve otra web y te lo hace cambiar, etc. Es complicado, pero voy a intentar dar algunos consejos para cerrar lo máximo posible los presupuestos:

• Limita el número de modificaciones que se permiten en un diseño, ya que sino el cliente alarga mucho el proceso y hay veces que no acaba siendo rentable.
• Estipula exactamente los tiempos de entrega, ya que si tienes otros clientes no puedes solo depender de uno.
• Fracciona los pagos. En mi caso yo hago un 10% antes de empezar el proyecto, un 40% al entregar el diseño en photoshop y el resto al acabar el proyecto. Hay veces según la persona que haces otros métodos, pero este es el que suelo utilizar.
• En cuanto a precio del presupuesto suelo ir por horas y calculo aproximadamente las horas que me va a llevar a finalizar el proyecto. Hay veces que puedo ir más rápido y otras tardar más, si por ejemplo acabo antes de lo que he presupuestado suelo no cobrarle esas horas que estaban presupuestadas, ya que el cliente no se lo espera y se lleva una grata sorpresa y suele recomendarme o llamarme para futuros proyectos.
• Aprende a decir que no te interesa ese proyecto.
• Dile que te de un listado de páginas webs que le gustan para poder hacerte una idea más precisa de sus gustos.
• Marca los tiempos de entrega y cúmplelos.

#WordPress: marca los tiempos de entrega y cúmplelos, no dependas de un sólo cliente. By…
Click To Tweet

Daniel Nabil

Para mí, el momento clave de un proyecto es antes de empezar a trabajar, antes incluso de enviar un presupuesto. Es muy importante aprender a reconocer los proyectos interesantes de los que no lo son, los que nos ayudarán a crecer y para los que podemos ofrecer nuestra experiencia, de los que nos sumergirán en una espiral infinita de problemas. Conviene tratar de conocer al cliente y su proyecto previamente, para ver si interesa trabajar con él o no. No suele ser buena idea aceptar todos los proyectos que nos proponen.

Por otro lado, suele ser un error típico decir que sí a todo lo que nos piden. Queremos que nuestro cliente esté contento y tenga lo que cree que necesita, pero normalmente nosotros sabemos mejor que él lo que le conviene, porque tenemos más experiencia. Yo entiendo que me pagan no sólo por hacer el trabajo sino por ayudar a decidir, por educar, por reconocer las malas y las buenas ideas. Por eso muchas veces es necesario decir que no, explicando el por qué u ofreciendo alternativas.

Unai Calleja

Luis FM

• Evita no formalizar una reunión para planificar debidamente el proyecto y presta especial atención al solicitarle datos como el tipo de web, el contenido, número de páginas creadas, funciones y objetivos de la web, si va a tener o no blog. Colores, diseños y todo lo que consideres importante.
• Revisa también el plazo de entrega y el modo de pago para satisfacer su idea, y con todo esto, y todo lo que se te ocurra, define bien con el cliente el encargo antes de empezar a trabajar en él.
• No estar contacto con el cliente para ir mostrándole los resultados o consultarle posibles dudas que te puedan surgir. Procura, sin ser cargante, involucrarle para tener una buena comunicación. Te sentirás más seguro con el trabajo que haces y él más satisfecho viendo que tomas en serio el proyecto que te ha encargado.

Ricardo Prieto

Álvaro Peña

• No valorar correctamente el trabajo. El tiempo es lo mas valorado, pero también los conocimientos. Un trabajo se debe valorar correctamente y no tirar los precios. De lo contrario estaremos devaluando la profesión.
• No tener todo por escrito. Si un cliente hace una llamada pidiendo cambios o proponiendo adaptaciones contrarias al Briefing inicial, es recomendable decirle que te lo ponga por escrito para que quede constancia. Luego las cosas se olvidan o se cambia de opinión, y si se ha dicho de voz no hay forma de aclararlo.
• No dejar claros los detalles y el plan de acción. Hay que marcar los tiempos, contenidos necesarios, etc. Y no mover un dedo hasta que se tiene todo. Alguna vez he ido avanzando en un proyecto antes de tiempo y se han echado atrás en el último momento.
• No cobrar parte del trabajo por adelantado. La forma y rapidez en el pago de un cliente también nos da información de como va a ir el transcurso del proyecto.

Ernesto G Bustamante

• No escuchar, no ponerte en la piel del cliente, no ser proactivo y dejar que lleve la voz cantante en todo. No sólo eres diseñador. En la fase inicial eres también un asesor. No seas un sujeto pasivo que simplemente ejecuta órdenes del cliente sin preocuparse de nada más. El éxito de un proyecto depende en gran medida de esta primera fase inicial en la que se detectan y se plantean las necesidades.
• No ser asertivo. Eres el diseñador, no lo olvides. Esto significa que tú eres el profesional, tú eres el encargado de hacer que el proyecto llegue a buen puerto. Por supuesto, escucha siempre a tu cliente y valora sus opiniones, pero usa toda tu pedagogía para hacerle entender que quizá lo que plantea no es tan beneficioso como creía. No caigas en la alienación de pensar que el cliente es el que paga y por ello tú eres simplemente el que ejecuta. Si el resultado final del proyecto no es bueno, el responsable eres tú. Más vale ponerse un poco serio al principio que un malentendido al final.
• No fijar un timing. Todo proyecto debe estar correctamente planificado y el cliente debe entender la importancia de estas fechas. Una fecha de inicio y una fecha final son absolutamente imprescindibles para acotar el proyecto en el tiempo y evitar la frustración que supone no acabar de terminar nunca un trabajo.

• No fijar las necesidades básicas del proyecto antes de comenzar y no ser lo suficientemente claro en esto. Si faltan cosas por definir, si faltan textos, imágenes, recursos o cualquier elemento necesario, no comiences a diseñar, por mucha prisa que tenga el cliente o tú mismo. Arranca cuando tengas todo a tu disposición y así optimizarás tu tiempo. Si comienzas a diseñar sin lo necesario, el proyecto se puede alargar bastante.
• No cobrar una parte antes de comenzar. Es lo justo. Si comienzas a trabajar debes percibir una parte al inicio para sentir seguridad y evitar posibles malentendidos en el futuro. Fija tus asignaciones como prefieras: 50/50, 60/40, 40/60, etc. Y, por supuesto, sé totalmente firme en esto. Al igual que tú vas a poner todo tu talento y seriedad en el proyecto, el cliente debe ir abonando los costes según lo estipulado. Si esto no se cumple, levanta el dedo del ratón y reúnete con tu cliente hasta aclarar lo que sea necesario.
• No aclarar a tu cliente que estás cobrando por un producto concreto que requiere una acción concreta por tu parte dentro de un plazo determinado. Si no eres lo suficientemente claro en esto, hay clientes que pueden entender que dentro de lo pactado caben también infinidad de llamadas y horas extra en el futuro. Si ves que un proyecto va a requerir mantenimiento futuro, fija un precio en base a horas y dificultad y preséntalo al cliente al principio en el presupuesto.
• No ser capaz de poner punto y final. Esto es un clásico. Lo más difícil cuando se hace un trabajo creativo es cerrar el proyecto, ya que en un proceso de estas características existe un factor de subjetividad y hay mil cosas nuevas que pueden surgir, nuevas ideas, cambios de rumbo, etc. Tú estás cobrando por un trabajo pactado al principio. Por supuesto que hay un margen de flexibilidad para ir modelando el proyecto hacia su mejor fin, pero ojo con las modificaciones excesivas y con alargar demasiado el fin del trabajo.

5. Conclusiones finales sobre el diseño web en WordPress

Arturo García

WordPress es un ecosistema que está en continua evolución, hay miles de plantillas y plugins, salen nuevas funcionalidades cada día y tienes que estar al tanto de lo último. Te recomiendo que leas mucho, sigue blogs que hablen sobre WordPress y mantente actualizado. Las páginas que hacíamos con WordPress hace cuatro años no tienen nada que ver con las que hacemos ahora, así que tienes que estar al tanto de las novedades o te quedarás desfasado mucho más rápido de lo que piensas.

También te recomendaría que te ciñeras a lo que mejor sepas hacer. Con WordPress puedes hacer páginas corporativas, blogs, tiendas virtuales, directorios, etc. y cada tipo de web tiene sus particularidades, dificultades y necesita de diferentes tipos de herramientas. Es complicado que sepas hacer de todo, quieras o no tu perfil tendrá más de diseñador, de programador o de especialista en marketing, así que abraza tus fortalezas y desarrolla el tipo de página con la que te encuentres más cómodo.

¿Mi cliente ideal? en mi caso me encuentro especialmente cómodo con los pequeños emprendedores que tienen una actitud proactiva, que quieren que su web sea el epicentro de su estrategia y que están dispuestos a trabajar el blog, la captación de suscriptores, etc. Sin embargo lo paso mal con desarrollos técnicamente complejos o que requieren de unos conocimientos avanzados de php, por ejemplo.

Lo mejor es especializarse y ser el mejor en lo tuyo. Mi perfil tira más al marketing online y por eso las páginas que buscan potenciar esta faceta son mis favoritas. No tiene demasiado sentido ponerme a hacer otro tipo de webs que no domino, cuando hay cientos de desarrolladores que lo pueden hacer mejor que yo. Aunque tendemos a querer hacer de todo para no cerrarnos puertas, sobre todo al principio, mi consejo es que te especialices e intentes ser el mejor en lo tuyo. Dominarás lo que haces, trabajarás más cómodo y tu cliente siempre obtendrá un resultado óptimo.

Omar de la Fuente

Mi consejo para trabajar y diseñar con WordPress para otras personas sería que te hagas con una forma fija de trabajar. Es decir, que tengas una instalación “base” de un WordPress ya preparado con tu plugins de confianza instalados y una maquetación con contenidos de borrador ya insertados.

A partir de ahí, teniendo instalados varios themes en cartera, puedes clonar dicho WordPress al hosting de destino del cliente, seleccionar la plantilla que sea y comenzar a trabajar ya con buena parte del trabajo avanzada.

Luego otro consejo o truco, sería que vayas viendo cómo optimizar tus respuestas en el proceso de captación del cliente. Es decir, márcate un “paso a paso” en el proceso de tu servicio, en plan: “1) Información ampliada a la página de venta, 2) Datos para realizar el pago, 3) Listado de cosas que necesito del cliente, 4) Próximos pasos, 5) Finalización del servicio…”

Esa estructura o una similar la puedes convertir en emails ya preparados para enviar a cada cliente. Solo tienes que personalizar luego un añadido del texto o lo que quieras, pero irás mejorando esas plantillas de email y te aseguro que te supondrás un ahorro de tiempo brutal.

Por último, el mejor consejo que te puedo dar: huye de los clientes tóxicos. Una persona que no te dice “Hola, Gracias o Un saludo” en su email de solicitud, sencillamente te está poniendo sobre aviso de cómo es. 

Siempre te saldrá mucho más rentable devolver el dinero a un cliente tóxico que mantenerlo y terminar su trabajo. Por mucho motivos, créeme.

Si aun así comienzas a trabajar con alguien y te regatea tus precios, no valora tu trabajo, te pide siempre más y más, no respeta tus horarios de disponibilidad y todo son falsas urgencias… de verdad, déjalo. 

Max Camuñas

• Ten una copia de seguridad de tu web o blog.
• Ten siempre las plantillas y plugins actualizados.
• No trabajes con plantillas o plugins “piratas”.

Ten siempre las plantillas y plugins actualizados en tu #WordPress. By @maxcf
Click To Tweet

Javier Guembe

No sé si hay algo definitivo así que voy a poner una suma de ideas:

Con las últimas actualizaciones de WordPress, hay mucho uso de Javascript en general, así que ya no es tan viable modificar las plantillas, sino que si un theme tiene mucha personalización del dashboard, hay que usar sí o sí un Child Theme para las modificaciones. Además es lo más conveniente por seguridad y mantenimiento futuro, lo mismo que hay mucha personalización los autores de themes usan frameworks o incluso plugins o librerías incrustadas. Esto puede provocar problemas posteriormente.

Un tema que me parece fundamental es que creo que hay poca conciencia en general con la seguridad de WordPress. A nosotros nos ha tocado en muchas ocasiones continuar proyectos y vemos problemas de seguridad básicos, como por ejemplo uno muy simple de arreglar ya en cuanto instalas WordPress y que es que no se haya renombrado el prefijo de tablas de WordPress, que existan usuarios “admin” o que no haya un sistema que proteja de los múltiples intentos de intrusión que sufren los diferentes sitios web por culpa de las botnets.

En tema de seguridad, quizá suene paradójico pero es más importante tener un respaldo que tener la web bien protegida, me refiero a la secuencia de aplicación de seguridad porque ambas cosas son necesarias. Y por supuesto una copia fuera del servidor propio de la web es importante. Las copias de seguridad sólo son importantes cuando algo se rompe y no la tenemos, la buscamos y… ¡pánico! Una vez se pone el sistema de copias en marcha, hay que preocuparse por bloquear los múltiples intentos de intrusión de las botnets.

Es más importante contar con un respaldo de la web que tenerla bien protegida, además, tener una copia de seguridad fuera del servidor es muy importante.

Finalmente advertir que un hosting y otro hosting no son lo mismo, cuando el cliente te da el acceso al hosting y ves quién es, hay casos en los que sabes que vas a tener que invertir mucho tiempo en arreglar problemas-base (y que por supuesto no esperabas ni habías presupuestado).

David Gutiérrez

Como consejo para empezar a trabajar con WordPress es tener unos conocimientos en php y html. Lo bueno de este CMS es que es el más popular del mundo y hay muchas comunidades y cualquier problema sueles encontrarlo sin ningún problema.

Unai Calleja

Luis FM

Ricardo Prieto

Álvaro Peña

El primer consejo y de los mas importantes, en mi opinión, es estar siempre actualizado y empaparse de todas las novedades. No parar de investigar y aprender. Me refiero a que se trata de no perder el tiempo haciendo ajustes de forma manual cuando quizá un plugin lo hace perfectamente, por ejemplo. Siempre hay actualizaciones que pueden hacernos la vida mas fácil.

Para trabajar de forma fluida en WordPress con clientes, recomiendo tener un entorno de pruebas donde trastear y probar nuevas funcionalidades. Tener una instalación en un directorio dentro de tu servidor te puede ayudar sin miedo a romper cosas.

Si usas plantillas de las llamadas “Multi Purpose”, elige aquéllas que sean prácticas teniendo en cuenta el contenido de tu cliente. Una plantilla puede ser muy bonita como te la presentan, pero si tu cliente no tiene un material gráfico bueno ni un contenido similar no quedará igual de bien. Hay que ser realistas y fijarse en la practicidad a la hora de elegirlas, como la disposición del contenido, velocidad de carga, etc.

Por último, recomiendo optimizar el contenido desde el inicio del proyecto. Es decir, subir imágenes en las proporciones correctas, reducirlas en peso y tener en cuenta siempre el SEO on page a la hora de escribir títulos y textos. Además, plasma los textos, imágenes y llamadas a la acción poniéndose en la piel del usuario para que le quede todo muy claro y facilitar la conversión. Incluso educar al cliente proponiendo una diferente disposición de las secciones con el fin de mejorar la experiencia de usuario.

Ernesto G Bustamante

Ganarte la vida con una profesión tan estimulante como la de diseñador web es un privilegio que requiere, en mi opinión, tres compromisos imprescindibles: pasión, actualización constante y empatía.

Pasión para trabajar cada día siendo consciente de que tienes mucha suerte (tú te lo has ganado) de dedicarte a crear la imagen de las empresas en internet. Casi nada. Estás en el momento y en el lugar justo para ser feliz con tu trabajo. No dejes que la desidia tome un día las riendas de tu profesión. No dejes que una mala experiencia (todos las hemos tenido y las volveremos a tener) te quite las ganas de seguir.

Actualización constante para ofrecer siempre lo mejor. Si te quedas atrás, si dejas de leer blogs, de asistir a eventos y de formarte cada día en un mundo tan cambiante, te estancarás y tus trabajos dejarán de ser tan buenos. Estamos en este mundillo porque de algún modo nos renueva empezar cada nuevo proyecto y nos estimula que todo evolucione tan rápido. Mantente siempre en comunicación con tus colegas de profesión, colabora con ellos, aprende de todo lo que te rodea. Todo esto se verá reflejada en el resultado de tu trabajo.

Empatía para ponerte siempre en la piel de tu cliente y, durante el tiempo que dure el proyecto, implicarte hasta la médula para conseguir realmente un buen resultado. Los clientes satisfechos te pagan doble: dinero y agradecimiento. Y el agradecimiento se traduce en recomendaciones. Si eres bueno, no vas a tener que gastar en publicidad ni vas a tener que decirle a los demás lo bueno que eres. Deja que tus trabajos hablen por ti.

¿Qué te han parecido todos estos consejos sobre WordPress?

¿Te gustaría contarnos los tuyos? ¿Quieres preguntar alguna duda o matizar algún aspecto del post? Déjanos un comentario

Otros contenidos sobre WordPress:

22 pasos para proteger WordPress: Seguridad anti-hackers

Análisis de 40 plugins SEO de WordPress

Guía de Woocommerce 2016: tienda online con WordPress

24 Pasos para mejorar la velocidad de carga de tu WordPress

Análisis y resultados de los mejores plugins de caché para WordPress

La entrada 54 Trucos y consejos de 11 diseñadores y expertos en WordPress aparece primero en Aula CM.

En este post te voy a dar un montón de consejos útiles y herramientas prácticas para que consigas hacer landing pages que te sirvan para lograr tus objetivos en internet.

Todos los sitios webs exitosos contienen landing pages eficaces que marcan la diferencia. Pero antes de empezar con los consejos y herramientas, voy a explicarte brevemente qué es y para qué sirve una landing page.

¿Qué es una Landing Page?

Una Landing Page es cualquier página de un sitio web destinada a generar conversiones, es decir, a convertir visitas en clientes que realizan compras, conseguir suscriptores o cualquier otro objetivo que hayas definido previamente.

Una Landing Page perfecta es aquélla que consigue ratios elevados de conversión gracias a su diseño eficaz, estructura orientada a facilitar las acciones del usuario, contenido atractivo, valor, etc.

Además, crear varias Landing Pages diferentes permite realizar análisis a fondo y afinar tu estrategia. Por ejemplo, comparando unas con otras (Tests A/B) para ver cuáles han funcionado mejor y sacar conclusiones de cara al futuro.

Consejos para hacer una Landing Page perfecta

1. Ofrece un buen producto, regalo o servicio

Cuando hagas una landing page para generar conversiones no olvides centrarte en ofrecer valor real, esto es muy importante. Si tu producto es bueno, generar conversiones será más fácil.

No se trata de exagerar las cualidades de lo que ofreces sin más, sino de ofrecer algo que sea realmente bueno y valioso para los usuarios. Por tanto, en lugar de centrarte en amplificar las bondades de tu producto, dedícate a mejorarlo.

2. Impacta

Piensa en la enorme cantidad de ofertas y contenidos que existen actualmente en internet.

Si quieres conseguir que la audiencia quede sorprendida por tu propuesta y realice conversiones en tu sitio, debes buscar el impacto: calidad gráfica, valor brutal de lo que ofreces, visible y bien contado, textos diferenciadores y creativos, efectos originales pero sin pasarte (usabilidad ante todo), etc.

A veces, no es necesario hacer cosas espectaculares para impactar. Puedes dejar huella en el usuario mediante elementos sutiles, juegos de palabras, composiciones gráficas geniales, etc. Incluso un poco de minimalismo puede ayudarte a que lo que quieres contar destaque mucho más.

3. Importancia del título

El título superior es clave. Un título potente, creativo, directo, en cuerpo de letra grande aunque no tiene por qué ser gigante, puede suponer gran parte del éxito de tu estrategia. El título es casi siempre lo primero que lee el usuario, por tanto sedúcele desde el principio.

Un buen título llama la atención e incita a seguir leyendo el resto del texto. Para conseguir títulos diferenciadores trata de empatizar con el lector, habla su idioma, expresa en pocas palabras y de forma contundente el valor que ofreces.

A lo largo de la landing page puedes usar otros subtítulos de menor tamaño y relevancia para ir desglosando la información en forma de pirámide invertida. Así el usuario podrá escanear con la vista rápidamente todo el contenido, y después de hacer scroll sabrá perfectamente lo que ofreces.

Por cierto, si pones el título principal en encabezado Título 1 (h1), puedes potenciar la relevancia SEO de tus keywords para tratar de posicionar tus landing pages en Google. En cuanto a los subtítulos a lo largo de la página, ponlos en Título 2 (h2).

4. Valor evidente. Promesa atractiva

Intenta que el usuario entienda claramente el beneficio que obtiene al realizar la conversión. Esto pasa por un texto honesto y explícito donde se explique exactamente lo que va a suceder cuando el usuario realice la conversión.

Por ejemplo, si quieres que alguien te deje su correo electrónico y se convierta en suscriptor, explícale con la mayor claridad posible qué harás después con su cuenta de correo: qué le vas a enviar y qué no, con qué periodicidad, etc.

Piensa en ti mismo: ¿Sueles dejar tu correo en una web sin saber si luego te van a spamear tu bandeja de entrada? ¿Te apuntas a promociones cuyas condiciones desconoces? ¿Compras productos o servicios sin saber con exactitud lo que compras?

Si es necesario, al vender servicios coloca siempre tablas comparativas de precios. Desde ahí, puedes enlazar a otras páginas donde se amplíe la info. Esto ayuda al usuario a elegir y beneficia la conversión.

5. Mostrar con claridad la imagen de marca

Cuando un usuario entre en la landing page debe poner entender rápidamente y sin dificultad de qué empresa, marca o profesional se trata.

Para ello, coloca siempre el logo en un lugar visible y en un tamaño que lo haga identificable fácilmente. También enlaces a las redes sociales y en definitiva cualquier información relevante sobre la marca.

6. Mostrar la credibilidad de la marca o persona

Es de lógica pensar que la conversión siempre será más fácil de lograr si detrás del sitio web hay una persona o marca reconocibles, con prestigio o relevancia dentro del sector, creíble, con trayectoria acreditada y accesible.

Obviamente, para ello es imprescindible que dicha relevancia quede acreditada de manera explícita en las landing pages: opiniones de terceras personas, contenido incrustado desde redes sociales y botones con enlaces a los perfiles de marca, reseñas en medios, documentos que acrediten lo que se afirma, etc.

Por ejemplo: si estás ofreciendo un ebook sobre posicionamiento SEO y sostienes que tu estrategia te ha servido para crecer exponencialmente en Google, coloca capturas de Analytics para acreditarlo.

La credibilidad en internet puede perderse en pocas horas si tienes una crisis de reputación. Si eres siempre consecuente y actúas con honestidad, serán los demás los que hablen bien de tu servicio sin necesidad de pedirles opinión.

7. Diseño claro y atractivo

Ofrecer mucho valor no es sinónimo de hacer rebosar la landing page de contenido mal organizado. En ocasiones, tratar de mostrar demasiado genera el efecto contrario: el que lo recibe no es capaz de jerarquizar la importancia de lo que ofreces y acaba por difuminarse el valor real.

Además, un síntoma claro de mal diseño es agolpar elementos sin ton ni son, sin espacios entre sí, sin lógica de composición. Y esto afecta a la percepción que tiene el usuario sobre lo que le ofreces. Si diseñas feo, pones toda la responsabilidad al valor intrínseco del producto. El buen diseño acompaña y potencia al producto.

Si tienes muchos elementos de valor, ofrécelos en diferentes landing pages. Una para cada producto. Con un diseño claro, minimalista, que realce la calidad del elemento en sí, y pocos botones pero bien colocados, atractivos y de un tamaño lo suficientemente grandes como para que no pasen desapercibidos.

Si quieres que algo destaque, rodéalo de espacio vacío, también llamado aire. Sé generoso con los espacios: los buenos diseñadores no se cortan en espaciar los elementos si ello beneficia al entendimiento y la estética de la composición.

8. Imágenes y vídeo

Coloca una imagen principal brutal o un vídeo realmente bueno. Esto suena un poco subjetivo, pero seguro que me entiendes perfectamente. La mejor foto, la que mejor explica las cualidades del producto o servicio, la que combina mejor con el concepto presentado en el título. O un vídeo que marque la diferencia.

Incluye todas las imágenes que sean necesarias para que el usuario pueda percibir ampliamente el valor real del producto o servicio. Esto puede ser realmente decisivo. Una imagen, huelga decirlo, entra por los ojos a la primera. Pero, ojo, no se trata de añadir imágenes por añadirlas, sino sólo las necesarias.

Si es un producto físico, coloca fotos atractivas y claras, en diferentes ángulos y que muestren las fortalezas del producto. No pongas muchas fotos iguales, una para cada ángulo o detalle. O qué mejor que un vídeo donde se muestre el producto o servicio en su contexto.

9. Buen copywriting, al grano

Parece obvio, pero no creas que todo el mundo sigue esto a rajatabla.

A veces se subestima la importancia de un buen texto a la hora de transmitir conceptos y se nos olvida que el diseño no es únicamente colocar cajas e imágenes. El texto puede reforzar a la imagen y viceversa. Ambos se retroalimentan.

Trata de hacer textos geniales y creativos. Esto no quiere decir que escribas todo el tiempo de manera metafórica o poética. Se trata de que el texto impacte en la mente del lector. A veces, una promesa clara y prosaica empatiza más porque transmite mejor el valor real y tangible.

Evita llenar tu texto de paja. Ve al grano, estructura el mensaje, habla con frases claras, comunica de manera contundente. Cada frase debe calar lo más dentro posible en la mente del lector. Si escribes dando rodeos o usas demasiadas subordinadas, quizá el lector hace rato que desconectó.

10. Usabilidad, sencillez y diseño responsive

Diseño y usabilidad no tienen por qué estar reñidos. Se puede lograr un diseño impactante y espectacular sin necesidad de comprometer la funcionalidad. Evita efectos y dinámicas de funcionamiento que no sean fácilmente entendibles por cualquier usuario.

No hay nada como un botón grande y cómodamente clickable para que el usuario realice una acción. No se lo pongas difícil. Si hace años que la gente usa un botón para enviar un formulario o para accionar una compra, ¿por qué reinventar la rueda?

Además, no olvides la navegación móvil. Cualquier cosa que pongas en tu landing page debería funcionar exactamente igual de bien en todos los dispositivos. Cada vez más gente navega y realiza acciones de compra y conversión desde estos dispositivos.

Hace ya tiempo que deberías tener todos tus contenidos en internet bajo diseño responsive. Ya no sólo porque Google pueda considerarte un poco desfasado y esto te afecte en posicionamiento, sino por facilitar la navegación al usuario.

Importantísimo: Ojo al tamaño de los textos y botones cuando se adaptan a móviles. A veces quedan demasiado pequeños y esto dificulta la legibilidad y que te hagan clicks.

Por supuesto, evita pop ups y animaciones que no encajen bien en el móvil del usuario. Cuidado con elementos fijos (propiedad fixed de HTML) que se quedan pegados en la pantalla y no siguen el scroll. A veces pueden tapar contenido esencial.

Otro efecto bastante molesto en las webs: las transiciones de scroll que aceleran demasiado o no permiten posarte justo en el punto que deseas de la página. Por favor, evita este tipo de cosas.

Y no te olvides de algo fundamental: hay muchas conversiones generadas a través de formularios para captar leads. Bien, haz formularios súper-ultra-mega sencillos y cómodos para el usuario. Piensa en tu propia experiencia cuando rellenas formularios, algo que suele ser un poco tedioso.

Coloca campos de tamaño suficiente, que se pueda saltar de uno a otro con el tabulador, que no se vea cortado el texto mientras se escribe y que no haya problemas a la hora de la validación y envío. ¿Hay algo más frustrante que rellenar una y otra vez el mismo formulario porque salta algún error y que ni siquiera sepas cuál es porque no está claramente explicado?

11. Evitar ser invasivo

¿Es necesario interrumpir a cada momento la navegación del usuario para volver a ofrecerle nuestro ebook o sugerirle que se suscriba a nuestro blog? ¿Es necesario hacerlo nada más entrar a la landing cuando todavía el usuario no ha valorado si tu contenido merece la pena?

Mejor sugerir que interrumpir. No te precipites. Si en la primera cita tratas de forzar que surja el amor, probablemente tu acompañante note tu nerviosismo y finja ir al baño para no volver jamás. Deja que surja la chispa creando una primera impresión buena con el diseño, imagen y título, y que sea el usuario el que vaya hacia ti por voluntad propia.

Cuidado con los textos, también pueden ser un poco invasivos. ¿Debo poner palabras como compra o suscríbete antes de que el usuario haya valorado si merece la pena o no?

Mucho mejor crear una progresión desde arriba hacia abajo: primero mostramos lo mejor que tenemos y explicamos por qué merece la pena, después invitamos a que nos lo compren.

12. Optimización de velocidad

Este punto se puede aplicar a cualquier URL de tu web que consideres importante para tu estrategia. Las landings que cargan rápido no solamente favorecen que el usuario pueda ver el contenido sin interrupciones, sino que son más competitivas para el posicionamiento SEO.

A Google no le gustan las URLs lentas con multitud de peticiones externas que lastran su rendimiento, efectos demasiado pesados o imágenes sin optimizar. Trata de mejorar el Page Speed Score de tus landing pages evitando este tipo de elementos y analizando periódicamente si siguen siendo rápidas.

Para favorecer la velocidad, diseña sencillo y elimina cosas innecesarias. Ve al grano, no pongas imágenes o cualquier elemento que realmente no aporte demasiado y pueda lastrar el rendimiento del sitio.

13. Optimización SEO

Este punto es obvio, pero en ocasiones no se hace del todo bien. Como ya sabes, hacer SEO no consiste únicamente en repetir una y otra vez una misma keyword a lo largo de la página.

Primero, lleva a cabo una keyword research (búsqueda de palabras clave) para detectar cuáles son las palabras que pueden traerte potencialmente más tráfico, o qué nichos quedan por trabajar a fondo para encontrar una oportunidad de posicionamiento.

Segundo, coloca a cada landing page un título que incluya una de las keywords y trabájala a lo largo de la página. Es decir, introduce esa keyword en lugares relevantes:

• Inicio del contenido
• Encabezados h
• Atributos title y alt de imágenes
• Alguna negrita
• Anchor texts

Tercero, analiza la velocidad de la landing page y evita imágenes pesadas y todo tipo de efectos que lastren demasiado.

Cuarto, trata de conseguir enlaces de calidad desde sitios que tengan relevancia y una temática relacionada con tu propuesta. De este modo, no sólo ganas autoridad para las landing, sino también tráfico que potencialmente pueda generarte conversiones.

Quinto, aprovecha la fuerza de las redes sociales para viralizar contenidos y conseguir amplia visibilidad. Para ello, trabaja tu comunidad en redes, interactúa con ellos, ofrécele contenido realmente bueno y mantente activo.

14. URLs

Pon a tus landing pages URLs amigables, es decir, escritas con palabras entendibles: 4 ó 5 palabras clave propias de esa landing separadas por guiones medios.

Esto ayuda a que los usuarios puedan escribir directamente la URL de tu landing en su navegador si la ven escrita en algún sitio donde no puedan copiar y pegar.

Además, beneficia al SEO. Tener en el slug de cada URL las palabras clave de esa landing ayuda a posicionarla para esas palabras clave. Por supuesto, no es lo único y no es súper decisivo, pero ayuda.

Ah, y no olvides la arquitectura web. Trata de que tus landings estén directamente separadas del dominio principal por una barra / en lugar de colocarlas en rutas de navegación muy largas llenas de subdirectorios. Esto favorece la transmisión interna de autoridad, en otras palabras, el SEO.

15. Botones y formularios grandes e identificables

Te lo he comentado ya, ¿verdad? Pero merece la pena detenerse un poco más en ello.

Parece demasiado obvio, pero piensa que los usuarios de internet son de muchos tipos y niveles. Si tus botones parecen botones al 100%, los usuarios los clickarán casi de manera instintiva. Si no, algunos quizá se pierdan un poco y no sepan dónde han de clickar.

¿Y el tamaño? ¿Hace falta poner botones exageradamente gigantescos y de colores súper saturados? Bueno, tampoco hay que pasarse, pero en general los botones que son grandes y destacan frente al resto de elementos de la página te están diciendo: “Ey, estoy aquí, hazme click”.

Por ello, trata de reservarte un color especial para los botones de conversión que no uses en el resto de la página. Por ejemplo, si usas blanco y gris para los fondos de franjas y cajas, reserva para los botones un naranja chillón.

Lo mismo para los formularios. ¿Quieres a toda costa que el usuario te deje sus datos? Pues pónselo fácil. Que haya los mínimos campos posibles (sólo los que necesitas estrictamente para tu estrategia), que los campos parezcan campos, que sean lo suficientemente grandes en tamaño y tipografía y que se destaquen del resto de elementos (usa otro color, quizá con un poco de opacidad).

16. Quita menús y elementos de distracción

Una característica clásica de las landing pages ha sido siempre la ausencia de menú superior y otro tipo de menús de navegación. El motivo: evitar todo tipo de distracciones para que el usuario se centre al 100% en navegar por la página sin ir a ninguna otra parte.

Ahora bien, a pesar de que es bastante lógico, no siempre hay que seguirlo a rajatabla. Hay algo bueno en colocar menús (o botones) que lleven a otras URLs de la web: más tráfico interno a páginas de la web y reducción de la tasa de rebote, lo cual beneficia al SEO.

Además, es posible que el usuario quiera saber aún más de ti o de tu marca antes de generar una conversión en tu sitio. Para ello, una solución puede ser colocar un menú hamburguesa: un menú que se despliega mediante un icono de tres barras horizontales que no distrae para nada pero está ahí para quien lo quiera utilizar.

17. Llamadas a la acción

También llamados CTA. Son uno de los puntos clave para el éxito o no de una landing page.

Una llamada a la acción es cualquier elemento (textos, formularios, botones) que sirva para que el usuario lleve a cabo la conversión. Las llamadas a la acción se distinguen del contenido normal de la página: incitan a realizar una acción determinada y normalmente van acompañadas de un botón para accionarlas.

Para que una llamada a la acción surta efecto debe tener un diseño destacado, textos muy seductores que atraigan al lector y estar colocada en un lugar muy visible de la página.

Además, debería aparecer cuando el usuario ya ha visto parte de tu contenido y está más convencido de realizar la conversión, aunque en el caso de productos o servicios muy valiosos o webs de marcas o usuarios conocidos pueden aparecer arriba del todo.

En cuanto al diseño: destácalas bastante en tamaño y color, pon todo tu talento creativo a funcionar para que sean irresistibles y coloca los textos de arriba a abajo para crear un embudo que acabe decantando la mirada del usuario en el botón de acción.

En cuanto a los textos: frases claras, contundentes y llenas de valor. ¿Es necesario hablar en imperativo? ¿Qué tal si en lugar de ordenar cosas, dejamos que el usuario lo haga en primera persona motivado por el valor que se le ofrece? Por ejemplo, en lugar de “¡Suscríbete!”, podemos usar un “¡Sí, quiero todo este contenido en mi correo!”.

La llamada a la acción es el objetivo final de todo lo que hemos desarrollado en la landing. Por ello, deberías reflexionar mucho acerca del modo en que comunicas y resumes el valor de tu propuesta. Te lo juegas todo en el CTA, así que dedícale todo el tiempo que merece.

18. Utilizar una Success Page

Una success page o página de éxito te sirve para dos cosas:

• Llevar al usuario a otra página en la que ofrezcas más valor de manera contextualizada para que te siga generando más visitas o conversiones. Por ejemplo: una recopilación de contenidos relacionados, más recursos, etc.
• Medir ratios de conversión, es decir, analizar con Analytics cuántas personas realizan la conversión respecto al total de usuarios que entran a la landing page. Si estableces la success page como página de destino de la conversión, puedes medirlo fácilmente con Google Analytics (también con eventos javascript de botón).

19. Testear

Las landing pages, al ser URLs únicas que puedes crear por separado sin enlazarlas desde ninguna parte de tu web, se prestan a todo tipo de analíticas comparativas, ya que puedes diseñar todas las que quieras y lanzarlas para testear sin parar.

Por ejemplo, puedes comparar el funcionamiento en tráfico, tiempo de permanencia y conversiones de landing pages diferentes en un momento inicial para sacar conclusiones previas de cara a establecer la estrategia final o incluso a lo largo de la campaña para ir corrigiendo y mejorando cosas.

Esto te va a dar muchas pistas acerca de qué diseño te funciona mejor de cara a la conversión: qué textos, colores, botones, estilos gráficos y llamadas a la acción son los preferidos por los usuarios.

Puedes monitorizarlas por separado con herramientas como Hotjar para analizar dónde se detienen y dónde tienden a clickar más los usuarios, cuáles consiguen más lectura scroll hacia abajo, etc.

5 Herramientas para crear Landing Pages fácilmente y con un resultado espectacular

LanderApp

Se trata de una plataforma online que te permite diseñar y alojar tus landing pages de manera sencilla con la utilización de plantillas prediseñadas muy elegantes y limpias. Además, puedes traer dominios propios para usarlos con tus diseños. En el pack básico incluyen servicios muy interesantes tales como integración con Facebook, tests A/B, integración con Email Marketing, etc, así como dominios personalizados.

Leadpages

Como la anterior, es una aplicación online de tipo drag and drop que te permite diseñar muy fácilmente tus landing pages, implementar tests comparativos A/B y realizar todo tipo de integraciones. Además, está especialmente recomendada para crear landing pages orientadas a dispositivos móviles. Destaca sobre todo en su facilidad y potencial a la hora de diseñar landings bonitas y eficaces.

Instapage

Otra aplicación online muy interesante para la creación de tus landing pages, enfocada principalmente a empresas. Ofrece grandes posibilidades de control, comparativas A/B y monitorización mediante mapas de calor. Lo mejor de todo, que puedes integrarla con infinidad de plataformas de gestión de contenidos como WordPress y aplicaciones como Marketo, HubSpot, Google AdWords, Analytics, MailChimp, etc.

PageWiz

PageWiz ofrece muchas de las cosas que aportan las anteriores, pero sobre todo hay que destacar su facilidad de uso y el buen resultado que puedes conseguir con poco esfuerzo. Para muestra, su propia landing. Además, ofrece un extra de protección a la hora de mantener la seguridad de tus bases de datos, estadísticas en tiempo real y la posibilidad de dar de alta tus landing pages en Google Search Console.

Unbounce

Unbounce es otra excelente herramienta para la creación y monitorización de landing pages profesionales, avalada por su éxito con empresas y compañías relevantes. Sobre todo, ofrece una enorme cantidad de plantillas para que diseñar tus landings sea realmente sencillo y con un resultado espectacular, gracias a su maquetador de tipo drag & drop. Permite realizar una integración muy fácil con WordPress. Además, puedes crear llamadas a la acción personalizadas y segmentadas.

Cómo crear una Landing Page con WordPress

Si usas WordPress, enhorabuena, ya que este gestor de contenidos cuenta con plantillas premium ya preparadas para hacer Landing Pages y plugins de gran calidad para diseñar y maquetar fácilmente.

Las ventajas son muchas. Sobre todo, la integración. No es lo mismo tratar de aplicar tu imagen corporativa y tus estilos de marca a plataformas externas que hacerlo directamente dentro de tu página web, donde tienes ya instaladas tus tipografías, tus iconos e imágenes y tus gamas de colores aplicadas en hojas de estilo.

Además, te beneficias de la facilidad y potencial que ofrece WordPress para el posicionamiento SEO y todas las funcionalidades que permiten sus plugins.

A continuación, te voy a mostrar algunos plugins que te van a facilitar la tarea de diseñar tus landing pages, y también algunas plantillas premium que ya vienen enfocadas a esta finalidad.

Plugins para crear Landing Pages con WordPress

Visual Composer

Unos de los mejores maquetadores visuales para WordPress, por su enorme cantidad de elementos y opciones, y su compatibilidad con la mayoría de plantillas premium que existen en el mercado, extensiones disponibles, servicio de soporte, etc. Si quieres conocer todas sus funcionalidades, aquí tienes una guía completa de Visual Composer.

Thrive Content Builder

Otra opción excelente. Muchas posibilidades de personalización y un funcionamiento muy intuitivo para diseñar tus Landing Pages con facilidad. Además, permite trabajar sobre plantillas ya predefinidas de gran calidad y múltiples elementos para personalizar tus diseños.

Optimize Press

Es una potente herramienta de diseño de landing pages y páginas de venta, funnels de conversión, portales, páginas para cursos, registro para webinars, etc. Funciona como plugin dentro de WordPress. Permite todo tipo de integraciones y tests para medir la eficacia de tus landings. Una pasada.

Page Builder

Page Builder es ya un clásico en WordPress en lo que a plugins se refiere. Y no sólo por tratarse de una opción gratuita, sino por su enorme integración y flexibilidad con muchísimos temas, así como por su increíble sencillez a la hora de trabajar con él gracias a un editor visual realmente intuitivo.

Plantillas Premium para hacer una Landing Page

Con una plantilla ya prediseñada puedes crear tus landing pages rápida y fácilmente, tan sólo modificando la configuración del tema y añadiendo tu contenido.

Si además incluyen contenido demo mucho mejor, ya que podrás diseñar sobre modelos ya predefinidos, lo cual te va a facilitar muchísimo el trabajo.

Normalmente estas plantillas ya incluyen maquetadores visuales de tipo drag & drop para que diseñar sea pan comido. Si no, puedes añadirles cualquiera de los plugins de maquetación listados en el apartado anterior.

Hay plantillas orientadas a hacer landing pages para ebooks, apps, infoproductos, cursos, etc. A continuación te muestro un listado completo de las que consideramos mejores plantillas para hacer Landing Pages con WordPress:

Marketing Pro

Book

Layer

Inbound

Leadinjection

Landing Page

CodePoint

One

Faded

Geo

Appestia

Cobian

JustLanded

Launchkit

NapApp

AzulApp

Xmobile

¿Qué te ha parecido este post? ¿Quieres preguntar alguna duda o sugerir alguna herramienta que conozcas?

Déjame un comentario y estaré encantado de responderte para solucionar tus dudas o incluir tus sugerencias en el contenido. Espero que este post te haya servido para cumplir tus objetivos

La entrada 19 claves de Diseño Web para hacer la Landing Page perfecta aparece primero en Aula CM.

En este post te voy a enseñar 20 herramientas SEO para encontrar palabras clave con el objetivo de posicionar y conseguir tráfico a tu sitio cuando los usuarios busquen desde Google.

Una buena búsqueda de palabras clave, también llamada Keyword Research, es imprescindible en todo proyecto SEO, ya que posicionar en palabras irrelevantes o muy difíciles puede ser tiempo perdido. En cambio, acertar desde el principio con las keywords correctas te permitirá rentabilizar tu tiempo y dinero.

Antes de ponerte a trabajar los demás aspectos del SEO, investiga a fondo qué palabras clave son las que te interesan y de este modo posicionar en keywords rentables para tu marca o negocio.

¿Qué palabras clave son las mejores para tu estrategia?

Lo ideal en teoría es encontrar palabras clave que tengan muchas búsquedas al mes porque así hay más usuarios potenciales que pueden hacer click en tus resultados.

Pero claro, ten en cuenta que las keywords con muchas búsquedas suelen ser el objetivo de posicionamiento de muchas más webs, es decir, están más competidas y eso dificulta que consigas el objetivo de posicionar arriba.

Por tanto, hay otro aspecto que debes valorar: aparte de muchas búsquedas, trata de encontrar keywords con la menor competencia posible, para que te centres en un objetivo realista que realmente puedas lograr y además consigas la mayor cantidad de tráfico.

¿Es mejor trabajar keywords genéricas o de tipo long tail?

A veces, sobre todo cuando empiezas, resulta más rentable que te centres en keywords de tipo longtail (más específicas y que incluyen más términos) ya que normalmente existe menos competencia sobre ellas.

En cambio, las keywords de una sóla palabra o las que son demasiado genéricas las puedes atacar cuando la relevancia y autoridad de tu sitio sean mayores para así tener más posibilidades de conseguir tu objetivo, ya que posiblemente al ser muy genéricas tienen más búsquedas y, como es lógico, más competencia.

¿Por qué necesitas herramientas SEO para buscar palabras clave?

A la hora de decidir las keywords que vas a trabajar en tu sitio, es importante que uses herramientas de calidad que te ofrezcan información fiable. En caso contrario, puedes cometer errores y perder tiempo y dinero.

Cuidado con confiarte demasiado por el simple hecho de que conozcas muy bien el sector, ya que a veces te puedes llevar sorpresas: por ejemplo, cuando piensas a priori que determinada keyword tenía muchas búsquedas en Google y luego en realidad no es así.

Y viceversa, hay keywords que no esperabas en absoluto que fueran muy buscadas en determinado sector. Estas keywords pueden ser muy rentables ya que quizá tus competidores no han reparado en ellas al ser menos previsibles y no las están trabajando, con lo cual tú posicionas primero.

En resumen, la típica frase de “yo conozco muy bien a mis clientes y sé perfectamente cómo buscan” te puede jugar una mala pasada, o hacerte perder oportunidades muy buenas para ponerte por delante de tu competencia.

Para hacer buen SEO, aplica siempre métodos basados en datos

Para enfocar tu estrategia SEO en las keywords correctas es importante que no lo dejes todo en manos de la intuición o la improvisación. Aplica un método riguroso y exhaustivo, basado más en los datos que en la mera intuición y los juicios preconcebidos.

Si quieres hacer SEO como un profesional, usa herramientas para buscar palabras clave como las siguientes:

Listado de Herramientas SEO para buscar las mejores Keywords

1. Google Keyword Planner de Adwords

La herramienta nativa de Google para buscar palabras clave es una de las más utilizadas del mundo, ya que usa directamente los datos del propio Google, lo cual le permite ofrecer volúmenes de búsqueda bastante precisos.

Otra ventaja interesante es su funcionalidad para encontrar ideas para keywords, a raíz de una palabra, frase o dominio. Además, puedes filtrar por país, idioma, etc.

Pero tiene un handicap, y es que te obliga a tener una campaña activa como mínimo para poder consultar datos precisos. De lo contrario, muestra horquillas demasiado amplias.

Independientemente de la herramienta que uses para buscar keywords, una buena idea puede ser que copies todos los resultados y te los lleves al Keyword Planner de Google para obtener volúmenes más aproximados a la realidad.

2. KW Finder

Una de las mejores alternativas gratuitas al Keyword Planner de Google Adwords para buscar tus palabras clave.

Su funcionamiento es muy sencillo y similar al de la herramienta de Google. Introduces keywords y te dice cuántas búsquedas al mes aproximadas existen para esa palabra o frase, además de darte otras combinaciones de esa palabras junto a otras que también tengan búsquedas.

Es decir, puedes obtener ideas para keywords y luego saber qué cantidad de búsquedas mensuales tienen cada una de ellas, lo cual es muy útil cuando andas sin ideas sobre por dónde empezar.

También te muestra la tendencia de búsqueda al alza o a la baja en los últimos meses para esa y las otras keywords, la dificultad para posicionarlas en función de la competencia existente, los principales sitios que posicionan y compiten por esa keyword, etc.

Algo muy bueno es que te permiten descargarte los informes de keywords en formato CSV para excel. Así puedas incorporarlo a tus propios planes SEO y hacer tus planes de contenido.

En definitiva, una excelente herramienta con un manejo manejo intuitivo y a coste cero.

3. Ubersuggest

Una gran herramienta para buscar palabras clave recientemente adquirida por el experto Neil Patel. Su funcionamiento es similar a la anterior. Introduces una palabra o frase clave, decides qué tipo de formato de resultados prefieres (sitios web, imágenes, shopping, etc), seleccionas un idioma y listo.

Al igual que la anterior, es una herramienta ideal para buscar keywords longtail relacionadas con la palabra o frase introducida. Es decir, combinaciones de palabras más extensas y específicas con sus correspondientes cifras de búsqueda.

Como sucede en casi todas las herramientas gratuitas de búsqueda de palabras clave, la herramienta no ofrece volúmenes demasiado precisos de búsqueda. Para ello es recomendable copiar las combinaciones de palabras y llevarlas al Keyword Planner de Adwords.

Quitando esto último que es algo común a casi todas, se trata una de las mejoras herramientas SEO para buscar palabras clave, por su facilidad de uso y el excelente modo de presentar los datos.

4. Ninja Search Combination Tool

Una curiosa y sencilla herramienta que te permite realizar combinaciones de keywords en base a dos grupos de palabras que previamente puedes definir.

Su utilidad no está en encontrar palabras clave nuevas a partir de un término introducido, sino de crear todas las combinaciones posibles con las palabras que te interesen para luego llevarte esas combinaciones a herramientas como el Keyword Planner.

Otra herramienta que realiza una función muy similar es Mergewords.

5. Tiny Suggest

Herramienta súper sencilla que toma gran parte de sus datos de las sugerencias de Google que puedes ver en la parte de abajo cuando realizas una búsqueda, aunque también, como indican en su landing, recaba información de búsquedas anteriores de usuarios para ofrecer un resultado más enriquecido.

Como hacen otras herramientas, Tiny Suggest te permite seleccionar el idioma para realizar la búsqueda. Una herramienta simple y eficaz que cumple bien su función.

6. Soovle

Soovle es una herramienta bastante interesante que te da ideas para palabras clave y directamente te permite consultar las páginas de resultados de los principales buscadores.

Simplemente tienes que escribir una palabra o frase en el campo central y a continuación aparecen las diferentes combinaciones para cada uno de los buscadores, y luego puedes hacer click directamente para ver sus resultados en cada buscador.

Sencilla, rápida y muy útil para analizar keywords y competidores en diferentes nichos.

7. Long Tail Pro

Long Tail Pro es una herramienta de búsqueda de palabras clave que te permite encontrar keywords interesantes para tu nicho y además te ofrece información acerca de su grado de competitividad. Como su nombre indica, se especializa en expresiones de búsqueda long tail mas específicas.

Además, al introducir tu dominio, te informa sobre el nivel de dificultad al que debes aspirar según tu relevancia actual. Y no sólo esto, también te da información sobre enlaces entrantes, estado de indexación, rentabilidad de keywords, datos de Adwords, etc.

Una herramienta sencilla de usar y que ofrece al mismo tiempo una gran cantidad de información útil para tu plan SEO.

8. SECockpit

SECockpit es una herramienta SEO que permite realizar una Keyword Research avanzada. No sólo tienes sugerencias para palabras clave y volúmenes aproximados de búsqueda, sino que también permite un filtrado avanzado en función de diversos criterios.

Para cada keyword puedes analizar cuáles son los principales competidores que están posicionando en primeros puestos del ranking y cuáles son sus fortalezas y debilidades para tratar de superarles.

Además, en los planes más avanzados funciona como una herramienta SEO integral, que permite analizar enlaces y realizar todo tipo de mejoras recomendadas paso a paso.

Otra gran opción para llevar a cabo un análisis SEO más avanzado de tu sitio web.

9. Seed Keywords

Otra excelente herramienta para buscar palabras clave basada en una idea genial: te permite crear un contexto de necesidad de búsqueda y luego pedir feedback a un grupo de personas que tú definas para que te digan cómo harían ellos las búsquedas.

Por ejemplo, creas un escenario de búsqueda basado en la necesidad de arreglar un ordenador. A continuación envías esta pregunta a tus contactos para que cada uno de ellos escriba cómo haría la búsqueda en caso de tener esta necesidad.

Una vez obtenidos los datos te muestra una tabla de resultados de la que puedes obtener ideas muy valiosas. Además, permite lanzar directamente la búsqueda en Google para analizar quiénes y con qué contenidos están posicionando en primeros lugares.

El principal valor de esta herramienta es que puedes encontrar keywords sin que te condicionen tus ideas preconcebidas como sucede a veces. En ocasiones piensas que conoces muy bien tu sector y que debes centrarte en una u otra palabra base, lo cual puede llevarte a error.

En este caso no existe tanto condicionante subjetivo ya que no introduces ninguna palabra inicial de la que obtener sugerencias sino que defines una necesidad y obtienes patrones reales y espontáneos de búsqueda. Por supuesto, cuanto mayor sea la muestra de usuarios, más afinados serán los resultados.

10. Term Explorer

La gran ventaja de Term Explorer es su gigantesca base de datos repleta de información sobre palabras clave y expresiones de búsqueda. Esto permite realizar búsquedas avanzadas que además puedes filtrar en base a diversos criterios como pago por click, competencia, volumen de búsquedas, etc.

Es una herramienta bastante parecida al Keyword Planner de Adwords, con el añadido de que ofrece una información ampliada sobre competidores, rankings, dificultad, etc. Incluso analiza el modo en que trabajan las keywords los diferentes competidores dentro de sus páginas.

Además, puedes filtrar términos irrelevantes, exportar todos los datos en un CSV, analizar la autoridad de los dominios que compiten por las keywords, etc.

Sorprende la velocidad con la que es capaz de manejar una cantidad tan grande de información para ofrecerte resultados rápidamente, además del modo tan intuitivo en el que te sirve los datos. Una herramienta SEO excelente.

11. Keyword Tool Dominator

Se trata de una herramienta para buscar palabras clave que permite extraer keywords no sólo de Google sino también directamente desde Amazon, Youtube, Bing o eBay, lo cual puede resultar muy interesante para determinadas estrategias de posicionamiento.

El principal valor de la herramienta es que se basa en las sugerencias long tail de los buscadores, con lo cual puedes obtener keywords muy precisas para tus objetivos de posicionamiento. 

Además, es una aplicación que funciona de una manera muy rápida y fluida. Ideal para obtener ideas globales y comenzar a establecer una estrategia de posicionamiento integral.

12. Hit Tail

Hit Tail es una herramienta ideal para encontrar expresiones de búsqueda de tipo longtail (más extensas o específicas) y obtener sus volúmenes de búsqueda para centrarte en las que más te interese.

Además, si realizas un upgrade de la cuenta, te muestra el total de URLs que hay indexando actualmente en Google para cada una de esas expresiones de búsqueda, de modo que puedes hacer un cálculo aproximado de la cantidad de competidores que tienes a la hora de decidirte por una u otra keyword.

Otro aspecto interesante de la herramienta es la funcionalidad My hot Keywords, la cual analiza tu sitio y te hace un listado de keywords que están poco optimizadas (obteniendo los datos directamente de tu Search Console) para que puedas mejorar su posicionamiento y ganar tráfico.

También ofrece una útil aplicación llamada SEO Checker en la que introduces tu URL y tu keyword objetivo y realiza una auditoría de tu sitio indicándote cómo estás trabajando esa keyword y detectando posibles problemas.

Además, en la sección To Do te hace un checklist de cosas que deberías empezar a solucionar ya para mejorar tu SEO.

Otra gran herramienta SEO, potente y usable, ideal para llevar a cabo análisis muy completos de tu sitio web.

13. WordTracker

Una potente herramienta SEO especializada en buscar palabras clave longtail, es decir, no sólo keywords genéricas sino expresiones de búsqueda más concretas y extensas. Además, obtiene datos de búsqueda de diferentes plataformas como Google, Youtube y Amazon.

Si lo comparamos con el Keyword Planner de Adwords, Wordtracker ofrece muchas más keywords por cada término introducido, ya que en lugar de agruparte por conjuntos de keywords te da todos los resultados por separado.

El plan gratuito permite realizar búsquedas sólo para Estados Unidos, pero haciendo upgrade de tu plan puedes analizar búsquedas en otros países.

14. KeywordSpy

KeywordSpy es una herramienta SEO especializada en espiar qué palabras clave usa la competencia para poder utilizarlas en tu proyecto y tratar de posicionar y competir en esas keywords, o simplemente para analizar la estrategia de posicionamiento que usan.

Permite analizar por dominios concretos, palabras clave y URLs específicas. Además, puedes obtener ideas de textos para tus anuncios. Una herramienta con una interfaz un tanto anticuada pero con un potencial enorme para encontrar información útil para tus keywords.

15. Keyword Eye

Otra herramienta para buscar keywords en Google, Youtube y Amazon, y también para poder espiar a la competencia. Además, incluye un buscador de las preguntas más comunes que hace la gente en sus búsquedas, lo cual te va a dar una idea bastante aproximada sobre patrones de búsqueda en cada nicho, lo cual es súper útil para encontrar nuevas ideas para keywords.

Excelente para poder descubrir por ejemplo qué keywords son las más buscadas en Youtube, y planificar una estrategia SEO dentro de la plataforma de vídeo, algo cada día más interesante para las marcas y empresas que desean ganar visibilidad.

En planes de pago te permite realizar más búsquedas, obtener tendencias de búsqueda, calcular la competencia que existe para las diferentes palabras clave,  gestionar y exportar los datos de manera avanzada, etc.

También puedes ver cómo rankea la competencia para las keywords que tú estás tratando de posicionar. De este modo, puedes analizar sus estrategias y obtener ideas para aplicar en tu propia estrategia.

Mucha información en un plan gratuito que puedes ampliar a planes de pago para tener más funcionalidades. Sin duda, otra gran aplicación SEO.

16. SEO Book Keyword Tool

Seo Book es una herramienta SEO sencilla que sirve para calcular la densidad de las palabras clave que usas en tu web.

Es decir, pasas un chequeo a tu sitio y obtienes las palabras que más veces aparecen en tu contenido, así como el porcentaje de apariciones respecto al total, esto es, su densidad.

De este modo, puedes valorar si estás incluyendo keywords con la suficiente densidad (te recomiendo entre un 0,5-1,5% por URL) o si por el contrario te estás pasando, es decir, si estás sobreoptimizando tu contenido, lo cual no es bueno para el SEO.

Otro detalle muy guay: permite analizar si estás cometiendo errores tipográficos al escribir tus keywords para que puedas corregirlos. También puedes encontrar sugerencias de potenciales enlazadores que usan keywords similares para potenciar tu linkbuilding, generar robots.txt de manera automática, comparar listados de palabras clave, etc.

Sencilla y muy útil.

17. Hypersuggest

Con esta herramienta SEO podrás encontrar muchísimas sugerencias para tus palabras clave de tipo long tail, es decir, expresiones de búsqueda más específicas y que incluyen más términos concretos, concretamente para Google, Youtube y Google Shopping.

Además, se pueden hacer búsquedas inversas y combinadas, así como encontrar sugerencias para patrones de búsqueda basados en preguntas: qué, cómo, quién, etc.

Una vez obtienes las sugerencias para palabras clave puedes filtrar por keywords para Google, Youtube o Google Shopping.

Una herramienta sencilla y súper útil, además de muy intuitiva.

18. Can I Rank

Can I Rank es una herramienta SEO bastante completa que no sólo sirve para realizar una keyword research, sino que analiza el estado de en general de tu sitio web y te crea un listado súper útil de acciones a realizar para mejorar el posicionamiento de tus contenidos.

La herramienta te dice cuáles son las keywords en las que posiciona tu competencia y cuáles son las palabras clave potencialmente más rentables para tu sitio.

Para ofrecerte resultados, Can I Rank consulta una base de datos basada en búsquedas de más de dos años, lo cual le otorga una gran precisión para encontrar keywords y valorar su posible rentabilidad.

En cuanto a las acciones recomendadas a partir del análisis inicial, la aplicación te ofrece la información de manera clara y bien estructurada, lo que facilita la ejecución de dichas tareas. Gran herramienta SEO.

19. SeoStack Keyword Tool

La particularidad de esta interesante herramienta SEO es que se trata de una extensión para el navegador, lo cual la hace muy cómoda de usar ya que la tienes siempre a mano.

La interfaz puede parecer un poco antigua, pero es realmente sencilla de usar e interpretar, con todo lo necesario para realizar una búsqueda de palabras clave satisfactoria.

Tiene diversos criterios para filtrar los resultados. Puedes obtener datos de búsqueda en Google, Youtube, Bing, Yahoo, Amazon y eBay, además de buscar por idiomas y países y exportar en formato CSV.

El sistema de búsqueda es parecido a las suggests de Google, con sugerencias basadas en una palabra introducida y combinaciones en función de la letra inicial de la long tail.

Realmente, aunque no aporte gran cosa respecto a las anteriores en cuanto a su funcionamiento, destaca por la sencillez de su interfaz.

20. SpyFu

Una excelente herramienta para realizar un análisis de las palabras clave que usa tu competencia y encontrar webs de nivel similar para poder analizar a tus competidores directos.

Su funcionamiento es sencillo: introduces el dominio que quieras y obtienes una enorme cantidad de información sobre sus palabras clave orgánicas, coincidencia de keywords con la competencia, histórico de rankeo, etc.

Aparte de lo anterior, puedes saber cuáles son tus keywords exclusivas que no trabaja tu competencia y viceversa, las keywords que trabajan otros de manera coincidente pero tú aún no, lo cual es una información muy útil para empezar a trabajar nuevas palabras clave en las que no habías reparado antes.

En algunas cosas, recuerda a herramientas más potentes como Semrush. Además, en planes de pago te permite generar informes totalmente personalizados para tus clientes.

Otra excelente opción para realizar un análisis completo de keywords y muchísimos aspectos SEO que puedes empezar a mejorar ya.

¿Qué te ha parecido el listado? ¿Conoces más herramientas?

Déjame tus sugerencias, dudas y opiniones en los comentarios de más abajo y estaré encantado de responderte

La entrada Las 20 mejores herramientas SEO para buscar palabras clave aparece primero en Aula CM.

¡Hola! Este post es una de esas recopilaciones llenas de trucos súper valiosos que normalmente los expertos no te cuentan. En esta ocasión, 8 súper cracks del SEO te van a contar algunas de sus estrategias blackhateras más eficaces.

Pero antes vamos a definir bien qué significa exactamente Black Hat SEO y cuáles son las típicas acciones del Black Hat.

¿Qué es Black Hat SEO?

Por Black Hat SEO entendemos todas las acciones SEO encaminadas a conseguir un objetivo mediante técnicas menos ortodoxas que las habituales. Es decir, es hacer un SEO un poco gamberro, aunque (casi) siempre sabiendo lo que se hace.

Hay técnicas de Black Hat más “legales” que otras. Normalmente, si te pasas, Google te castiga en forma de penalización. Aunque, si sabes hacerlo bien, puedes llegar a colar algunas acciones a Google y conseguir una gran rentabilidad SEO.

Es decir, se podría decir que un Black Hat rentable es implementar “trucos” poco convencionales para intentar que Google te posicione mejor y hacerlo más rápidamente sin tener que esperar como el resto de sitios web que tardan más en posicionar.

Sin embargo, un Black Hat no rentable sería llevar a cabo acciones demasiado al límite que sabes casi seguro que te van a penalizar.

Típicas acciones de Black Hat SEO que pueden penalizarte (o no)

Estas son algunas de las estrategias clásicas de Black Hat SEO que se han venido haciendo desde hace tiempo:

• Hacer cloacking, o lo que es lo mismo: tratar de confundir a Google mostrando un contenido al buscador y otro a los usuarios
• Ocultar contenido. Por ejemplo, poner textos del mismo color que el fondo de la página para que el usuario no lo vea pero Google lo rastree.
• Backdoors o puertas traseras, es decir, colocar enlaces en otras webs hacia tu sitio, lo cual es muy peligroso ya que Google lo detecta casi seguro.
• Hacer spamming sin parar en sitios donde se puede escribir lo que quieras para conseguir visibilidad y poner enlaces masivamente hacia tu sitio.
• Comprar enlaces en sitios web que ofrecen este servicio. Estas páginas en ocasiones pueden estar penalizados debido a su actividad no natural.
• Spinning. “Espinear” textos de otros sitios con herramientas automáticas para generar contenido rápida y fácilmente sin tener que escribirlo tú.
• Hacer keyword stuffing o sobreoptimización de la palabra clave dentro de un contenido, esto es, repetirla bastante creyendo que así vas a posicionarla mejor, etc.

Si quieres mejorar tu SEO haciendo Black Hat, tienes que hacerlo con cuidado y sabiendo exactamente lo que haces (o al menos controlando un poco lo que haces).

Por tanto, si no quieres meter la pata, es recomendable que tengas cierta experiencia o cuentes con la ayuda o consejo de verdaderos expertos.

El objetivo de este artículo es mostrarte técnicas que sean realmente valiosas y aplicables, fruto de la experiencia de auténticos especialistas del SEO. A todos ellos les agradecemos su aportación y su generosidad por contarnos tantos trucos.

8 trucos de Black Hat SEO que realmente funcionan y puedes aplicar

Lee detenidamente y toma nota de los trucos contados por los mejores SEO de España que te mostramos a continuación. Comenzamos:

Chuiso: Páginas automatizadas para long tails

Según Chiuso, un truco que a día de hoy le funciona muy bien es la creación de páginas automatizadas para atacar miles (o incluso millones) de long tails.

Caso práctico: Coordenadasgps.info

Este sitio se creó en apenas unas pocas horas y tiene más de 30.000 páginas, que poco a poco (o forzando al estilo “black” con indexadores :P) va indexando. Lo increíble es que posiciona genial para todo este tipo de palabras clave con nula competencia y, como son “muchos pocos” y se tardan un par de horas en hacer estas webs, es un chollazo.

Puedes comprobarlo buscando long tails estilo:

• Coordenadas el palmer almeria
• GPS moran Zaragoza
• Latitud longitud caleruela

Multiplica esto por 35.000 y recuerda que este sitio tiene semanas de vida y no se le ha trabajado absolutamente nada off page.

Es una técnica genial para trabajar en nichos en los que quieres lograr leads a base de long tail e incluso para montar sitios que generen ingresos con Adsense o afiliación. También pueden servir como refuerzos para proyectos o startups serios, canalizando nuevo tráfico a través de funnels, un formulario para captar emails, etc.

Si de vez en cuando meditamos las acciones que llevamos a cabo en nuestros proyectos, nos podemos llevar sorpresas. Desde el punto de vista de Chiuso, este tipo de sitios son estrategias interesantes y creativas que están basadas en la automatización. Gestionar un sitio así redactando a mano sería algo impensable, además de absurdo.

Lo que Google quiere es que pensemos en el usuario sin que eso  signifique que hagamos un trabajo 100% manual.

Google no siempre quiere que hagamos las cosas del modo lento. Lo que quiere es que, primero que todo, pensemos en el usuario, sin que eso signifique que hagamos un trabajo 100% manual, o más “penitente”. Al fin y al cabo, ¿acaso la página no responde correctamente al usuario y da una respuesta positiva que satisface la búsqueda?

Este tipo de técnicas resultan interesantes porque, aunque suelen considerarse puro Black Hat, están a medio camino entre la creatividad y el aprovechamiento de la estructura actual de Google.

Este es el blog de Chuiso en el que puedes leer mucho más sobre Black Hat y además echarte unas risas.

Xavi Viguer:  Posicionamiento en subreddit

Xavi nos descubre un truco muy sencillo a la par que antiguo (pero creo que poco explotado e incluso olvidado, que continúa funcionando en 2018) y que es realmente fácil de replicar. Puedes hacerlo totalmente manual o puedes tirar un poco de cartera para llevarlo a cabo.

Publicaciones en subreddits de Reddit

Este truco consiste, básicamente, en publicar el enlace en cuestión en un subreddit para conseguir un volumen de tráfico considerable. Estos subreddits son cada una de las categorías en las que se divide Reddit, el agregador de enlaces y noticias considerado como el 6º sitio del mundo con más tráfico.

Dependiendo de la reacción de la comunidad en relación a esa publicación y las ya publicadas en el mismo subreddit, en un periodo de 2 ó 3 días luchan para estar en las primeras posiciones del Sub (hasta que entran nuevos posts/enlaces).

Te puede llevar en cuestión de dos/tres días entre 500 y 15000 visitas o más y dependiendo del subreddit que elijas, este montón de tráfico te hará subir posiciones. Como buena técnica Black Hat, este posicionamiento lo conseguirás con muy poco trabajo y, para no ser menos, con spam puro y duro y algo de creatividad.

Publicar en un subreddits te puede generar un volumen de tráfico importante que te hará subir posiciones

Para este caso, Xavi utiliza un ejemplo real (negocio físico) en sector servicios y ocio. No nos muestra la URL del proyecto, pero si repasa paso a paso lo que hace y, para que te acabes de leer el artículo, te avanza los resultados:

Es importante tener en cuenta que este tipo de subidas con estas técnicas duran 3 ó 4 días, luego rebota para abajo pero se queda bastante por encima de la posición inicial.

En general, vienen muy bien para hacer estrategias cuando hay ciertos eventos en nuestra ciudad (en caso de un negocio local), ya que al ser Reddit muy fuerte a nivel extranjero posicionaremos muy bien durante varios días por búsquedas locales en Google de otros países o en otros idiomas y en el propio google.es por búsquedas en inglés.

¿Cómo consigo estar primero en un subreddit?

No basta con publicar al azar. Toma nota de estos pasos para que tu publicación consiga estar en las primeras posiciones del subreddit:

• Escoger bien el Sub al que quieres atacar y como lo haces. En este ejemplo salta a la vista que en el mundo de las criptomonedas hay un gran interés y fanatismo por su adopción en el día a día, sobre todo en la comunidad de litecoin (más de 180.000 suscriptores en ese sub), por lo que cualquier negocio puede publicar que utiliza su criptomoneda. Si además es algo que puede generar controversia, mucho mejor, ya que es más probable que se viralice o mueva más (aquí la parte creativa). Lo único que tuvo que hacer en la web que interesaba promocionar fue añadir un logo de su moneda en el footer, poniendo que la aceptamos.

• Es importante incluir las palabras clave que te interesan en el enlace. En este caso el título era servicio del negocio + ciudad + accepts litecoins. Ejemplo: supermarket in Barcelona accepts litecoins! (enlazando a la landing que nos interese potenciar).

• También debes tener en cuenta que quien publique debe tener un perfil antiguo y que esté relacionado con la temática, ya que será menos propenso a que lo voten negativo. La recomendación de Xavi es pagar a alguien con antigüedad en reddit relacionado con la temática que te interesa. Con una simple búsqueda en google del tipo purchase reddit votes encontraremos un montón de proveedores que también ofrecen publicación con perfiles con antigüedad y afines a distintas temáticas.

• Una vez publicado y lo antes posible es importante empezar a dar señales a esa publicación y a otras publicaciones del mismo sub. La fórmula de Xavi para este sub de 180.000 suscriptores fue la siguiente:

– 30 upvotes para mi publicación
– 50 downvotes para publicaciones en el top 10 del subreddit
– 3 comentarios en mi post

Y así se metió el enlace que interesaba potenciar en el top del sub durante un par de días, ayudando a posicionar la web tanto en google.es (inglés) como en Google de otros países dándole un empujón en cuanto a SEO, justo antes de un evento que trae a cientos de miles clientes potenciales.

Es tan sencillo como suena, esto replicado a más gran escala en subs mucho más grandes puede traer barbaridades de tráfico. Básicamente para negocios que trabajan en inglés es útil, simplemente mediante spam (comprando votos, comentarios o usando herramientas del estilo browz.io.

Aquí puedes visitar la web de la Agencia SEO de Xavi.

Borja Aranda: Blanqueo de enlaces

En sus estrategias de Black Hat, Borja asegura ser bastante prudente ya que cada día Google es más riguroso a la hora de penalizar webs y por ello su Black Hat es bastante light aunque no por ello menos efectivo. Estos son dos de sus trucos infalibles:

Blanquear enlaces “sucios”

Esta técnica consiste en crear varios blogs en páginas 2.0 o webs parásito con el fin de mejorar su PA a base de enlaces y luego derivar ese linkjuice hacia el Money Site o sitio web principal.

Pasos para blanquear enlaces

1. Para empezar, lo primero de todo será crear varios blogs gratuitos en páginas como Blogspot, Blogger y similares con un historial web limpio y un buen Domain Authority (DA).
2. Una vez creado ese primer nivel de blogs será el momento de crear enlaces dofollow en foros con un buen Domain Autorithy pese a que sus enlaces salientes sean poco valiosos por su alta cantidad de enlaces salientes, spam y número de páginas para un dominio. Personalmente, para localizar este tipo de foros donde poner mis enlaces utilizo los footprints de Google (principalmente los de CMS como vbulletin y PHPbb) y una vez registrado en estos foros sitúo mis enlaces en la firma y en el perfil de los que me dejan.
3. Para no pecar de puro spammer y ser baneado lo que hago es responder a bastante hilos previamente (con 20 contestaciones son suficientes), una vez hecho esto por lo general puedo poner mis enlaces donde quiera sin problemas.
4. Una vez creada esta red de enlaces “basura” hacia blogs 2.0 será el momento de que el Page Autorithy (PA) de los blogs 2.0 comience a subir, momento en el cual estos enlaces se blanquean.
5. En el momento en el que el blog 2.0 tenga un PA aceptable (es decir, superior a 10) crearemos cuatro o cinco posts de 500 palabras para hacer el proceso lo más natural posible.
6. Cuando tengamos esos posts creados y publicados los dejaremos reposar durante dos o tres semanas. En ese momento crearemos el sexto post con el enlace dofollow hacia nuestro Money Site o web principal.

De esta manera, conseguiremos “limpiar o blanquear” estos enlaces spammeados y aprovechar toda su fuerza a nuestro favor creando una mini PBN gratuita y de una calidad bastante aceptable.

Keyword Stuffing con Seoquake

Otro de los trucos que me gusta utilizar a veces es forzar a Google a ver hasta dónde me deja llegar con el keyword stuffing. Para ello uso la extensión SEO de Google Chrome Seoquake. Con ella analizo la repetición de palabras clave de los posts y lo mejor de todo, su prominencia dentro de dicho post.

Con esta extensión se pueden sacar conclusiones muy interesantes a la hora de redactar artículos y mejorar al máximo el SEO Onpage de vuestras webs de forma totalmente gratuita. De esta manera, Borja ha logrado acercarse a unos porcentajes aceptables para Google en cuanto Keyword Stuffing por lo que recomienda probar esta herramienta con varios de tus post.

Si quieres aprender a forzar al máximo este parámetro te recomiendo que te pases por este post en el que te doy las claves para evitar la penalización por keyword stuffing.

Álex Navarro: Búsquedas de marca

Según Alex, uno de los factores más importantes que existe a nivel de SEO es conseguir que la gente busque tu marca en Google. Si encima buscan tu marca junto con una palabra clave, entonces ya entras en una liga a la que pocas páginas web tienen acceso.

De hecho, una de las razones por las que las grandes marcas están tan bien posicionadas, aún teniendo (en algunos casos) páginas web horribles a nivel de SEO onpage, es porque la gente los busca masivamente en Google.

Una razón por la que las grandes marcas están tan bien posicionadas es porque la gente las busca masivamente en Google

Cuando mucha gente busca por ejemplo la palabra “zapatos zalando”, Google les premia como marca, y los coloca muy arriba bajo la búsqueda de “zapatos”.  Obviamente, esto va en conjunto con los enlaces externos que también reciben, pero el factor “búsqueda de marca” creo que tiene incluso más peso que los propios enlaces.

El problema que tenemos el común de los mortales es que, en muchos casos, es muy complicado conseguir que la gente te busque por tu marca en Google.  Esto requiere años de branding, anuncios, televisión, prensa, etc. A no ser, que uses la siguiente técnica:

Búsquedas de marca con palabra clave

Hay una empresa que se llama microworkers.com. En esta web puedes pedir a la gente, que por poco dinero, te hagan algunos trabajos muy concretos.

Lo que suele hacer Álex para sus nichos es que unas 100-200 personas al mes, busquen por un lado su marca en Google (por ejemplo miwebdenicho24.com) y hagan click en mi resultado.  Además, contrato a otras 50-100 al mes para que busquen mi marca junto con mi palabra clave (por ejemplo “zapatos miwebdenicho24.com“). Cada acción cuesta unos 0,15-0,20 €.

Para darle una vuelta más de tuerca, Álex les dice que estas búsquedas se realicen desde teléfonos móviles, no desde desktop. Y esto lo hace ya que las “falsificaciones” de este tipo de búsquedas son infinitamente más eficaces cuando se realizan desde móviles. Google parece no tener tan controlado este tema como lo tiene a nivel de desktop.

Una vez hecho el pedido en esta plataforma, para asegurarse de que la gente realmente realiza la búsqueda desde el móvil, instala en sus blogs dos plugins que me permiten enseñarles a los visitantes un contador que, después de 70 segundos enseña un código.  Ese código es el que tienen que copiar y pegar en la casilla de “verificación”.

Con esto ganamos tres cosas:

Esta técnica no tiene absolutamente ningún peligro de penalización y se puede usar para prácticamente cualquier proyecto. En definitiva, conseguimos acelerar el proceso de posicionamiento de cualquier nicho que esté montando.

Si en texto te resulta un algo confusa, en este vídeo podrás entender mejor la técnica y lograr mejorar el posicionamiento de tus páginas.

Álvaro Rondón: Firmas con enlaces a comentarios

En vista de que ya hay bastantes estrategias Black Hat Seo y muchas ya las conocemos, es difícil nuevas formas creativas de manipular alguna señal.

Según Álvaro, a nivel on page es todo más técnico pero, si lo mezclamos con el off page se abre realmente la caja de Pandora. De esta forma podemos encontrar alguna técnica que, además de nueva, posiblemente nos convierta en los únicos o de los pocos que la estén usando y por tanto más probable es que puedas usarla durante más tiempo.

La técnica que propone Álvaro, es sencilla de hacer, sobre todo si ya le das al Black Hat, eso sí, antes de llevarla a cabo, utiliza la lógica y los conocimientos. Así, evitarás pérdidas de tiempo y fracasos.

Estrategia de enlaces a comentarios en foros

Con esta técnica, vamos a ir un paso más allá de la estrategia de usar enlaces de firma en foros o comentarios con enlaces follow que seguro que ya conoces. ¿Cuáles son los pasos a seguir?

1. Buscaremos la url de un foro que nos interese por tema relacionado, que pueda traer tráfico y que podamos responder con algún comentario útil aportando un enlace hacia nuestro site.
2. Esa url donde ponemos el enlace nos la guardamos (la url de publicación final), y vamos a poner en nuestra firma del foro, una frase que nos guste pero con un enlace hacia nuestro comentario. Así, cada vez que contestes o des una respuesta en dicho foro, estás haciendo por medio de la firma un enlace interno hasta el comentario que contiene tu enlace follow a tu site o tier.

¡Imagínate cuando llevas 300 comentarios, cuántos enlaces internos recibe ese comentario! Con esta técnica estamos derivando juice de diferentes URLs del mismo foro hasta nuestro enlace, manipulando el link equitity del foro en nuestro favor.

Esto lo podemos llevar a niveles cada vez más blackhateros, como por ejemplo utilizar un foro abandonado (ejem), con autoaprobado (ejem), y con GSA u otro programa crear bastantes enlaces internos a nuestro potente comentario. Es importante ver bien dónde y cómo realizamos esta técnica, pero bien utilizada es muy efectiva, incluso directo al MS, aunque teniendo en cuenta el foro, el enlace y el perfil de nuestro MS.

Puedes leer más contenido interesante de Álvaro en su blog de SEO.

Antonio López: Dominios expirados y automatización

A pesar de no utilizar técnicas Black Hat SEO de forma muy continuada, Antonio se declara un defensor de algunas de estas técnicas. De hecho, muchos de los que utilizan a menudo el Black Hat tienen conocimientos de automatización que ya les gustaría tener a muchos White.

Antes de seguir con las técnicas utilizadas por este SEO, es importante señalar que el Black Hat no se debe utilizar con proyectos de clientes, bajo ningún concepto. Y dicho esto, descubramos las dos técnicas que más utiliza Antonio y que hasta la fecha tan bien le funcionan:

Compra de dominios expirados

Esta técnica consiste fundamentalmente en buscar un dominio que esté expirado, que tenga una historia interesante y enlaces muy positivos al mismo. A continuación, se compra y se redirecciona a una parte del money site e incluso se puede montar un blog aquí para formar parte de una PBN o sin PBN.

Hay distintas formas de encontrar dominios expirados y una de ellas es Xenu. ¿Cómo es este proceso?

1. Scrapeamos un dominio que sea muy bueno y nos fijamos en los estatus de enlaces rotos No souch hust. Esto no garantiza al 100% que estará libre, sino que lo que dice es que la página no se encuentra porque el dominio no está alojado en ningún sitio.
2. Exportamos todo el listado por CSV y lo introducimos en la búsqueda masiva de dondominio.com para saber cuáles de ellos están sin registrar.
3. Una vez que conocemos los registrables debemos analizarlos para ver si nos interesan de verdad o no. Podemos analizos primero con Ahrefs, por ejemplo, para comprobar los enlaces que tiene actualmente todavía activos, el patrón de anchor y si está spameado o no.
4. Después. con herramientas como Semrush o Sistrix, podemos ver la historia del dominio y también archive.org para tener la certeza del contenido que tenía.
5. Si cumple con una serie de criterios, es decir, que tenga buenos enlaces, que sea de la misma temática que el money site y que no esté spameado, redireccionaremos a la sección de nuestra web que nos interese.

Automatización de contenidos

Esta otra técnica Black Hat que utilizo consiste en utilizar un plugin de scrapeo en WordPress, en el que podamos introducir el feed de cualquier página para poder coger el contenido y “spinearlo”. En cierto modo serían dos técnicas en una: la automatización y el spineo de contenidos.

Si somos capaces de crear contenidos distintos incluso semánticamente espineando contenido, no tendrá problemas a la hora de indexarse en Google y de posicionarse. Eso sí, recuerda que ambas son técnicas que no hay que utilizar con clientes ni con dominios o proyectos a largo plazo.

Si quieres leer más artículos de Antonio puedes visitar su blog especializado en SEO

David Ayala: Spineo de contenidos

Algo de lo que se ha hablado mucho y en lo que siempre hay discordia es sobre el tema del contenido spineado y David Ayala no cuenta en qué consiste esta técnica Black Hat:

¿En qué consiste spineo de contenidos?

Spinear es generar contenidos a partir de un contenido inicial. Es decir, lo que se intenta es a partir de ese texto inicial conseguir otros contenidos que parezcan originales y únicos a ojos de Google y, por lo tanto, que puedan “rankear” en el mismo.

Es cierto que cada vez Google detecta mejor los contenidos spineados pero sigue “tragando” cuando se realiza un buen spineado. Además, no solo “traga” con él, sino que puedes rankear a la perfección con este tipo de contenidos.

¿Cómo hacer un buen spineado?

No basta con coger algo automático que te haga un texto en indio que casi ni se entiende. Un buen contenido spineado debería estar currado por ti mismo en  en formato {spintax|spineado|spin}. Es decir, que te cueste hacer ese spin unas horas y que el resultado entonces sea algo en condiciones de verdad y no cualquier cosa.

Un ejemplo de forma de actuación sería hacer el spineado de forma manual nosotros mismos y luego utilizar Page Generator Pro para generar los contenidos spineados finales en nuestro WordPress.

¿En qué casos puedo usar esto y en qué casos no?

Esta cuestión es quizás igual o más importante que hacer bien el spineado.

Por ejemplo, para un blog de nicho no tiene sentido, ya que no vas a spinear 40 veces el contenido y a subirlo en la misma web. Si lo hicieras, un usuario que accediera a la web, navegaría por los contenidos de la misma y siempre se encontraría la misma información, pero escrita de formas diferentes, lo cual generaría mala experiencia de usuario y abandonos de la web.

En este caso estaríamos en lo de siempre, Google terminaría determinando que los contenidos de nuestra web son de bajo interés para el usuario y por lo tanto bajaríamos en los rankings.

Una situación muy simple y común en la que utilizarlo es, por ejemplo, una en la que tienes un negocio que quieres que tenga alcance local en todas las ciudades de un país, por ejemplo “fontanero” y quieres luchar por “fontanero Barcelona”, “fontanero Huesca” y en general por todas las ciudades del país.

El spineado manual es una buena opción para negocios que quieran tener alcance local

En este caso no tendrías problema ya que en todos los spineos hablarías de tu servicio de fontanería y el usuario que accediera a la sección de la ciudad correspondiente no accederá a la de otra ciudad. Es más, aunque accediera a las otras ciudades por curiosidad, no quedaría extraño que se exponga el mismo tipo de información ya que va enfocado a otras ciudades.

Esto es algo que a día de hoy sigue funcionando muy bien en Google y que se puede extrapolar a otros casos sin ningún tipo de problemas, pero eso sí, teniendo en cuenta que hacer todo esto cuesta tiempo y esfuerzo, no es cosa de hacerlo en dos segundos y tan solo apretando un botón.

Globsia es la Agencia SEO de David Ayala.

Javier Gosende: Contenidos de hemerotecas

Para Javier, desde que existe el SEO, el ingrediente principal ha sido el Contenido. En los últimos años Google se ha puesto más riguroso con el contenido, recomendando a los webmaster a crear contenido original y contenido de calidad.

Crear contenido original es una tarea super importante en toda estrategia SEO. Si Google detecta que tu contenido es copiado o plagiado tenemos un problema.

Si nos vamos al terreno del Black Hat SEO, hablamos de cómo crear contenido que Google lo interprete como original y no sea penalizable. De eso se trata el Black Hat SEO, de hacer cosas fuera de las recomendaciones o directrices de Google y probar si funcionan.

A pesar de que Gosende no se dedica a aplicar tácticas de Black Hat SEO, sí audita páginas web de clientes y una de las cosas que más hace es analizar a la competencia. En estos análisis de competidores ha podido identificar algunas tácticas de creación de contenidos Black Hat SEO que les han funcionado y esta es una de ellas:

Copiar contenidos de las hemerotecas de los periódicos online

Está técnica consiste en buscar en la profundidad de los servicios de archivo o hemeroteca de algunos periódicos online y copiar contenido de calidad para pegarlo en nuestro artículo o post.

Muchos periódicos han digitalizado sus contenidos antiguos en formato pdf para poder ser consultados por los usuarios y algunos de esos documentos en formato .pdf se pueden encontrar y copiar sus contenidos.

El chiste de la técnica es que en la mayoría de los casos ese contenido Google no lo tiene indexado en su base datos y pasa por contenido original o nuevo.

Sobre todo si se coge contenido de ediciones antiguas del periódicos de los años 1998 hacia atrás. Digo 1998 porque antes de ese año eran pocos los periódicos que tenían versión online y existe una gran posibilidad que ese contenido digitalizado no lo tenga indexado Google.

Caso práctico: Periódico la Vanguardia

Para entender mejor esta técnica Black Hat SEO, vamos a usar una página como la del servicio de hemeroteca del Periódico la Vanguardia 

1. Empezamos entrando en su su página y hacemos la búsqueda de un tema que nos interesa, por ejemplo: “La dieta mediterránea”. En este caso es aconsejable poner una fecha bastante retrasada, del año 1998 hacia atrás.
2. Nos saldrá un listado de algunos artículos o noticias que tienen titulares y párrafos donde se menciona la frase.  Pinchamos en alguno de ellos y lo revisamos para ver si el contenido es de calidad y de nuestro agrado.
3. Lo copiamos y lo pegamos en una herramienta especializada en chequear si el contenido ya existe. Por ejemplo la herramienta de Plagiarism Checker. También podemos escribir el titular o una frase larga del artículo en el buscador de Google para ver si lo encuentra
4. Si el artículo en cuestión no está indexado por Google lo podemos copiar y dicho buscador lo tomará como un contenido nuevo u original.

Con esta técnica podemos conseguir contenidos de calidad a un coste 0. Obviamente está técnica no aplica para redactar contenidos de temas más actuales. Solo nos sirven para contenidos que no han pasado de moda en los últimos 20 años.

Este es el blog de Javier Gosende donde puedes leer mucho más sobre SEO y Marketing Online.

El SEO es experimentar y aprender de cada experiencia

Como puedes ver, cada profesional tiene sus propios trucos fruto de su experiencia y especialización. No olvides que el buen SEO es el resultado de la experimentación constante y el análisis exhaustivo de tus propios casos de estudio.

El buen SEO es el resultado de la experimentación constante y el análisis exhaustivo de tus propios casos de estudio

Por ello, te animamos a que tú mismo hagas tus propias pruebas y experimentos. Aunque mucho cuidado con hacer pruebas en dominios que ya tengan cierta autoridad y posicionamiento, pues podría ser peligroso. Es mucho mejor que tengas dominios de prueba donde puedas testear sin miedo y obtener tus conclusiones sin fastidiar ningún proyecto real.

Y, por supuesto, una recomendación: nunca te olvides de la ética cuando trabajes en tus proyectos SEO. Se puede ser un poco gamberro en el SEO y hacer cosas un poco al límite, pero no perjudiques a nadie y trata siempre de crecer dentro de una sana competencia.

¿Qué te han parecido estos trucos SEO?

¿Quieres compartir con nosotros tus técnicas? Deja tu opinión en los comentarios de más abajo y comparte tu punto de vista sobre esta apasionante temática, nos encanta que todos aportéis

La entrada 8 Expertos desvelan Estrategias de Black Hat SEO que SÍ funcionan en 2018 aparece primero en Aula CM.

The Retailer

The Retailer es una plantilla muy bien optimizada para comercio online. Ofrece una gran versatilidad para crear diversos estilos de página y funciona muy bien con plugins como Visual Composer.

Precio: 58$
Ver la plantilla en Themeforest

Neighborhood

Neighborhood es un tema responsive que viene perfectamente optimizado para pantallas retina. Posee un práctico editor visual que funciona arrastrando elementos. Incluye además la posibilidad de cargar un MegaMenu avanzado.

Precio: 63$
Ver la plantilla en Themeforest

Flatsome

Flatsome fue la plantilla más vendida durante el año 2014 en Themeforest. Estilo minimalista, moderno y elegante, adaptada a todos los dispositivos y resoluciones de pantalla, con MegaMenu integrado y un editor visual de fácil manejo.

Precio: 58$
Ver la plantilla en Themeforest

Legenda

Legenda es una plantilla responsive altamente personalizable que incluye multitud de estilos diferentes para dar a tu página el aspecto que deseas. Es compatible con Visual Composer y adaptada a pantallas retina.

Precio: 58$
Ver la plantilla en Themeforest

Bazar Shop

Bazar Shop, tema responsive muy bien estructurado que incluye una funcionalidad propia para optimizar el SEO. Además viene con un plugin para poner un pop up de suscripción. Compatible con Visual Composer.

Precio: 63$
Ver la plantilla en Themeforest

Retro

Retro es una plantilla responsive de apariencia vintage con cinco estilos gráficos predefinidos que puedes cargar en tu página de una manera muy sencilla. Incluye además el plugin Revolution Slider y un práctico editor para crear formularios.

Precio: 48$
Ver la plantilla en Themeforest

Royal

La principal ventaja del tema Royal es que ofrece mas de 60 estilos predefinidos de página que instalas de un modo muy sencillo. Incluye Visual Composer y Revolution Slider, además del plugin Essential Grid, que sirve para crear diversos estilos de blog, portfolio, etc.

Precio: 58$
Ver la plantilla en Themeforest

Marketify

Marketify es una plantilla responsive de apariencia minimalista con la que puedes crear fácilmente una plataforma de comercio online donde se pueden vender todo tipo de productos, incluida la venta de productos digitales. Permite añadir extensiones.

Precio: 63$
Ver la plantilla en Themeforest

Labomba

Labomba es un tema muy elegante con diversos efectos parallax que lo convierten en una opción muy atractiva para crear tu tienda online. Responsive y adaptada a resolución retina. Incluye Visual Composer.

Precio: 58$
Ver la plantilla en Themeforest

ShopKeeper

ShopKeeper es una plantilla responsive y gráficamente espectacular con un modo muy interesante de estructurar el contenido que además te ofrece amplias opciones de personalización. Incluye los plugins Visual Composer y Revolution Slider.

Precio: 58$
Ver la plantilla en Themeforest

Ultimo

La plantilla Ultimo es responsive y te permite poner en marcha una tienda online muy personalizable en cuanto a estilos y colores. Incluye MegaMenu para diseñar menús avanzados en los que puedes colocar productos.

Precio: 99$
Ver la plantilla en Themeforest

Shopper

Shopper es un tema responsive y adaptado a pantallas retina que incluye un escaparate personalizable de productos. Además lleva integrado Revolution Slider, dando mucha presencia a los sliders superiores. Permite diseñar menús avanzados.

Precio: 89$
Ver la plantilla en Themeforest

Fortis

Fortis es una plantilla responsive muy personalizable en cuanto a apariencia y colores y que además incluye diversos estilos predefinidos de página que puedes elegir a un click. Trae MegaMenu para hacer menús avanzados.

Precio: 97$
Ver la plantilla en Themeforest

Incredible

Incredible es responsive y tiene un estilo limpio y minimalista que puedes adaptar a tus necesidades concretas de diseño, incluyendo un menú avanzado. Ideal para tiendas de ropa, zapatos y complementos.

Precio: 84$
Ver la plantilla en Themeforest

Start

Con Start puedes construir una tienda online responsive de aspecto elegante, moderno y minimalista, con un menú avanzado, slider de productos, imágenes grandes, etc. Incluye Revolution Slider.

Precio: 84$
Ver la plantilla en Themeforest

Warehouse

Warehouse es una plantilla responsive que te permite elegir entre varios estilos diferentes y predeterminados para tu web. Tiene un diseño limpio y ordenado. Incluye Revolution Slider, MegaMenu y Blog Module, para diseñar diversos estilos de blog.

Precio: 69$
Ver la plantilla en Themeforest

Alysum

Alysum es un tema responsive de estilo clásico, con cuatro tipos de sliders de productos para la página de inicio y 31 plantillas para newsletters. Además, te permite editar el formato del blog y exportar los productos a eBay.

Precio: 69$
Ver la plantilla en Themeforest

Trendy!

La plantilla Trendy! ofrece un diseño limpio, moderno y estructurado con slider de productos, adaptado a todos los dispositivos y con menús avanzados que permiten insertar productos e imágenes. Incorpora widgets sociales.

Precio: 64$
Ver la plantilla en Themeforest

SimpleGreat

SimpleGreat es una plantilla responsive moderna y minimalista, con elementos gráficos muy cuidados disponibles en diferentes colores. Menús avanzados y gran cantidad de opciones de personalización, además de Revolution Slider y un gestor de blog.

Precio: 48$
Ver la plantilla en Themeforest

Optima

Optima es una plantilla gráficamente atractiva con 6 estilos predefinidos que puedes cargar. Permite customizar bastante el área de productos y crear menús avanzados con diversos elementos. Como las demás, es también responsive.

Precio: 69$
Ver la plantilla en Themeforest

La entrada Las 20 mejores Plantillas 2018 para crear una Tienda Online aparece primero en Aula CM.

Si vas a diseñar tu sitio y estás dudando sobre cómo hacerlo este post es para ti, ya que te vamos a contar todos los pasos necesarios para crear tu página web o blog, desde el tipo de plataforma a emplear hasta consejos de estilo para escribir tus artículos, pasando por recomendaciones para contratar tu hosting y dominio, recursos gratuitos para imágenes, plugins, SEO, etc.

A lo largo del artículo te vamos a dar consejos útiles que nosotros utilizamos y que nos funcionan muy bien. Toma nota:

1. Diferencias entre una página web y un blog

Desde un punto de vista técnico una web y un blog no son cosas diferentes. Es decir, ambos necesitan un hosting (espacio en un servidor) y un dominio (URL o dirección web) para estar en internet. De hecho, puedes integrar un blog dentro de una página web, como hacen muchas empresas para atraer tráfico de usuarios a su web corporativa mediante una estrategia de marketing de contenidos.

Básicamente, la diferencia entre una página web y un blog está en el contenido y en la estructura:

Una página web normalmente suele tener un enfoque más corporativo, institucional o comercial. En una web solemos poner secciones estáticas con nuestros servicios, ofertas, tarifas, galerías, productos, datos de contacto, etc. Los contenidos de la web, por norma general, se actualizan con menor frecuencia y los usuarios no los suelen compartir en redes sociales a menos que incluyan algún contenido de valor.

Un blog tiene un enfoque más personal. Los contenidos de un blog son las entradas o artículos. Estos artículos deben contener valor en sí mismos, en lugar de una intención claramente comercial. Con esto consigues que los usuarios compartan tu contenido si éste es verdaderamente útil, y así atraes tráfico a tu sitio. Un blog sueles actualizarlo con bastante frecuencia, pues se trata de publicar con cierta regularidad.

2. Qué plataforma utilizar

Hay diversas opciones para crear y diseñar tu web o blog. La elección de una u otra va a depender de tu presupuesto, proyecto que vayas a realizar y nivel de conocimientos.

2.1 Gestores de contenido o CMS

Para diseñar tu sitio web o blog puedes usar un gestor de contenidos profesional. ¿Qué es un gestor de contenidos? Es una herramienta que te va a permitir crear y administrar tu web de una manera rápida, sencilla y económica, y con un resultado muy profesional.

Para crear tu página web o blog te recomendamos que uses un gestor de contenidos por su facilidad de uso y sus excelentes resultados, además de ser en estos momentos la opción más extendida en todo el mundo. En algunos casos, como WordPress.com o Blogger, puedes tener tu sitio de manera totalmente gratuita. En los otros casos, tendrás que contratar un plan de hosting y dominio.

2.1.1 Gestores de contenidos más importantes:

WordPress.org

Para los que quieren dar el salto a una página web o blog realmente profesional. Requiere unos conocimientos un poco mayores que la versión .com, y la compra de un hosting y dominio propios. Puedes instalar plantillas avanzadas y plugins, crear tiendas online, etc.

Joomla

Otra de las grandes plataformas de gestión de contenidos, algo más compleja que WordPress aunque con mayor flexibilidad en cuanto a diseño. Las plantillas para Joomla suelen ser también muy avanzadas y visuales.

Magento

Dentro de los sistemas de gestión de contenido, tenemos algunos especializados en la creación de e-commerce. Magento es una de las opciones más famosas por su flexibilidad y funcionalidad, así como por la posibilidad de instalar plantillas avanzadas.

Prestashop

Prestashop, al igual que Magento, está enfocada en la implementación de tiendas online. Ofrece un panel de gestión sencillo y potente, además de plantillas muy atractivas. En España tiene una estupenda acogida.

2.1.2 ¿Cuál es el gestor de contenidos más recomendable?

Recapitulando todo lo dicho anteriormente, nosotros te recomendamos que uses WordPress, la plataforma que usan más personas y empresas para gestionar sus sitios web y blogs, basada en la filosofía del código abierto (open source).

Con un Gestor de Contenidos como WordPress vas a poder crear una web o blog y lo vas a poder hacer relativamente rápido, sin necesidad de ser un experto en diseño y desarrollo web y además con un resultado mucho mejor que empleando otras opciones.

La gran ventaja de WordPress es que posee un panel de administración bastante sencillo y se ha convertido en un estandard para crear páginas web y blogs. Pero ojo, dentro de WordPress hay dos opciones diferenciadas: WordPress.com y WordPress.org.

2.1.3 ¿Qué diferencias hay entre WordPress.com y WordPress.org?

WordPress.com

Si quieres crear una web o blog de manera totalmente gratuita, es decir, sin pagar un sólo euro, puedes optar por WordPress.com. Esta versión gratuita de la herramienta te permite crear tu sitio en poco tiempo y con un estupendo resultado, sin necesidad de tener un conocimiento avanzado, pues la instalación es automática.

Dentro de esta versión .com puedes aprovechar muchas de las funcionalidades clásicas de WordPress: elegir entre varias plantillas predefinidas, asignar categorías a los posts, crear menús personalizados, etc.

Por contra, no puedes instalar los famosos plugins de WordPress y tienes cierta limitación a la hora de personalizar la plantilla, sobre todo si sabes código y quieres exprimir las posibilidades del tema.

Además, por defecto, la dirección URL incluye la extensión /wordpress.com, que no es del todo profesional. No obstante, este /wordpress.com puede retirarse de la URL pagando una pequeña cantidad, entre otras muchas ampliaciones que puedes hacer a la herramienta previo pago.

Esta opción es perfecta para los blogueros que recién empiezan y quieren poner en marcha un blog personal rápidamente, centrándose sobre todo en el contenido, por encima del diseño y las funcionalidades.

WordPress.org

Si lo que quieres es crear un sitio web más avanzado en cuanto a diseño, funcionalidades, etc., te recomendamos claramente que elijas WordPress.org. Con esta versión necesitarás tener un dominio propio, es decir, una URL para tu sitio web, y un hosting, es decir, un servidor con espacio suficiente para alojarlo.

Además, te aconsejamos que te formes antes de lanzarte a trabajar con WordPress.org, pues se trata de una herramienta un poco más compleja que requiere de ciertos conocimientos previos para poder extraerle todo el jugo. Para facilitarte la tarea, te dejamos este artículo donde tienes una explicación paso a paso para instalar y configurar WordPress en tu servidor. o si lo deseas, puedes echarle un vistazo a nuestro curso Presencial WordPress y a nuestro curso Online WordPress para que puedas formarte profesionalmente tal como te lo recomendábamos anteriormente.

Las ventajas de esta opción son enormes: puedes instalar plantillas premium muy avanzadas con las que puedes crear un sitio web profesional con multitud de posibilidades y visualmente muy atractivo.

Aparte de esto, puedes instalar los célebres plugins para WordPress, que son aplicaciones en su mayor parte gratuitas que te van a servir para implementar tiendas online, optimizar el posicionamiento SEO de tu sitio, disminuir los tiempos de carga de la página y miles de cosas más.

Y además, si sabes un poco de código HTML, CSS, Javascript o PHP, podrás editar y personalizar el código de la página, con lo cual lograrás un gran resultado. Otra importante ventaja es su universalidad: existe una enorme comunidad de desarrolladores de la herramienta que aseguran su buen funcionamiento y optimización, así como la creación de plugins para casi cualquier cosa que se te ocurra. Y casi todos ellos gratuitos.

En esta infografía del Curso de Community Manager puedes ver las principales diferencias entre WordPress.com y WordPress.org:

2.2 Plataformas online gratuitas

Si no quieres gastar dinero pero al mismo tiempo deseas una plataforma fiable y de calidad puedes optar por herramientas como las que te listamos a continuación:

WordPress.com

La versión gratuita de WordPress para crear tu sitio web, sobre todo enfocada a blogs. No necesitas pagar alojamiento ni dominio, aunque no puedes contar de entrada con la infinidad de opciones que ofrece la versión .org. (pagando una serie de mejoras puedes ampliar tu espacio de servidor, comprar un dominio propio, aumentar las opciones de personalización etc.). Ideal para iniciarse en el mundo de los blogs.

Blogger

Uno de los clásicos. Blogger fue una de las primeras herramientas online para la publicación de contenidos. Permite mucha personalización accediendo directamente al código de la plantilla, pero para un usuario no experto en código se convierte en una opción más complicada si se pretende un resultado profesional.

Medium

Medium es una nueva red social pensada para generar contenidos de calidad y que está comenzando a crecer bastante. Su punto fuerte es la posibilidad de crearte de manera gratuita un blog estéticamente muy atractivo inspirado en publicaciones online premium. Ofrece bastante interacción para promocionar tu contenido, edición compartida, colecciones, etc.

Tumblr

Tumblr es una plataforma gratuita de microblogging que te permite crear una web o blog y subir todo tipo de contenidos como textos, fotos, audios y vídeos, citas, enlaces, etc. Al ser una red social fomenta mucho la interacción y la difusión del contenido mediante reblogueos, me gusta y comentarios. Además, si eres un usuario un poco más avanzado, te puede resultar útil la opción de modificar el código HTML de la página.

2.3 Código

Por último, si eres muy experto, puedes crear un sitio web sin ninguna plataforma previa, es decir, directamente con código HTML, CSS, PHP, Jquery, etc. y empleando un software de edición de código. Las principales herramientas para edición manual de código que recomendamos son:

• Dreamweaver
  
• Coda
  
• Sublime Text

Para hacer una web con código necesitas ser un verdadero especialista y tener bastante experiencia previa. El principal inconveniente si eliges esta opción, aparte de la dificultad, es que los tiempos de desarrollo se pueden alargar mucho. Para evitarlo, te recomendamos que utilices una plantilla ya prediseñada sobre la que empezar a trabajar.

3. Contratar un servicio de hosting

Para acertar a la hora de contratar tu hosting debes tener en cuenta diversos aspectos como el precio, la velocidad, el servicio de soporte, espacio, sistema de copias de seguridad automáticas o backups, etc.

En cuanto a la velocidad. Un hosting rápido será muy positivo para el rendimiento de tu sitio web y esto beneficiará a tu posicionamiento SEO. En cambio, si la respuesta de servidor es lenta, aparte de ser perjudicial para la velocidad de carga de tu sitio, puede convertirse además en una molestia si tarda demasiado en guardar cuando haces cambios en tu web.

En cuanto al servicio de soporte, si vas a trabajar con WordPress supone una gran ventaja contar con un servicio de soporte técnico específico, el cual te va a ayudar a solucionar posibles problemas puntuales. Además, los servidores especializados en WordPress tienen todas las configuraciones necesarias para que puedas trabajar con la herramienta sin ningún problema.

Respecto al espacio de servidor, para trabajar con WordPress correctamente, te recomendamos que elijas un plan que incluya como mínimo un 1GB de espacio. Ten en cuenta que hay plantillas que instalan una gran cantidad de contenido demo. No es aconsejable estar al límite de espacio en tu servidor, ya que puede darte bastantes problemas al subir contenidos, instalar plantillas y plugins, etc.

En lo que respecta a los backups, ni que decir tiene que un servidor que tenga un buen sistema de copias de seguridad te puede salvar en más de una ocasión y evitarte malos ratos.

Qué proveedor de hosting recomendamos

Nosotros te recomendamos Webempresa, pues se trata de un hosting que usamos para alojar algunas de nuestras páginas web y lo conocemos bastante bien. Ofrece un servicio de soporte técnico rápido y eficaz. Además, incluye el dominio en el precio del hosting. Este es el servicio de hosting que recomendamos tanto en el curso presencial de WordPress como el curso online en Aula CM.

4. Elegir un dominio

Antes de adquirir tu dominio debes hacer una reflexión previa y escoger la mejor opción, pues una vez comprado no podrás cambiarlo, a menos que adquieras otro, con el consiguiente gasto extra. También es posible que ya tengas comprado un nombre de dominio con un proveedor y quieras usarlo con el nuevo servicio de hosting que has contratado.

4.1 ¿Cómo traerte un dominio que ya tienes a otro hosting?

Para usar un dominio que hayas comprado con otro proveedor, tienes dos opciones:

a) La opción más recomendable y rápida es realizar un apuntado DNS del dominio al hosting nuevo. Para hacer un apuntado de DNS de tu dominio, de modo que puedas usarlo con el hosting recién contratado pero sin dejar de tenerlo con el proveedor actual, debes pedir al hosting las DNS, que normalmente son dos códigos (a veces incluyen la dirección IP) que tienes que insertar dentro del panel de control de tu proveedor del dominio, en un apartado que diga algo así como “Configuraciones DNS”, “Configuración de direcciones DNS”, etc.

b) La otra opción es transferir el dominio de un hosting a otro. Para ello, en primer lugar necesitas pedir un Auth Code o Código de Autorización al proveedor actual del dominio. Posteriormente, deberás acceder al panel de control del nuevo servicio de hosting que hayas contratado y una vez ahí solicitar una Transferencia de Dominio. Durante el proceso te pedirán que insertes el Auth Code, el cual servirá para validar la operación. La ventaja de transferir el dominio es que centralizas todo con el mismo proveedor. El inconveniente, que suele tardar bastante.

4.2 Consejos para elegir tu nombre de dominio

1. Intenta incluir palabras clave en el dominio. Esto va a ser muy importante para el posicionamiento SEO de tu página web o blog.

2. Evita nombres de dominio ambiguos. Intenta que el dominio sea fácil de entender y de deletrear, de modo que no cause dificultad a la hora de teclearlo.

3. Busca un dominio memorable, es decir, fácil de recordar.

4. Empieza por comprar el dominio genérico .com. También es recomendable que compres otros dominios con extensiones genéricas para evitar que otro pueda suplantar tu nombre de marca en internet.

5. Si tu estrategia se focaliza en un país específico, emplea el dominio propio de ese país. Por ejemplo, en España es el .es.

6. Busca un nombre de dominio corto, de máximo 20 caracteres.

7. Evita el uso de guiones, mayúsculas, eñes, etc.

 5. Elegir plantilla

Uno de los puntos clave a la hora de crear tu página web o blog es la correcta elección del tema. Una buena plantilla te va a permitir comenzar a diseñar sobre una base adecuada en cuanto a diseño y estructura, y también en lo que respecta al SEO. Una plantilla bien estructurada con los encabezados h correctamente codificados y que sea responsive supone una gran ventaja de cara al posicionamiento en buscadores. Además, hay otros aspectos que has de tener en cuenta para detectar una plantilla premium que realmente merezca la pena:

5.1 consejos para elegir una plantilla premium

1. Que sea compatible con todos los navegadores principales y se adapte a todos los dispositivos.

2. Que ofrezca la posibilidad de importar contenido demo o contenido ficticio, de modo que puedas comenzar a diseñar sobre páginas ya creadas. De hecho, las mejores plantillas suelen incluir bastantes demos predefinidas y específicas según el tipo de web que quieras crear, ya sea una web de una agencia, un bufete de abogados, una clínica dental, un fotógrafo, un artista, un e-commerce, etc.

3. Que incluya plugins premium y, sobre todo, algunos de pago como LayerSlider, Revolution Slider, Visual Composer, etc

4. Que sea compatible con los plugins más importantes.

5. Que tenga un buen número de descargas. Una plantilla que lleve mucho tiempo a la venta y tenga un número reducido de descargas probablemente no ofrezca garantías.

6. Que reciba actualizaciones constantes. Las plantillas que son actualizadas a menudo suelen estar al día en cuanto a compatibilidad con la actual versión de la plataforma, plugins más importantes, etc. Además, siempre hay pequeños fallos o retoques que hacer a una plantilla y gracias a las sugerencias de la comunidad de usuarios los desarrolladores reciben un feedback sobre los aspectos que pueden ser mejorados y los implementan en cada nueva actualización. Si has encontrado un tema y hace tiempo que no recibe una actualización será mejor que te lo pienses dos veces, ya que probablemente el desarrollador de la plantilla la ha abandonado a su suerte y no vas a tener un soporte óptimo si encuentras algún problema en el futuro.

7. Que tenga una amplia sección de opciones del tema o theme options. Cuando mejor es una plantilla, más posibilidades de personalización te ofrece sin que tengas que recurrir a tocar código. Funciones como elegir tamaños de logo diferentes según el dispositivo, modificar todas las tipografías del sitio, colores, estructuras de página, zonas de widgets, etc. Esto no puedes saberlo antes de adquirir el tema, pero siempre puedes preguntar a otros diseñadores, pues todos tienen sus favoritas y si lo son es porque realmente funcionan bien y te facilitan las cosas.

Además, en este post te damos más consejos para elegir plantilla de WordPress, diferencias entre unas y otras, etc.

5.2 Dónde conseguir plantillas premium

Hay diversos sitios en internet donde adquirir plantillas para diseñar tu sitio web. Sin duda el mejor lugar donde conseguir plantillas es Themeforest, pues contiene una recopilación inmensa de temas de calidad para diversas plataformas como WordPress, Prestashop, Magento, Drupal, etc.

Los temas que puedes encontrar en este sitio son por lo general muy buenos y se suelen actualizar con frecuencia. Además, si tienes dudas sobre alguno de ellos, tienes un foro de soporte en cada tema para preguntar al diseñador cualquier duda que pueda surgirte.

Aparte de Themeforest, hay otros lugares donde adquirir plantillas:

• Elegant Themes
  
• WooThemes
  
• Template Monster

Además, te invitamos a visitar nuestro panel de Plantillas de WordPress en Pinterest, donde encontrarás una amplia recopilación de temas que hemos seleccionado por su calidad, aspecto atractivo, funcionalidades, opciones, etc.

5.3 Plantillas premium para hacer una tienda online

Si además quieres implementar un e-commerce en tu sitio web, en este artículo te ofrecemos un listado de las 20 mejores plantillas para hacer una tienda online con las plataformas WordPress, Magento y Prestashop.

6. Cómo diseñar el contenido

Cuando trabajas con un gestor de contenidos ya tienes todo a tu favor, pues diseñar sobre una buena plantilla te va a ahorrar tener que ser un experto en código. Aun así, hay un aspecto que hasta hace relativamente poco no se tenía en cuenta, y es el de la maquetación de los contenidos dentro de las propias secciones.

Hace un tiempo, si no sabías HTML y CSS resultaba muy difícil dar un aspecto profesional y atractivo a tus secciones dentro de la página. Ahora, con la llegada de los plugins para maquetación web tienes a tu disposición herramientas muy avanzadas que te van a permitir realizar diseños espectaculares de manera sencilla y rápida.

De entre todos ellos, nosotros recomendamos especialmente Visual Composer para WordPress, por su facilidad de manejo, eficacia y calidad. Plugins como Visual Composer han revolucionado el modo de diseñar en WordPress. En este enlace te ofrecemos una mega-guía para Visual Composer, con un manual de uso y un listado completo de los elementos que puedes insertar con esta magnífica herramienta. En el curso Presencial de WordPress y también en el curso online de Aula CM te enseñamos a crear una página web completa y profesional con el plugin Visual Composer.

Aparte de Visual Composer existen otras opciones similares:

• Page Builder
• Live Composer
• Awesome Builder
• Elegant Builder

7. Optimizar el posicionamiento SEO

Un elemento esencial cuando creas una página web o blog es el posicionamiento en buscadores. Si vas a usar WordPress, en un apartado anterior hemos comentado las ventajas de contar con una plantilla premium para el SEO. Aparte de la buena elección del tema, tenemos disponibles plugins gratuitos muy completos que sirven para optimizar el SEO y que son bastante fáciles de configurar.

7.1 Plugins para mejorar el posicionamiento SEO

• SEO Yoast
• All in One SEO

En este artículo te hemos hecho una lista de 40 plugins de posicionamiento SEO para WordPress.
Además, podemos emplear plugins para optimizar el tiempo de carga del sitio web, que constituye otro punto a tener en cuenta de cara a Google. Los dos que te listamos a continuación son también gratuitos:

• W3 Total Caché.Optimiza el rendimiento del servidor al guardar la página en caché.
• Smush It. Optimiza el peso de las imágenes del sitio, ayudando a reducir los tiempos de carga.

Si estás usando otros gestores de contenido como Joomla, Drupal, etc., tienes también a tu disposición todo tipo de módulos y extensiones que te ayudarán con el posicionamiento y optimización.

7.2 consejos SEO

Aparte de los aspectos técnicos de la plantilla, existen una serie de trucos que te van a ayudar a posicionar mejor tu sitio.

1. Detecta cuáles son tus palabras clave y usa una buena densidad de ellas en el contenido, tanto en las secciones de tu página como en los artículos de tu blog, además de las meta descripciones, las URL, títulos y negritas. Para un estudio de palabras clave puedes utilizar estas herramientas:

• Google Adwords
• Google Trends
• Keyword Tool