En este post creamos una página web desde cero, empezando por la contratación del hosting hasta la maquetación de la página principal o «landing page». Si siempre has querido hacer una página web, pero no sabes por donde empezar, ¡este es tu sitio!
El diseño del sitio web lo vamos a hacer con el plugin Elementor, porque es súper intuitivo de utilizar y conseguimos resultados profesionales.
Aunque seguro que tienes muchas ganas de empezar con “la chicha” de crear tu página web con WordPress, tienes que aprender primero qué es un hosting web y cómo conseguir el dominio para tu página web.
¿Cómo es la página web que vamos a crear?
Antes de empezar a crear tu sitio web, echa un vistazo a este vídeo de presentación de la serie de tutoriales que te enseñan a hacerlo.
La página web que vamos a crear tiene la estructura típica de «Servicios«, «Blog«, «Contacto» y «Acerca de«.
¿Qué son un hosting y un dominio y para qué sirven?
El primer paso de todos es pensar en el hosting y dominio para tu sitio web. Para crear una página web necesitas un ordenador donde alojarla, guardar los archivos que ésta contiene, además de los datos que necesita para funcionar correctamente.
Existen muchas empresas que ofrecen este servicio, que se llama hosting.
Al final, cuando contratas un hosting, estás alquilando un ordenador en línea para que haga esta función, y es muy importante para que la página web funcione bien.
Por otra parte, un dominio es la dirección de Internet que va a tener tu página, la URL y se contrata con el hosting.
Como estamos empezando, es mejor ir poco a poco y en las siguientes secciones y vídeos irás entendiendo un poco mejor, pero por si quieres profundizar un poco más en el tema de qué es un dominio y cómo funciona, te dejo este post para que lo veas:
Elegir tu hosting para WordPress: SiteGround
Hay muchos hostings diferentes, uno de los que más recomendamos es SiteGround porque, entre otras cosas, tiene soporte específico para WordPress.
De todas maneras, si quieres saber mucho más, te voy a dejar un post parecido al del apartado anterior, pero que explica con más detalle qué es un hosting:
Qué es un Hosting Web y qué tipos de Alojamiento Web existen
Un sitio web bien hecho y potente requiere su propio hosting web. ✅ En este post te explico qué es exactamente un hosting, cómo funciona, cómo distinguir los malos servicios de los buenos y qué opciones concretas te pueden convenir a ti en función de tu proyecto.
Contratar el hosting y dominio
Para conseguir el hosting que quieres tienes que acceder a su web y elegir el plan que quieres de hosting, según tus necesidades. Normalmente, para empezar te servirá el plan más sencillo de todos.
En este ejemplo, como en el vídeo que hay para enseñarte los pasos, vamos a contratar el servicio de SiteGround.
Estos son los cuatro planes que ofrece Siteground.
El siguiente paso es registrar un dominio. El dominio es la dirección URL que va a tener tu sitio web, seguido de la extensión que elijas.
No te preocupes si tardas un rato en pensar uno perfecto para tu sitio web; es difícil dar a la primera con el mejor.
Además, también tienes que pensar que extensión quieres.
Si te vas a centrar en un país concreto, te recomiendo que escojas la extensión de ese país. Por ejemplo, si vas a crear un blog de coches en España, podría ser www.ejemplodeblogdecoches.es. En cambio, si quieres llegar a más público, elige www.ejemplodeblogdecoches.com.
Instalar WordPress en un hosting y cómo usar el soporte de Siteground
Para poder comenzar a crear tu sitio web, WordPress tiene que estar instalado en el mismo hosting que está tu dominio.
Para hacer esto vamos a utilizar el asistente, por lo que solo deberás introducir tus datos personales y seguir las instrucciones.
Cuando hayas terminado de instalarlo accedes por primera vez al escritorio de WordPress, que es el “control de mandos” de tu página web.
Además, podrás acceder por primera vez a tu página web. ¡No te asustes! Es, todavía, muy muy básico y tenemos trabajo por delante 😊
De todas formas, si tienes cualquier duda o complicación en algunos de estos procesos, puedes contactar con el soporte de tu hosting.
Para eso te he dejado en este vídeo algunos ejemplos de cómo usar el soporte de SiteGround, tanto por atención telefónica como por el chat
En el vídeo aprenderás a acceder al escritorio de WordPress de las dos maneras más sencillas, además de configurar una conexión segura HTTPS.
Configuración básica de WordPress
Este es el escritorio de WordPress, desde donde vas a controlar todo lo que pase en tu sitio web, y también donde vas a acceder a los ajustes para empezar a darle forma.
Este es el panel que encontrarás en «Configuración» de WordPress.
Al hacer clic sobre el apartado de “Ajustes”, como ves en el ejemplo de abajo, se despliegan un montón de opciones diferentes: generales, escritura, lectura o comentarios.
Entre las opciones vas a encontrar el título del sitio, que es el nombre visible de tu página web. Como ves en el ejemplo he utilizado “Nuestro primer sitio web”.
Este es el panel que encontrarás en «Configuración» de WordPress.
Como son algunos pequeños detalles, es mejor que eches un vistazo a este vídeo y lo vayas haciendo a la par:
Instalar plugins y temas en WordPress
Cuando te descargas WordPress, lo hacemos con el “paquete básico”, es decir, lo más simple que puede ser. Para ir añadiendo funcionalidades están los plugins, y para darle una apariencia bonita, los temas.
Si nunca habías oído hablar de esto no te preocupes, en los vídeos que vas a ver estos temas se tratan desde cero.
Qué es y como instalar un plugin WordPress
Los plugins de WordPress son unos complementos que aportan funcionalidades extra a la versión más básica de WordPress que nos hemos descargado.
Tenemos que descargarlos y activarlos para comenzar a utilizarlos.
Esta es la ventana para descargar y activar plugins.
Puedes echar un vistazo al repositorio oficial de WordPress.org y ver que existen un montón de ellos, con muchísimas aplicaciones distintas.
Yo te recomiendo que antes que nada veas el vídeo, pero si quieres conocer más sobre los plugins de WordPress, echa un vistazo a este post:
Los plugins que vamos a necesitar en este momento son, Ocean Extra y Elementor.
Cómo instalar tema OceanWP
Mientras que los temas, son el conjunto de archivos que van a configurar el espacio de nuestro sitio web, como los colores de texto, la estructura de la página o la tipografía.
Al igual que los plugins, podemos descargarlos y activarlos, desde la sección de “Apariencia” del escritorio WordPress.
¿Te dedicas al diseño web pero no consigues hacerlo rentable?
Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.
Haz clic en el botón de abajo para descubrir:
- En qué estás fallando. ¿Por qué no resulta rentable cómo lo enfocas tú?
- Cuál es el error estratégico más grave que comete casi todo el mundo.
- Los secretos para diferenciarte de tu competencia y adelantarla por la derecha.
- Cómo hacer webs de 400€ en 4 horas.
- Cómo hacer que tu cliente ya no quiera trabajar con nadie más.
Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).
En este caso vamos a utilizar el tema OceanWP, porque es un tema súper versátil y que permite crear, de manera muy fácil, páginas muy bonitas, pero si quieres echar un vistazo a otros que también están muy bien, consulta este post:
Como crear un sitio web profesional con WordPress desde cero
Ya tenemos el hosting y dominio, y hemos hecho la configuración básica, con la zona horaria y los ajustes de comentarios y escritura.
También hemos instalado los plugins necesarios, en este caso Elementor para construir el diseño de las páginas, Ocean Extra como complemento al tema y WPForms para crear el formulario de contacto.
En cuanto al tema, hemos elegido OceanWP y vamos a comenzar a personalizar el contenido de la web.
Crear páginas, entradas y configurar una página de inicio en WordPress
Una página es lo que forma la estructura de la web, por donde la persona que te visita va a ir navegando.
La estructura más común para una página web es, una primera página, principal, que va a ver todo el mundo al entrar, y se llama página principal o “landing page”; después, una de “Servicios”, otra de “Sobre mí” y finalmente la de “Contacto”.
Mientras que, una entrada es una página destinada al contenido, dónde vas a ir creando los diferentes post de tu blog.
Como sé al principio suena un poco “lioso”, es mejor que veas este vídeo.
En el paso anterior has creado tus primeras páginas, pero ahora es imprescindible que tengas un menú, visual, para que la persona que te visita pueda ir navegando por tu web.
Para conseguirlo, ve a “Apariencia”, “Menú”, y ahí tendrás que ir añadiendo las páginas que quieras añadir.
Como agregar un formulario de contacto en WordPress
Una vez que tenemos las páginas creadas, el menú para ir navegando, es hora de ir creando el contenido para cada una de ellas.
Hay un punto esencial, tengas la página que tengas, y es el formulario de contacto. Es una herramienta súper sencilla, que permite que la gente pueda contactar contigo de una manera personal.
Para hacerlo necesitamos instalarnos un plugin, WPForms, porque WordPress no dispone de ninguna función que nos permita hacerlo.
WPForms te permite configurar los campos que tu quieras, como nombre, apellido, asunto o correo electrónico, y dónde nos van a llegar a nosotros esos correos.
Personalización de tu página web con OceanWP
Ahora que ya hemos creado los contenidos y la estructura básica de tu web, es hora de meternos en faena con la personalización del tema que estamos utilizando, en este caso, OceanWP.
En una página hay muchos elementos distintos, que tendremos ir modificando uno a uno.
En los siguientes apartados, veremos la cabecera, que es la zona superior de la página principal donde sueles ver el logo de la empresa y el menú, o el cuerpo, que es todo aquello que comprende desde la cabecera hasta el footer.
Una vez dentro de la personalización de la apariencia, busca en el menú la sección de “cabecera”.
Como suele ser lo primero que se ve de una web, va a resultar esencial que esté bien organizada y bonita.
Como ya hemos hablado, el menú forma parte de la cabecera, por lo que la tipografía de su letra o los colores los tienes que modificar en esa sección.
Vamos a ir, parte por parte, para que no te pierdas nada.
Cómo personalizar el cuerpo y títulos en OceanWP
¿Qué elementos debe tener el cuerpo de una entrada?, ¿Cuántos píxeles de ancho son los recomendables? Bueno, la respuesta a esta pregunta es bastante amplia… depende de los objetivos de cada uno.
Sin embargo, hay algunos “truquillos” que van a hacer que tu web resulte más agradable y, por tanto, reciba más visitas.
Uno de ellos, es no utilizar barra lateral, que tan famosa ha sido durante mucho tiempo. Y ese es el problema; nuestros ojos están tan acostumbrados a ella, que no le prestamos casi atención.
Para quitarla ve a la pestaña de ajustes generales, como dice en el vídeo.
Blog y entradas: como crear un blog en mi página web de WordPress
Dependiendo del tema que utilices para la apariencia de tu página web en WordPress va a “tratar” las entradas y tu página de forma diferente.
Siguiendo el ejemplo de los videos anteriores, en este paso vas a configurar en el tema OceanWP la estética de cada entrada del blog, dando formato a los títulos y el texto que contenga.
Elementor, el constructor de páginas:
Seguramente entramos en el tramo más divertido de crear tu propia página web, y a al que todo el mundo está deseando llegar: el diseño de la página.
Para esto, vamos a utilizar el plugin que mencionamos en uno de los primeros videos, Elementor.
Durante los próximos cuatro videos vamos a centrarnos en construir una buena página de inicio, también llamada landing page, que sirva de llamada a más visitantes.
¡A diseñar!
Introducción: qué es Elementor y cómo funciona
Elementor es un constructor de páginas y maquetador de su contenido. Existen varios plugins de WordPress parecidos, pero Elementor nos gusta demasiado 😊
Cuando lo tengas instalado y activado, Elementor formará parte de la pantalla principal del editor de WordPress, y podrás acceder a la edición con el haciendo clic en el botón del panel de edición, como puedes ver en el vídeo.
Una vez que estés dentro, vas a ver que es súper sencillo de utilizar; funciona con el típico sistema de “soltar y arrastrar”.
La estructura de las paginas se divide en bloques, y en cada uno puedes poner texto, imágenes, botones… infinidad de elementos.
También tenemos disponibles muchas plantillas, que son secciones ya diseñadas, que podemos utilizar y modificar a nuestro gusto.
Cómo hacer una página de inicio en WordPress, con Elementor
No hay que juzgar un libro por su portada… pero sí una web por su página principal.
Esta va a ser lo primero que vea todo el mundo que se meta en tu página, por lo que supones la grandísima importancia que tiene el amor a primera vista.
Aprende a crear una landing page profesional, desde cero, con este vídeo.
Cómo crear una página web responsive con Elementor y OceanWP
Cuando diseñas un sitio web, debes tener en cuenta las dimensiones que estableces para la pantalla, porque la gente se va a meter tanto por móvil, como por ordenador o Tablet, y si no utilizas un diseño responsive, se va a ver todo descolocado.
Por suerte, WordPress cuenta con un método que nos hace la vida mucho más fácil (y el trabajo también). Solo tienes que seguir los pasos del vídeo para hacerlo.
SSL y Elementor: cómo conseguir una conexión segura
¡Ya tienes todo (casi) listo! Pero hay una última cosa que no debes olvidar, y es establecer como conexión segura tu web.
Es bastante habitual que cuando se utiliza Elementor para construir la portada, salte el aviso de que la conexión no es segura, simplemente por subir una foto. Pero gracias a la configuración de WordPress puedes remediarlo en un periquete.
