Build your website with the Wix Editor | Full Course | Wix Learn

Introducción al Editor de Wix

Presentación del curso

• El curso está diseñado para ayudar a los usuarios a construir un sitio web que cuente la historia de su marca, productos y valores.

• Ali, el instructor, se especializa en el Editor de Wix y guiará a los participantes desde la creación hasta el lanzamiento del sitio.

Explorando el espacio de trabajo

• Los usuarios deben elegir entre editar un sitio existente o crear uno nuevo desde cero. Se pueden utilizar plantillas como punto de partida.

• Es posible personalizar las plantillas elegidas añadiendo elementos que no estén incluidos inicialmente.

Herramientas del Editor

• La interfaz principal muestra un lienzo donde se puede previsualizar y editar libremente las páginas.

• En la barra izquierda se encuentran herramientas para agregar elementos como texto, imágenes, botones y galerías.

Secciones y diseño

• Las páginas están divididas en secciones que pueden ser movidas fácilmente dentro del editor.

• Al añadir nuevas secciones, estas vienen ya formateadas según el tema del sitio.

Diseño y Temas del Sitio

Menú de Páginas

• El menú de páginas permite gestionar las páginas individuales: añadir, eliminar o reorganizar según sea necesario.

Temas predefinidos

• Los temas ayudan a mantener la coherencia visual en todo el sitio con fuentes y colores consistentes.

• Los usuarios pueden probar diferentes temas con un solo clic y personalizarlos según sus necesidades específicas.

Integración de Aplicaciones

Uso de aplicaciones en el sitio

• Es posible integrar aplicaciones sin abrir nuevas ventanas; esto incluye herramientas como chatbots o traductores.

Gestión de contenido multimedia

• El Centro Multimedia permite subir imágenes o videos, así como gestionar archivos existentes directamente desde el editor.

Configuración del Espacio de Trabajo

Barra superior del editor

• La barra superior ofrece opciones para guardar, previsualizar y publicar el sitio. También permite acceder a configuraciones SEO e información empresarial.

Navegación entre páginas

Introducción a la Estructura del Sitio Web

Herramientas y Espacio de Trabajo

• La vista ampliada permite observar toda la página dividida en secciones, facilitando la reorganización sin confusiones sobre la ubicación de los elementos.

• Se mencionará el uso de herramientas adicionales en lecciones futuras; además, hay una barra de búsqueda para encontrar herramientas o artículos de ayuda rápidamente.

• Se anima a los usuarios a ser creativos con su sitio web, comenzando por entender cómo estructurar las páginas adecuadamente.

Importancia de la Estructura del Sitio

• La estructura del sitio es crucial para su éxito; un mal diseño puede llevar a que los usuarios abandonen el sitio si no encuentran lo que buscan fácilmente.

• En esta lección se abordarán los componentes esenciales que cada sitio debe incluir y cómo construirlos.

Diseño y Personalización de Páginas

Layout de la Página Principal

• Un buen diseño debe presentar primero la información más importante y facilitar acciones deseadas antes de que el usuario abandone el sitio.

• La página principal está compuesta por un encabezado, contenido central y pie de página, organizados en secciones.

Personalización del Encabezado y Menú

• El encabezado actúa como principal forma de navegación e incluye botones hacia información clave; es vital decidir qué enlaces son necesarios desde el inicio.

• Es importante evitar saturar el menú principal con enlaces innecesarios; algunos elementos pueden no ser relevantes al principio para los visitantes.

Configuración Avanzada del Menú

Gestión del Menú

• Los elementos del menú están vinculados a diferentes secciones o recursos dentro del sitio, permitiendo una navegación fluida entre ellos.

• Al personalizar el menú, se pueden agregar nuevos ítems como páginas específicas (por ejemplo, una página de ofertas).

Funcionalidad del Encabezado

• Se puede configurar si el encabezado permanece fijo en la parte superior o desaparece al desplazarse por la página. Esto mejora la accesibilidad para los visitantes.

Edición y Organización de Secciones

Comprendiendo las Secciones

• Todo contenido entre el encabezado y pie está agrupado en secciones; estas pueden contener imágenes, texto, galerías o videos.

Elementos Clave en una Hero Section

• Una "hero section" debe incluir: un elemento visual atractivo (imagen/video), texto breve explicativo y un botón CTA (llamada a acción).

Cómo Mejorar el Diseño de tu Sitio Web

Importancia de los CTAs (Llamadas a la Acción)

• Los textos de las llamadas a la acción deben reflejar el tema y estilo del sitio, utilizando frases atractivas como "Comienza a explorar" en lugar de "Ver nuestros productos" para aumentar la interacción.

• Se sugiere revisar un enlace en la pestaña de recursos para aprender más sobre CTAs efectivos.

Herramienta de Edición Rápida

• La herramienta de edición rápida permite realizar cambios en secciones específicas sin afectar el diseño general del sitio, facilitando ajustes en fondos y texto.

• Los cambios se aplican en tiempo real, permitiendo al usuario ver cómo lucen antes de confirmar. Si no le gusta, puede deshacer los cambios fácilmente.

Estructura y Elementos del Sitio

• Las secciones organizan las páginas del sitio, mientras que las tiras son elementos de diseño que permiten crear layouts complejos y atractivos dentro de esas secciones.

• Al agregar tiras personalizadas, es posible crear columnas y ajustar márgenes para mejorar la presentación del contenido.

Adaptabilidad y Diseño Responsivo

• Las tiras son adaptativas; cualquier ajuste realizado automáticamente reconfigura todos los elementos dentro de las líneas guía para ajustarse a diferentes tamaños de pantalla.

Personalización del Pie de Página

• El pie de página debe incluir información esencial como nombre, dirección y número telefónico (NAP), lo cual es beneficioso tanto para motores de búsqueda como para usuarios.

• Se pueden añadir enlaces a páginas o secciones desde el pie, manteniendo una estructura organizada con carpetas en el panel de páginas.

Agregar Nuevas Páginas

• Antes de agregar nuevas páginas, es recomendable planificar qué contenido incluirá cada una para ofrecer una experiencia fluida al usuario.

• Ejemplo: Al agregar una página FAQ (Preguntas Frecuentes), esta puede ser configurada como subpágina dentro del menú principal para facilitar su acceso.

Menús Avanzados

• Es posible crear menús avanzados añadiendo submenús que dividan aún más las categorías existentes. También se pueden ocultar páginas durante el proceso creativo.

Layout Efectivo

• Un layout sólido dirige la atención del visitante hacia lo más importante primero. Esto mejora tanto la interacción como el diseño general del sitio web.

• Con Wix Editor, puedes personalizar prácticamente cualquier aspecto del layout utilizando líneas guía, tiras y columnas para lograr un diseño complejo.

Comprendiendo las Líneas Guía

Creación de un Diseño Efectivo en la Web

Introducción a las Secciones y Elementos

• Se comienza con una sección simple para mostrar las líneas de cuadrícula, añadiendo una imagen y un botón.

• Se ajusta el tamaño de la imagen después de agregarla a la página, asegurando que se vea como se desea.

Importancia de las Líneas de Cuadrícula

• Al mover un botón fuera de las líneas de cuadrícula, se recibe una advertencia sobre su ubicación.

• La colocación adecuada dentro de estas guías es crucial para evitar que los elementos se corten al ajustar el tamaño de la pantalla.

Uso de Strips para Diseños Complejos

• Los strips son elementos útiles que permiten crear diseños más dinámicos y visualmente atractivos.

• Se muestra cómo recrear un diseño utilizando una sección pre-diseñada y un strip en blanco.

Personalización del Diseño

• Actualizar encabezados es sencillo; solo hay que hacer doble clic para cambiar el texto.

• Es recomendable dejar espacio en blanco entre secciones para mejorar la experiencia del usuario.

Añadiendo Columnas y Ajustes Finos

• Para añadir columnas, se utiliza la opción "Agregar columna" dentro del strip.

• Ajustar márgenes permite controlar mejor cómo los strips ocupan el espacio en la página.

Selección y Colocación de Imágenes

• Elegir imágenes que complementen el diseño general es esencial; deben reflejar el valor ofrecido.

• Las imágenes pueden establecerse como fondo en columnas específicas para integrarse mejor con otros elementos.

Creación de Layout Dinámico

• Agregar botones temáticos alineados con el texto mejora la llamada a la acción dentro del diseño.

• Duplicar strips permite crear efectos visuales interesantes sin complicaciones adicionales.

Ajuste Final del Diseño

Creación de Diseños Adaptables

Ajuste de Columnas

• En el diseño actual, las columnas están en una proporción 50-50, pero se pueden personalizar a otras proporciones como 40-60 para adaptarse mejor al contenido.

• Las líneas de cuadrícula ayudan a mantener la disposición adaptable a diferentes tamaños de pantalla, permitiendo ajustes visuales efectivos.

Espaciado y Definición

• Se puede agregar espaciado entre columnas para evitar que los elementos se toquen, lo cual mejora la estética del diseño.

• El ajuste del padding aumenta el espacio por encima y por debajo de las columnas, añadiendo definición visual.

Diseño del Sitio Web

Importancia del Diseño

• El diseño debe reflejar la marca y los valores del negocio; es crucial considerar cómo se quiere que los visitantes perciban el sitio.

Uso de Temas

• Los temas son herramientas clave que permiten aplicar un estilo coherente en todas las páginas con solo un clic.

• Se pueden personalizar temas predefinidos o crear uno propio seleccionando colores y fuentes específicas.

Personalización de Colores y Fuentes

Selección de Colores

• Es recomendable elegir hasta cinco colores, enfocándose en tres: color primario, secundario y acento para mantener la cohesión visual.

Estilos Tipográficos

• Limitarse a dos o tres tipos de fuentes ayuda a mantener un aspecto limpio; una fuente para encabezados y otra para párrafos es ideal.

Legibilidad

• Asegurarse de que las fuentes sean legibles es fundamental; cada fuente utilizada debe cumplir con estándares de accesibilidad.

Configuración del Fondo

Elección del Fondo

• Se puede cambiar el fondo a un color o imagen; esto afecta toda la página. Es importante seleccionar un fondo adecuado que complemente el diseño general.

Flexibilidad en el Diseño

• Siempre se puede volver a personalizar los temas y configuraciones más adelante, permitiendo adaptaciones según campañas estacionales o cambios en la identidad de marca.

Estructura con Secciones y Strips

Construcción Estructural

• Las secciones son bloques fundamentales que estructuran las páginas dividiendo el contenido en segmentos significativos.

¿Cómo diseñar secciones visualmente atractivas?

Diseño de Secciones con Trips

• Al utilizar trips para diseñar secciones, se pueden crear diseños visuales únicos que hacen que el contenido sea más atractivo y organizado, facilitando un flujo natural en el sitio.

• La sección completada muestra una coherencia en fuentes y colores, lo que ayuda a mantener la fluidez con las secciones adyacentes. Se emplea una mezcla de elementos como texto, imágenes y arte vectorial sin sobrecargar la página.

• Para actualizar el color del encabezado, se accede a los colores del tema desde el menú de edición. Esto asegura que todos los elementos estén alineados con la temática general del sitio.

Incorporación de Arte Vectorial

• El arte vectorial es una herramienta sencilla para añadir un aspecto profesional al sitio. Se recomienda elegir formas simples y usarlas en varias partes del diseño para reforzar la marca.

• Al seleccionar un elemento vectorial, se puede arrastrar y alinear con otros textos. También es posible ajustar su diseño utilizando los colores temáticos previamente establecidos.

Uso de Fondos Gradientes

• Para lograr una transición suave entre las secciones, se puede aplicar un fondo degradado utilizando los colores de la marca. Los fondos gradientes son efectivos para crear visuales únicos y energéticos.

• En el editor, hay opciones para elegir entre diferentes tipos de gradientes (lineales, radiales o fluidos), permitiendo personalizar aún más el diseño según las necesidades estéticas.

Herramientas Rápidas para Editar Contenido

• Las herramientas rápidas permiten mantener actualizado el contenido del sitio sin complicaciones. Cada sección tiene una barra de acciones rápidas que facilita mover o editar elementos sin alterar el diseño original.

• Por ejemplo, si se desea cambiar una oferta especial en la sección correspondiente, solo hay que modificar el texto directamente desde esta barra sin necesidad de acceder al lienzo principal.

Personalización y Fijación de Elementos Importantes

• Es posible transformar toda una sección usando inteligencia artificial para sugerir alternativas basadas en los elementos existentes. Esto permite experimentar con diferentes disposiciones rápidamente.

• La fijación de objetos importantes como barras sociales asegura que sean visibles en todas las páginas del sitio. Esto facilita a los visitantes conectarse con la marca a través de redes sociales.

Ajustes Finales y Publicación

• Al personalizar la barra social, se pueden ajustar aspectos como disposición e iconografía para alinearlos con la temática general del sitio antes de fijarla en pantalla.

¿Cómo diseñar un sitio web móvil efectivo?

Importancia del diseño móvil

• Los usuarios móviles representan más de la mitad del tráfico global en sitios web, lo que resalta la necesidad de optimizar los sitios para smartphones.

• Aunque el diseño de escritorio se ajusta automáticamente a dispositivos móviles, se pueden realizar personalizaciones específicas solo para móviles utilizando el Editor.

Mejores prácticas para el diseño móvil

• La velocidad es crucial; los usuarios deben obtener lo que necesitan rápidamente debido al tamaño reducido de las pantallas móviles.

• Minimizar el desplazamiento es esencial. Reducir el espacio vertical puede ayudar a disminuir la cantidad de desplazamiento necesario por parte del usuario.

Personalización y contenido

• Se recomienda ocultar secciones innecesarias en la vista móvil para facilitar una experiencia más centrada en las compras.

• Evitar bloques grandes de texto, ya que pueden abrumar a los usuarios y ralentizar su experiencia. Es mejor crear párrafos específicos para móviles.

Elementos interactivos y accesibilidad

• Asegurarse de que los botones sean lo suficientemente grandes y espaciados adecuadamente para evitar clics accidentales es fundamental en dispositivos móviles.

• Mantener encabezados grandes permite a los usuarios escanear información fácilmente.

Navegación y herramientas útiles

• El menú del sitio debe estar siempre visible; cambiar la configuración del encabezado a "congelar" asegura que esté disponible en todo momento.

• Herramientas como un botón "volver arriba" o una barra de acción rápida facilitan la navegación rápida por el sitio.

Optimización adicional

• Crear una pantalla de bienvenida puede mejorar la percepción mientras se carga el sitio, evitando que los usuarios vean una pantalla en blanco.

• Con todas estas herramientas y elementos de diseño, se puede optimizar efectivamente un sitio web para usuarios móviles.

¿Cómo agregar y personalizar medios?

Tipos de medios y su impacto

• Agregar medios no solo mejora la estética del sitio, sino que también fomenta interacciones más prolongadas con los visitantes.

Centro de medios

Cómo agregar imágenes y videos a tu sitio web

Agregar y personalizar imágenes

• Se puede buscar una maleta en la barra de búsqueda o encontrarla en los archivos del sitio. La imagen se puede mover fácilmente entre secciones.

• Ajustar el tamaño de la imagen es importante; se puede personalizar utilizando el estudio fotográfico, donde se pueden modificar brillo, contraste, sombras, etc.

• Para eliminar el fondo de la imagen, se utiliza la opción de recorte automático. Después de guardar los cambios, la imagen se puede arrastrar a su lugar deseado.

• También es posible añadir un marco a la imagen y agregar movimiento; sin embargo, esto se abordará en una lección sobre animaciones.

• Para agregar una galería de imágenes, primero hay que crear una sección en blanco y luego seleccionar "galería" desde el panel de adición.

Crear una galería de productos

• Se pueden elegir diferentes tipos de galerías; por ejemplo, una galería deslizante. Las imágenes pueden ser reemplazadas fácilmente al hacer clic en "cambiar imágenes".

• Al añadir imágenes al producto, simplemente hay que seleccionarlas y presionar "agregar a la galería".

• Es recomendable estirar la galería para que ocupe toda la página. Esto permite personalizar el diseño según las necesidades del comercio electrónico.

Cómo integrar videos en tu sitio web

Tipos y opciones para videos

• Los videos tienen un impacto significativo similar al de las imágenes. Se pueden añadir videos propios o enlaces desde plataformas como YouTube o Vimeo.

• Existen herramientas como cajas de video que añaden dinamismo al sitio. También hay máscaras para dar formas únicas a los videos.

• Al agregar un video transparente, se pueden ajustar configuraciones como reproducción automática o al pasar el mouse sobre él.

Personalización avanzada

• Se puede cambiar el color del video mediante opciones personalizadas y también añadir animaciones si es necesario.

• Las cajas de video permiten integrar mejor los videos con el diseño del sitio sin marcas externas como las que aparecen en YouTube.

Incorporación de arte vectorial

Añadir elementos decorativos

¿Cómo agregar y personalizar elementos visuales en tu sitio web?

Agregar arte vectorial y personalización de colores

• Se puede añadir arte vectorial a la página y moverlo fácilmente entre secciones. La personalización del color es posible, utilizando los colores del tema del sitio.

• Mantener la consistencia de la marca es importante; se puede elegir cualquier color, como el naranja, para el diseño. También se pueden agregar animaciones como "Fade In".

Uso de repetidores para organizar contenido

• Los repetidores permiten mantener un diseño uniforme en las categorías dentro de una sección, lo que mejora la interacción del usuario con el contenido.

• Se presentan diferentes formas de mostrar productos y colecciones en un sitio web; los repetidores son una herramienta visual efectiva para esto.

Creación de un repetidor

• Un repetidor es esencialmente una lista con el mismo diseño pero diferente contenido. Son adaptables a diferentes tamaños de pantalla.

• Para crear un repetidor, primero se añade una sección vacía y luego se selecciona un tipo específico de repetidor interactivo.

Personalización del texto y contenido

• Al personalizar un repetidor, es fundamental incluir encabezados que informen a los visitantes sobre el contenido presentado.

• Se pueden realizar cambios en fuentes, tamaños y colores del texto para ajustarlo al estilo deseado. Además, se puede establecer qué sucede al pasar el mouse sobre cada elemento.

Diseño y ajustes finales

• Es posible conectar colecciones de contenido al repetidor para mejorar su funcionalidad. Hay recursos adicionales disponibles sobre cómo trabajar con gestores de contenido.

• Las interacciones al pasar el mouse pueden ser ajustadas en términos de tiempo y efecto visual. Esto permite crear experiencias más atractivas para los usuarios.

Resumen final sobre interacciones

¿Cómo mejorar la interacción en tu sitio web?

Efectos de desplazamiento

• Se presentan diferentes tipos de efectos de desplazamiento que añaden movimiento y crean una experiencia fluida para los usuarios al explorar el sitio.

• Al agregar un efecto de desvanecimiento al fondo, este se mostrará a medida que el visitante desplaza hacia abajo, mejorando la estética visual del sitio.

• En la sección de "mejores vendedores", se implementa un efecto de desvanecimiento inverso, donde el color del fondo cambia a blanco al desplazarse hacia abajo y reaparece al subir.

Interacciones con el mouse

• Las interacciones por hover permiten que los elementos cambien cuando el cursor pasa sobre ellos, añadiendo un toque lúdico al sitio.

• Se puede personalizar el diseño del botón para cambiar su color y texto cuando se activa la interacción por hover.

• Es posible aplicar efectos adicionales como resaltar toda una caja o elemento mediante interacciones por hover, lo cual mejora la atención visual.

Animaciones

• Las animaciones pequeñas pueden guiar a los visitantes y mantenerlos en el sitio más tiempo; es importante no saturar la página con demasiadas animaciones.

• Se pueden añadir animaciones a textos e imágenes; por ejemplo, cambiar una animación lateral a una flotante para mayor impacto visual.

• Al personalizar las animaciones, se puede ajustar la duración y suavidad del efecto para lograr una presentación más atractiva.

Creación de lightboxes

• Los lightboxes (o pop-ups) son herramientas efectivas para fomentar la interacción en el sitio; deben usarse adecuadamente para maximizar su eficacia.

Cómo crear un Lightbox para promociones

Personalización del Lightbox

• Se puede utilizar un lightbox para compartir información importante como ofertas, promociones o eventos. Se inicia el proceso de creación desde el panel de adición.

• En modo Lightbox, se personaliza la imagen y se ajusta el título cambiando de "párrafo" a "Encabezado 4".

• Se eliminan elementos innecesarios como subtítulos y formularios de suscripción, y se añade un botón temático que enlaza a la página del producto.

Ajustes visuales y funcionales

• Es crucial ajustar el tamaño del botón para asegurar que todo el texto sea visible. También se cambia el color del overlay para que coincida con la marca.

• La opacidad del overlay se ajusta para permitir que los visitantes vean la página detrás, asegurando que no piensen que han salido de su sitio.

Configuración de aparición del Lightbox

• Se agrega una 'X' en el lightbox para facilitar su cierre por parte de los usuarios. Esto mejora la experiencia al evitar frustraciones con pop-ups persistentes.

• Se configura cuándo debe aparecer el lightbox; en este caso, después de cinco segundos en la página principal.

Preparativos antes de lanzar tu sitio web

Configuración inicial del sitio

• Antes de lanzar, es esencial revisar los detalles importantes en las configuraciones del sitio. Esto incluye establecer el nombre y categoría del negocio.

• También se puede añadir un logo y una breve descripción, así como información adicional sobre ubicación y contacto.

Importancia del Favicon

• El favicon es una pequeña pero significativa adición al sitio; debe ser legible y reconocible. Este icono aparece junto al título en las pestañas del navegador.

Herramientas adicionales en configuraciones

• Además, puedes agregar una imagen social general que se compartirá automáticamente si conectas tus cuentas sociales al panel de Wix.

Cómo conectar un dominio a tu sitio web

Importancia de un dominio

• Un dominio es el nombre o dirección que los usuarios y motores de búsqueda utilizan para acceder a tu sitio. Es fundamental elegir un nombre fácil de escribir, pronunciar y recordar.

Opciones de dominio en Wix

• Cada sitio de Wix incluye un dominio gratuito, ideal para principiantes. Cuando estés listo para avanzar, puedes comprar o conectar un dominio personalizado.

Búsqueda y conexión del dominio

• Wix ofrece una herramienta de búsqueda de nombres de dominios que verifica la disponibilidad. Una vez elegido el nombre, se puede conectar directamente desde el Editor.

Múltiples dominios

• No estás limitado a un solo dominio; agregar más permite que más visitantes te encuentren. Por ejemplo, podrías comprar variaciones del mismo nombre con diferentes extensiones.

Proceso de compra y tiempo de conexión

• Si decides comprar un nuevo dominio, ten en cuenta que puede tardar hasta 24 horas en conectarse a tu sitio. Se recomienda realizar este paso unos días antes del lanzamiento.

Revisión final antes del lanzamiento

Comprobaciones previas al lanzamiento

• Antes de publicar, revisa todo el contenido por errores tipográficos y asegúrate de que las decisiones sobre el texto sean consistentes.

Verificación de enlaces

• Asegúrate de que todos los enlaces funcionen correctamente al navegar por el menú del sitio, botones e imágenes.

Accesibilidad y vista móvil

• Utiliza el Asistente de Accesibilidad para garantizar que tu sitio sea accesible para todos los visitantes. También es crucial previsualizar la versión móvil si has realizado cambios específicos en su contenido.

Publicación final