Cómo diseñar un sitio web atractivo

Este contenido forma parte de una guía completa para crear tu sitio o página web. Estás viendo Cómo diseñar un sitio web atractivo. Puedes acceder a la guía completa con este y otros puntos importantes aquí: Como crear un Sitio web desde Cero.

Probablemente has llegado aquí por que estas siguiendo la guía de Cómo construir un sitio web desde cero. Esta es una guía paso a paso para construir tu nuevo sitio web.

En este artículo, encontrarás respuestas a varias preguntas relacionadas a; ¿cómo diseñar un sitio web atractivo?, partiendo por el uso de un tema bastante completo y con muchas actualizaciones, además de plugins que te ayudarán a dejar de lado las largas lineas de códigos y programación.

Esta guía cuenta con varios artículos que te enseñarán todo lo que necesitas saber para crear un sitio web. Si quieres ver los siguientes pasos o si ya completaste alguno de ellos puedes visitar los otros pasos de esta guía:

Si crees que ya tienes un paso solucionado, puedes saltar al siguiente. De todas formas, dejaré un resumen de lo que verás en cada uno de ellos a continuación:

• Cómo Construir un sitio web desde cero (Artículo Principal)
• Cómo elegir un nombre de dominio web
• Cómo elegir un Hosting
• Cómo instalar tu web usando WordPress
• Cómo diseñar un sitio web atractivo
• Plugins Importantes para tu sitio web
• Cómo Aumentar la Velocidad de Carga de tu Sitio Web
• Estrategias para posicionar tu Sitio web
• Usando redes sociales para expandir tu marca

En el primer paso definiremos las herramientas que debes utilizar para crear tu sitio web.

Espero que hayas podido revisar el paso anterior sobre «cómo instalar tu web usando WordPress» ya que será un requisito para seguir leyendo este artículo.

Instalando nuestro tema (apariencia) y plugins principales

Para ponernos en marcha lo primero que debemos hacer es comprar el tema Divi y Divi Builder desde el sitio web de Elegantthemes.

Nuestros amigos de ET normalmente lanzan periodos con ofertas, por lo que te recomiendo seguirlos en sus redes sociales y estar atento a esto.

Puedes seguir a Elegant Themes en facebook, twitter, linkedin haciendo clic en los enlaces.

Descarga e instalación de Divi y Divi Builder

Una vez compradas las licencias de Elegan Themes, lo primero que haremos es ir al área de «mis descargas» (dentro de la web de Elegant Themes) y bajaremos el tema Divi y el plugin del Divi Builder.

Ya teniendo los archivos descargados iremos a nuestro escritorio en WordPress y haremos clic en Apariencia > Temas > Añadir Nuevo > Subir Tema.

Elegiremos el tema que descargamos y le daremos clic a Instalar ahora.

Una vez instalado activaremos el tema, podrás ver como la apariencia predeterminada de WordPress ha cambiado y esta casi listo para empezar a trabajar.

Además de nuestro nuevo tema, debemos instalar el Divi Builder, para esto nos iremos nuevamente a nuestro escritorio de WordPress y haremos clic en Plugins > Añadir nuevo > Subir Plugin.

Este plugin nos permitirá modificar nuestras páginas de manera fácil y muy amigable, donde prácticamente todo será editable y moldeable a nuestro gusto.

Cómo crear nuestra página principal usando Divi

Ya tenemos todo listo para empezar a trabajar por lo tanto crearemos una página principal desde el escritorio de administración de WordPress haciendo clic en Páginas > Añadir Nueva.

Al hacer esto, WordPress nos pedirá un nombre para la nueva página la cual podemos llamar «Home» y luego haremos clic en Usar Divi Builder.

Luego de nuestro clic el sitio web nos redirigirá hacia el modo de edición de Divi, donde nos preguntará que queremos hacer.

Podremos elegir entre 3 opciones, construcción desde cero, utilizar una plantilla prefabricada (elegir diseño) y clonar alguna página existente en tu WordPress.

Para efectos de este tutorial, seleccionaremos Elegir Diseño.

Esto nos mostrará una ventana donde podremos elegir sobre una base de múltiples diseños prefabricados y organizados por categorías.

Dependiendo del nicho al que quieras dirigir te recomiendo navegar a través de las distintas opciones hasta que encuentres una que te acomode.

Seleccionaremos el pack «Agency» para mostrarte otras funcionalidades que te ayudarán a lograr el acabado que deseas.

¿Cómo se estructura Divi?

Antes de editar la nueva apariencia de nuestro sitio web es importante definir la forma en que Divi trabaja en temas de diseño.

Durante la construcción del sitio web encontrarás tres principales secciones de trabajo.

1. Secciones
2. Filas
3. Modulos

Cada una de ellas tiene un objetivo, ordenar tu espacio de trabajo, si vas jugando con cada una de ellas verás que normalmente las «secciones», son aquellas que crearán bloques, donde podremos luego insertar en su interior filas con una o más columnas y además los módulos para imágenes, textos, testimonios, entre otros.

Cada una de las secciones es editable y tiene configuraciones propias al igual que las filas y módulos. Si accedes al engranaje podrás ver todos los parámetros que puedes modificar.

Podremos agregar o quitar texto, imágenes enlaces, fondos y etiquetas.

También Divi tiene la funcionalidad de poder arrastrar y soltar elementos, donde podrás agrandar o achicar secciones solo arrastrando y soltando el puntero.

Utilizando una Plantilla de Divi

Si estas recién empezando, te recomiendo seleccionar una plantilla base y ir editando los textos que aparecen acorde a la información que desees ingresar, de esta forma no tendrás que indagar tanto en cómo configurar Divi y te permitirá tener un sitio web limpio y visualmente amigable en unos cuantos minutos.

Podemos editar nuestro header o sección superior fácilmente con nuestra información.

También podemos editar nuestros productos y servicios, ingresando títulos y descripciones.

Podemos generar formularios de contacto con la información que deseamos solicitar a nuestros clientes.

En esta sección para dejar todo funcionando ingresaremos al engranaje de configuración dentro del módulo (gris) y haremos clic en Texto y Correo Electrónico. Así podremos configurar que mensaje y cómo queremos que aparezca cuando alguien rellene sus datos.

Siempre que tengamos dudas podemos hacer clic en los botones de ayuda generalmente situados sobre el título de la configuración, lo que nos entregará guías para poder configurar dichos espacios.

Conclusión

Existen muchas formas de trabajar con Divi y Divi Builder, en lo personal, me ha tomado un par de meses en poder extraer todo su potencial.

Normalmente si hay algo que no entiendo suelo buscar en el sitio web de la comunidad donde han muchísima información y la puedes revisar aquí.

O bien, en su canal de Youtube donde también hay cientos de tutoriales acerca de las distintas funcionalidades y capacidades de Divi.

Ingresa tu comentario para saber si esta guía te sirvió en tu búsqueda o si quedo alguna pregunta que no revisamos.

Sigue explorando esta guía

Felicitaciones, ya deberías tener lista tu página principal, puedes repetir el mismo proceso para el resto de pestañas que quieras agregar. El siguiente tema por revisar será: Plugins importantes para tu sitio web.

Recuerda, estas son toda las secciones disponibles en mi guía para aprender Cómo crear un sitio web desde cero:

• Cómo Construir un sitio web desde cero (Artículo Principal)
• Cómo elegir un nombre de dominio web
• Cómo elegir un Hosting
• Cómo instalar tu web usando WordPress
• Cómo diseñar un sitio web atractivo
• Plugins Importantes para tu sitio web
• Cómo Aumentar la Velocidad de Carga de tu Sitio Web
• Estrategias para posicionar tu Sitio web
• Usando redes sociales para expandir tu marca

¿Te ha quedado alguna duda? Escribe en los comentarios y estaré feliz de responderla.