Cómo hacer una página web en WordPress

En este post creamos una página web desde cero, empezanejdo 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!

crear pagina web wordpress

El diseño del sitio web lo vamos a hacer con la oferta especial del hosting de SiteGround por ser de las mejores opciones del mercado y el plugin de diseño Elementor porque es súper intuitivo de utilizar y conseguimos resultados profesionales.

Siempre es muy motivador ver cuál va a ser el resultado final de la web que vas a crear. Así que empecemos con un vistazo a ese resultado final. Te gustará, estoy seguro 😉

¿Cómo es la página web que vamos a crear?

La página web que vamos a crear tiene la estructura típica de “Servicios“, “Blog“, “Contacto” y “Acerca de“.

Es una estructura que sirve para prácticamente cualquier web: una web de una empresa, de un profesional o un blog. Para el tutorial me he inventado un supuesto que ya te cuento más en detalle en el vídeo mientras que te enseño cómo quedará la web:

¿Te ha gustado cómo queda lo que vamos a hacer juntos?

Pues manos a la obra. 😊

¿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 servidor 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. Con este servicio alquilas un servidor para que haga esta función y es muy importante para que la página web funcione bien. Por suerte, hoy en día es algo muy asequible.

Aquí puedes ver precios:

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

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:

¿Qué es un dominio de Internet? Todo lo que necesitas saber

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:

cabecera que es un hosting Qué es un Hosting Web y qué tipos de Alojamiento Web existen

Un sitio web bien hecho requiere un hosting web. ✅ Aquí te explico qué es un hosting, cómo funciona y cómo distinguir los buenos de los malos.

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 hosting. A veces hay ofertas especiales, aquí vas a encontrar siempre el mejor precio.

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 elcontrol 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:

¿Qué es un plugin WordPress y para qué sirve?

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

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:

elegir plantilla wordpress perfecta Cómo elegir la plantilla WordPress perfecta para tu web

Elegir una buena plantilla WordPress es una de las tareas más importantes cuando creas tu sitio web. Aquí te explico todas las claves para hacerlo bien.

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.

Crear un menú personalizado en WordPress

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.

Cómo modificar la cabecera y el menú en OceanWP.

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.

¿Te gustaría leer más sobre esta temática? Busca aquí:

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 apasiona de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto web actual al cual pertenece, entre otras, esa web.

Aparte de mi propia experiencia emprendedora, mi contacto profesional con pymes y pequeños emprendedores me ha generado un gran interés en el marketing online.

Emprendí muy joven y eso hizo que todo el desarrollo inicial de las redes sociales, WordPress, SEO, etc. ya lo viví con esa experiencia. Me fascinó cómo cambió las reglas del juego para bien, sobre todo, para los pequeños emprendedores.

Esto me parece algo tan importante, de tanto calado social, que este blog nace con la vocación de ser un sitio de divulgación de este conocimiento y con la intención de motivar sus lectores para que aprovechen al máximo el potencial de estas disciplinas.


8 comentarios en «Cómo hacer una página web en WordPress»

  1. Con este artículo he sido capaz de montar mi web y que sea funcional. Creo que es importante tener unos conocimientos mínimos, sobre todo porque más adelante cuando quiera añadir un mejor diseño (CSS, tipografia, contrastes, etc) seré capaz de interlocutar con el diseñador gráfico y pedir exactamente lo que necesito. Muchas gracias.

    Responder
  2. Gracias por tu explicación Lucia. Estaba entre la duda para un proyecto nuevo entre elegir Elementor o Thrive Architect, pero creo que me decantaré por Elementor, además, tu guía me será de gran utilidad. Gracias una vez más.

    Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).