Diseña tu web con Elementor y optimiza tu imágenes al máximo

Parte 1: Preparación y Conceptos Básicos

¡Hola! En este tutorial te voy a enseñar paso a paso cómo crear una página web profesional usando Elementor y un plugin gratuito que nos va a hacer la vida mucho más fácil: Starter Templates. No te preocupes si sos principiante – vamos a ir paso a paso y te voy a explicar todo el proceso de manera clara y sencilla.

💡 Antes de empezar: Si venís siguiendo el curso de manera ordenada, ya deberías tener una idea clara de tu diseño gracias a los videos anteriores donde trabajamos con IA para generar ideas, elegimos nuestra paleta de colores y configuramos las tipografías. Si te perdiste esos videos, te recomiendo que los revises primero – ¡te van a ahorrar mucho tiempo!

Lo que necesitás para empezar

Antes de ponernos manos a la obra, asegurate de tener:

• WordPress instalado y funcionando
• Elementor instalado y activado
• El plugin Starter Templates instalado (¡es gratuito!)

Creando tu primera página

Lo primero que vamos a hacer es crear una nueva página. No te preocupes si es de prueba – la idea es que puedas practicar y familiarizarte con las herramientas.

Para crear tu primera página:

1. Entrá a tu panel de WordPress
2. Ve a “Páginas” → “Añadir nueva”
3. Ponele un nombre (puede ser simplemente “Prueba”)
4. Dale a “Publicar” (esto es importante para poder editarla con Elementor)

Entrando a Elementor

Ahora viene lo bueno. Vamos a pasar del editor normal de WordPress a nuestro espacio de trabajo en Elementor:

1. Buscá el botón azul que dice “Editar con Elementor” (está arriba a la izquierda)
2. Dale clic y ¡listo! Ya estamos en nuestro entorno de trabajo

💡 Un consejo: Una vez que entremos a Elementor, no vamos a necesitar volver a WordPress para diseñar. ¡Todo lo vamos a hacer desde acá!

Escondiendo el título por defecto

Antes de empezar a diseñar, hay algo importante que tenemos que hacer. WordPress muestra por defecto el título de la página, pero nosotros queremos controlarlo desde Elementor. Para esconderlo:

1. Mirá arriba en la barra de herramientas y buscá el ícono de la ruedita (ajustes)
2. Al hacer clic, se abre un panel a la izquierda
3. Bajá hasta encontrar la opción “Ocultar Título”
4. Activala y ¡listo! Ya tenemos una hoja en blanco para trabajar

⚠️ Importante: Todo lo que hagamos en estos ajustes solo afecta a esta página específica. No te preocupes, no estás cambiando todo tu sitio web.

Conociendo tu espacio de trabajo

Vamos a familiarizarnos con Elementor. Es como tener un estudio de diseño completo, pero necesitás saber dónde está cada cosa:

Tu nueva caja de herramientas

• A la izquierda: Aquí tenés todas tus herramientas y widgets
• En el centro: Este es tu lienzo, donde vas a ver y editar tu diseño
• Arriba: Encontrarás opciones para previsualizar, ver cómo se ve en móvil y publicar

Herramientas que vas a usar mucho:

• El ojito: Para previsualizar tu página
• Los iconos de dispositivos: Para ver cómo se ve en diferentes pantallas
• El botón de publicar: Para guardar tus cambios

Preparación con Starter Templates

Ahora viene un truco que te va a encantar. Starter Templates es como tener un arquitecto asistente que te da planos pre-diseñados. Buscá el ícono que tiene una “S” con un degradado bonito – si no lo ves, asegurate de haber instalado bien el plugin.

💡 Mi consejo profesional: Aunque el plugin te ofrece páginas completas pre-diseñadas, te recomiendo usar los bloques individuales. ¿Por qué? Porque te dan mucha más libertad para crear algo único y adaptado a tus necesidades.

Si seguiste el curso desde el principio, ya configuramos:

• Nuestra paleta de colores
• Las tipografías que vamos a usar
• El estilo general de nuestra página

¿Y sabés qué es lo mejor? Cuando usemos los bloques de Starter Templates, ¡ya van a tener toda esta configuración! Esto nos va a hacer trabajar muchísimo más rápido.

Estructura básica y consejos

Pensá en tu página web como si fuera una casa:

• El Header: Es como el techo, va arriba con tu logo y menú
• El Body: Es donde vamos a trabajar principalmente, como las habitaciones de la casa
• El Footer: Es como los cimientos, va abajo con información adicional

💡 Dato importante: En este tutorial nos vamos a centrar en el “body”. El header y footer los vamos a trabajar aparte.

Para terminar, te dejo dos consejos fundamentales que aprendí con los años:

Para trabajar más tranquilo: Te recomiendo que siempre tengas una pestaña de previsualización abierta mientras diseñás, que uses nombres descriptivos para identificar fácilmente cada elemento, y que guardes los cambios frecuentemente – mejor prevenir que curar.

Para diseñar más rápido: Siempre empezá por la versión de escritorio y después pasamos a ajustar todo para móvil. También es importante que mantengas un orden en tu estructura mientras vas diseñando – esto te va a ayudar a trabajar de manera más eficiente.

Ahora que ya tenemos todo preparado, vamos a empezar con la parte más emocionante: crear nuestra primera sección usando Starter Templates.

Parte 2: Trabajando con Starter Templates

Eligiendo el primer bloque

Vamos a empezar con la sección principal de nuestra página, lo que en inglés se conoce como “Hero Section”. Para nuestra maqueta necesitamos:

• Una imagen a la derecha
• Un título y un párrafo a la izquierda
• Un botón de llamada a la acción

💡 Consejo práctico: No busques la perfección en esta etapa. Lo importante es encontrar un bloque que tenga una estructura similar a lo que necesitamos.

Usando la galería de Starter Templates

Para encontrar el bloque ideal, seguí estos pasos:

1. Hacé clic en el ícono de Starter Templates (la S con degradado)
2. Andá a la pestaña “Blocks” – es mejor que usar páginas completas
3. Usá los filtros disponibles:
   • Por color (modos claros u oscuros)
   • Por tipo de bloque (en este caso, “Hero”)

💡 Truco profesional: Los bloques vienen en blanco y negro porque lo importante es la estructura. Nuestros colores y tipografías predefinidos se aplicarán automáticamente.

Personalizando el contenido

Para editar el contenido de tu bloque tenés dos opciones:

• Hacer clic directamente sobre el elemento que querés modificar
• Usar el lapicito que aparece al seleccionar cada elemento

⚠️ Importante: Si vas a pegar texto desde otro documento, siempre hacelo en el panel de edición que aparece a la izquierda. Así evitás que se copien formatos no deseados.

Para que todo quede alineado correctamente:

1. Seleccioná los elementos que querés alinear
2. En el panel de la izquierda, buscá las opciones de alineación
3. Ajustá según necesites – si algo está centrado y lo querés a la izquierda, es tan simple como cambiar la alineación

Gestión profesional de imágenes

Esta parte es crucial para el éxito de tu diseño. Vamos a hacerlo paso a paso:

1. Preparar la imagen
   • Usá la imagen original del bloque como referencia de tamaño
   • Fijate en el panel de la derecha las dimensiones exactas (en este caso 900×900)
   • Mantené estas dimensiones para que todo funcione perfectamente
2. Elegir una imagen adecuada
   • Podés usar Unsplash.com para encontrar imágenes de calidad
   • Buscá algo relacionado con tu tema (en nuestro caso “marketing funnel”)
   • Elegí una imagen que tenga buena calidad y sea relevante
3. Optimizar la imagen
   • Abrí Canva y creá un diseño de 900×900 píxeles
   • Importá tu imagen y ajustala al tamaño
   • Exportala manteniendo las dimensiones exactas

💡 Tip importante: Las dimensiones correctas son cruciales para que el diseño responsive funcione bien. No te saltees este paso.

El proceso de optimización

Te voy a compartir mi proceso para que tus imágenes queden perfectas y tu página cargue rápido:

Primer paso – Comprimir la imagen

1. Andá a CompressPNG.com (o CompressJPEG.com según el formato)
2. Subí tu imagen
3. Esto puede reducir el peso hasta un 70% sin perder calidad visible

Segundo paso – Convertir a WebP

1. Usá un convertidor a WebP
2. Este formato es más eficiente para web
3. Puede reducir aún más el peso del archivo

💡 Dato interesante: Con este proceso, podés pasar de una imagen de 1MB a una de 38KB manteniendo la calidad visual.

Nombrando tus archivos

Para mantener todo organizado y ayudar al SEO, tus nombres de archivo deberían:

• Usar palabras clave relevantes
• Incluir números para versiones (001, 002)
• Seguir un formato consistente

Por ejemplo: “marketing-funnel-hero-001.webp”

Subiendo la imagen

Una vez que tengas tu imagen optimizada:

1. Seleccioná la imagen en el bloque
2. Hacé clic en el botón de cambiar imagen
3. Subí la nueva imagen optimizada
4. Ajustá el tamaño si es necesario usando los controles del panel

⚠️ Recordatorio: Si seguiste todos los pasos de optimización, tu imagen debería verse perfecta y cargar rápidamente en todos los dispositivos.

Ahora que ya dominamos Starter Templates y la gestión de imágenes, vamos a dar un paso más allá y crear nuestros propios bloques personalizados.

Parte 3: Creando Bloques Personalizados con Contenedores

En este caso, Starter Templates no tiene exactamente lo que necesitamos. ¿Y sabés qué? ¡Está perfecto! Es una excelente oportunidad para aprender a crear nuestros propios bloques usando las herramientas más modernas de Elementor.

Entendiendo los Contenedores Flexbox

Vamos a hablar de una de las mejoras más importantes que ha tenido Elementor: los contenedores Flexbox. Para que entiendas por qué son tan importantes, te voy a explicar cómo era antes y cómo es ahora.

Imaginate que antes, cuando diseñábamos una página web en Elementor, era como trabajar con una planilla de Excel muy rígida. Teníamos que usar secciones (como las hojas de Excel), filas (como las filas de la planilla) y columnas. Todo tenía que encajar perfectamente en esa estructura, y si querías mover algo, tenías que respetar esa cuadrícula sí o sí. Era funcional, pero bastante limitante.

💡 Consejo importante: Si ves tutoriales antiguos de Elementor que usan el sistema de secciones, filas y columnas, no te preocupes. Los contenedores Flexbox son más nuevos y mejores.

Creando la estructura base

Para nuestro bloque de íconos numerados, vamos a seguir estos pasos:

1. Creá el contenedor principal:
   • Hacé clic en el signo + en la barra de herramientas
   • Elegí “Container” de la lista de elementos
   • Arrastralo a tu página, debajo del bloque anterior
2. Configurá el contenedor:
   • Dale un nombre descriptivo (por ejemplo, “bloque-iconos”)
   • Ajustá el ancho según necesites
   • Configurá los márgenes iniciales

💡 Tip útil: Ponerle nombres claros a tus contenedores te va a ayudar a mantener todo organizado cuando el diseño crezca.

Creando las tarjetas

Cada número con su texto va a estar en una “tarjeta”. Para crear la primera:

Estructura básica:

• Creá un nuevo contenedor dentro del principal
• Dale un nombre como “tarjeta-1”
• Dividilo en dos áreas: ícono y texto

Configuración del contenedor:

1. En el panel de Layout, elegí dirección horizontal
2. Ajustá el Gap a 0 para control total de espacios
3. Configurá las proporciones:
   • Área del ícono: 20% del ancho
   • Área del texto: 80% del ancho

Trabajando con los íconos

Para los números vamos a usar imágenes SVG o WebP. En el área del ícono:

1. Subí la imagen del número
2. Ajustá el tamaño al 30% del contenedor
3. Centrá la imagen tanto horizontal como verticalmente

Área de texto

En la sección de texto necesitamos:

• Un encabezado para el título
• Un widget de texto para el párrafo
• Espaciado controlado con el Gap del contenedor

⚠️ Importante: Mantené consistencia en los tamaños de texto y espaciados entre todas las tarjetas.

Duplicando tarjetas

Una vez que tengas la primera tarjeta perfecta:

1. Duplicá el contenedor completo
2. Cambiá el número y el contenido
3. Actualizá los nombres (tarjeta-2, icono-2, etc.)

💡 Consejo pro: Al duplicar, revisá siempre que los espaciados y alineaciones se mantengan consistentes.

Ajustes finales

Antes de pasar al siguiente bloque, asegurate de que:

• Todas las tarjetas estén perfectamente alineadas
• Los espaciados sean consistentes
• Los textos mantengan la misma jerarquía visual
• Las imágenes tengan el mismo tamaño relativo

Y ahora que ya tenemos todos nuestros bloques armados, llegó el momento de asegurarnos que se vean perfectos en cualquier dispositivo.

Parte 4: Ajustes Responsive y Diseño Móvil

Vista móvil

Para empezar a trabajar la vista responsive:

1. Usá el selector de dispositivos en la barra superior de Elementor
2. Cambiá a la vista de móvil para ver cómo se está adaptando todo

💡 Consejo importante: Si seguiste el orden que te recomendé de trabajar primero la versión de escritorio, ahora solo tenemos que hacer algunos ajustes finos.

Trabajando los espaciados

Cuando veas tus bloques en móvil, vas a notar que algunos espaciados necesitan ajustes. Para arreglarlo:

1. Andá al panel de Avanzado de cada contenedor
2. Desbloqueá los márgenes para ajustarlos individualmente
3. Empezá con un margen inferior del 20% para dar más aire entre elementos

⚠️ Importante: En móvil, es mejor tener más espacio entre elementos que tenerlos muy juntos. Esto hace que todo sea más fácil de leer y entender.

Revisión final

Antes de dar por terminado nuestro trabajo, hacé una última revisión:

• ¿La página se ve bien en diferentes tamaños de pantalla?
• ¿Los elementos están bien alineados?
• ¿Los textos son fáciles de leer?
• ¿Las imágenes se adaptan correctamente?

¡Felicitaciones!

¡Excelente trabajo! Ya tenemos nuestra página web lista y optimizada para todos los dispositivos. En el próximo video vamos a ver cómo configurar el formulario y conectarlo con nuestro email corporativo.

💡 Para seguir aprendiendo:

• Encontrá recursos adicionales en la descripción del video
• Suscribite al boletín gratuito para recibir más información
• Seguime en las redes sociales para estar al día con las actualizaciones

No te olvides de darle like al video, activar las notificaciones y suscribirte al canal para no perderte ningún tutorial. ¡Nos vemos en el próximo video!