¿Cómo funciona Wix? Una guía paso a paso para crear un sitio web Wix

Tooltester cuenta con el respaldo de lectores como usted. Podemos ganar una comisión de afiliado cuando compra a través de nuestros enlaces, lo que nos permite ofrecer nuestra investigación de forma gratuita.

Wix es una popular plataforma de creación de sitios web diseñada tanto para principiantes como para expertos. Ofrece un editor intuitivo de arrastrar y soltar que facilita la creación de un sitio web de aspecto profesional sin ningún conocimiento de codificación.

En esta guía paso a paso, te explicaremos cómo funciona Wix, desde elegir una plantilla hasta personalizar tu sitio con texto e imágenes. También cubriremos características importantes como la optimización SEO y la capacidad de respuesta móvil, para que pueda asegurarse de que su sitio web se vea genial en cualquier dispositivo. Y para que sea aún más fácil seguirlo, hemos incluido un video tutorial que demuestra cada paso del proceso.

Entonces, si estás listo para crear tu propio sitio web con Wix, ¡comencemos!

Cómo funciona Wix: nuestra guía paso a paso

En esta guía, crearemos un sitio web de restaurante con Wix, aunque los mismos pasos serán relevantes para la mayoría de los sitios web de pequeñas empresas. Mire nuestro video a continuación o siga cada paso a continuación en nuestra guía escrita.

Prueba Wix gratis aquí.

Paso 1: regístrate en Wix

Lo primero que debes hacer es registrarte en Wix, lo cual puedes hacer aquí. Es completamente gratis : no tendrás que pagar nada si estás contento de tener un sitio web gratuito usando un dominio Wix (por ejemplo, tunombre.wixsite.com/tu sitio). Si necesitas uno de los planes pagos de Wix, no tendrás que pagarlo hasta que tu sitio esté listo.

A continuación, se le harán una serie de preguntas sencillas sobre el tipo de sitio que desea crear y su nivel de experiencia.

Paso 2: elige Wix ADI o Editor

El siguiente paso es probablemente la decisión más importante que tendrás que tomar sobre tu sitio: ¿debes usar Wix ADI y crear un sitio para ti (que puedes modificar), o usar sus plantillas y su editor (más trabajo, pero tienes mayor control del diseño)? Wix sugerirá una de estas opciones, dependiendo de cómo respondiste a las preguntas en el paso 1.

Personalmente recomendaría ADI sólo si:

• Su sitio web será muy pequeño (1-5 páginas)
• Necesita tener un sitio en funcionamiento rápidamente
• No te importa demasiado no tener mucho control sobre tu diseño.

Con Wix Editor, obtendrás muchas más opciones para personalizar tu diseño, así como acceso a una gama mucho mayor de aplicaciones y widgets, por lo que esta será tu mejor opción si tus requisitos son para un sitio un poco más avanzado.

Es por eso que elegimos Wix Editor para continuar.

Paso 3: elige tu plantilla

¡Aquí es donde empieza a ponerse emocionante! Según la categoría que hayas elegido, Wix te sugerirá algunas plantillas; todo lo que tienes que hacer es elegir la que desees.

Wix tiene cientos de plantillas de aspecto moderno para elegir, por lo que no deberías tener problemas para encontrar una para empezar. Recuerde, el Editor le permitirá realizar los cambios que necesite, así que no se preocupe demasiado si no puede encontrar uno que sea exactamente lo que busca; solo debe estar cerca.

Para obtener una vista previa de una plantilla, coloque el mouse sobre ella y haga clic en "Ver". Luego, seleccione 'Ver demostración completa'.

Una vez que haya encontrado la plantilla correcta, simplemente haga clic en el botón "Editar". En nuestro caso, elegiremos la plantilla "Servicio de entrega de comida" en la categoría "Restaurantes y comida".

Paso 4: conozca al editor

Luego serás llevado al Editor de Wix, donde realizarás cambios en tu sitio. Si aparece una ventana emergente que le informa sobre la plataforma Velo de Wix, puede hacer clic para ignorarla; esto es algo que solo los usuarios avanzados necesitarán.

A continuación, queremos asegurarnos de que el modo de desarrollo esté desactivado, para que no vea ninguna ventana innecesaria (nuevamente, solo las necesitará si necesita realizar cambios en su código). Coloca el cursor sobre "Modo de desarrollo" en el menú superior, luego haz clic en "Desactivar el modo de desarrollo".

Debería quedarte con una vista similar a esta:

Si no ve la barra de herramientas a la derecha de la pantalla, no se preocupe: simplemente haga clic en "Herramientas" en la parte superior izquierda y asegúrese de que la casilla de verificación "Barra de herramientas" esté marcada:

Ahora, antes de mostrarte cómo empezar a realizar cambios en tu sitio, permíteme darte un resumen rápido de lo que realmente estás viendo:

1. La página que estás viendo es la página de inicio de tu sitio web. Muy buena, ¿no? Realizarás todos los cambios de contenido , es decir, cambios en el texto, las imágenes y las secciones, en esta parte de la pantalla.

2. Si desea agregar más páginas a su sitio, deberá hacerlo en el menú de la izquierda. De hecho, el menú de la izquierda es responsable de ayudarle a agregar todas las cosas adicionales que necesitará en su sitio : menús, medios, formularios, blogs, aplicaciones, etc. Haga clic en cada uno de los botones para tener una idea de las diferentes opciones disponibles aquí. ¡En breve veremos más de cerca cómo utilizar esta sección!

3. Esta barra de herramientas a la derecha le ayudará a modificar la apariencia del contenido de su sitio , por ejemplo, para alinear o rotar imágenes en sus páginas. Para ser sincero, esta es probablemente la sección que menos uso, ya que puedes realizar muchos cambios directamente en el Editor (sección 1).

4. El menú superior le da acceso a las funciones backend de su sitio web (nombre de dominio, SEO, etc.). No es algo de lo que deba preocuparse en este momento, así que lo cubriremos con más detalle un poco más adelante.

Por ahora, lo más importante que debes saber es que puedes deshacer y rehacer cualquier cambio en la parte superior derecha de esta sección, así como guardar los cambios (aunque la función Autoguardar también se encargará de eso). También puede acceder a su Historial del sitio para restaurar versiones anteriores del sitio, colocando el cursor sobre el enlace "Guardar".

¿Aún conmigo? ¡Excelente! Entonces comencemos a editar su sitio.

Paso 5: edita la 'sección de héroe' de tu página de inicio

Prácticamente todo lo que ves en el Editor Wix (texto, imágenes, fondos, etc.) es editable. Todo lo que necesitas hacer es hacer doble clic en un elemento y podrás editarlo. Entonces, comencemos haciendo doble clic en el encabezado principal.

Escribe el texto que quieras usar. También notarás que ha aparecido una nueva ventana llamada 'Configuración de texto': aquí puedes cambiar la fuente, el tamaño de fuente, el color e incluso agregar efectos. Así que adelante, juega y recuerda que siempre puedes deshacer los cambios presionando la flecha hacia atrás en el menú superior.

También puedes editar cualquier texto debajo del título principal exactamente de la misma manera. Si hay algún elemento de texto que desea eliminar, simplemente haga clic en el elemento y presione el botón "Eliminar" en su teclado (o el ícono de la papelera en la barra de herramientas derecha).

¡Hasta ahora, todo bien! ¿Pero qué pasa si quieres cambiar la imagen de fondo? Fácil: simplemente haga clic en cualquier lugar de la imagen de fondo. Verá un botón emergente con el texto " Cambiar fondo de la tira ". Haga clic en él y obtendrá opciones para reemplazar la imagen de fondo actual con un bloque de color, una nueva imagen o incluso un video.

Si haces clic en 'Imagen', puedes elegir cargar tu propia imagen o seleccionar una imagen de archivo de Wix, Unsplash o Shutterstock (las dos primeras son gratuitas).

Después de seleccionar nuestra imagen, la sección principal de nuestra página de inicio se ve así:

¡Se ve delicioso! Desplácese hacia abajo para seguir realizando cambios en su página de inicio.

Paso 6: eliminar, agregar y editar secciones en su página de inicio

Al desplazarse hacia abajo, es posible que desee conservar algunas de las secciones horizontales de su plantilla, pero eliminar o cambiar otras. Eso está totalmente bien.

Comencemos primero con lo fácil: eliminar secciones (o 'Tiras' como las llama Wix). En la barra de herramientas superior, haga clic en el botón 'Alejar y reordenar':

Esto lo llevará a una vista reducida de su sitio. Haga clic en la franja que desea eliminar. La franja quedará resaltada por un borde azul. Luego, simplemente haga clic en el ícono de la papelera a la derecha de la sección para eliminarla.

¿Qué tal si agregamos nuevas secciones ? Bueno, ahí es donde la barra de herramientas izquierda resulta útil.

Primero, haga clic en el botón verde "Salir del modo" en la parte superior derecha de la pantalla para volver a su Editor.

En la barra de herramientas izquierda, haga clic en el botón con el icono + ('Agregar'). Verás una lista enorme de opciones de todos los diferentes elementos que puedes agregar a tu página: texto, imágenes, botones, cajas de luz emergentes, etc.

Por ejemplo, es posible que desees agregar una nueva 'tira' para reemplazar la que acabas de eliminar. Esta tira funcionará efectivamente como un contenedor para el contenido (texto, imágenes, etc.) que desea agregar a esa sección. Elija entre una tira 'Clásica' (una en blanco) o una que ya tenga contenido: una tira 'Acerca de nosotros' o 'Testimonios', por ejemplo. Luego, simplemente haz clic y arrástralo a donde quieras en la página.

En nuestro caso, agregaremos una franja 'Clásica' y luego cambiaremos el color de fondo para que encaje con el tema de nuestro sitio. Haremos esto de la misma manera que cambiamos el fondo en el Paso 5: seleccione la tira, haga clic en el botón "Cambiar fondo de la tira" y luego haga clic en la opción "Color" para cambiarla a amarillo.

Ahora, juguemos agregando contenido. Mi mejor sugerencia sería explorar todas las opciones disponibles en el ícono + y probar a agregar diferentes elementos a su nueva tira. Nuevamente, siempre puedes deshacer cualquier cosa que no quieras conservar.

Por ejemplo, si desea agregar un título y texto a su tira , puede hacerlo agregando primero el 'Título 1'. Arrástrelo a donde desea colocarlo en la página y luego haga doble clic para cambiar el texto.

Para agregar texto debajo de este título, repita el mismo proceso, pero esta vez, en lugar de elegir "Título", elija una de las opciones de texto de "Párrafo".

Una vez más, arrastre para reposicionar el texto como desee y haga doble clic para cambiar el texto. Recuerde que puede cambiar la fuente, los colores y el estilo como desee, utilizando las opciones en el cuadro Configuración de texto.

¡Eso no tiene mala pinta! ¿Pero qué pasa si quieres agregar otros elementos? Por ejemplo, ¿una forma para usar como fondo del texto? No hay problema: puedes continuar y hacerlo de la misma manera haciendo clic en el botón + en la barra de herramientas izquierda. Esta vez elige 'Elementos decorativos'.

Seleccione la forma que desee y colóquela donde desee en la página. Si cubre el texto (en lugar de estar detrás de él como fondo), simplemente haga clic en el icono "Organizar" en la barra de herramientas derecha y seleccione "Enviar al fondo".

¡Esto se ve mucho mejor ahora!

Paso 7: agregar una galería de imágenes

Si desea incluir una galería de imágenes en su página , puede hacerlo fácilmente. Una vez más, usando la barra de herramientas izquierda, haga clic en el botón + y seleccione 'Galería'. Tendrás un montón de opciones de galería para elegir:

Simplemente seleccione el que desee y colóquelo como desee en la página (si necesita hacer más espacio, recuerde que puede arrastrar tiras/secciones más abajo).

Si su plantilla ya tiene una galería de imágenes (como la nuestra), todo lo que necesita hacer es hacer clic en la galería para seleccionarla. Verás aparecer algunas opciones, incluidas "Administrar medios" y "Configuración":

Elegir 'Configuración' te permitirá cambiar el diseño de cómo se muestra tu galería, así que si prefieres otro diseño, continúa y selecciónalo:

Luego puede agregar sus propias imágenes seleccionando 'Administrar medios'. Elimina todas las imágenes actuales y haz clic en "Agregar medios" para cargar las tuyas, o selecciona algunas de la colección de fotografías de archivo de Wix.

En esta misma ventana, también puedes editar el título y la descripción de cada una de tus imágenes (estas no serán visibles en tu sitio, pero son buenas para SEO), así como agregar enlaces (si lo deseas).

Así es como se ve el producto final:

Paso 8: agregar un formulario de contacto

Un formulario de contacto es una parte esencial de la mayoría de los sitios web. Si bien puedes agregar un formulario de contacto en una página separada, te mostraré cómo agregar uno a tu página de inicio.

Una vez más, usando la barra de herramientas izquierda, haga clic en el botón +. Seleccione 'Contacto y formularios' y elija el formulario que desea incluir (no se preocupe, todos los campos y estilos se pueden cambiar; le mostraré cómo en un minuto).

Coloque su formulario como desee en la página. En nuestro caso, lo queremos al final de la página, justo encima del pie de página:

Primero cambiemos los campos de nuestro formulario. En nuestro caso, queremos usarlo para permitir a los clientes realizar un pedido, por lo que queremos agregar algunos campos adicionales.

Haga clic en su formulario y luego en el botón "Agregar nuevo campo" que aparece. Luego elija el tipo de campo que desea agregar:

Una vez que haya agregado su nuevo campo, haga clic en ese campo dentro del formulario. Haga clic en el botón 'Editar campo' para editar el título del campo:

Para editar las opciones de selección, haga clic en el botón 'Administrar opciones':

Una vez que haya agregado y editado todos los campos que necesita, es hora de cambiar el estilo de su formulario para que coincida con su sitio. Simplemente haga clic en el formulario y luego presione el botón del pincel. Haga clic en "Personalizar diseño" y podrá cambiar los colores, las fuentes, el botón de enviar, etc.

Así es como se ve nuestro formulario ahora: ¡muy genial!

Paso 9: ordenar tu página web

¡Estamos a punto de estar listos para publicar tu sitio Wix! Así que atemos los últimos cabos sueltos.

En su plantilla, es posible que haya notado algunas partes adicionales que realmente no deseaba incluir : un logotipo flotante, íconos de redes sociales o un widget de chat, por ejemplo.

Para deshacernos de cualquiera de estos, simplemente lo eliminaremos como eliminamos otros elementos anteriormente: seleccione el elemento y a) presione 'Eliminar' en su teclado, ob) haga clic en el ícono de papelera en la barra de herramientas derecha. .

En nuestro caso, dado que solo estamos creando un sitio de una sola página, queremos deshacernos del menú flotante que aparece en la parte superior de la página, así que lo seleccionaremos y eliminaremos.

Una vez que haya eliminado todos los elementos que no necesita, solo debemos asegurarnos de que su pie de página (la sección en la parte inferior de la página) esté actualizado . Haga doble clic en esta sección para ingresar sus datos de contacto y cualquier otra información relevante que desee incluir. También puedes agregar imágenes, como lo hemos hecho a continuación:

¿Estás satisfecho con el aspecto de tu página? Genial, ¡entonces estamos en la recta final! Pasemos al siguiente paso: es uno que definitivamente no queremos omitir.

Paso 10: hacer que su sitio web sea compatible con dispositivos móviles

Hasta ahora, hemos estado trabajando en la versión de escritorio de su sitio web. Pero dado que alrededor del 50% del tráfico proviene de dispositivos móviles, es esencial asegurarse de que su sitio sea compatible con dispositivos móviles .

Desafortunadamente, los sitios web de Wix no están 100% preparados para dispositivos móviles de forma predeterminada. Tendremos que hacer algunos pequeños ajustes para llegar allí.

En el menú superior (que realmente no hemos usado hasta ahora), verá un ícono de móvil en el medio de la pantalla; haga clic en él para cambiar a la vista móvil de su sitio.

Como puede ver, la versión móvil del sitio aún no está del todo bien: algunos elementos están fuera de lugar. En primer lugar, hagamos clic en el botón 'Optimizador de diseño de página' en el menú de la izquierda y luego en 'Optimizar ahora', para permitir que Wix arregle automáticamente algunos de los elementos.

Ahora puedes continuar y arreglar manualmente cualquier cosa que no se vea bien, incluida la ubicación de cualquier texto y la altura de tus secciones/tiras. Puedes eliminar u ocultar cualquier elemento innecesario e incluso reordenar las secciones haciendo clic en los iconos de flecha a la derecha de la pantalla del móvil.

Paso 11: actualice los detalles de su empresa y optimice su sitio para Google

El siguiente paso es completamente opcional, pero lo recomendamos si ser encontrado en Google es importante para su negocio.

¿Recuerda el menú superior, el que le da acceso al backend (es decir, la parte "invisible") de su sitio? Lo usaremos para actualizar los detalles comerciales de su sitio y optimizarlo para aumentar sus posibilidades de que lo encuentren en Google.

Haga clic en "Configuración" y luego elija "Información comercial".

Luego accederá a un panel donde podrá ingresar sus datos de contacto, la dirección comercial si la tiene y la configuración regional de su sitio (idioma, moneda, etc.). No olvides hacer clic en "Guardar" una vez que hayas terminado.

Una vez hecho esto, ocupémonos de la configuración de optimización de búsqueda. Nuevamente, haga clic en "Configuración" en la barra de navegación superior y luego elija "Ser encontrado en Google".

Esto te llevará al Asistente de SEO de Wix, que te guiará por los pasos para optimizar tu sitio. Siga cada paso, ingresando el nombre de su empresa y cómo describiría su empresa.

Luego se le presentará su plan de SEO personalizado; le recomendamos seguir cada paso para optimizar los distintos elementos de su sitio (título de la página de inicio, descripción de SEO, conexión a Google, etc.).

Paso 12: ¡Obtenga una vista previa y publique su sitio!

Felicitaciones, ¡ha llegado al último paso! Antes de publicar su sitio, asegurémonos de que todo se vea bien. Presione el botón "Vista previa" en la parte superior derecha de la pantalla y verifique que esté satisfecho con las versiones de escritorio y móvil de su sitio.

Para cambiar de la vista de escritorio a móvil (y viceversa), haga clic en los iconos a continuación:

Verás un anuncio publicitario en la parte superior de tu sitio que dice "Crea tu sitio web Wix hoy". Esto se mostrará si mantienes tu sitio web en el plan gratuito de Wix. Si deseas eliminarlo y acceder a más funciones de Wix, puedes actualizar a un plan pago (más sobre esto más adelante).

Una vez que esté satisfecho de que todo se ve bien, haga clic en el botón verde "Volver al editor" en la parte superior derecha de la pantalla. Ahora, sigamos adelante y presionemos el botón azul "Publicar", nuevamente en la parte superior derecha de la pantalla.

Y eso es todo: ¡tu sitio Wix ya está activo!

Verás una pequeña pantalla emergente con la URL de tu sitio web gratuito de Wix; puedes hacer clic en "Ver sitio" para echar un vistazo a la página publicada. O, si deseas utilizar tu propio dominio para tu sitio web (ya sea un dominio existente o uno nuevo), haz clic en "Actualizar ahora" para actualizar a uno de los planes pagos de Wix.

Si desea ver el sitio que creamos en este tutorial, compruébelo aquí.

¿Cómo funciona Wix? Conclusión

¡Esperamos que haya ayudado a responder tu pregunta sobre cómo funciona Wix!

Como puedes ver, Wix te permite crear un sitio web simple pero completamente funcional utilizando las plantillas flexibles y el editor de arrastrar y soltar de la plataforma.

Pero esto en realidad es solo una muestra de lo que ocurre. Gracias a sus potentes funciones, se puede hacer mucho más con Wix. Puede consultar nuestra revisión de Wix para obtener más información o ver algunos ejemplos de sitios web reales creados con Wix.

Si estás listo para comenzar con Wix, puedes comenzar a crear tu sitio web aquí.