Qué herramientas de diseño web necesitas para convertir tu blog en una obra de arte y crear una home que atraiga suscriptores como un imán

Este es un post invitado de Sergio Gómez, creador de La Web de tu vida.

[toc]

Recuerdo cuando hace años oía a la gente decir que habían hecho una web con un tal WordPress.

«¿De qué estarán hablando?» pensaba yo.

«¿Una herramienta que te permite hacer una web 100% operativa en pocos minutos? Tiene que ser mentira o magia negra, una de dos».

Fue entonces cuando yo, que había estudiado algo de programación web y había hecho las típicas webs rastreras con el bloc de notas y el Dreamweaver (una de las pocas herramientas de diseño web que conocía), me empecé a interesar por ese tal WordPress.

¡Joder!

¡Era verdad!

Haces unos cuantos clics y ya tienes tu web montada, ¡qué pasada!

A raíz de ahí, WordPress se convirtió en mi principal afición, para que años más tarde pasara a convertirse en mi profesión.

Pero para llegar hasta ahí, en el camino he tenido que aprender un montón de cosas y conocer las mejores herramientas de diseño web para conseguir buenos resultados.

La primera web que hice fue el típico blog cutre con una plantilla gratis. Por aquel entonces era de los que pensaba: “¿para qué pagar por algo si hay otras opciones gratis?”.

Además, en ese momento empezaba a descubrir este mundo y era una simple afición. No iba a gastarme la pasta habiendo otras alternativas. Para eso me hubiera aficionado a la pesca o al golf y ahora llevaría sudaderas Lacoste colgadas al cuello.

Pero más tarde llegó el momento de tener que hacer webs más serias y las alternativas gratuitas ya no eran una buena opción.

Para hacer una web o un blog profesional no basta con instalar WordPress y cualquier tema gratis. Hay que conocer algunas herramientas básicas de diseño web.

Y eso, querido futuro nómada digital, es lo que quiero enseñarte hoy.

[bctt tweet=»Para hacer una web profesional hay que rascarse un poco el bolsillo» username=»iviajera»]

La importancia de contar con buenas herramientas de diseño web

El diseño de una web es algo sumamente importante. Y si no me crees, pregúntale a Antonio G que contó con un equipazo entero para llevar a cabo el rediseño de Inteligencia Viajera.

Brutal, ¿no?

Han trabajado más profesionales en esta web que en la Sagrada Familia. 😉

Esto te da una pista de que el diseño de tu web o blog no es ninguna broma y que no hay que dejar nada al azar.

Pero tú, si aún no ganas más de 10.000 euros al mes con tu blog, no puedes permitirte el lujo de contratar a un equipo completo para que se encargue de todos los detalles de tu sitio.

Si ese es tu caso no te preocupes, porque cuando acabes de leer este artículo conocerás algunas de las mejores herramientas de diseño web actuales con las que convertir tu web en una auténtica obra de arte.

Mucha gente sabe crear webs, pero poca gente sabe hacer un buen diseño

Lo que te comentaba al principio.

Mucha gente vive el mismo proceso que yo en mis inicios con WordPress. Pero en lugar de crear cutreblogs para aprender, pretenden hacer de buenas a primeras webs profesionales sin tener los conocimientos de diseño adecuados.

Seguro que has oído mil veces la frase “si no estás en Internet no existes”.

Bien, pues es cierta.

Pero no solo vale con estar, hay que saber estar.

¿Tú entrarías en un restaurante que se anuncia como comida gourmet pero que tiene la pared descorchada, la barra llena de restos de comida, la mitad de las luces fundidas y las mesas y las sillas rotas?

Yo no.

¿Qué clase de confianza das a tu público con esas pintas?

Con tu web pasa lo mismo. Tienes que construir un sitio agradable para atraer a la gente, cual adolescente que se maquilla y se pone ropa sexy cada vez que sale a la discoteca a ligar.

Tú quieres llevártelos a todos de calle, no que salgan corriendo asustados de tu web.

[bctt tweet=»Estoy en Internet, luego existo. Pero además… ¡Me los voy a llevar a todos de calle! » username=»iviajera»]

Cuando fui a registrar un dominio para mi web, una de mis primeras opciones ya estaba ocupada. Saqué mi disfraz de vieja del visillo y fui a chafardear «qué» estaba ocupando ese dominio, pues tenía que ser una web digna de ese nombre.

Pero esto fue lo que me encontré:

Lo he emborronado para guardar el anonimato de la web y del dueño, aunque el diseño se puede ver bien.

¿Cuál es la conclusión que saco yo con solo echar un vistazo?

Está ofreciendo sus servicios y productos en una web propia de 1995 en el año 2017. Si yo fuera un posible cliente, cerraría la web a la velocidad del rayo y me iría a la competencia.

El elemento principal que marca el diseño de tu web

Antes de entrar en lo que es el diseño, te dejo aquí un enlace con un tutorial sobre WordPress que escribió Javier Gobea para Inteligencia Viajera.

Todo lo que necesitas saber antes de llegar a este punto, lo tienes en ese post.

Ahora ya sigo. Cuando tienes una web hecha con WordPress…

El principal elemento que marca su diseño es la plantilla que tienes instalada.

Si la plantilla tiene un diseño y unas opciones de mierda, ya puedes tocar todo lo que quieras e instalar todos los plugins que haya, que difícilmente podrás conseguir algo decente sin ponerte a modificar medio código de la plantilla.

Si ya tienes una web pero no te convence demasiado su aspecto o simplemente estás pensando en darle un lavado de cara haciéndole un rediseño, tienes que plantearte 2 cuestiones:

1. Si la plantilla que utilizas puede dar mejores resultados.
2. Si será mejor empezar de cero y elegir una nueva que se adapte mejor a lo que buscas.

En el caso de que aún no hayas creado tu web, párate a pensar cómo te gustaría que fuera su diseño. Seguro que tienes algún blog de referencia en el cual te puedes inspirar.

Puedes preguntarle al dueño qué plantilla está usando, o incluso muchos lo tienen puesto en el pie de página, como Antonio G:

Inciso:

Inteligencia está basada en Genesis Framework y usa un child theme hecho a medida por Óscar. Si quieres echar un ojo a todo lo que ofrece Studio Press, aquí te dejo su web.

El caso es que si eliges un buen tema, tendrás mucho camino hecho y luego todo irá rodado. Como te he dicho al principio, huye de las plantillas gratuitas si lo que quieres es tener una web profesional que no dé vergüenza enseñar.

Cuando ya tienes un buen tema instalado, es hora de dejar volar tu creatividad y ponerte a diseñar las principales páginas de tu sitio. Para ello, vas a necesitar algunas herramientas de diseño web como las que vamos a ver a continuación.

Las mejores herramientas de diseño web

Y ahora que ya sabes la importancia de tener un buen diseño y que debes escoger bien la plantilla que vas a utilizar, te voy a enseñar algunas de las mejores herramientas de diseño web actuales.

Si algo bueno tiene WordPress, es que puedes hacer webs increíbles sin tener la necesidad de tocar una puñetera línea de código.

Es casi magia.

Pero en muchas ocasiones, no basta con instalar una plantilla bonita. Esta se encarga de la estética principal, pero necesitas algo más para diseñar todas las páginas más importantes de tu sitio.

A continuación te voy a enseñar algunas de las herramientas de diseño web con las que podrás poner en práctica las 8 técnicas de diseño para aumentar tu tasa de conversión que ya te explicó Óscar Fernández en un pedazo de artículo.

1. Constructores o maquetadores de páginas

Para empezar, voy a hablar de los que para mí son los mejores aliados con los que puedes contar para crear páginas increíbles en WordPress: los constructores de páginas o también conocidos como maquetadores o builders (para los más cools).

Son probablemente las mejores herramientas con las que puedes contar, ya que te permiten diseñar todas las páginas de tu web de manera simple y rápida consiguiendo un resultado atractivo y profesional para tus visitas.

Pero antes hay una buena y una mala noticia:

• La buena: lo mejor es que cualquier persona sin conocimientos de programación puede aprender a utilizarlos y obtener iguales o mejores resultados que una persona que se tira horas picando código.
• La mala: WordPress no cuenta con ninguna de estas herramientas en su instalación por defecto.

En WordPress la posibilidad de crear páginas con su editor es bastante limitada. Tanto, que ni siquiera puedes crear dos columnas sin tener que escribir algo de código.

¿Cómo hacerte con uno de estos maquetadores?

De 2 maneras:

1. Instalando una plantilla que tenga su propio constructor integrado.
2. Instalando un plugin constructor que funcione con cualquier plantilla.

Vamos a ver algunas de las mejores opciones que tienes actualmente de cada una de ellas.

A. Constructores integrados en la plantilla de WordPress

Existen temas que tienen su propio constructor totalmente integrado en el código. Hay personas a las que no les gusta mucho esta idea, porque dicen que es cargar el tema con código y opciones que puede que luego no utilices.

Pero yo me pregunto:

Si luego le vas a instalar un plugin constructor para diseñar tus páginas, ¿qué mejor que usar uno que venga ya con la plantilla?

Esto puede ser una ventaja, porque al formar parte del propio tema, no es un añadido que tú le pongas y que pueda lastrar la velocidad de tu web.

Al contrario.

Los desarrolladores que lo han creado ya lo han hecho pensando en que cargue rápido, pero es que con cada actualización lo siguen optimizando para que se note lo menos posible esa “carga extra”.

Pero bueno, esto daría para otro artículo aparte, ¡y aquí hemos venido a hablar de las mejores herramientas de diseño web!

Así que vamos a ver algunos de los mejores temas que ya vienen con su constructor, que te lías, Sergio.

Divi

Divi de Elegant Themes es uno de los temas más conocidos de WordPress y es el que decidí utilizar en mi blog.

A pesar de venir con su propio constructor y ocupar más que otras plantillas, consigue una velocidad de carga de menos de un segundo optimizándolo un poco.

Es supercompleto y destaca por su facilidad de uso y sus casi infinitas opciones de personalización. En poco tiempo, cualquier persona puede hacerse con él y configurar en un plis plas todo el aspecto visual de la estructura de su web (cabecera, menús, barra lateral, etc).

Su constructor, Divi Builder, cuenta con 46 módulos diferentes que puedes usar para diseñar tus páginas arrastrándolos y soltándolos en el lugar que quieras.

Puedes diseñarlas desde la zona de edición de WordPress (back-end), o directamente desde la página para ver en directo cómo va quedando (front-end).

Me pasaría horas hablando de Divi, pero hay que dejar paso al resto de herramientas de diseño web. Si quieres conocer más sobre este plugin, puedes leer esta entrada en la que me explayo sobre él.

Ultra

Ultra de Themify es similar a Divi, pero con algunas características que lo hacen diferente.

Es una plantilla más reciente y aún le faltan algunas cosas por mejorar, pero es sin duda una buena opción si lo que quieres es un tema con su propio constructor integrado.

Con él, al igual que con Divi, puedes configurar el diseño principal de toda tu web con las también casi infinitas opciones de personalización que tiene.

Su constructor no es tan potente como el de Divi porque solo cuenta con 23 módulos para añadir a tus páginas, pero también es verdad que son los principales que se usan hoy en día en el diseño web.

Aunque si eliges el modo de suscripción anual de Themify, tendrás disponible 11 módulos más para añadir.

También puedes diseñar tu página mientras ves en vivo cómo está quedando, cosa que se agradece porque permite ahorrar bastante tiempo.

B. Plugins constructores de páginas

Si ya tienes o prefieres instalar un tema que no viene con su propio constructor, puedes instalar un plugin para suplir esa función. Si es que en WordPress hay soluciones para todo.

Hay bastantes plugins que sirven para crear y maquetar páginas fácilmente y con todos ellos puedes lograr buenos resultados. Pero hay algunas diferencias que pueden hacerte elegir uno u otro.

A continuación te muestro algunos de los más conocidos y utilizados.

Thrive Architect

Thrive Architect es un plugin desarrollado por Thrive Themes, una agencia que cuenta en su catálogo con plugins superutilizados en todo el mundo (luego veremos otro suyo).

Este constructor te permite añadir 36 módulos diferentes y editarlos haciendo clic directamente sobre ellos.

Lo bueno de Architect es que muchos de sus módulos son muy visuales de cara al usuario. Por ejemplo las llamadas a la acción, las listas, las tablas de contenidos, etc.

Beaver Builder

Beaver Builder es otro de los mejores plugins para diseñar páginas en tu web con facilidad y con un resultado profesional. Tiene 31 módulos que puedes arrastrar y soltar en el lugar de la página donde quieras colocarlos.

Pero además, puedes ampliarlo adquiriendo algunos de los addons que hay a la venta. Así consigues tener más de 50 o 60 módulos que puedes añadir en tus páginas.

Elementor

Elementor es un plugin de (relativamente) reciente creación que está revolucionando WordPress.

Para ser un plugin tan nuevo, ha conseguido estar a la altura (¿e incluso superar?) a los dos plugins mencionados arriba. Y no solo eso, sino que además, ¡es gratis! Bueno, mejor dicho, tiene una versión gratis y otra de pago.

La versión gratis tiene 28 módulos, mientras que la versión de pago añade 15 módulos más (portfolio, formulario de contacto, tablas de precios y últimas entradas, entre otros).

Pero la verdad es que con la versión gratuita puedes empezar a hacer cosas muy chulas, vale la pena probar este plugin. Si quieres utilizar un buen constructor sin tener que pagar un céntimo, te animo a que instales Elementor y dejes tu opinión en los comentarios.

2. Integración de formularios de suscripción

Si lees asiduamente el blog de Inteligencia Viajera, sabrás que no añadir un formulario de suscripción es uno de los errores que no debes cometer. Un formulario para que tus visitas puedan dejarte sus emails es algo que deberías tener en tu blog desde el minuto uno.

De esta manera, podrás recoger los correos de las personas que visitan tu web para luego comunicarte directamente con ellos.

Vamos, lo que se conoce como email marketing de toda la vida de internet.

¿Y cómo puedes añadir estos formularios?

Pues con… plugins de suscripción.

Los plugins de suscripción te permiten añadir a tu web formularios desde donde los usuarios pueden suscribirse. Así después podrás enviarles emails con tus últimas entradas, tus ofertas comerciales o con lo que quieras (echa un ojo al post que Álex Novás escribió en iV sobre embudos de venta. Seguro que alucinas con todo lo que se puede hacer).

Al igual que con los constructores, también existen bastantes plugins con los que añadir estos formularios.

Sin embargo, para mí, solo con uno de ellos vas a conseguir el nivel de excelencia requerido para poder integrarlos al 100% con el resto de tu web y su diseño.

Así que voy a ir al grano y me voy a centrar en… Thrive Leads.

Thrive Leads

Antes hablaba de Thrive Themes con su Thrive Architect y ahora es el turno de su plugin de suscripción Thrive Leads.

Es sin duda el mejor plugin que existe para crear formularios de suscripción e integrarlos a la perfección en tu web, y si no me crees, echa un ojo a este combate a muerte.

Con él vas a poder crear cualquier formulario que estés imaginando e insertarlo en cualquier lugar de tu web.

Si quieres ir en serio con tu proyecto, esta herramienta de diseño web y suscripción no puede faltar en tu caja de herramientas.

Su funcionamiento es muy similar a Architect. De hecho, es este constructor el que se utiliza para diseñar los formularios, así que tienes infinitas posibilidades de personalización.

Dónde colocar los formularios de suscripción

Y digo formularios, no formulario en singular.

¿Te has dado una vuelta por la web de Antonio G?

Lo primero que te encuentras cuando entras en Inteligencia Viajera es un formulario de suscripción bien grande totalmente integrado con el resto del diseño de la página.

Pero no queda aquí la cosa.

Si llegas hasta el final de la página, ¿qué te encuentras?

¡Bingo! Otro formulario de suscripción que le queda como anillo al dedo a la web.

¿Y cuándo acabas de leer una entrada?

¡Pues otro!

¿Y cuando llevas un rato navegando por alguna de sus páginas?

Se desliza otro formulario sin que te des cuenta y lo tienes ahí esperando a que le dejes tu correo para así llevarte su guía de regalo.

¿Por qué lo hace? ¿Por qué allá dónde vas te encuentras con uno de ellos?

Ni más ni menos que para aumentar su tasa de conversión.

Cuantos más formularios se encuentre un usuario, más posibilidades hay de que acabe suscribiéndose a su lista de correo.

¿Y cómo ha podido crear esa gran cantidad de formularios y que queden todos perfectamente con el diseño de la web?

Pues usando Thrive Leads.

Cómo diseñar una página paso a paso

Ya conoces las mejores herramientas de diseño web, así que ahora vamos con la parte práctica. Por ejemplo, cómo crear una página de inicio.

Tomaré como ejemplo la página de inicio de Inteligencia Viajera, ya que me parece una página genial que contiene muchos de los elementos que se utilizan hoy en día en el diseño web.

1. Crea la sección superior con tu foto y una llamada a la acción

Para diseñar tus páginas con cualquiera de los constructores que hemos visto, ya sean los que vienen integrados en el tema como que se instalan aparte, puedes crear una nueva página en WordPress.

Uses el constructor que uses, te aparecerá un botón para editar la página con él en lugar del editor por defecto de WordPress.

En este caso me aparece el de Divi porque es el que utilizo yo. Al pulsar ese botón, el editor de WordPress desaparecerá para dar lugar a la edición con el constructor.

El primer elemento que hay que agregar es una sección.

Las secciones son los “contenedores” de los diferentes módulos y pueden tener varias filas de diferentes columnas.

Esto sería una sección (recuadro azul) con una fila de dos columnas (recuadro verde) en las que puedes añadir los módulos que quieras.

Si te fijas en la página de inicio de Inteligencia Viajera, la primera sección (después de la barra superior) se compone de dos columnas:

• Una para una llamada a la acción.
• Otra para la foto de Antonio.

La llamada a la acción puede ser un botón que te dirija a la página de tu web que quieras o un formulario de suscripción (así es como lo tiene Inteligencia Viajera).

Como aún no hemos creado un formulario (lo haremos luego), dejamos la primera columna en blanco y vamos directamente con la segunda.

Agregamos el módulo “imagen” y subimos nuestra mejor foto recortada en formato PNG sin fondo.

Oh, yeah.

Cuando la gente entre ahora a tu web ya te puede poner cara automáticamente. Das esa confianza tan necesaria en Internet.

Pero falta algo, queda muy soso todo en blanco, así que vamos a añadir un fondo a la sección. Para esto puedes editar las opciones de cada una de las secciones, filas o módulos, haciendo clic en el botón de edición de cada una.

En el caso de Divi, ese botón es una rueda dentada. En otros plugins, el icono para editarlos puede ser un lápiz u otra cosa. Para añadir un fondo, tienes que entrar en la edición de la sección.

Ahí puedes indicar cómo quieres que sea el fondo. Tú eliges si quieres que sea de un color, añadir una imagen o incluso insertar un vídeo. Para este ejemplo, voy a poner una imagen que he descargado.

Luego veremos cómo crear y añadir el formulario de suscripción en la primera columna, ahora vamos a crear la segunda sección.

2. Incluye tus servicios u otro elemento principal de tu negocio

Después de la primera sección con tu foto y la llamada a la acción, esta sección será la segunda más vista por las personas que visiten tu web. Por eso tienes que incluir en él lo que más te interesa que vean.

Si ofreces servicios a través de tu web, es el sitio ideal para incluirlos. Si tienes algún producto estrella que quieras vender, ahí es donde tiene que estar. Si quieres ganar dinero gracias al marketing de afiliación, incluye algunos de los servicios o productos que más beneficio te reporten.

Aquí tienes cómo lo tiene planteado Inteligencia Viajera.

Para ello, agregamos otra sección con dos filas.

1. La primera: con una columna que es donde irá el título.
2. La segunda: con tres columnas que será donde irán los productos o servicios.

En la primera fila añadimos el módulo “texto” o “encabezado” (depende del constructor que utilices), y escribimos algo representativo de lo que ofrecemos al usuario.

En la segunda fila añadimos el módulo “anuncio”, “caja de icono/imagen” o “características” (de nuevo, depende del constructor que utilicemos).

Estos módulos te dan la posibilidad de añadir un icono predefinido o de subir la imagen que tú quieras. También puedes escribir el título del servicio o producto y añadir una pequeña descripción. Y por supuesto, también tienes la posibilidad de añadir un enlace para que cuando alguien haga clic en ellos vayan a parar a la página que quieras.

3. Crea secciones con fondos que hagan contraste con el resto de la página

Es importante crear secciones que tengan un alto contraste con el resto de la web, pues evita que el diseño sea monótono y ayuda a diferenciar una sección de otra.

Puedes aprovechar para añadir alguna frase que quieras que destaque por encima del resto o para escribir los títulos de la siguiente sección.

Esto es lo que te encuentras cuando vas bajando por la página de inicio de Inteligencia Viajera:

Es inevitable prestar atención a esta frase porque destaca sobre las demás.

Para conseguir este resultado, solo tienes que añadir una nueva sección con una fila de una columna y darle un color de fondo que destaque sobre el color de fondo blanco de la web. Pero eso sí, utiliza la paleta de colores que utilizas en el resto de la web.

Si en tu web utilizas el naranja y el gris oscuro, no vas a poner una sección de color rojo chillón. Tiene que haber una armonía en el conjunto de la web.

Antonio G también juega con dos colores para resaltar partes del texto. Esto lo puedes hacer fácilmente desde la edición del módulo texto. Seleccionas con el ratón el texto que quieres destacar y eliges un color para él.

4. Escribe una descripción sobre ti o sobre lo que haces

La página de inicio es un lugar perfecto para añadir pequeñas descripciones sobre ti o sobre tu negocio, pero no tienes que incluir toda la información de golpe (para eso es mejor crear una página específica).

Antonio G te explica de forma resumida quién es él y de qué va Inteligencia Viajera, pero es en esta página donde ya entra totalmente en detalle con pelos y señales.

También incluye una lista con los beneficios que te puede traer contar con su ayuda, todo desde su experiencia personal. Y todo esto con un diseño impecable que te anima a seguir leyendo y queriendo conocer más sobre él y su proyecto.

Para hacer una lista puedes utilizar el módulo “texto”. Aunque si usas Thrive Architect, también tiene un módulo “lista” con el que crear listas con imágenes, en lugar del típico punto que aparece por defecto en WordPress.

En el caso de la descripción de tu «Sobre mí», puedes incluir una sección con una fila de dos columnas, siendo la primera más estrecha que la segunda, que es tal y como la tiene Antonio G.

Utilices el constructor que utilices, vas a poder elegir entre varios tamaños en las columnas de las filas.

Añade un módulo “imagen” en la columna de la izquierda para insertar una foto tuya y un módulo “texto” en la de la derecha para explicar un poco quien eres. Este sería el resultado:

Aunque esté “copiando” el diseño de Inteligencia Viajera, con cualquier constructor tienes miles de posibilidades para crear diseños diferentes. Tu imaginación es la que manda.

5. Añade testimonios de personas

Puedes incluir testimonios y recomendaciones de clientes contentos o de compañeros de profesión con los que has trabajado para reforzar tu credibilidad.

Muchos constructores vienen con un módulo específico para insertar estos testimonios en los que puedes introducir el nombre, otros datos de la persona y subir una foto suya.

Pero en el caso de que el constructor que utilices no lo tenga, no es difícil improvisar algo tú mismo.

Introduciendo un módulo de imagen para insertar una foto de la persona y otro de texto en el que escribir su testimonio, puede quedar un buen resultado.

6. Añade todos los «medios» donde has aparecido

Si te han entrevistado en algún medio, si algún periódico ha publicado un artículo sobre ti, si has escrito en algún blog reconocido, etc, puedes añadir una sección con los logotipos de todos esos sitios para reforzar tu autoridad.

Algunos constructores tienen un módulo para ello, pero si el tuyo no lo tiene, con utilizar el módulo de imagen es suficiente.

7. Pon las últimas o las mejores entradas de tu blog

Por último, es una buena idea poner una sección con tus últimas entradas o una selección de las entradas más leídas por tus usuarios, que es como lo tiene Antonio G.

En el caso de que pongas las últimas entradas, tu página de inicio se irá actualizando cada vez que publiques una entrada nueva, lo que Google puede considerar como contenido actualizado (sí, y eso ayuda al posicionamiento web).

Para ello, una vez más, algunos constructores tienen un módulo “blog” o “entradas”, que hace justo lo que queremos.

Te permiten introducir el número de entradas que quieres que se muestren, eliminar los datos que no quieres que aparezcan como la fecha de publicación, autor, categoría, etc, y mostrar la manera en cómo se ven las entradas.

Si en el constructor que utilizas no viene un módulo como este, puedes hacer uso de los mismos módulos que hemos utilizado para añadir los servicios. Quedaría algo parecido a la sección de los mejores artículos del blog de Inteligencia Viajera.

8. Crea el formulario de suscripción

Si te acuerdas, habíamos dejado la primera sección incompleta. Había quedado así.

Habíamos puesto nuestra foto en la segunda columna, pero dejamos la primera vacía hasta que no tuviéramos un formulario de suscripción. Y eso es lo que vamos a hacer ahora, crearlo con Thrive Leads.

Para poder introducirlo en la columna de una sección, tenemos que crear un “Lead Shortcode”.

Lo que hace este tipo de formulario es generar un código corto (shortcode) que tendremos que introducir en esa columna. Elegimos una plantilla predefinida y la editamos para conseguir el resultado que queremos.

Esto se hace fácilmente arrastrando y soltando en el lugar del formulario que queramos los elementos de la columna de la derecha.

Cuando esté acabado, copiamos el shortcode que encontraremos al lado del formulario que acabamos de crear.

9. Inserta el formulario en la página

Volvemos de nuevo a la página de inicio que estábamos diseñando para insertar el formulario. Para ello, añadimos un módulo “texto” en la primera columna que habíamos dejado vacía y pegamos el shortcode del formulario en el editor de texto.

Y por fin, tenemos el formulario justo al lado de nuestra foto en primera fila. Será imposible que alguien que visite tu página de inicio no lo vea.

10. Ya tienes diseñada tu página de inicio perfecta

Y este es el resultado del diseño de esta home usando las herramientas de diseño web que te he enseñado al principio.

Como ves, puedes conseguir buenos resultados sin necesidad de tener conocimientos de programación si cuentas con las mejores herramientas de diseño web que hay en WordPress.

[bctt tweet=»Voy a convertir mi web en una auténtica obra de arte gracias a Inteligencia Viajera» username=»iviajera»]

Esto ha sido un repaso rápido de los pasos que tienes que seguir para diseñar una página de inicio al estilo de la de Inteligencia Viajera.

Pero también te he preparado un vídeo para que veas al detalle todos y cada uno de los pasos y ajustes a tener en cuenta (cómo cambiar los colores, márgenes y/o rellenos, etc). Vas a ver en directo cómo diseñar esta página de inicio de principio a fin.

Te dejo con él:

Elementos imprescindibles y perjudiciales en tus páginas

En el diseño web, al igual que en todo en la vida, también hay tendencias y modas. Si echaras la vista atrás y vieras las páginas que había en el año 2000, tendrías la sensación de que has vuelto a la época en la que los humanos vivían en cuevas y vestían en taparrabos.

La diferencia del diseño web de entonces con el de ahora es brutal. Ahora todo es mucho más visual y se utilizan elementos que ayudan a que así sea.

Por eso quiero hacerte un listado de los elementos que me parece que sí o sí tienes que estar en tu web. Y otros con los que debes tener cuidado.

Elementos imprescindibles

• Secciones: como ya hemos visto, es conveniente crear contrastes para romper con la monotonía y para destacar frases principales. Debes utilizar una sección por cada cambio de color de fondo que haya.
• Cajas de iconos o imágenes: es el elemento que hemos utilizado para añadir los servicios en la página de inicio. Son geniales para presentar un servicio, una característica, un beneficio, etc.
• Imágenes o vídeos: una imagen vale más que mil palabras, pero si tienes un vídeo explicativo de tu negocio, ese vídeo vale más que mil imágenes.
• Encabezados: es importante utilizar títulos y subtítulos. En cada página solo puede haber un título H1, en el que generalmente se incluye la palabra clave principal del artículo, y los H2 y H3 que necesites.
• Formulario de contacto: ¡no cierres las puertas a que alguien contacte contigo! Al menos una de tus páginas tiene que tener un formulario para que la gente te pueda mandar un mensaje.
• Redes sociales: si tienes cuenta en algunas redes sociales, no olvides añadirlas en tu web para que los usuarios puedan visitarlas con un solo clic.
• Espacios en blanco: deja un espacio en blanco entre una sección y otra. No es conveniente tener todo el contenido de tus páginas apelotonado, hay que dejar espacio para no agobiar a la vista.

Elementos que pueden perjudicar tu web

• Sliders: quedan muy bonitos, sí, pero si los utilizas en tus páginas pueden lastrar la velocidad de carga de la web, cosa que no te interesa en absoluto. Cuantas más transiciones y elementos tenga, peor. También depende del plugin que utilices para crearlos, ya que los hay más o menos pesados, pero si los puedes evitar, mejor.
• Demasiados efectos CSS: añadir efectos mediante CSS le da un toque dinámico a tus páginas y está bien, pero si te pasas añadiendo estos efectos también puedes ver lastrada la velocidad de tu web, por lo que utilízalos con moderación. He visto páginas por las que era desesperante navegar del montón de efectos que tenían.

A veces, el exceso es perjudicial. Ser visual no significa atiborrar a tu web de elementos. Ten cuidado con eso.

Conclusión