8 pasos para crear un sitio web desde cero

Build a Website from Scratch

Crear un sitio web sólo implica unos pocos pasos: definirlo, elegir un nombre de dominio, seleccionar un servicio de alojamiento, construirlo con WordPress, darle un aspecto atractivo con Elementor Pro, añadir unos cuantos plugins y lanzarlo.

Lo que aprenderás

Bienvenido a la guía más completa para construir tu sitio web desde cero. Esta guía es para los que quieren construir un sitio web (o varios) de cero a cien. Se aplica tanto a los principiantes absolutos como a los desarrolladores web más avanzados.

No te recomiendo que utilices plataformas como Wix o Squarespace simplemente porque son plataformas de código cerrado, lo que significa esencialmente: que si se caen, también se caen tus sitios web… WordPress, en cambio, es de código abierto (y gratuito).

Crear un sitio web con WordPress no sólo es fácil (si sigues los pasos), sino que también proporciona un control total de tus activos, diseños y del sitio web en general.

1. ¿Cuál es la finalidad de tu sitio web?

Antes de sumergirte en el proceso de creación de un sitio web, es importante que comprendas la finalidad de tu sitio web. ¿Estás creando un sitio web para tu empresa, una tienda online (comercio electrónico), un blog o un portafolio personal? Cada tipo de sitio web sirve a un objetivo distinto y requiere un diseño y una estrategia de contenidos específicos.

Conocer la finalidad de tu sitio web te ayudará a tomar decisiones informadas sobre su diseño, características y público objetivo.

Tipos de sitios web y sus finalidades


Sitio web del blog
: Se centra en compartir contenidos informativos y atractivos con los lectores, por lo que requiere un diseño limpio y organizado para mostrar eficazmente las entradas del blog.

Tienda online (comercio electrónico): Ofrece una plataforma para vender productos en línea, que requiere soluciones integrales de comercio electrónico para facilitar las transacciones en línea y la participación de los clientes.

Portafolio personal: Muestra el trabajo y los logros de una persona, y requiere un diseño visualmente atractivo y funcional para destacar sus habilidades y proyectos personales.

Los distintos tipos de sitios web dictan el contenido, el diseño y las funciones necesarias.

Objetivos del sitio web (y estilo)

Para crear un sitio web de éxito, empieza por establecer objetivos claros que guíen los esfuerzos de diseño, contenido y marketing. Ya sea para generar clientes potenciales, vender productos, compartir información o crear una comunidad, definir estos objetivos ayuda a medir el éxito a través de métricas como el tráfico y la participación.

Piensa en la tipografía que quieres utilizar y en la paleta de colores que vas a implementar como colores de tu marca/sitio web.

Todo sitio web necesita un tipo de letra bonito y una paleta de colores análoga.

Para la tipografía, me gusta buscar ideas en Google Fonts, es gratis. Intenta seleccionar sólo un máximo de 2 fuentes para tu sitio web. Si no, tendrá un aspecto un poco raro.

Fuentes Google

Para los colores, me encanta utilizar la herramienta Coolors. En su mayor parte es de uso gratuito y funciona muy bien para encontrar hermosas paletas de colores.

generador de color

Pasa el ratón por «herramientas» y selecciona «selector de color».

selector de color

Selecciona tus opciones de color y elige un color. Si tienes un color en mente, puedes escribirlo utilizando las opciones de «nombre» o añadir el código HEX.

Selecciona un ajuste de color

Una vez que hayas seleccionado tu color, se te proporcionará una página llena de combinaciones de colores, armonías, variaciones y mucho más. Incluye varias paletas de colores. ¡Asegúrate de guardarlas para más tarde!

paletas de colores

2. Seleccionar un nombre de dominio

No puedes tener un sitio web sin un nombre de dominio. Una dirección en línea única.

La mejor práctica consiste en elegir un nombre de dominio que refleje tu marca, sea fácil de recordar y esté en consonancia con la finalidad de tu sitio web.

Importancia de un buen nombre de dominio

Hay varias razones que hacen que un buen nombre de dominio sea importante:

Un buen nombre de dominio aumenta la confianza de los visitantes, mejora la experiencia del usuario y contribuye a la profesionalidad del sitio web.

Debe ser memorable, fácil de escribir y pronunciar, evitando los números para mayor claridad.

Incluir palabras clave relevantes puede mejorar la visibilidad en los buscadores y el tráfico orgánico.

Un dominio alineado con tu marca refuerza tu identidad online y ayuda a captar clientes.

Consejos para elegir el nombre de dominio perfecto

Cuando elijas un nombre de dominio para tu sitio web, ten en cuenta los siguientes consejos:

  • Ten en cuenta la sencillez y la facilidad de pronunciación a la hora de elegir un nombre de dominio.
  • Elige un nombre de dominio que destaque y sea fácil de recordar, para que sea más probable que la gente comparta y recomiende tu sitio web a otras personas.
  • Utiliza palabras clave relevantes en el nombre de dominio para la optimización de los motores de búsqueda.
  • Asegúrate de que el nombre de dominio se ajusta a tu marca e identidad empresarial.
  • Investiga la disponibilidad de dominios y considera extensiones de dominio alternativas.

Intenta elegir un dominio .com, ya que suele ser el más potente.

¿Dónde conseguir tu dominio?

Normalmente, pensarías en acudir a algún sitio como Godaddy o un registro de dominios similar para adquirir tu nombre de dominio. Podrías, pero entonces tendrías que transferir el dominio al alojamiento web y esto puede ser un proceso molesto e innecesario.

Por tanto, en el siguiente paso obtendremos el dominio directamente del proveedor de alojamiento.

3. Conseguir tu alojamiento web (y dominio)

Una vez que hayas elegido un nombre de dominio, el siguiente paso para crear tu sitio web es conseguir un proveedor de alojamiento web. El alojamiento web es el servicio que permite que tu sitio web sea accesible en Internet.

En esta sección exploraremos qué es el alojamiento web, por qué es importante y qué alojamiento web contratar para obtener el mejor rendimiento, porque no todas las empresas de alojamiento web son de fiar.

¿Qué es el alojamiento web?

El alojamiento web es un servicio que proporciona el espacio en el servidor y la tecnología necesarios para el almacenamiento del sitio web y el acceso en línea. Cuando creas un sitio web, éste consta de varios archivos, como HTML, CSS, PHP y contenido multimedia, como imágenes y vídeos. Los servicios de alojamiento web almacenan estos archivos del sitio web en potentes ordenadores llamados servidores, haciéndolos accesibles a los usuarios a través de Internet.

En términos sencillos, aquí es donde se almacenarán todas tus cosas (piensa en ello como en un disco duro). No tienes que preocuparte por esto ahora.

Factores a tener en cuenta al elegir un alojamiento web

A la hora de seleccionar un alojamiento web para tu sitio web, estos son los factores más importantes:

Fiabilidad, seguridad y asistencia.

Normalmente, al elegir un alojamiento web fiable como novato, lo harías:

Tienes que investigar, buscar reseñas y examinar la calidad de su hardware, red y centro de datos para garantizar un rendimiento óptimo.

Prioriza la escalabilidad, el ancho de banda y el almacenamiento para acomodar el crecimiento de tu sitio.

Opta por un alojamiento con un panel de control fácil de usar, como cPanel o Plesk, para una gestión sencilla del sitio.

Lee opiniones y compara planes de alojamiento para encontrar un servicio que satisfaga las necesidades y el presupuesto de tu sitio web, garantizando un alojamiento seguro y eficaz.

O, simplemente, puedes confiar en mí cuando te digo que he estado allí, he investigado y he utilizado cada uno de los siguientes proveedores de alojamiento que voy a recomendarte a continuación. Todos son proveedores de alojamiento WordPress recomendados.

WPX Hosting ⇒

WPX - Comparación de planes de alojamiento
WPX – Comparación de planes de alojamiento

Utiliza WPX si es así:

  • En cualquier parte del mundo
  • Buscas un servidor que destaque por su velocidad, seguridad y rendimiento
  • Un principiante o un avanzado
  • Busco un servicio completo (dominio y alojamiento)
  • Planificar la creación de más de un sitio web

Las mejores cualidades son:

  • Asistencia 24/7.
  • Correos electrónicos profesionales (gratis con un plan de alojamiento)
  • 230€ al año para 5 sitios web (WordPress estándar)
  • 325€ al año por 1 sitio web (WooCommerce)
  • Interfaz de usuario fácil de usar
  • Servidores extremadamente rápidos
  • CDN personalizado (para aumentar la velocidad)
  • Caché LiteSpeed
  • Sistemas de seguridad avanzados
  • Copias de seguridad automáticas (cada 28 días)
  • Migraciones de sitios ilimitadas
  • Servicios de correo electrónico incluidos gratis
  • y más

*Te recomiendo que utilices WPX si buscas servidores extremadamente rápidos y de alto rendimiento*.

Los servidores más rápidos del Oeste

SiteGround ⇒

SiteGround - Planes de alojamiento web

Utiliza SiteGround si es así:

  • En cualquier parte del mundo
  • Nuevo o avanzado en alojamiento web
  • Busco un servicio completo (dominio y alojamiento)
  • Planear construir sólo un sitio web

Las mejores cualidades son:

  • Asistencia 24/7
  • Nombre de dominio gratis con tu plan de alojamiento
  • Mismo precio para WordPress y Woocommerce (comercio electrónico)
  • Correos electrónicos profesionales (gratis con un plan de alojamiento)
  • Interfaz de usuario fácil de usar
  • Interfaz y soporte multilingües
  • CDN gratuito
  • Copias de seguridad automáticas del sitio web y del correo electrónico (diarias)
  • Límite de memoria de 728 MB (todos los planes)
  • 10 GB de espacio web
  • Marketing por correo electrónico integrado (9,99 € al mes extra)

*Te recomiendo que utilices SiteGround si piensas crear un único sitio web*.

Anuncio - Alojamiento Web de SiteGround - Creado para facilitar la gestión del sitio. Haz clic para obtener más información.

DinaHosting ⇒

Precios de DinaHosting

Utiliza DinaHosting si es así:

  • Situada en España o Europa.
  • Relativamente nuevo en alojamiento web
  • Busco un servicio completo (dominio y alojamiento)
  • Un particular o autónomo

Las mejores cualidades son:

  • Asistencia 24 horas al día, 7 días a la semana, por teléfono, correo electrónico o chat en su sitio web
  • Mismo precio para WordPress y Woocommerce (comercio electrónico)
  • Correos electrónicos profesionales (gratis con un plan de alojamiento)
  • Interfaz de usuario fácil de usar
  • Interfaz y soporte multilingües
  • Copias de seguridad automáticas del sitio web y del correo electrónico (mensuales)
  • 100 GB Almacenamiento en disco
  • Límite de memoria de 512 MB en el plan avanzado

*Asegúrate de seleccionar el plan de alojamiento Avanzado*.

DinaHosting

 

Conseguir el alojamiento y el dominio

Como queremos un servidor que destaque por su velocidad, ciberseguridad y rendimiento, ¡nos decantaremos por WPX!

Ve a WPX.net y selecciona un plan. Aquí, también puedes seleccionar si quieres un plan WordPress estándar o un plan WooCommerce

Selecciona un plan de alojamiento

Ve a «Voy a crear un nuevo sitio web» e introduce tu nombre de dominio.

Selecciona un nombre de dominio

Si tu nombre de dominio está disponible, continúa seleccionando el país en el que tú (o tu público) os encontráis.

  Selecciona la ubicación del país

Continúa los pasos y completa tu compra.

Antes de seguir adelante

Ahora que ya tienes tu dominio y tu alojamiento, hay algunas cosillas que tienes que hacer.

  1. Añade un certificado SSL a tu dominio. Esto garantizará una conexión segura entre tu sitio web y los visitantes. Dispones de uno gratuito que se llama «Let’s Encrypt». Deberías poder seleccionarlo fácilmente.
  2. Tendrás acceso a asistencia por chat 24 horas al día, 7 días a la semana, así que aprovéchalo si tienes alguna pregunta o duda.
  3. No debes trastear con nada del propio servidor a menos que sea necesario.

4. Construir tu sitio web en WordPress

Una vez que hayas conseguido un nombre de dominio y alojamiento web, es hora de empezar a construir tu sitio web. WordPress es una opción popular para la creación de sitios web, ya que ofrece un potente sistema de gestión de contenidos (CMS) y un control completo de todos los parámetros de tu sitio.

Construir tu sitio web en WordPress
El panel de WordPress

¿Por qué elegir WordPress?

¿Sabías que ¡el 62,8% de todos los sitios web están en WordPress

WordPress es un sistema de gestión de contenidos flexible y fácil de usar. Te permite crear cualquier tipo de sitio web, desde un simple blog hasta un completo sitio web empresarial o una tienda online. He aquí algunas razones por las que WordPress es una gran elección para construir tu sitio web:

1. Adaptable a las necesidades cambiantes

2. Fácil de usar, incluso para principiantes

3. Los plug-ins amplían la funcionalidad

Los plugins de WordPress pueden activarse, desactivarse y desinstalarse a medida que cambia un sitio. Esta versatilidad te permite adaptar tu sitio web a tus necesidades.

4. Los sitios de WordPress se clasifican mejor

5. WordPress responde a los móviles

6. Los blogs de WordPress están integrados

Instalar WordPress en tu host

Instalar WordPress en tu alojamiento web es un proceso sencillo que puede realizarse en unos pocos pasos.

Si has optado por el plan de alojamiento WPX que te recomendamos más arriba, visita su guía rápida y sencilla para configurarlo (es un proceso similar para la mayoría de los demás proveedores de alojamiento).

5. Personalizar tu sitio web con Elementor Pro

Elementor Pro es el mejor plugin constructor de páginas para WordPress. Te permite crear sitios web asombrosos y de diseño personalizado sin necesidad de tener conocimientos de programación.

Es compatible con casi todos los plugins y herramientas importantes que te ayudarán a optimizar tu sitio en el futuro. Y puedes utilizarlo para construir cualquier tipo de sitio web.

Además, si sigues leyendo nuestra guía, te mostraremos un pequeño truco que acelerará 100 veces tu proceso de creación de sitios web.

Descargar Elementor Pro

Lo primero es lo primero, dirígete al sitio web de Elementor Pro.

Selecciona el plan que mejor se adapte a tus necesidades.

En este caso, seleccionaremos el plan «avanzado» para tener acceso a todas las funciones.

Planes Elementor Pro

Tras la compra, inicia sesión en tu cuenta de Elementor. Ve a Subscritpions > Descargar Zip.

Panel Elemento Pro

A continuación, ve a tu panel de WordPress y entra en Plugins > Añadir nuevo plugin > Subir plugin.

Accede a tu panel de control introduciendo la URL: www.youdomainname.com/wp-admin.

Subir Elementor Pro

Navega por tu ordenador y sube el archivo zip de E1lementor Pro que acabas de descargar. El archivo debería tener un aspecto similar a «elementor-pro-3.19.2.zip»

Puedes seguir adelante e «instalar» y «activar» Elementor Pro. Elementor no funciona sin el plugin estándar de Elementor, así que instálalo también.

Instalar el plugin Elementor

¡Ahora ya estás listo para crear un bonito sitio web!

Crea tus páginas

Con Elementor Pro, crear páginas para tu sitio web es pan comido.

El editor de arrastrar y soltar te permite añadir y organizar fácilmente elementos, como texto, imágenes, vídeos, botones y formularios, en tus páginas.

Truco profesional: Puedes copiar y pegar secciones enteras utilizando Skelementor (más información al respecto cuando diseñemos nuestras páginas).

Pero primero, vamos a crear tus páginas.

Ve a «Páginas» y a «Añadir nueva página».

Crear una página WordPress

Llámalo «Inicio» y Publícalo.

Página principal

Hazlo una vez más para la página de tu Blog

La página Blog, independientemente del tipo de sitio web que estés construyendo, es una parte esencial de cualquier sitio web. Aquí es donde creas contenido valioso que atraerá tráfico orgánico de los motores de búsqueda más adelante, ¡cuando estés más avanzado! Visita nuestra base de conocimientos para saber más.

Repite este proceso para el resto de páginas que quieras añadir (página de Contacto, página Acerca de mí, etc.)

Ahora, tienes que decirle a WordPress qué página es cuál para que funcione mejor. Ve a «Configuración» > «Lectura» > asegúrate de establecer la página de inicio con tu página «Inicio» y la página de entrada con tu página «Blog».

Páginas de inicio y blog

Importante: Dirígete a «Configuración» > Permalinks > y asegúrate de que está configurado como «Nombre de la entrada». Esto garantiza que tus URL sean más fáciles de leer.

Permalink - Nombre del mensaje

Nota: Si estás creando una tienda de comercio electrónico (tienda online) tendrás que descargar el plugin WooCommerce. Una vez que descargues el plugin WooCommerce, Elementor Pro creará automáticamente todas las páginas de comercio electrónico que necesites, como la página del carrito, la página de pago, la página de la tienda, etc.

Personalizar la configuración global de tu sitio

Ahora que has creado todas las páginas que necesitas para tu sitio web, ¡es hora de configurar algunos ajustes importantes!

Importante: Diseñaremos el diseño de nuestra página utilizando el «Contenedor Flexbox».

Para configurarlo, ve al panel de control de WordPress. El atajo de teclado es Comando/Control – E y teclea «Tablero».

Esto te devolverá al panel de control de WordPress.

Ahora, para configurar la función de contenedor Flexbox, ve a «Elementor» > «Configuración» > «Funciones» > Desplázate hasta «Funciones estables» > asegúrate de que «Contenedor Flexbox» está configurado como «Activo» > dale a guardar.

Elementor Pro - Contenedor Flexbox

A continuación, vamos a abrir una página yendo a «Páginas» > Selecciona una página > «Editar con Elementor»

Antes de realizar cualquier edición, vamos a configurar los «Ajustes del sitio».

Elementor - Configuración del sitio

En la Configuración del sitio, podemos añadir los colores globales de nuestro sitio, seleccionar las fuentes que utilizaremos para todo el sitio y añadir nuestro logotipo y favicon.

Opciones de configuración del sitio

Esto hace que todo sea mucho más fácil de usar, ya que utilizaremos los mismos colores y fuentes en todo el sitio.

Utilizando la paleta de colores que encontramos en Coolors.co, cópialos y pégalos en tus «Colores globales».

Elementor + Coolors - Colores globales

Añade algunos colores extra como blanco o negro (¡o sé creativo y sigue añadiendo colores de Coolors.co!

Añade más colores

Ahora, ¡la tipografía! Aquí es donde configuramos los tipos de letra para los encabezados y el cuerpo del texto. Esto se aplicará a todo el sitio. Trabajemos primero en el cuerpo del texto.

Selecciona un color para el cuerpo del texto (preferiblemente un color oscuro si trabajas con un fondo blanco).

Y, selecciona la «familia de fuentes» que quieras utilizar. El tamaño en píxeles más utilizado para el texto del cuerpo es 16px, luego configuro el Peso, la Transformación, el Estilo y la Decoración para que sean «normal» o «ninguno».

La altura de línea depende de ti, pero yo suelo fijarla en 1,5em.

Estilo del texto del cuerpo

Ahora, los títulos. Esta parte es un poco complicada para los principiantes, ya que utilizaremos medidas «em». Pero, si te limitas a copiar mi estrategia, ¡te irá bien!

Utilizando una herramienta como Typescale.com, puedes configurar fácilmente todos tus encabezados para asegurarte de que son responsivos en todos los dispositivos.

Como se ve en la imagen siguiente, para el H1 del escritorio, introduciremos el valor H1 proporcionado por typescale. A continuación, a medida que descendemos por una ventana gráfica (tableta), seguimos adelante y añadimos el valor H2 y, por supuesto, añadimos el valor H3 a nuestra ventana gráfica móvil.

Todas son cabeceras H1, sólo que con vistas diferentes. Esto garantiza que para cada deciva, el valor H1 sea menor, lo que permite un diseño responsivo.

Repite este proceso para los títulos H2 y H3. Asegurándote de que el H2 del escritorio es el valor H2 de Typescale y luego bajando un valor de encabezado para cada viewport (tableta y móvil).

Configuración tipográfica (1)

Añade tu logotipo y favicon en la sección «Identidad del sitio».

Diseñar el diseño de tu página

Ya era hora…

Diseñemos juntos una página.

Si todavía estás en la página «Configuración del sitio», asegúrate de hacer clic en «Actualizar» en la esquina inferior izquierda y sal de la página. Volverás a la página de inicio.

Salir de la Configuración del Sitio

Ahora, vamos a añadir algunas secciones a la página de inicio…

Elementor Pro facilita la creación de un diseño de página. Con la función de hacer clic y soltar, simplifica y acelera el proceso de diseño.

Hay muchos widgets disponibles que puedes implementar y que mejorarán la funcionalidad de tu sitio web. Pero, para simplificar, nos ceñiremos a los más utilizados (Título, Editor de texto, Imagen, Icono, Contenedor y Botón).

Widgets Elementor Pro

Nota: Asegúrate de que tienes activado el contenedor Flexbox. Esto ya se ha mencionado antes.

Ahora deberías estar en tu página de inicio. Y debería tener este aspecto Los widgets de Elementor Pro a la izquierda y el menú del navegador a la derecha.

En caso de que el menú de tu navegador no esté abierto, el atajo de teclado es «Cmd/Ctr – I»

Editada la página de inicio
Esta es mi página de inicio

Lo primero que me gusta hacer es eliminar el nombre de la página, en este caso.

Ve a ajustes (abajo a la izquierda) y marca la opción «Ocultar título».

Eliminar el título de la página

Ahora, ¡ya puedes empezar a diseñar el diseño de tu página!

En el diseño web, tienes que pensar en todo en cajas. En Elementor se llaman «Contenedores». Es dentro de estas cajas (Contenedores) donde añadimos la información o widgets necesarios para crear nuestro diseño. Por tanto, primero debemos empezar añadiendo un widget Contenedor.

Empecemos añadiendo nuestro primer widget contenedor.

Haz clic en el icono de widget de la parte superior de la página y, a continuación, simplemente haz clic en el widget «Conatiner». Verás que aparece en la página y en el menú Navegador de la derecha.

Añade tu primer widget Contenedor

Aquí es donde añadirás tus otros widgets como imágenes, encabezados, texto, botones y más contenedores.

Importante: Necesitas tener conocimientos básicos sobre el funcionamiento de los Contenedores Flexbox de Elementor.

He aquí el desglose:

Los contenedores Flexbox funcionan mediante dirección, alineación y justificación. Esto significa esencialmente que todo lo que introduzcas en los contenedores respetará las opciones que selecciones. Por ejemplo, vamos a añadir un widget de encabezado, editor de texto y botón dentro de nuestro contenedor.

Selecciona el contenedor, haz clic en el icono del widget y en el widget «Encabezamiento». Esto lo añadirá dentro del contenedor

Repite este proceso para el widget «Editor de texto» y el widget «Botón».

Añadir widgets al Contenedor

Ahora deberías tener un «Encabezado», un «Editor de texto» y un widget «Botón» dentro de tu Contenedor.

Juega con la configuración de FlexBox para ver cómo se comportan los widgets dentro de tu Contenedor. Esto te permitirá comprender cómo funciona FlexBox.

Contenedor Flexbox de Elelementor Pro

Dirección: Esta es la dirección en la que se apilarán tus objetos dentro del contenedor, por defecto es «Columna Vertical» ↓

Justificar contenido: Alinea los elementos a lo largo del eje principal de un contenedor flexible. Gestiona la distribución del espacio extra o alinea elementos.

Alinear elementos: Controla la alineación de los elementos flexibles en el eje transversal, de forma similar a como «justificar-contenido» alinea los elementos a lo largo del eje principal.

Te sugiero que juegues con estos controles y te familiarices con su funcionamiento. También puedes dirigirte a la zona de juegos de Elementor Pro y probarlo con más detalle: practica un poco.

Una vez que entiendas los fundamentos del contenedor FlexBox en Elementor, podrás crear sitios web increíblemente bellos que sean fáciles de usar y receptivos.

¡No hay límite a lo que puedes hacer con los contenedores FlexBox!

Así que, llegados a este punto, tienes dos opciones

  1. Familiarízate con el contenedor FlexBox, conviértete en un profesional de su uso y aprende a crear por ti mismo secciones, diseños y páginas responsivas increíbles (recomendado). O
  2. Sigue leyendo esta guía y verás cómo puedes saltarte el aprendizaje e ir directamente a construir tus páginas web fácilmente utilizando una herramienta específica de Elementor (es gratuita).

Construir con Skelementor 100 veces más rápido

Skelementor es un sitio web creado específicamente para usuarios de Elementor Pro. Se compone de secciones, contenedores y diseños listos para usar, para que los añadas sin problemas a tus páginas web. Esta herramienta es genial para los principiantes que no entienden del todo cómo funcionan los contenedores FlexBox (o para los demasiado perezosos para aprender).

Veamos cómo funciona.

Primero, dirígete a Skelementor, crea una cuenta gratuita y vuelve a esta guía.

Tablero Skelementor
Skelementor.com

Después de crear tu cuenta, ahora tienes acceso a una biblioteca de secciones que te ayudarán a crear las páginas de tu sitio web.

Tiene Navbars prefabricadas, Encabezados, Pies de página, Secciones de héroe, Popups, Secciones de equipo, Secciones de reseña y mucho más. Esencialmente, ¡todo lo que necesitas para crear tu sitio web desde cero!

Y, ¡sólo tienes que copiar y pegar! ¡Así de fácil!

Copia tus secciones de Skelementor

Copiar secciones del sitio web

Haz clic con el botón derecho, selecciona «pegar desde otro sitio» y luego «CMD/CTR – V».

Pegar secciones del sitio web

Importante: Hay un pequeño problema al utilizar Skelementor. Cuando pegues algo desde Skelementor, el texto conservará el estilo de fuente de Skelementor. Todo lo que tienes que hacer para volver a aplicar tus estilos (los que establecimos anteriormente) es restablecerlos.

Haz clic en «Editar encabezamiento», ve a la pestaña «Estilo», haz clic en el icono «Tipografía» y pulsa el botón de reiniciar. Haz lo mismo para el «Color del texto» y para el resto de los widgets de encabezamiento y texto.

Restablecer estilo

Sigue haciendo esto hasta que finalmente hayas creado la primera página completa de tu sitio web. Sigue haciendo esto con el resto de las páginas de tu sitio web, ¡y tendrás un sitio web responsivo en un abrir y cerrar de ojos!

Importante: Asegúrate de comprobar todos tus viewports (tableta y móvil).

Por último, la parte fácil. ¡Sustituye las imágenes por las tuyas propias!

Haz clic en el cuadro de la imagen y pulsa «Elegir imagen».

Cambiar imágenes

Selecciona la imagen por la que quieres sustituirla. Si no tienes imágenes subidas, ¡sube algunas!

Selecciona e imagen

Consejo profesional: Cuando subas tus nuevas imágenes, es importante que lo hagas con el menor tamaño de archivo posible y en el formato correcto. El mejor formato de imagen para sitios web es WEBp.

Para cambiar el formato y comprimir tus imágenes grandes, utiliza una herramienta gratuita como Bulkresize.com. He aquí cómo:

Sube tu imagen a Redimensionar en bloque (puedes subir varias imágenes a la vez).

Cambio de tamaño masivo - Sube tu imagen

Ajusta la escala al 100%, cambia el «Formato de imagen» a WEBP y ajusta la «Calidad de imagen» entre 75% y 96% (dependiendo del tamaño de tu imagen original).

Nota: si el tamaño de tu imagen es superior a 10 MB y tiene grandes dimensiones, puedes considerar reducir el «Porcentaje de escala» a tal vez un 50% (o menos).

¡Observa cómo el tamaño de tu imagen se reduce a casi nada!

Redimensionado masivo - Reducción del tamaño del archivo de imagen

Intenta que tus imágenes no superen los 120kB y asegúrate de hacerlo con todas ellas. Incluidos tus logotipos.

Constructor de temas Elementor Pro

Esta es una de las áreas más importantes a la hora de editar tu sitio web con Elementor Pro. El «Constructor de temas» es donde crearás y editarás tus páginas y secciones esenciales, como la página de tu Tienda, el Encabezado y el Pie de página, y las entradas de un único Blog, entre otras.

Para encontrarlo, ve a tu panel de control de WordPress. Dirígete a «Elementor» > y haz clic en «Theme Builder».

Editar el constructor de temas en Elementor Pro
La página del Creador de temas

Aquí tendrás la opción de editar tu Encabezado, Pie de página y páginas individuales como las entradas del blog y la página de la Tienda.

El Constructor de temas es esencialmente la columna vertebral de tu sitio web Elemntor Pro.

Cabecera: Es el elemento situado en la parte superior de cada página y servirá como forma principal de navegación. Sólo debe incluir las páginas más importantes, como Inicio, Tienda/Portafolio, Contacto y Acerca de.

Antes de crear una cabecera, tienes que crear un menú WordPress.

En tu panel de WordPress. Haz clic en «Apariencia» > «Menús».

WordPress - Construir un menú

Crea un nuevo menú. Dale un nombre > y haz clic en «Crear menú».

Crear un menú en WordPress

Selecciona los elementos del menú (páginas) que quieras incluir en el menú y «Guardar menú».

Añadir al menú

Ahora, tienes que añadir este menú a la sección «cabecera» de tu sitio web utilizando el «Constructor de temas» de ELementor Pro

Vuelve a tu «Constructor de temas» y haz clic en «Encabezado».

Truco profesional: Para moverte más eficazmente entre áreas/páginas de tu sitio, utiliza el atajo de teclado: «CMD/CTR – E» y escribe adónde quieres ir a continuación. Por ejemplo, «Creador de temas». Esto te llevará a la página «Creador de temas».

Crear una cabecera en el creador de temas

Utilizando la misma técnica anterior para crear tus páginas, crea tu cabecera. Asegúrate de incluir el widget «Menú WordPress» y sustitúyelo por el menú que acabas de crear.

Selecciona el widget de menú > selecciona el menú que acabas de crear.

Nota: Recuerda restablecer la tipografía y las fuentes si has utilizado Skelementor para añadir tu sección de cabecera.

Añadir el menú a la cabecera

Cuando estés satisfecho con el diseño de tu cabecera. Pulsa el botón «Publicar» y asegúrate de que se incluye en todo tu sitio.

Después de hacer clic en «Publicar» > «Añadir condición».

Añadir condición

Asegúrate de seleccionar «Todo el sitio» > «Guardar y cerrar».

Todo el sitio

Pie de página: Al igual que la cabecera, está presente en la parte inferior de tu sitio web y también aparecerá en todas partes.

Para crear un Pie de Página, es el mismo proceso que para el Encabezado.

Vuelve al panel de control > crea un nuevo menú > esta vez llámalo Menú Pie de Página > asegúrate de incluir todas las páginas > añade este menú cuando crees la sección Pie de Página en el «Constructor de Temas».

Entrada única: Esta es la plantilla de página que se utilizará para cada entrada de blog que crees.

Añade una nueva página «Publicación única».

Nota: Al editar esta página, Elementor Pro te lo pone fácil. Te proporciona las partes esenciales de las entradas de tu blog, como el «Título de la entrada», la «Imagen destacada», el «Contenido de la entrada», el «Índice», etc.

Editar la página Single Post

Todo lo que tienes que hacer ahora es arrastrar y soltar en el orden que desees mostrar estos elementos.

Es posible que desees añadir algunas entradas de blog (si aún no lo has hecho) en la sección «Entradas» de tu panel de control de WordPress. Sólo para que veas lo que haces al editar las páginas «Entradas» y «Archivo de entradas».

Importante: Acuérdate de añadir primero un widget «Contenedor» y después los widgets de tus macetas.

Si estás atascado y no estás seguro de en qué orden colocar los widgets de tus publicaciones, busca inspiración en sitios web populares como Forbes.com o Vice.com. Echa un vistazo a su página de post único y copia su estructura para obtener los mejores resultados.

Archivo: Esta es la plantilla de página que Elementor asignará a la página de tu blog y a las páginas de categorías.

Crea una nueva página «Archivo» > y añade los elementos de diseño que desees, como una sección principal (título y subtítulo). Y añade tu widget «Publicar».

Añadir tu widget de Entradas

Una vez terminado, asígnalo a tu «Archivo de publicaciones» > y luego «Guardar y cerrar».

Archivo postal

Producto único y Archivo de productos: Si estás creando una tienda de comercio electrónico (tienda online), tendrás dos opciones adicionales. De forma similar a la «Entrada individual», el «Producto individual» es la plantilla de página dedicada a todos tus productos.

Y de forma similar a la página «Archivo» estándar, el «Archivo de productos» es para la página de tu catálogo de productos.

Página del producto

Editar tu Constructor de Temas en Elementor Pro, es uno de los pasos más importantes para crear un sitio web bonito y funcional, así que asegúrate de pasar la mayor parte de tu tiempo aquí. Tómate el tiempo necesario para crear cada página.

6. Añadir plugins esenciales

Los plugins son una de las principales ventajas de utilizar WordPress. Te permiten añadir nuevas características y funcionalidades a tu sitio web sin necesidad de conocimientos de programación.

Añadir plugins es super sencillo y sólo necesitarás 1 ó 2.

Comprender el papel de los plugins

Los plugins mejoran tu sitio web simplificando la adición de funciones cruciales, haciéndolo más funcional y fácil de usar.

Las principales ventajas son:

  • Optimización SEO: Plugins como Rank Math ayudan a mejorar la visibilidad de tu sitio en los motores de búsqueda, lo que se traduce en mejores resultados de búsqueda orgánica.
  • Mejoras de velocidad: LiteSpeed Cache optimiza el rendimiento del sitio web, reduciendo los tiempos de carga y mejorando la experiencia del usuario.
  • Analítica: Aunque recomiendo utilizar Google Analytics para hacer un seguimiento de los datos de tu sitio y de la participación de los usuarios, su uso puede resultar abrumador para los principiantes. Así que puedes descargar un plugin como Jetpack que es de uso gratuito.

La incorporación de estos plugins puede aumentar significativamente la eficacia de tu sitio web y su posicionamiento en los motores de búsqueda.

Plugins esenciales que debes descargar

Cuando construyas tu sitio web, ya sea un portafolio personal, una tienda de comercio electrónico o un blog, sólo necesitarás unos pocos plugins adicionales.

Si tu proveedor de alojamiento es bueno (como los recomendados anteriormente) no hay necesidad de exagerar con la seguridad u otros plugins innecesarios que, al final, sólo ralentizarán tu sitio web…

Por tanto, considera la posibilidad de incorporar los siguientes plugins esenciales:

  • Matemáticas de Rango: Se trata de un plugin SEO todo en uno que conectará automáticamente tu sitio con tus cuentas de Google Analytics y Google Search Console. También te ayudará con los metaencabezamientos y las descripciones SEO.
  • Caché LiteSpeed: Esto mejorará la velocidad de tu sitio web.
  • Jetpack: Muestra algunas analíticas dentro de tu panel de WordPress para realizar un seguimiento del compromiso y la actividad de los usuarios. Utilízalo si no te sientes cómodo utilizando Google Analytics.

Para instalar estos plugins, sólo tienes que ir a «Plugins» > «Añadir nuevo plugin» > Búscalo > haz clic en «Instalar ahora» > espera unos segundos y luego haz clic en «Activar»

Ahora debería estar en tu sección «Plugins».

Cómo subir un plugin

7. Configurar plugins esenciales

En cuanto a la configuración de tus plugins en WordPress, cada uno tiene sus propios ajustes y configuraciones. Podríamos escribir guías enteras para cada plugin específico.

Así que, para no alargarme demasiado, sólo voy a mostrarte los pasos esenciales que debes dar para cada uno.

Matemáticas de rango ⇒

Rank Math es el mejor plugin para todo lo relacionado con SEO. Te ayuda a conectar tus cuentas de Google para obtener resultados analíticos y de búsqueda de palabras clave, te permite personalizar tus metaencabezamientos y descripciones para que sean más visibles, te ayuda a corregir cualquier error 404 de tu sitio e incluso te proporciona una puntuación SEO cuyo objetivo es ayudarte a conseguir las mejores posiciones SEO en las SERP.

Una vez que lo hayas descargado, debería aparecer en tu menú de WordPress a la izquierda.

Rango Configuración Maty

Lo primero que debes hacer con Rank Math es dirigirte al «Asistente de configuración»

Nota: Antes de pasar por el Asistente de configuración, asegúrate de haber creado una cuenta en Google Analytics y Google Search Console. Es fácil siempre que ya tengas una cuenta de Google.

Haz clic en «Rank Math SEO» > «Panel de control» > «Asistente de configuración»

Rank Math - Configuración del asistente de configuración

Una vez en el «Asistente de Configuración», puedes seleccionar la opción «Fácil» y pulsar el botón «Asistente de Configuración».

Sigue los pasos y finalmente conecta tu cuenta de Google.

Rank Math - Conecta tu cuenta de Google

Continúa con la configuración y prácticamente habrás terminado con el plugin de configuración Rank Math. Si quieres profundizar más en Rank Math, visita su tutorial en su sitio web.

Caché LiteSpeed ⇒

LiteSpeed Cache es uno de los mejores plugins disponibles para mejorar la velocidad de tu sitio web. Tiene muchas funciones avanzadas que mejorarán aún más la velocidad de tu sitio. Pero por suerte, si eres principiante, LiteSpeed Cache tiene algunos preajustes disponibles.

Tras descargar el plugin, dirígete a la sección «Presets» de LiteSpeed y aplica el prest «Básico».

LiteSpeed - Configurar el preajuste Básico

Esto sólo aplicará mejoras básicas a tu sitio web. Para mejorar aún más tu sitio web, te sugiero que investigues en Internet y aprendas todo lo que puedas sobre LiteSpeed Cache y el almacenamiento en caché en general.

*Precaución: Las opciones de almacenamiento en caché pueden alterar negativamente tu sitio web si no sabes lo que estás haciendo. Por eso, sólo aplicamos el preajuste «Básico».*

JetPack ⇒

JetPack es un plugin creado por la gente detrás de WordPress. ¡Puede hacer muchas cosas! Pero, en este caso, lo utilizaremos sobre todo para la analítica del sitio web.

De nuevo, sólo necesitas esto si no estás familiarizado o no sabes cómo utilizar la herramienta Google Analytics.

Con JetPack, es tan fácil como descargar y activar el plugin, y además es gratis. Entonces tendrás acceso a algunas analíticas que se incorporan directamente a tu panel de control de WordPress.

También dispondrás de algunas nuevas funciones de seguridad añadidas como extra.

JetPack - Seguridad y análisis mejorados

8. Lanzamiento de tu sitio web

Después de personalizar tu sitio web, mejorar su funcionalidad y optimizarlo para los motores de búsqueda, es hora de lanzarlo. En esta sección, exploraremos la lista de comprobación previa al lanzamiento de tu sitio web y cómo anunciar el lanzamiento de tu sitio web.

Lista de comprobación previa al lanzamiento de tu sitio web

Antes de lanzar tu sitio web, asegúrate de revisar esta lista de comprobación para comprobar que todo está en orden:

  • Certificado SSL: Como mínimo, deberías haber instalado la versión gratuita «Let’s Encrypt» cuando compraste tu alojamiento. Tus dominios deben tener https:// y no http:// – ahí tiene que haber una «s».
  • Velocidad de la página: Profundiza en LiteSpeed Cache. Combinando el plugin de caché LiteSpeed y el servidor WPX, tu sitio debería superar cualquier prueba de velocidad. Puedes comprobar la velocidad de tu sitio web utilizando Page Speed Insights y la herramienta de prueba de velocidad Solar Winds. Si te animas, WPX tiene un tutorial sobre cómo configurar el plugin aquí.
  • Imágenes: Asegúrate de que todas las imágenes que subas estén en el formato de nueva generación (WEBp) y tengan menos de 120kB.

Ten en cuenta estos factores antes de lanzar tu sitio web, para garantizar una presencia en línea sin fisuras.

Anunciar el lanzamiento de tu sitio web

  • Crea expectación en torno al lanzamiento de tu sitio web publicándolo en plataformas de redes sociales, como Facebook, Twitter o LinkedIn.
  • Pon en marcha una campaña estratégica de marketing por correo electrónico para informar a tus suscriptores actuales sobre tu nuevo sitio web y animarles a visitarlo.
  • Anuncia el lanzamiento de tu sitio web mediante una entrada de blog, compartiendo las noticias, mostrando lo que pueden esperar los visitantes y proporcionando un enlace a tu sitio web.
  • Comparte la noticia del lanzamiento de tu sitio web a través de tus cuentas en las redes sociales, anunciándolo varias veces para llegar a un público más amplio.
  • Utiliza estrategias SEO, como optimizar el contenido y las metaetiquetas de tu sitio web, para garantizar que los motores de búsqueda indexen tu sitio web y lo muestren en los resultados de búsqueda.
  • Anunciando el lanzamiento de tu sitio web a través de varios canales, puedes generar expectación, atraer visitantes y crear una audiencia inicial para tu sitio web.

Mantener y actualizar tu sitio web

Crear un sitio web no es una tarea de una sola vez, sino que requiere un mantenimiento y unas actualizaciones constantes.

Actualiza regularmente tus contenidos

Una de las claves del éxito de un sitio web es actualizar regularmente su contenido. Al publicar nuevas entradas de blog, artículos u otras formas de contenido, mantienes el interés de los visitantes y les animas a volver a tu sitio web.

Las actualizaciones regulares de contenido también ayudan a mantener una posición alta en los resultados de los motores de búsqueda, ya que éstos favorecen el contenido fresco y relevante. Desarrolla una estrategia de contenidos que incluya un calendario de contenidos, investigación de palabras clave y segmentación de la audiencia para optimizar tu proceso de creación de contenidos y atraer tráfico orgánico.

Asegúrate de actualizar los plugins de tu sitio web sólo una vez al año o cada 6 meses.

Para actualizar tus plugins ve al «Panel de control» de WordPress > «Actualizaciones».

Cuando actualices tus plugins, intenta hacerlo de uno en uno y, al mismo tiempo, comprueba el front-end (tu sitio real) para asegurarte de que no se rompe nada.

En caso de que encuentres algún problema, recuerda que tu proveedor de alojamiento guarda copias de seguridad de tu sitio cada 28 – 30 días.

WordPress - Actualizar plugins

¿Cuánto dura todo esto?

Una vez que te conviertas en un profesional, probablemente conseguirás un sitio web completo en aproximadamente una semana. Si eres principiante, podrías tardar uno o dos meses. Pero, si sigues esta guía paso a paso, podrías tardar perfectamente el mismo tiempo que tardaría un desarrollador web profesional en crear un sitio web desde cero.

Conclusión

Crear un sitio web desde cero puede parecer una tarea desalentadora, pero con las herramientas y la orientación adecuadas, puede ser un proceso fluido. Recuerda que primero debes comprender la finalidad de tu sitio web y determinar sus objetivos. Seleccionar un buen nombre de dominio es crucial para la recuperabilidad. Elige de la lista anterior un alojamiento web fiable que cumpla tus requisitos.

WordPress es una plataforma excelente para crear y personalizar tu sitio web. Utiliza Elementor Pro para mejorar su diseño y funcionalidad. Incorpora algunos plugins esenciales para optimizar tu sitio web para los motores de búsqueda. Antes del lanzamiento, asegúrate de realizar una exhaustiva lista de comprobación previa y anuncia el lanzamiento de tu sitio web para atraer visitantes.

Actualiza tu sitio una vez al año y ya está.

Preguntas frecuentes

¿Cuál es la forma más sencilla de crear un sitio web?

La forma más sencilla de crear un sitio web sería utilizando Wix, Squarespace o Weebly. Pero estas plataformas no merecen la pena a largo plazo. Es mucho mejor empezar con algo como WordPress y Elementor, seguir una guía paso a paso que te ayude en el proceso y construirte un verdadero sitio web personalizado que pueda funcionar.

¿Cuál es la herramienta más sencilla para crear un sitio web?

Cuando se trata de crear sitios web, hay muchas herramientas disponibles, pero una de las más fáciles de usar es un constructor de sitios web como Elementor Pro. Estos creadores de sitios web ofrecen interfaces intuitivas de arrastrar y soltar, y una amplia gama de plantillas prediseñadas, que te permiten crear un sitio web sin necesidad de conocimientos de codificación o diseño. Con estas herramientas, puedes personalizar fácilmente el diseño de tu sitio web, añadir contenido y lanzarlo en poco tiempo.

Referencias

¹ – https://w3techs.com/technologies/details/cm-wordpress

Consigue contenido fresco

Únete a una lista de correo de más de 1.000 personas que reciben nuevos contenidos mensualmente.

Lo que aprenderás

Contenido relacionado

Lee más contenido relacionado o visita nuestra base de conocimientos.

QUIÉN ES

¿Marcus-Aurelius?

ERA el emperador de Roma… Ahora, escala sitios web y negocios electrónicos mediante implacables estrategias SEO.

pregunta a

Marcus-Aurelius

Lee más contenidos como el anterior. Aprende todo lo que hay que saber sobre escalar sitios web

sigue

Marcus-Aurelius

Este sitio utiliza algunas cookies para realizar un seguimiento de algunas cosas.