Creadores web

Tutorial: Como crear una página web en Wix (2022)

Raphaël DamainInka Wibowo

Por Raphaël & Inka

wix tutorial

Tooltester se respalda gracias a sus lectores. Puede que recibamos comisiones de afiliación cuando creas una cuenta con alguno de nuestros enlaces. Esto hace que podamos ofrecerte todos nuestros recursos, guías y tutoriales completamente gratis.

A menudo, los creadores web se anuncian como “la forma más fácil de hacer una página web”. Y entre estos programas, ninguno es mayor que Wix, con más de 200 millones de usuarios en todo el mundo (en este post, en inglés, puedes ver algunos ejemplos de páginas webs reales hechas con Wix).

A pesar de esto, las innumerables opciones de edición y personalización de Wix pueden superar un poco a los nuevos usuarios.

En este extenso tutorial, cubrimos los puntos principales que necesitarás saber para crear tu propia página web en Wix, explicándolos paso a paso.

Aunque no entraremos en cada detalle de absolutamente todo lo que se puede hacer con Wix (¡son demasiadas cosas!), te prometemos que, cuando acabes este tutorial sobre Wix, sabrás suficiente para hacer una página web sencilla, pero profesional, lista para colgar en internet.

¡Pues vamos a ello!

¿Para quién está pensado este tutorial de Wix?

Este tutorial es perfecto para ti si:

  • Eres principiante y necesitas una guía paso a paso de cómo crear una página web en Wix.
  • Tu web será relativamente pequeña y sencilla (por ejemplo, un sitio web personal o de empresa sin mucho contenido).
  • No necesitas funcionalidades complejas (como tienda online, chat o reservas online; aunque pueden hacerse con Wix, no lo trataremos en este tutorial).

Nuestra opinión sobre Wix:

Tutorial de Wix paso a paso

Puedes seguir los pasos de nuestro vídeo o leer la versión escrita. O las dos cosas, lo que mejor te vaya.

wix tutorial 1

Prueba Wix gratis aquí.

Paso 1: Registrarse en Wix

Lo primero que tienes que hacer es registrarte en Wix, algo puedes hacer aquí. Es totalmente gratis y, si no te importa que tu web utilice un dominio de Wix (p. ej. tunombre.wixsite.com/tusitioweb), será totalmente gratis. Y si necesitas uno de los planes de pago de Wix, tampoco tendrás que pagar hasta que tengas la web lista.

A continuación, te harán una serie de preguntas sencillas sobre el tipo de web que quieres crear y tu experiencia.

wix tutorial 2

Paso 2: Elige entre Wix ADI o el editor

El siguiente paso seguramente será la mayor decisión que tendrás que tomar sobre tu web: ¿deberías usar Wix ADI (artículo en inglés) para que te cree directamente una web (que puedes modificar un poco) o usar las plantillas y el editor, que te dará más trabajo, pero te permitirá controlar mejor el diseño? Wix te propondrá una de las dos opciones en función de lo que hayas contestado en el paso 1.

wix tutorial 3

Nota: Siempre puedes pasarte de la herramienta ADI al editor normal de Wix, pero no al revés.

Yo te recomendaría el ADI solo si:

  • Tu web va a ser muy pequeña (1-5 páginas).
  • Necesitas tener una página web colgada en internet rápidamente.
  • No te importa no tener mucho control sobre el diseño.

Con el editor de Wix, tendrás muchas más opciones para personalizar el diseño, así como acceso a más apps y widgets, así que si quieres una web más avanzada esta es la opción que más te conviene.

Por este motivo, hemos elegido Wix Editor para los siguientes pasos

Paso 3: Elige tu plantilla

¡Ahora es cuando empieza a ponerse interesante! En función de la categoría que hayas elegido, Wix te recomendará unas cuantas plantillas; todo lo que tienes que hacer es elegir la que más te guste.

wix tutorial 4

Wix tiene cientos de plantillas de aspecto moderno, así que no debería resultarte difícil encontrar una con la que empezar a trabajar. Recuerda que el editor te permitirá hacer todos los cambios que necesites, así que no te preocupes mucho si no encuentras exactamente lo que quieres, solo hace falta que sea cercano.

Para ver una plantilla, pasa el ratón por encima y pulsa en “Ver”.

wix tutorial 5

wix tutorial 6

Cuando hayas encontrado la plantilla adecuada, simplemente pulsa en “Editar”. En nuestro caso, elegiremos “Músico de Jazz” de la categoría “Música”.

Paso 4: Familiarízate con el editor

A continuación, entrarás en el editor de Wix, desde donde podrás hacer cambios a tu web. Si te salta una ventana emergente sobre la plataforma Velo de Wix, puedes pulsar en ella para ignorarla, ya que es algo que solo necesitarán los usuarios avanzados.

Lo siguiente es asegurarnos de que el “Modo desarrollador” esté desactivado para que no veas ventanas innecesarias (que solo hacen falta si tienes que hacer cambios al código de programación). Para ello, pasa el ratón sobre “Modo desarrollador” en el menú superior y después pulsa en “Desactivar”.

wix tutorial 7

Deberías ver algo parecido a esto:

wix tutorial 8

Si no ves la barra de herramientas de la derecha de la página, no te preocupes, simplemente pulsa en “Herramientas” en la parte superior derecha y comprueba que esté marcada la casilla “Barra de herramientas”.

wix tutorial 9

Permíteme ahora que, antes de enseñarte cómo empezar a hacer cambios a tu web, te haga un resumen de lo que estás viendo.

wix tutorial 10

1. La página que estás viendo es la página de inicio de tu web, ¿a que hace ilusión? En esta parte de la pantalla es desde donde harás todos los cambios a tu contenido, es decir, el texto, las imágenes y las secciones.

2. Si quieres añadir más páginas a tu web, puedes hacerlo desde el menú de la izquierda. De hecho, el menú izquierdo sirve para añadir todo lo que vayas necesitando añadir a la web: menús, imágenes, formularios, blogs, apps, etc. Pulsa en cada uno de los botones para hacerte una idea de las opciones que tienes disponibles. Un poco más adelante te explicaré en más detalle cómo utilizar esta sección.

3. El menú superior te da acceso a las funciones de administración de tu web (nombre de dominio, SEO, etc.). De momento no tienes que preocuparte de esto, así que lo trataremos en más detalle un poco más adelante.

4. La barra de herramientas de la derecha sirve para modificar el aspecto del contenido de tu web (por ejemplo, alinear o girar las imágenes). Aunque, para ser sincero, esta es probablemente la parte que menos uso, ya que muchos de los cambios pueden hacerse directamente con el editor (en la sección 1 anterior).

Por el momento, lo más importante es que sepas que desde la parte superior de esta parte de la pantalla puedes deshacer (y rehacer) cualquier cambio, así como guardarlos (aunque la función de guardado automático también se ocupará de esto). Pasando el ratón sobre el enlace “Guardar”, puedes también acceder al historial de tu sitio y restaurar versiones anteriores.

wix tutorial 11

¿Sigues aquí? ¡Estupendo! Empecemos entonces a editar tu web.

Paso 5: Editar tu página de inicio

Prácticamente todo lo que ves en el editor de Wix (textos, imágenes, fondos, etc.) es editable, tan solo tienes que hacer doble clic en un elemento. Así que empecemos pulsando dos veces en el título principal.

wix tutorial 12

Escribe el texto que quieras. Notarás que también aparece una nueva ventana llamada “Opciones de texto”, desde la que puedes cambiar el tipo, tamaño y color de las fuentes, así como añadir efectos. Así que vete probando tranquilamente, recuerda que siempre puedes deshacer los cambios pulsando sobre la flecha que del menú superior que gira hacia la izquierda.

wix tutorial 13

Consejo: Intenta no usar más de 3 o 4 tipos de fuentes diferentes y asegúrate de usar siempre los formatos estándar “Encabezado 1, 2, 3” para que tu diseño quede uniforme.

También puedes editar el texto situado debajo del encabezado principal exactamente de la misma manera. Si quieres borrar algún elemento de texto, haz clic en él y aprieta el botón “Suprimir” de tu teclado (o el dibujito de la papelera de la barra de herramientas derecha).

wix tutorial 14

Hasta ahora, todo bien. ¿Pero qué pasa si quieres cambiar la imagen de fondo? Es fácil, simplemente haz clic sobre ella, en cualquier. Te aparecerá un botón con el texto “Cambiar fondo de página”. Pulsa en él para ver opciones para sustituir la imagen actual por un bloque de color, una imagen nueva, o incluso un vídeo.

wix tutorial 15

Si pulsas en “Imagen”, puedes elegir entre subir tu propia fotografía o elegir una de stock de Wix, Unsplash o Shutterstock (los dos primeros bancos de imágenes son gratuitos).

wix tutorial 16

Con la imagen ya elegida, nuestra página de inicio tiene este aspecto:

wix tutorial 17

¡Me encanta! Ahora muévete hacia abajo con el ratón para seguir haciendo otros cambios.

Paso 6: Borrar, añadir y editar secciones de tu página de inicio

Según vayas bajando, es posible que quieras quedarte con algunas de las secciones horizontales de tu plantilla, pero borrar o cambiar otras. No hay ningún problema.

Empecemos por la parte fácil, borrar secciones (o “franjas”, como las llama Wix). Para hacerlo, ve a la barra de herramientas superior y pulsa en el botón “Alejar y reorganizar”.

wix tutorial 18

Esto hará que veas una imagen ampliada de tu página web. Haz clic en la franja que quieras borrar. Quedará enmarcada por un borde azul. Para borrarla, simplemente pulsa en el icono de la papelera que aparecerá a la derecha de la sección.

wix tutorial 19

Puedes también reordenar las secciones haciendo clic sobre los iconos de las flechas que aparecen al lado, y que permiten mover la sección hacia arriba o abajo de la página.

¿Y si quieres añadir nuevas secciones?

Bueno, ahora es cuando te será útil la barra de herramientas de la izquierda.

Primero, haz clic en el botón verde “Salir del modo”, situado en la parte superior derecha de la pantalla, para volver al editor.

Ahora, en la barra de herramientas de la izquierda, pulsa sobre el botón con el símbolo + (“Agregar”). Te aparecerá una lista larguísima con todos los diferentes elementos que puedes añadir a tu página: texto, imágenes, botones, etc.

Por ejemplo, podrías querer agregar una nueva franja para sustituir la que acabas de borrar. Esta franja servirá de “recipiente” para el contenido (texto, imágenes, etc.) que quieras añadir a la sección. Puedes elegir entre una franja “clásica” (vacía) o una ya con contenido (como una franja “Acerca de” o “Testimonios”, por ejemplo). A continuación, solo tendrás que arrastrarla o soltarla en la parte que quieras de la página.

wix tutorial 20

Nosotros añadiremos una franja clásica, y después cambiaremos el color de fondo para que quede bien con la plantilla que estamos utilizando. Lo haremos de la misma forma que cambiamos el fondo en el paso 5: seleccionamos la franja, hacemos clic en el botón “Cambiar el fondo de la franja” y después en “Color” para cambiarlo a amarillo.

wix tutorial 21

Pasemos ahora a añadir contenido. Yo te recomendaría explorar todas las opciones disponibles que te salen apretando el icono + y jugar un poco añadiendo diferentes elementos a tu nueva franja (como ya sabes, siempre puedes deshacer los pasos que no te acaben de gustar).

wix tutorial 22

Por ejemplo, si quieres añadir a la franja un encabezado y texto, puedes primero agregar un “encabezado 1”, después arrastrarlo hasta donde lo quieras colocar y finalmente hacer doble clic para cambiar el texto.

wix tutorial 23

Para añadir texto debajo de este encabezado, repite el mismo proceso, pero esta vez, en vez de elegir “Títulos”, elige una de las opciones de “Párrafos”.

wix tutorial 24

De nuevo, arrastra este elemento y colócalo donde quieras, después haz doble clic para modificar el texto. Recuerda que puedes cambiar las fuentes, los colores y el diseño como quieras desde el recuadro “Opciones de texto”.

wix tutorial 25

¡Pues no está quedando mal” Pero ¿qué pasa si quieres agregar otros elementos?

Por ejemplo, una figura como fondo del texto? Tampoco tiene misterio, se hace de la misma manera, pulsando el botón + de la barra de herramientas de la izquierda y, esta vez, eligiendo “Decorativo”.

wix tutorial 26

Selecciona la figura que quieras y colócala donde te interese de la página. Si queda tapando el texto (y no detrás de él, en el fondo), solo tienes que hacer clic en el icono “Ordenar” y seleccionar “Mover hacia atrás”.

wix tutorial 27

¡Así está mucho mejor!

wix tutorial 28

Paso 7: Añadir una galería de imágenes

Si quieres añadir una galería de imágenes a tu página web, puedes hacerlo fácilmente. De nuevo, haz clic en el botón + de la barra de herramientas de la izquierda y elige “Galerías”. Te aparecerán un montón de opciones entre las que elegir.

wix tutorial 29

Simplemente selecciona la que te interese y colócala donde quieras en la página (si no te cabe y necesitas hacer más espacio, recuerda que puedes arrastrar hacia más abajo otras franjas y secciones).

Si tu plantilla ya contiene una galería de imágenes (como la nuestra), todo lo que tendrás que hacer es pulsar en la galería para seleccionarla. Verás que te aparecen unas cuantas opciones, como “Organizar multimedia” y “Opciones”.

wix tutorial 30

Desde “Opciones”, puedes modificar la disposición de la galería, así que si prefieres que tenga otro aspecto, puedes hacer el cambio ahora.

wix tutorial 31

Es el momento de añadir tus propias imágenes seleccionando “Organizar multimedia”. Borra todas las imágenes actuales y haz clic en “Agregar media” para subir las tuyas, sean propias o de stock de Wix o Unplash, por ejemplo.

wix tutorial 32

Desde esta misma ventana puedes también editar el título y la descripción de cada una de tus imágenes (que es algo que no se mostrará en tu web, pero es bueno para el SEO), así como añadir enlaces (si quieres).

Así es como queda la versión final :

wix tutorial 33

Paso 8: Añadir un formulario de contacto

En la mayoría de los sitios web es importante tener un formulario de contacto. Aunque puedes agregarlo en otra página, voy a enseñarte a hacerlo en tu página de inicio.

De nuevo, pulsa + en la barra de herramientas de la izquierda. Después elige en “Formularios” el que quieras utilizar (no te preocupes, podrás cambiar los campos y estilos, en un minuto te explico cómo).

wix tutorial 34

Coloca el formulario en la zona que quieras de la página. En nuestro caso, queremos que quede debajo del todo, justo encima del pie.

wix tutorial 35

Pasemos ahora a modificar los campos del formulario. En este ejemplo, lo utilizaremos para que los clientes puedan hacernos un pedido, así que nos interesa añadir algunos campos más.

Haz clic en el formulario y después en el botón “Agregar nuevo campo” que te aparecerá. A continuación, elige el tipo de campo que quieres añadir.

wix tutorial 36

Una vez que hayas añadido el nuevo campo, pulsa en él dentro del formulario. Para cambiar el título del campo, haz clic en “Editar campo”.

wix tutorial 37

Cuando hayas añadido y editado todos los campos que necesites, es el momento de modificar el estilo para que el formulario quede bien con tu web. Simplemente, haz clic en él y vete al botón del pincel. Luego haz clic en “Diseño”, desde donde podrás cambiar colores, fuentes, el botón “Enviar”, etc.

wix tutorial 38

Así es como nos ha quedado el formulario, ¿a qué está quedando bien?

wix tutorial 39

Paso 9: Últimos retoques

¡Ya casi estamos listos para poder publicar tu web de Wix! Solo necesitamos dar unos últimos toques.

Puede que, en tu plantilla, hayas visto algunas cosas aquí y allá que no quieres incluir, un logo flotante, iconos de redes sociales o un chat, por ejemplo.

Para librarnos de ellos, simplemente los borraremos igual que hemos hecho antes: selecciona el elemento y, o bien a) pulsa “Suprimir” en tu teclado, o bien b) haz clic en la papelera de la barra de herramientas de la derecha.

En nuestro caso, como estamos haciendo una web de una sola página, queremos eliminar el menú flotante que aparece en la parte superior, así que vamos a seleccionarlo y borrarlo.

wix tutorial 40

Si quieres que tu web tenga varias páginas y necesitas ayuda para editar el menú, echa un vistazo a este útil tutorial de Wix.

Cuando hayas borrado todos los elementos que no te hacen falta, ya solo tendrás que asegurarte de que el pie (la sección de la parte inferior de la página) esté actualizado. Haz doble clic en esta sección para introducir tu información de contacto y cualquier otra que quieras incluir. Puedes también añadir imágenes o figuras, tal como hemos hecho en la imagen inferior.

wix tutorial 41

¿Te gusta cómo va quedando tu página web? Estupendo, ¡entonces ya estamos en el tramo final! Pasemos al siguiente paso, que de ninguna manera hay que saltarse.

Paso 10: Hacer tu web adaptable para móviles

Hasta ahora hemos trabajado en la versión de tu web para ordenador de escritorio. Pero con alrededor del 50 % del tráfico procedente de dispositivos móviles, es fundamental que sea adaptable para móviles.

Es una pena, pero las páginas web de Wix no vienen ya preparadas para móviles al 100 % y, para conseguirlo, tendremos que hacer unos pequeños ajustes.

En el menú superior (que hasta ahora no hemos usado), verás un icono con un móvil en la mitad de la pantalla. Pulsa en él para ir a la versión móvil de tu web.

wix tutorial 42

Como puedes ver, la versión para móviles no está del todo acabada, ya que algunos elementos se han descolocado. Primero, pulsemos en el botón “Optimizador de diseño” del menú de la izquierda, y después en “Optimizar ahora” para que Wix arregle automáticamente algunos de los elementos.

wix tutorial 43

Si quedan cosas todavía sin ajustar, como la posición de algún texto o la altura de las secciones/franjas, puedes ahora acabar de arreglarlas manualmente. Puedes borrar u ocultar los elementos innecesarios, e incluso reordenar secciones haciendo clic en las flechas situadas en la parte derecha de la pantalla del móvil.

wix tutorial 44

Los cambios que hagas a la versión móvil de tu web no afectarán a la de escritorio, así que puedes hacer los cambios y optimizar como quieras.

Paso 11: Actualizar tu información comercial y optimizar tu web para Google

El paso siguiente es totalmente opcional, pero te recomendamos que lo hagas si para tu empresa es importante aparecer en Google.

¿Te acuerdas del menú superior, el que te da acceso al panel de administración (la parte que no se ve)? Lo usaremos para actualizar la información comercial de tu web y optimizar tu sitio para mejorar tus posibilidades de que te encuentren en Google.

Haz clic en “Opciones” y después elige “Información comercial”.

wix tutorial 45

El programa te enviará a un panel desde donde podrás introducir tu información de contacto, la dirección de tu empresa y los ajustes regionales de tu web (idioma, moneda, etc.). No te olvides de dar a “Guardar” cuando acabes.

Wix tutorial business info

Una vez hecho esto, pasemos a los ajustes de optimización de búsquedas en internet. De nuevo, pulsa en “Opciones” en la barra de navegación superior y después elige “Aparece en Google”.

Esto te llevará al asistente de configuración para SEO de Wix, que te irá guiando por los pasos para optimizar tu web. Sigue cada paso uno a uno, introduciendo tu nombre comercial y cómo describirías tu empresa.

A continuación, Wix te mostrará tu plan personalizado de SEO. Te recomendamos que hagas todos los pasos para optimizar los diferentes elementos de tu web (título de la página de inicio, descripción para SEO, conexión a Google, etc.).

wix tutorial 47

Si estás muy pez en SEO, puedes ponerte al día con nuestra guía para hacer webs con SEO, para principiantes.

Paso 12: Vista previa y ¡publicación de tu web!

¡Enhorabuena, has llegado al último paso! Antes de publicar tu web, asegurémonos de que todo haya quedado bien. Haz clic en el botón de “Vista previa” de la parte superior derecha de la pantalla y asegúrate de estar satisfecho tanto con la versión para escritorio como con la de móviles.

wix tutorial 48

Para alternar entre las versiones móvil y de escritorio, pulsa en los iconos que te muestro en la imagen inferior:

wix tutorial 49

Verás que en la parte superior de tu web hay un banner. Este aparece si usas el plan gratuito de Wix. Si quieres quitarlo y acceder también a más funcionalidades, puedes pasarte a uno de pago (después te explico un poco más).

Cuando estés satisfecho de que todo ha quedado bien, pulsa en el botón verde “Volver al editor” situado en la parte superior derecha. Ahora es el momento, ¡lánzate y haz clic en el botón azul “Publicar”!, situado también en la parte superior derecha de la pantalla.

wix tutorial 50

¡Ya está!, ¡tu página web de Wix está colgada en internet! 🥳 🎉

Verás una pequeña pantalla emergente con el URL de tu página web gratuita. Puedes verla pulsando en “Ver sitio”. Si quieres usar tu propio dominio (tanto si el dominio ya es tuyo como si es nuevo), pulsa en “Haz upgrade ahora” para pasarte a un plan de pago.

wix tutorial 51

Si necesitas ayuda para elegir el plan que más te conviene, echa un vistazo a nuestra detallada guía de precios de Wix.

Si quieres ver la web que hemos creado con este tutorial, aquí la tienes.

Tutorial de Wix: Conclusión

En este tutorial de Wix, hemos cubierto los aspectos básicos que necesitas saber para llegar a tener una página web sencilla, pero funcional, publicada con Wix. Pero, con este creador web, uno de los más potentes del mercado, puedes hacer muchas más cosas. Puedes encontrar más información en nuestro análisis de Wix.

Si te animas a probar Wix, puedes mpezar por aquí.

Aunque no he hablado de ello, puedes añadir sin problemas un blog a tu web de Wix, aquí puedes ver cómo. Sin embargo, si el uso principal de tu web es el blog, creemos que Squarespace (artículo en inglés) o WordPress serían opciones mejores.

Si quieres usar tu web para vender productos físicos o digitales, puedes añadirle la app Wix Stores (aquí tienes las instrucciones para hacerlo). Aunque con el plan gratuito puedes configurar la tienda, para empezar a vender productos necesitarás elegir entre uno de los planes de ecommerce de Wix.

Wix tiene una gran cantidad de apps y widgets que te permiten añadir funcionalidades adicionales a tu web, como Wix Bookings, Wix Membership, Wix Shoutout (la herramienta de envío de emails de Wix), entre muchísimas otras. Incluso tienen apps específicas para páginas web de restaurantes, hoteles y otros negocios. Echa un vistazo al Wix App Market para ver qué hay disponible y consulta en el Centro de ayuda de Wix indicaciones sobre cómo instalar estas apps.

Wix tiene un extenso centro de ayuda con artículos y tutoriales para ayudarte con todo lo que necesites. Además, puedes también ponerte en contacto con el equipo de atención al cliente de Wix abriendo un ticket o pidiendo que te llamen.

Raphaël Damain

Content Manager

¡Bonjour! Tras graduarme con un máster en administración por la Escuela de Comercio de Grenoble, trabajé en los sectores de banca, comercio al por menor y B2B. Posteriormente, en 2014, me trasladé a España, donde estuve trabajando en una agencia de marketing. Tengo también un canal de YouTube con más de 18.000 suscriptores. Con más de 8 años de experiencia en creación de contenidos, ayudo a los usuarios a encontrar las mejores herramientas web que necesitarán para ganar dinero en internet.

Inka Wibowo

Content Manager

¡Hola! Me llamo Inka Wibowo. Empecé a usar creadores web y sistemas de gestión de contenidos hace más de 10 años, cuando gestionaba sitios web de los clientes en mi primer trabajo de marketing. Desde entonces, he participado en cientos de proyectos web y digitales. Ahora, en Tooltester, me encanta aprovechar mi experiencia para ayudar a usuarios como tú a encontrar el creador web más adecuado para sus necesidades.

Sobre nosotros

QUIÉN ESTÁ DETRÁS DE ESTE ARTÍCULO

Este artículo fue escrito y documentado gracias a una metodología precisa.

Metodología de Tooltester

Comentarios

Nuestra guía gratuita para principiantes

¿Todo esto te parece muy nuevo y quieres aprender un poco más? En nuestro ebook, “Guía rápida de creación web para novatos”, te mostramos, paso a paso, como crear un sitio web con un look profesional.

Nota: De vez en cuando también te mandaremos correos informativos (newsletters). Pero nunca compartiremos tu dirección de email con nadie más que nuestro proveedor de servicios de email.