¿Quieres aprender cómo se diseña una página web desde cero?
Esta guía para principiantes te ayudará a hacer una página web profesional en un formato fácil de seguir y paso a paso.
No tomará mucho tiempo, y si lo haces de esta manera, realmente podrás ahorrar algo de dinero a largo plazo (más sobre eso más adelante).
¿Quieres comenzar bien desde el principio evitando los errores más comunes al crear páginas web?
¡No te preocupes! Con esta guía comenzarás con buen pie y podrás crear tu propio sitio web profesional, ya sea que seas un dueño de negocio o seas un emprendedor con una marca personal, estos consejos te ayudarán.
Si alguna vez te has quedado bloqueado con el diseño de tu sitio web, esta guía gratuita te ayudará de forma definitiva.
La mayoría de los sitios web solo necesitan un nombre de dominio y alojamiento web para funcionar y servir a los visitantes.
El tiempo promedio para configurar un sitio web utilizando esta guía es de aproximadamente una hora; la mayoría logra construir una base sólida dentro de ese tiempo.
¿Listo para construir tu sitio web hoy? ¡Toma un café o un té, y empecemos!
Paso 1: Elige un nombre de dominio
Lo primero es lo primero: cada sitio web necesita un nombre.
Sin un nombre (también conocido como nombre de dominio), tu sitio web simplemente no puede funcionar. Piénsalo como una dirección postal para una casa, donde la dirección es el nombre de dominio y la casa es tu sitio web.
Cómo elegir un nombre de dominio
Cuando elijas un nombre de dominio, hay algunas reglas que debes tener en cuenta:
Si estás configurando un sitio web comercial, tu dominio debería coincidir con tu nombre de empresa.
Si planeas hacer un sitio web personal o un blog personal para ti, entonces usar tu nombre completo como dominio es una buena opción.
Intenta obtener la versión .com si es posible.
Ten en cuenta que hay más de 100 millones de nombres de dominio activos, por lo que existe la posibilidad de que el nombre de dominio que deseas pueda ya estar ocupado. Pero siempre puedes comprar otro nombre de dominio . Si no tienes un dominio, no lo compres aún. Puedes obtener uno gratis en el paso #2.
Los nombres de dominio generalmente terminan con .com o .net, entre otros.
Si deseas que tu dominio esté dirigido a personas de cualquier parte del mundo,prueba registrar una versión .com. Si deseas dirigirte a visitantes locales de México usa .mx, Perú ,pe, Colombia .co, Argentina .ar, etc.
Puedes usar esta herramienta gratuita para verificar si el nombre de dominio que deseas está disponible.
¿Ya lo verificaste? Ahora, NO contrates el dominio hasta leer el siguiente paso.
Paso 2: Contrata un hosting
Además de un nombre de dominio, también necesitarás hosting o también conocido como alojamiento web. Estos dos conceptos van muy de la mano y te ayudarán con el diseño de tu página web profesional para tu negocio.
¿Qué es un hosting?
El hosting es un servicio que te proporciona un espacio donde almacenar todos los archivos de tu página web para que se muestre a los visitantes de tu página.
Piensa en tu sitio web como si fuera una tienda en una calle muy concurrida. Necesitas un local donde puedas exhibir tus productos y servicios para que la gente pueda visitarte, ¿verdad?
El hosting es como el alquiler de ese local.
Elegir el alojamiento web adecuado tiene muchos beneficios importantes para ti y tu negocio, especialmente si planeas ganar dinero con tu página web. Y todo lo contrario si eliges un hosting de mala calidad.
Para qué sirve un hosting web
Con una buena elección de hosting tu página web:
- Cargará rápido
- Podrá soportar mostrar tu página web a múltiples usuarios al mismo tiempo
- Tu web no se caerá
De manera similar, elegir entre un hosting gratuito y uno de pago para tu sitio web es como decidir entre montar un puesto en el mercado callejero o alquilar un local en un centro comercial.
Al igual que decidir dónde ubicar tu negocio físico, la elección entre un hosting gratuito y uno de pago depende de tus necesidades y prioridades como dueño de negocio. Si buscas una opción más completa y confiable para tu sitio web, un hosting de pago es la mejor elección.
Cómo elegir un hosting de calidad
Uno de los proveedores más destacados en términos de accesibilidad y confiabilidad que hemos encontrado después de evaluar varias compañías de alojamiento web durante varios años es Webempresa.
El primer año tiene un costo de sólo $47,52 USD al año y ¡te llevas 1 año gratis de tu dominio! Y, a partir del segundo año, el aumento no es significativo si decides prolongar el contrato por más tiempo.
Además, es un hosting en español que ofrece un soporte al cliente en este idioma los 365 días del año y usualmente demoran menos de 30 minutos en contestar cualquier ticket.
En comparación con otros proveedores de hosting, Webempresa se destaca al ofrecer más de 90 herramientas gratuitas de construcción de sitios web que se pueden configurar a través de su panel de control. Esto supera a cualquier otro servicio de alojamiento que hayamos probado hasta el momento, brindándote una flexibilidad increíble y una experiencia de usuario sin complicaciones.
Si estás listo para configurar tu sitio web (y registrar un nombre de dominio), simplemente dirígete a www.webempresa.com (o a cualquier otro proveedor de alojamiento web que elijas) y regístrate.
Paso 3: Configura tu sitio web en WordPress
¡Felicidades! En este punto, deberías tener un nombre de dominio y alojamiento web.
Ahora es el momento de configurar un sitio web y para ello vamos a utilizar WordPress.
¿Qué es WordPress y para qué sirve?
WordPress es el constructor de sitios web gratuito más popular, que alimenta más del 40% de todos los sitios web en Internet. WordPress es bastante sencillo y no tiene una curva de aprendizaje muy pronunciada.
Quizá te preguntes “¿por qué tantos negocios y empresas (sin importar el tamaño del negocio) utilizan WordPress?”.
Y esto es así porque la ventaja y principal motivo por el que muchas personas han elegido usar WordPress es porque en vez de aprender código o contratar a un programador para construir sitios web desde cero, WordPress proporciona el entorno para que una persona pueda crear sitios web sin necesidad de aprender código.
Además, WordPress es suficientemente flexible para las necesidades de cada tipo de usuario, ya que aunque es posible crear sitios web sin código, también es posible usarlo para añadir funcionalidades más complejas.
Como ya tienes un nombre de dominio y hosting, puedes configurar WordPress completamente gratis a través de Webempresa o cualquier otro proveedor de hosting que tenga instalaciones a un clic usando WordPress.
Para este caso, utilizaremos Webempresa como ejemplo, ya que es el hosting que tenemos contratado y recomendamos.
Paso 1: Accede a tu cuenta en Webempresa
Si eres cliente de Webempresa, después de haber realizado la compra de tu hosting y dominio, te debió llegar un email en donde te envían los datos de acceso a tu Cuenta de Cliente y el link de acceso.
Da clic en ese link e inicia sesión con los datos que te enviaron.
Paso 2: Instala WordPress
Existen 2 formas de instalar WordPress: La forma manual y la forma automática.
Para este caso, me voy a centrar en explicar la instalación automática de WordPress, que es la más sencilla y rápida de hacer a través de las herramientas de instalación que ofrece Webempresa.
Si estás utilizando otro proveedor de alojamiento, busca la opción para instalar WordPress dentro de su panel de control.
Una vez que hayas iniciado sesión en el área de cliente de Webempresa, te aparecerá el panel principal. Dale clic donde dice el nombre de tu dominio.
Ahora da clic en el botón que dice Acceder al Panel, estarás entrando al CPanel de Webempresa, que te ofrece una gran variedad de herramientas para administrar tu(s) sitio webs(s) dentro de tu hosting:
Y aquí es donde encontrarás la herramienta Instala WordPress.
Después da clic en el botón de Instalación de la sección de WordPress para que inicie la instalación.
Ahora completa los datos de tu sitio Web:
- El nombre de tu sitio web (puedes cambiarlo también posteriormente)
- Dominio (elige el dominio que compraste y recuerda siempre elegir el que tiene https// en vez de sólo http)
- Ruta (Déjalo vacío)
- Usuario (escribe un nombre de usuario)
Y ahora sólo da clic en Instalar para que comience con la instalación:
Y listo, te llegará a tu email el resumen de la información con tu link de acceso, usuario y contraseña.
Paso 4: Diseña tu sitio web profesional
Ahora vamos a ver cómo instalar una plantilla o tema (theme en inglés) y plugins. Ambos son necesarios en el desarrollo web moderno porque ofrecen una forma eficiente de construir sitios web personalizados sin tener que comenzar desde cero y sin la necesidad de conocimientos avanzados de programación.
Paso 1: Instala una Plantilla (Tema)
Llegados a este punto, ya tienes el “programa” que te permitirá crear y publicar todo lo que muestres en tu sitio web, esto sería WordPress.
Ahora pasaremos a elegir una plantilla o tema (en inglés theme).
Para entender el concepto de “plantilla”, imagina que estás construyendo una casa, pero en lugar de comenzar desde cero, decides utilizar un diseño preexistente.
Esta plantilla sería como un plano arquitectónico que te guía en la construcción de tu hogar con habitaciones definidas.
De manera similar, una plantilla web es una estructura predefinida para el diseño y la funcionalidad de un sitio web. Proporciona un esqueleto sobre el cual puedes construir tu sitio, con secciones predefinidas y estilos establecidos, ahorrándote tiempo y esfuerzo en la creación desde cero.
Elegir una plantilla puede resultar abrumador, por lo que te recomiendo directamente utilizar la plantilla Astra, que es una plantilla ligera que permite personalizar tu diseño desde cero resultando incluso más fácil que configurar plantillas ya establecidas, además de ser un tema totalmente gratuito que funcionará de maravilla con el plugin de Elementor del que te hablaré en el paso siguiente.
No creas que por ser gratuito no es de calidad, ya que Astra también cuenta con una versión de pago con opciones más avanzadas, pero de momento para este ejemplo, utilizaremos la versión gratuita.
Estos son los pasos para que instales la plantilla Astra:
Después de iniciar sesión en WordPress, ve al menú lateral en «Apariencia» y elige “Temas”.
Ahora te aparecerá la plantilla que tienes activa por default y otros temas que vienen en toda instalación de WordPress. Da clic en el botón de “Añadir nuevo tema”.
Ahora te aparecerán miles de plantillas disponibles para instalar.
Como te contaba antes, mi recomendación para este punto es que elijas la plantilla Astra.
Para hacerlo, sólo tienes que pasar tu mouse encima de Astra y da clic en el botón de Instalar.
(Si no te aparece el tema Astra, búscalo en el buscador que aparece en la esquina superior derecha).
Ahora da clic en el botón de Activar.
¡Y listo, ya tienes instalada la plantilla de Astra!
Paso 2: Instala el plugin de Elementor
Ahora, una vez que tienes la estructura de tu casa, quieres agregar características adicionales, como sistemas de seguridad o iluminación por mencionar algunos ejemplos.
Estas características específicas se instalan como complementos a la estructura principal de la casa. Aquí es donde entran los plugins en el mundo de la construcción de sitios web.
Los plugins añaden funcionalidades especializadas a tu sitio web sin necesidad de escribir código desde cero.
Pueden ser herramientas para agregar funcionalidades como:
- Seguridad
- Formularios de contacto
- Galerías de imágenes
- Integraciones con redes sociales
- Entre miles más
El plugin que te recomiendo instalar en este momento es Elementor, que te permite diseñar y construir páginas web de forma visual, utilizando un potente editor de arrastrar y soltar (drag and drop).
Con Elementor, puedes crear páginas web visualmente impresionantes sin necesidad de escribir código.
Para instalar el plugin de Elementor, haz clic en la opción «Plugins”. Esta es la sección donde puedes ver todos los plugins instalados en tu sitio web y agregar nuevos.
En la página de plugins, verás un botón que dice «Añadir nuevo plugin». Haz clic en este botón para acceder al directorio de plugins de WordPress. En el campo de búsqueda, escribe «Elementor» y presiona Enter. Esto te mostrará el plugin oficial de Elementor.
Una vez que hayas encontrado el plugin de Elementor, haz clic en «Instalar ahora». Después de la instalación, verás un botón que dice «Activar». Haz clic en este botón para activar el plugin en tu sitio web.
Ahora sí, ya tienes listas las herramientas para comenzar a diseñar tu página web profesional.
Paso 5: Crea la estructura de un sitio web exitoso: Agrega páginas y entradas
Una vez que has instalado la plantilla de Hello y el plugin de Elementor, el paso siguiente será crear las páginas.
Las páginas que toda página web suele llevar son:
- Página de inicio
- Página Acerca de
- Página de Servicios / Productos
- Página de Blog
- Página de contacto
Pero si tu sitio web requiere más páginas, haz una lluvia de ideas para determinar el resto de páginas que requieres.
También te recomiendo crear una Landing Page que, dependiendo de tu objetivo, te servirá para capturar datos de potenciales clientes (leads) o a vender servicios o productos (físicos o digitales) que aumentará tus ventas.
Ya has dado el primer paso que es definir las páginas que tendrá tu sitio web, ahora es momento de crear las “Páginas” y “Entradas” de tu sitio.
Pero, para ello, primero vamos a ver cuál es la diferencia entre una Página y una entrada.
Diferencias entre Páginas y Entradas
Las Páginas son como las secciones principales de tu biblioteca. Puedes crear páginas para contenido estático y atemporal, como tu página de inicio, acerca de, contacto o servicios.
Las páginas tienden a ser permanentes y están diseñadas para la información que no cambia con frecuencia.
En cambio, las Entradas son como los artículos que se añaden regularmente a tu biblioteca.
Las entradas son contenido dinámico y actualizable, como publicaciones de blog o noticias. Se muestran en orden cronológico inverso, con las más recientes primero, y son ideales para mantener actualizado un blog para que tu página se posicione en Google.
Pasos para crear Páginas usando Elementor
Para agregar páginas a tu sitio de WordPress, navega por el menú de la izquierda a «Páginas» y, desde allí, haz clic en el botón «Añadir nueva página».
En la parte superior derecha del editor de páginas, verás un botón que dice «Editar con Elementor». Haz clic en este botón para activar el editor de Elementor y comenzar a diseñar tu página.
Una vez que hayas activado Elementor, verás una pantalla dividida en dos partes: la barra lateral izquierda con las herramientas (widgets) disponibles y el área de trabajo principal donde puedes diseñar tu página.
Utiliza el editor de arrastrar y soltar de Elementor para agregar elementos como texto, imágenes, botones y más.
Haz clic en cualquier elemento de tu página para abrir las opciones de personalización en la barra lateral izquierda. Desde allí, puedes ajustar el texto, los estilos, los colores y más para adaptarlos a tus necesidades y preferencias.
Una vez que estés satisfecho con el diseño de tu página, haz clic en el botón «Previsualizar» para ver cómo se verá en tu sitio web.
Si todo se ve bien, simplemente haz clic en «Publicar» para que tu página esté disponible en línea para tus visitantes.
Si quieres continuar después con la edición sin publicar, sólo da clic en la flecha del botón “Publicar” y da clic en “Guardar como borrador”.
Si después quieres publicar, vuelve a esta página y da clic en “Publicar».
Sigue este mismo proceso para la creación de todas las páginas que definiste.
Pasos para crear Entradas usando Elementor
Para la creación de artículos para tu blog, lo que crearás no son “Páginas” sino “Entradas”.
Lo único que tienes que hacer para agregar una nueva entrada es ir a la sección de «Entradas». Haz clic en «Añadir una nueva entrada» para comenzar a crear una nueva entrada.
Una vez que estés en el editor de entradas de WordPress, verás la opción de «Editar con Elementor». Haz clic en este botón para abrir el editor visual de Elementor.
Realmente crear una entrada es muy similar a crear una página, por lo que te recomiendo seguir el mismo proceso que hemos visto para la creación de páginas.
Una vez que hayas terminado de diseñar tu entrada, revisa todo para asegurarte de que se vea como deseas. Luego, simplemente haz clic en el botón de «Publicar» para que tu entrada esté disponible en tu sitio web.
Paso 6: Crea un menú de navegación
Para poder acceder a las páginas, los visitantes podrán hacerlo a través del menú de navegación y esto es lo que estaremos creando en esta sección.
Crea un menú
En el menú lateral, haz clic en «Apariencia» y luego en «Menús».
Una vez dentro del editor de menús, verás una lista de páginas, entradas y enlaces personalizados disponibles para agregar al menú.
El primer paso es dar nombre al menú y elegir cabecera, ya que el menú va a ir en el encabezado de la página. Después da clic en “Crear menú”.
A la izquierda, en la sección de páginas, encontrarás las páginas que has creado (ojo: si están en borrador no te aparecerán, sólo si ya las publicaste).
Para agregarlas sólo tienes que seleccionarlas y dar clic en el botón de “Añadir menú”.
Cuando tengas todas las páginas agregadas, da clic en el botón “Guardar menú”.
Una vez que hayas agregado elementos al menú, podrás organizar su orden arrastrándolos y soltándolos en la posición deseada.
Puedes crear menús desplegables colocando los elementos secundarios debajo de los elementos principales y arrastrándolos ligeramente hacia la derecha para indicar que son subelementos.
Para dar diseño al menú, vas a editar las opciones de la plantilla Astra, y para hacerlo sigue estos pasos:
Ve a «Personalizar» en el menú lateral izquierdo de WordPress.
Ahora da clic en “Maquetador de cabeceras” y selecciona el menú de en medio.
En la opción de “Design” podrás cambiar el color de fondo.
Aquí puedes personalizar el color de fondo del menú y el color del texto.
Y si seleccionas el logotipo o el menú principal, también tendrás opciones para modificar el color y tamaño de texto y, en el caso del logotipo, la imagen y tamaño que elijas para tu logo.
Da clic en “Publicar” una vez que estés satisfecho con los cambios.
Crea un Footer o pie de página
El footer, también conocido como pie de página, es una sección ubicada en la parte inferior de una página web.
Suele contener información adicional, enlaces importantes, detalles de contacto y otros elementos que son relevantes para el usuario pero que no necesariamente deben estar en la parte principal del sitio, por ejemplo:
- Política de Privacidad
- Política de Cookies
- Términos y condiciones de servicio
- Copyright
- Información de contacto: Dirección, número de teléfono, correo electrónico u otros datos de contacto relevantes para que los usuarios se comuniquen con el propietario del sitio.
- Enlaces a redes sociales: Iconos o enlaces que dirigen a las cuentas de redes sociales del sitio web para que los usuarios puedan seguirlos en plataformas como Facebook, Twitter, Instagram, etc.
Para crear el Footer, vas a seguir los mismos pasos que para crear el menú, pero en vez de elegir el “Maquetador de cabeceras”, da clic en “Maquetador de pies de página”.
Paso 7: Agrega un favicon
En este punto, tu sitio web tiene contenido y estructura, lo que significa que casi has terminado.
Un favicon es una pequeña imagen o icono que se muestra en la pestaña del navegador web junto al título de la página web.
También se utiliza como icono de marcador en la barra de direcciones del navegador y como icono de acceso directo en la pantalla de inicio en dispositivos móviles.
Los favicons son una parte importante del branding de un sitio web, ya que ayudan a los usuarios a identificar rápidamente la página entre varias pestañas abiertas.
Para cambiarlo, ve a Apariencia > Personalizar y después da clic en “Identidad del sitio”.
Da clic en “Seleccione un ícono del sitio” para arrastrar la imagen que tengas en tu computadora para agregar el Favicon.
Después de seleccionarlo, da clic en el botón de Seleccionar y finalmente en Publicar.
Conclusión
¡Tu sitio web está listo!
¡Bien hecho! En este punto, tu sitio web debería estar funcionando sin problemas.
Si encuentras alguna dificultad o necesitas ayuda con la configuración de tu sitio web, no dudes en ponerte en contacto.
Además, es importante vincular tu sitio web con Google Search Console. Esta valiosa herramienta te ayudará a monitorear el tráfico desde los motores de búsqueda e identificar qué contenido resuena más con tu audiencia. Google Search Console proporciona una vista completa del rendimiento de tu página web profesional, ofreciendo información esencial para su mantenimiento.
¿Tu sitio web no está convirtiendo visitantes en clientes?
Desde la optimización para motores de búsqueda hasta la implementación de estrategias de conversión efectivas, trabajaré contigo para garantizar que tu sitio web no solo atraiga tráfico, sino que también convierta a los visitantes en clientes. Definamos un plan de acción.
