TU SITIO WEB COMPLETO CON WORDPRESS + DIVI
Aquí tienes los 11 vídeos que he grabado sobre un caso real donde se ve el proceso de creación de un sitio web de principio a fin.
Alcázar Marín – Responsable de diseño y marketing con WordPress + DIVI en LaPrimera.net
Caso real de realización de un sitio web con WordPress + DIVI para la empresa de instalaciones de hoteles 2bed2.com
Vídeo 1 – Primera Parte: Inicio, toma de decisiones y configuración inicial
Duración del vídeo: 13:14 minutos
En él vemos que conversaciones tuve con Javier, el propietario de la web, para ver que tipo de información quería mostrar en su sitio web y de que forma quería mostrarla.
Una vez tuve claro esto, era el momento de comenzar el diseño, así que tuve que decidir de entre todos los layout, que la plantilla DIVI pone a mi disposición, de cual de ellos iba a partir.
Además, antes de empezar a crear páginas, menús, pie…. llevé a cabo la configuración inicial del tema en cuanto a colores, fuentes, tamaños, etc, lo que me iba a permitir trabajar más rápido y que todo mi sitio web fuese homogéneo.
Vídeo 1 – Segunda Parte: Inicio, comenzamos a diseñar
Duración del vídeo: 22:09 minutos
En este vídeo llevamos a cabo la realiación de la página de inicio del sitio web. Cargamos la plantilla con de la cual vamos a partir y vamos editando los elementos necesarios para dejar la página acorde al diseño acordado con Javier.
Además vemos como duplicamos algunas secciones y editamos la visualización de las mismas para tener una vista diferente de la web en versión ordenador y en versión móvil, persiguiendo siempre la mejor experiencia del usuario que visita nuestra web.
Vídeo 2: Página de políticas de privacidad y cookies
Duración del vídeo: 2:39 minutos
Todo sitio web debe contar como mínimo con una página de Políticas de Privacidad y otra de Política de Cookies para cumplir con la legislación vigente.
En este vídeo vemos como construir con DIVI dichas páginas y cómo obtener los enlaces de las páginas creada para enlazarlas en los sitios que corresponda.
La página de Políticas de Privacidad debe ir enlazada en los formularios que creemos en distintos apartados de la web y la de cookies debe ir enlazada en el aviso de cookies que con el que debemos contar en el sitio web.
Vídeo 3 – Quiénes Somos
Duración del vídeo: 11:34 minutos
Comenzamos por cargar el layout de DIVI que nos había gustado y fuimos configurando los módulos del mismo en función de nuestras necesidades.
Cambiamos la cabecera, tanto los textos como la imagen de fondo de la misma y la guardamos en la biblioteca, para que de aquí en adelante podamos partir de ella en todas las páginas.
Una vez teníamos la cabecera, fuimos modificando la sección central, modificando sus imágenes por las de nuestra empresa y los texto por los que Javier nos había pasado.
Finalmente eliminamos todas las secciones del layout que no necesitabamos.
Vídeo 4: Página Contratistas
Duración del vídeo: 18:23 minutos
Para construir esta página queríamos seguir el mismo estilo que en la página de Quiénes Somos, pero no queriamos que fuese igual. Para ello hice uso de los recursos que me ofrecen los desarrolladores de DIVI en su blog y me acordé de un diseño muy parecido que había visto.
Me fuí al artículo del blog y seguí los pasos de diseño para construirlo y así mantener la homogeneidad con la página de Quiénes Somos.
También vemos como cargamos la cabecera de la biblioteca, para mantener el mismo diseño en todas las páginas.
Vídeo 5: Productos
Duración del vídeo: 18:23 minutos
Ahora teníamos que ver la forma más eficaz de mostrar sus productos. Javier quería tener una página donde se mostraran todos los productos con un pequeño resumen y que al pinchar en cada uno de ellos fuese a la ficha del producto.
Teniendo en cuenta lo anteríor, vi que la mejor opción era montarlo a tráves de entradas, de esta forma en la página de productos usando el módulo del blog, le aparecerían todas las entradas de las categorías elegidas y luego cada uno de los productos lo hice con una entrada.
De esta forma conseguimos que cada vez que Javier meta un producto nuevo, este aparezca de forma automática en la página general de productos.
Vídeo 6: Muebles Auxiliares
Duración del vídeo: 19:51 minutos
En esta sección necesitaba algo especial, pues Javier me había pasado unos PDF con los catálogos de los muebles auxiliares y quería que sus visitants pudieran ver el PDF en un visor dentro de la web y que pudieran imprimirlo, descargarlo o lo que desearan.
Monté está página utilizando simplemente secciones con filas de 4 columnas y en cada una de ellas un módulo de imagen y otro de texto.
Cada elemento enlazaba con su página correspondiente, el la que introduje el visor de PDF con la ayuda del plugin que vemos en el vídeo.
Vídeo 7: Instalaciones
Duración del vídeo: 6:48 minutos
En la página de instalaciones lo que se quería mostrar eran los lugares del Camino de Santiago que contaban con el mobiliario de 2bed2.
Javier quería una página simple, con una pequeña descripción del lugar y una galería de imágenes donde se vieran sus productos montados en dichas instalaciones.
Así se montón esta página con secciones de texto y galería de imágenes de una forma simple y elegante.
Vídeo 8: Contactar
Duración del vídeo: 11:56 minutos
Y llegamos a la página de contacto. Aquí estaba claro, tenía que montar un formulario para ponerse en contacto con la empresa, además tenían que estar visibles los datos de contacto y querían que se viera un mapa con la localización.
Al montar el formulario de contacto, tal y como se ve en el vídeo, se han tenido en cuenta todos los detalles que debe tener para cumplir con la LGPD, esto es, una casilla para aceptar las Políticas de Privacidad y unos texto legales que se deben incluir al pie del formulario.
Vídeo 9: Menú y limpieza
Duración del vídeo: 3:51 minutos
El diseño del sitio web ha llegado a su fin y no podemos dejar en él recursos que no sean necesarios.
Cuando cargamos los layout de la plantilla DIVI, estos cargan en nuestra biblioteca de medios todas sus imágenes, por lo que va a ser necesarios borrarlos, para así no arrastrar ni ocupar espacio en nuestro servidor con recursos que no son necesarios para nuestro sitio web.
También vemos en el vídeo un resumen de como se ha construido el menú, ya que a lo largo de los vídeos anteriores ya se habían dado nociones para ello.
Vídeo 10: Plugin Cookies
Duración del vídeo: 1:29 minutos
Llegados a este punto, lo único que me quedaba para dar por terminado el sitio web era cumplir con la ley de cookies.
En este vídeo vemos cual es el plugin elegido para ello y como se buscarlo e instalarlo desde el apartado de plugin de WordPress.
Una vez se configura la web ya está lista para mostrar a los visitante el aviso sobre las cookies y así cumplir con la legalidad.
Vídeo 11: Mantenimiento
Duración del vídeo: 6:18 minutos
Una vez terminado el sitio web, le grabé este vídeo a Javier para que tuviera las nociones necesarias para poder mantener su web siempre actulizada.
Así se le explicó como incluir instalciones nuevas dentro de la página correspondiente y como añadir más productos a su página de producto.
También se ve en el vídeo la importancia de mantener el sitio actualizado tanto WordPress, como la plantilla y los plugins instalados.
¿Listo para crear tu sitio web con WordPress + DIVI?
Si te ha gustado la experiencia, ahora tienes la posibilidad de obtener todas las herramientas necesarias, la formación completa en WordPress + DIVI y Soporte Técnico para cualquier duda que te pueda surgir.
Si quieres que te salga más barato, aquí abajo puedes actualizar al Plan Inicio Semestral (sale a 9€/mes) o al Plan Inicio Anual (sale a 8€/mes).
HOSTING WORDPRESS INICIO
# Espacio en disco: 4GB SSD
# Transferencia mensual: 200GB
# Copias de Seguridad
# Soporte Técnico Especializado
# Formación y técnicas de marketing
# Actualizaciones para DIVI Ilimitadas
# Invitación y acceso a webinarios
Para actualizar tu plan de Hosting y que este te salga más barato, solo tienes que seguir unos sencillos pasos que tenemos explicados, tanto en texto como en vídeo, en nuestras preguntas frecuentes. Pulsa en el siguiente botón para saber como hacerlo.