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.

como crear una pagina web-con-wordpress

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 鈥渉ome鈥), 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 鈥淎cerca 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 鈥渧icio鈥 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).

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 鈥淎cerca 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 鈥渏oya 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 鈥渞esponsive鈥 o 鈥渁daptable鈥 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!

Acerca del autor: Berto L贸pez

Soy autor y fundador de este blog, e Ingeniero en Inform谩tica de formaci贸n con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 馃槃

De todo ello, lo que me llena de verdad, es el emprendimiento, combinado con la tecnolog铆a, algo que he podido retomar con mi proyecto de emprendimiento actual, al cual pertenece, entre otras, esta web.

He tenido mucho contacto profesional con Pymes y peque帽os emprendedores y eso me ha llevado inevitablemente hacia WordPress como plataforma web ideal para estos usuarios.

Mi inter茅s se centra en la variante instalable en un servidor, WordPress.org, por su infinito potencial a cambio de un coste casi nulo. Un antes y un despu茅s para los emprendedores.

En este blog quiero ayudar a sus usuarios, sobre todo, con los aspectos m谩s t茅cnicos de WordPress y el hosting para poder disfrutar a tope, sin miedos, de esta maravillosa plataforma de software libre y de c贸digo abierto :)

6 comentarios en 芦C贸mo crear una P谩gina Web con WordPress – Tutorial paso a paso禄

  1. Estimado Berto.

    Ya tengo terminada mi web siguiendo tu tutorial. Me ha surgido una peque帽a piedra que no s茅 resolver.

    Para el pie de p谩gina tambi茅n he utilizado Elementor (Widget de pie de p谩gina), pero al poner el copyright con el a帽o actualizable ( [oceanwp_date] ) no me lo reconoce. Utilizo una plantilla con 4 columnas editadas con Elementor y pongo aqu铆 el copyright para que todas las columnas queden alineadas.

    No he encontrado documentaci贸n en la que se indique como realizar esta operaci贸n con Elementor o de forma m谩s gen茅rica. Por supuesto que mi nivel de programaci贸n web es nulo.

    Me podr铆as indicar c贸mo resolver esta pega o d贸nde encontrar la soluci贸n.

    Saludos y gracias de antemano,
    Jos茅 Eduardo Tom谩s L贸pez

    Responder
    • Hola Jos茅,

      La verdad es que me pillas porque aqu铆 no hay muchas posibilidades de error si has escrito el shortcode correctamente 馃檨

      Lo 煤nico que se me ocurre es que quiz谩s haya alg煤n problema en la versi贸n actual de Elementor en el momento que est谩s haciendo la operaci贸n o alg煤n tipo de otro problema con tu instalaci贸n de WordPress que est茅 generando el problema.

      Lo que puedes hacer, es dar un toque al soporte del hosting, contarles el problema y que te digan si ven trazas de errores en los logs de WordPress que puedan dar pistas sobre qu茅 est谩 pasando.

      隆Un saludo!
      Berto

      Responder
  2. Excelente tutorial, Berto.
    Estaba buscando informaci贸n para poder implementar un sitio web para mi actividad profesional y me ha venido como anillo al dedo, siendo como soy un profano en estos temas.
    Tengo casi terminada la p谩gina web, s贸lo me queda crear los enlaces web a las distintas p谩ginas del sitio.
    Saludos,
    Jos茅 Eduardo Tom谩s L贸pez

    Responder

Deja un comentario