Cómo crear una Página Web con WordPress – Tutorial paso a paso

En este tutorial vas a aprender cómo crear desde cero, muy fácil y en poco tiempo una web moderna, con un diseño profesional y adaptada a dispositivos móviles, sin necesidad de ningún conocimiento técnico con WordPress y el hosting de SiteGround.

El tutorial te valdrá tanto para una web de un negocio como para un simple blog personal porque incluye también cosas como un formulario de contacto que no sólo sirve para que tus lectores contacten contigo, sino también para muchas otras cosas.

Un ejemplo es la implementación de un sencillo, pero eficaz sistema de recepción de pedidos que ya es una solución mucho más organizada que recibir pedidos de tus clientes vía WhatsApp o email.

Como lo propio para un tutorial de este tipo es que veas lo que se está haciendo en pantalla, todo está hecho con los vídeos que puedes ver a continuación en cada uno de los siguientes párrafos. ¡Casi dos horas de tutorial!

Pero a cambio de este tiempo, te aseguro que vas a tener una web realmente muy completa para empezar tu proyecto en el mundo online.

Intro a este Tutorial WordPress desde cero en español

En este primer vídeo de introducción a nuestro tutorial WordPress desde cero empezamos con un vistazo rápido a la web que vamos a crear aquí juntos paso a paso.

Para hacer todo el tutorial mucho más real y concreto, me he inventado como ejemplo a un joven emprendedor que quiere ofrecer sus servicios de formación en inglés y traducción de textos.

Ésta va a ser la web que vamos a crear juntos y contiene todo lo que necesitas para empezar con tu proyecto web.

La web consta de cuatro páginas: la página de inicio (la “home”), una página de blog que es algo que toda web debería tener (en el vídeo se explica por qué), una página de contacto y otra página de “Acerca de…”.

Cómo comprar el mejor Hosting y Dominio barato y bueno para WordPress

En este vídeo vamos a ver cómo contratar el mejor hosting y dominio barato para la web que vamos a crear.

El hosting que he elegido para el tutorial es el de SiteGround. Si usas este enlace, te aseguras también de que se te aplique siempre el mejor descuento disponible en cada momento, o bien, sigue los pasos que se explican en el propio vídeo:

Un aspecto a destacar especialmente (y razón importante para elegir este hosting) es que SiteGround es de los pocos hostings que incluyen, además, del soporte técnico normal, también un soporte específico para WordPress, incluso en el plan más barato.

Un soporte específico para WordPress es algo importante que ofrecen muy pocos hostings y te va a dar mucha tranquilidad porque te los posibles problemas que puedas tener muchos serán de WordPress. Tener un equipo técnico que te ayude a resolverlos da mucha tranquilidad.

Cómo instalar WordPress en SiteGround

En este vídeo te voy a enseñar cómo instalar WordPress en SiteGround. Para ello, voy a utilizar el asistente de instalación de SiteGround porque hace la instalación extremadamente fácil.

Vas a ver, por cierto, que, en el estado inicial después de la instalación, el sitio que hemos creado es horrorosamente feo, pero no te preocupes, de esto ya nos ocuparemos en el resto del tutorial 😊

Cómo usar el soporte de SiteGround

Para rematar ya definitivamente todo lo que tiene que ver con el hosting y la instalación de WordPress, vamos a ver también cómo usar el soporte y, en particular, como acceder al chat y a la atención telefónica si lo necesitas.

Quiero aprovechar para comentar el extraño “vicio” que observamos en muchos usuarios de hosting de no usar realmente el soporte del que disponen cuando deberían hacerlo y plantear, sin embargo, sus problemas en blogs como este mismo.

Ante cualquier problema con tu web, acude primero al soporte de tu hosting. Casi todos los problemas van a requerir acceder al servidor de tu web, algo que obviamente sólo puede hacer el equipo de soporte técnico de tu hosting y no alguien de un foro o blog tercero.

Cómo configurar WordPress desde cero

En esta parte del tutorial voy a hacer un repaso a los ajustes de WordPress. Seré breve para no extenderme, pero aun así tocaremos todo lo esencial para tener una configuración básica bastante completa.

Veremos aquí cosas como el ajuste correcto de la zona horaria, esencial para publicar en la hora correcta las publicaciones programadas, configuraciones para optimizar el uso de las imágenes o ajustes para optimizar los comentarios de las entradas y páginas y su gestión.

¿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é otros viven de esto y a ti te cuesta tanto?
• Los secretos para adelantar a tu competencia por la derecha.
• Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
• 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
• Cómo hacer páginas web de 400€ en menos de 4 horas.

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).

Accede gratis aqui

Cómo instalar plugins y temas en WordPress

En esta parte del tutorial vamos a extender la funcionalidad por defecto de WordPress con la plantilla de diseño OceanWP y varios plugins que son necesarios para poder conseguir una web como la que has visto al principio de este tutorial.

Tanto el tema como los plugins usados aquí son gratuitos, no vas a incurrir en ningún gasto.

Con ellos vamos a ampliar muchísimo las posibilidades de WordPress, hasta el punto de que un diseño como el que has visto al inicio del tutorial, cuando repasamos el resultado final del tutorial, sería imposible sin usar estas extensiones.

Crear entradas y páginas en WordPress y cambiar la página de inicio

En esta parte del tutorial vamos a crear los contenidos. Haber creado varios contenidos va a hacer que veamos mucho mejor el resultado real de la personalización del diseño en cada paso.

También voy a explicar en este vídeo la diferencia entre entradas (posts) y páginas que es algo fundamental que tienes que tener claro antes de crear contenidos en WordPress.

Cómo crear un menú en WordPress

Llegado a este punto del tutorial ya hemos creado todos los contenidos, pero tenemos un problema: no podemos acceder de una manera directa y fácil a todas estas páginas que hemos creado.

Eso es porque nos falta un menú de navegación, así que vamos a ponernos con ello.

En la web vamos a crear un menú muy sencillo, pero este simple ejemplo será más que suficiente para que puedas aprender

Cómo personalizar la cabecera y el menú en OceanWP

Ahora que hemos creado los contenidos, ya podemos meternos con la parte que creo que es la que más estabas esperando: el diseño de nuestra web.

Vamos a empezar por la personalización del tema que estamos usando en este tutorial: OceanWP.

Cómo personalizar el cuerpo y los títulos en OceanWP

Seguimos con la personalización del cuerpo, los títulos y subtítulos en la plantilla OceanWP.

Para ver mejor los efectos de esto cambios, los haremos en la página de “Acerca de” y con una filosofía minimalista. En esta ocasión, la filosofía minimalista se va a traducir, sobre todo, en la decisión de no usar barras laterales.

Cómo personalizar el blog y sus entradas en OceanWP

La página de blog y a sus entradas son una parte que OceanWP trata de manera diferente al resto a nivel de diseño y tiene sentido que sea así porque las necesidades de esta parte son diferentes al diseño general de las páginas del sitio.

Por tanto, vamos a rematar ahora el diseño de la parte de blog.

Aquí, de nuevo, aplicaremos una filosofía de diseño minimalista en el que eliminaremos la barra lateral la cual, igual que en las demás páginas, tampoco nos aporta gran cosa en la página de blog.

Cómo crear un formulario de contacto en WordPress con WP Forms

Los formularios son una herramienta muy sencilla, pero a la que se le puede sacar mucho partido de múltiples maneras en una web.

En este caso, el formulario lo voy a usar para dos cosas:

• Para que la gente pueda contactar con nosotros de una manera fácil y segura.
• Y como una solución muy simple para recibir pedidos, mucho más eficaz que hacerlo vía email, WhatsApp o canales similares que usan muchos pequeños emprendedores.

Este formulario, cuando lo haya rellenado y enviado el usuario, te enviará a ti, al administrador WordPress, un email con los diferentes apartados de ese formulario.

Tutorial de Elementor para WordPress en español

En esta parte que comienza aquí y abarca los cuatro vídeos restantes podría ser perfectamente un comenzamos un tutorial de Elementor en sí mismo.

Por otra parte, seguramente será la más divertida de todo el tutorial: crear el diseño de la portada de nuestra web. Aquí vamos a crear la portada de la web.

Como la portada la crearemos con el plugin Elementor, en este vídeo haré primero un repaso a los conceptos clave de esta potente herramienta a modo de introducción general a Elementor.

Cómo crear una página de inicio con Elementor

Ahora, que has podido ver la filosofía general de cómo funciona Elementor ya te va a ser fácil seguirme en el diseño de la portada.

Esto va a ser la “joya de la corona” de este tutorial, así que espero que disfrutes a tope 😊

Cómo diseñar una web responsive (adaptable) con OceanWP y Elementor

Hoy en día, más de la mitad del tráfico web es móvil, así que resulta obligado que tu web también se vea bien en estos dispositivos. Esto se conoce como crear un diseño web “responsive” o “adaptable” en castellano.

Y eso es en lo que se centrará este vídeo: hacer nuestro diseño web adaptable.

Un comentario importante es que, como una parte del diseño está hecho con la propia plantilla WordPress, Ocean WP, y la otra con Elementor, tenemos que implementar el diseño adaptable en cada una de estas dos herramientas.

Cómo hacer que Elementor funcione bien con SSL

Ahora nos queda nos queda un pequeño fleco, pero importante, por arreglar: la conexión segura SSL que, desde que creamos la portada con Elementor, nos está dando un error.

Esto se debe que se pueden dar cuando se suben imágenes a Elementor y que te explico en más detalle en el vídeo:

¡Y con esto ya terminamos el tutorial y espero que disfrutes al máximo de tu nueva web!