💻 Guía paso a paso de cómo crear una página web profesional en 2018

En este completo post te explicaré, a partir de imágenes y una serie videotutoriales, los pasos exactos para que puedas crear una página web sin tener ni idea de cómo hacerlo. En definitiva, te daré una ruta para que llegues a hacer tu propia web como lo hacen los profesionales sin necesidad de que lo seas.

Después de dar una vuelta por la red, he detectado que está llena de tutoriales, guías y cursos que enseñan cómo crear un blog, una web, etc, en definitiva, demasiada teoría. Todo eso está muy bien y existe contenido muy útil y de mucha calidad, pero…

¿Qué ocurre si no tienes mucha idea de diseño web o no tienes presupuesto para pagar a un diseñador?.

Pues para eso a nacido este post, para que puedas tener una web profesional y de calidad que no tenga nada que envidiar a la de tu competencia.

A lo largo de nuestro proceso de creación no te voy a saturar con tecnicismos y conceptos complicados, aunque es lógico que aparezcan términos que no conozcas, no te preocupes, te los explicaré y te haré lo más fácil y comprensible posible este viaje.

Una web profesional y con estilo requiere de una pequeña inversión, nada significativo comparado con los beneficios que te puede reportar. Para simplificar el proceso no te daré multitud de alternativas entre las que elegir en cada elemento (hosting, plantillas, etc.) para crear una web.

Lo que te ofrezco es una hoja de ruta con los productos que yo considero mejores, o más adecuados para este caso, y que ofrecen un rendimiento óptimo.

Me gustaría aclarar que la elección de estos elementos está basada en mi experiencia personal y es totalmente desinteresada, es decir, que no recibo ningún tipo de compensación o retribución económica por parte de ninguno de los productos que recomiendo.

Nota: Si lo que quieres es crear un blog profesional, este post también es para ti. En definitiva, un blog no es nada más que una web que tiene como inicio una página de entradas.

Para empezar necesitaremos lo siguiente:

  1. Hosting: Es el espacio donde se aloja un sitio web y vamos a instalar nuestro WordPress.
  2. Dominio: Cómo se va a llamar nuestra web.
  3. Plantilla: Un modelo del diseño que tendrá nuestra página, luego lo podremos modificar.
  4. Tiempo

1. Conseguir dominio y hosting

El ejemplo del proceso de compra lo haremos con Webempresa. Existen otras posibilidades, algunas tan buenas como este hosting que te recomiendo y otras no tanto, pero si tu página crece y se convierte en una sitio web top, créeme que te alegrarás de haber escogido un hosting de calidad y, sobre todo, tu vida será más fácil.

Otras proveedores de hosting interesantes son, por ejemplo Raiola Networks o Siteground, cualquiera de ellos es bueno y son muy similares, elige el que más te convenga.

Como te comenté anteriormente, el ejemplo lo haremos con Webempresa, pero no te preocupes si eliges alguno de los otros dos que te he recomendado, la única diferencia es el proceso de compra, una vez dentro, los tres se manejan con CPanel, más adelante te explico lo que es esto.

     El hosting

Como en cualquier proceso de construcción para una casa, lo primero que tendremos que hacer es adquirir el terreno donde edificaremos y los materiales que utilizaremos.

El hosting es el espacio virtual donde albergaremos nuestra web, para que nos entendamos, el solar donde levantaremos nuestra casa . Aquí se guardarán todos los datos que harán que nuestra web funcione y esté online.

Un hosting de baja calidad puede resultar un problema para nuestra web, ya que:

  • La velocidad de carga puede ser muy baja y nuestra página tardará mucho en cargar.
  • Puede ser poco seguro.
  • Mal soporte.
  • Y un largo etcétera.

 

¿Por qué este y no otro?, por muchos motivos, pero los que nos interesan a nosotros que estamos empezando con nuestra web son:

  • Por su excelente soporte 24 horas y 365 días: Sólo nos atenderán profesionales muy cualificados y, por lo general, no tardarán más de 10 minutos es responder.
  • Por su velocidad y rendimiento.
  • Por algunas herramientas que ofrecen para optimizar tu web, si no sabemos de diseño web nos vendrán muy bien.
  • Porque está perfectamente adaptado parael CMS  o gestor de contenidos  WordPress. ¿Sabes qué es un CMS? 
  • Si nos arrepentimos de la compra del hosting durante los primeros 30 días nos devuelven el dinero.

Nota: Antes de comprar nada lee el siguiente punto.

     El dominio web

Es básicamente cómo se llamará nuestra web. Mi consejo es contratar el dominio con el mismo proveedor que nos suministre el hosting.

Cualquiera de las tres opciones que te he recomendado te regalan el registro de dominio gratis durante un año si contratas un plan anual, así no tendras que hacer ninguno de las dos gestiones que te paso a comentar.

En caso de que ya tengas comprado el dominio en otro proveedor o no quieras adquirirlo donde has contratado el hosting, tienes dos opciones:

  • Apuntar las DNS  a tu hosting para que la web funcione. Por lo general, este proceso es gratuito y tardaría entre 24-48 horas.
  • Hacer un traslado o transferencia de dominio: Cambiar el agente registrador que va a gestionar tu dominio. La próxima vez que tengas que pagar lo harás con el nuevo proveedor. El precio de esta gestión dependerá de quien gestiona tu dominio actualmente, es decir donde lo compraste. Esta gestión puede tardar hasta de 14 días, quizá menos dependiendo de la empresa con la que tengas contratado el dominio.

 

Obviamente puedes comprar el dominio más barato en otros proveedores y llevar a cabo algunas de las dos opciones anteriores. Sin embargo, como queremos hacer el proceso de creación de nuestra web lo más fácil posible, aconsejo tenerlo todo con el mismo.

¿Qué plan contratar y cómo lo hago?

Como te comenté anteriormente, las tres opciones de hosting de las que te he hablado ofrecen un plan donde nos regalan durante un año el dominio al contratar un plan de hosting anual. Para mí esta es la opción ideal.

Hacerlo es muy fácil, tan sólo hay que seguir los pasos que nos va marcando el proceso.

Simplemente tienes que decidir que plan quieres contratar.

 

El nombre que quieres registrar, por ejemplo el mío es «www.sergiotena.com«. En mi caso también tengo comprado «www.sergiotena.es«. Como es un dominio de marca personal no quiero que alguien lo compre y me haga la competencia con ese mismo nombre.

¿Cuál es la diferencia entre un dominio web «.com» y otro».es»?

Los primeros son dominios pensados para que las webs posicionen a nivel global, mientras que los segundos están creados para posicionar en determinados países, en este caso «.es» sería bueno para posicionar en España, pero no en Colombia, aunque el idioma sea el mismo.

Resumiendo, si tu sitio web sólo quiere posicionar (intentar aparecer en los primeros puestos de Google) en España, compra «.es». En caso de quieras posicionar en todo el mundo compra «.com». Dejo a tu criterio la decisión de si quieres adquirir el mismo dominio pero «.es».

Aclarado esto, pon en el número 1 de la imagen cómo deseas que se llame tu dominio, y en el número 2 la extensión de dominio que quieres que tenga.

Una vez hecho esto, haces clic en «comprobar» para ver si ese nombre está libre. En caso de que no lo esté, sólo te queda seguir probando combinaciones hasta que des con una que te agrade y no esté ocupada.

 

¡Estupendo!, el nombre de dominio que has elegido está libre. Haz clic en «continuar» y ahora tendrás que elegir el plan de hosting que quieres contratar.

Si tu web va a ser una página de marca personal o de un empresa mediana, con el más pequeño, el de 1 GB tendrás suficiente. De todos modos, si algún día necesitases más espacio puedes cambiar a un plan de mayor capacidad sin ningún problema.

Si quieres probar primero, puedes elegir el plan semestral y pagar el dominio aparte.

2. Instalar WordPress

Ya tenemos todo lo que necesitamos para empezar a crear nuestra web. ¿Qué tienes que hacer ahora?

Lo primero es entrar en tu área de cliente. Durante el proceso de compra tendrás que haberte registrado, con esos datos serán con los que tendrás que entrar a tu panel de administrador de tu WordPress.

Como te expliqué al principio del artículo, WordPress es un CMS o Gestor de Contenidos. Desde aquí vamos a poder administrar todo el contenido, imagen, estilo o comentarios, entre otras muchas cosas, de nuestra página web.

Para hacer la instalación de WordPress en tu hosting debes seguir los siguientes pasos:

Haz clic dentro de la caja que se indica en la imagen de abajo, donde pone » Hosting WordPress de alto rendimiento…» del recuadro que hay a la derecha «servicios activos«.

Esto te llevará a la siguiente página, desde la cual tendrás que entrar en tu CPanel (interfaz standard para la gestión de hosting) haciendo clic en el botón azul «Acceder a CPanel«. Las otras dos opciones de hosting (Raiola Network ySiteground) también usan CPanel, por lo tanto, si has elegido alguno de ellos, no tendrás problemas para seguir este tutorial.

 

 

Una vez dentro de Cpanel, vas a la sección «Pack Webempresa» y haces clic en «Crear WordPress«.

Ahora vas al final de la página en la que has aterrizado y pinchas en el botón «Instalar WordPress«, lo cual te llevará a la sección que ves en la imagen de abajo.

A continuación te explico cómo tienes que rellenar cada uno de estos campos (perdón por el tocho de texto):

  • Nombre del sitio: Pon el nombre de tu proyecto, por ejemplo «Ferretería Paco».
  • Selecciona un dominio: Aquí se pueden presentar varios supuestos:
    • He comprado hoy un dominio «.com» en Webempresa: Seleccionas la opción que sea el nombre de tu dominio y que contenga «www».
    • He comprado hoy un dominio «.es» en Webempresa: Escoge la opción que tiene tu nombre de dominio y acaba en » wordpresstemporal.com». Hay una versión con la palabra «mail» delante y otra opción sin ella, escoge la que no tiene la palabra «mail».
    • He contratado el hosting con Webempresa pero tengo el dominio con otro proveedor: Escoge la misma opción que en el punto anterior.
  • Ruta: En caso de que tengas ya una web creada y quieras renovarla, aquí pondrás una ruta alternativa para crear una nueva web sin que la actual deje de funcionar. Por ejemplo, puedes poner en ruta «temporal» , y así trabajarás de forma paralela sin que afecte a tu sitio web actual.
  • Email: Será el correo electrónico asociado a esta cuenta de Webempresa.
  • Nombre del administrador: Es el nombre de usuario con el que accederás al panel de administrador de WordPress de esta web. Apúntalo porque te hará falta más adelante.
  • Contraseña: Es la que usarás para entrar al panel de administrador de WordPress de esta web. Si dejas marcada la casilla «crear contraseña aleatoria» se te adjudicará una imposible de recordar. Es mejor desmarcar la casilla y poner una que no olvides, apúntala porque nos hará falta más adelante.
  • Dirección web (URL): Será la dirección web de tu página.
  • Carpeta de instalación: Es la carpeta de CPanel donde se guardarán todos los archivos de tu página web.
  • Casilla de sobrescribir ficheros existentes: En caso de que tuvieses otra web creada anteriormente, esta casilla sirve para eliminar todos los datos de la instalación anterior. Activa la casilla y di que sí, obviamente si no tienes una instalación anterior que quieras conservar.

Ahora sólo te queda dar al botón verde de «Instalar aplicación» y ya está, tienes creada la web, sólo te queda darle forma.

Para comprobar que tu WordPress se ha instalado correctamente, haz clic en el enlace que aparecerá en el lugar donde está el recuadro gris de la imagen de arriba. Si todo ha salido bien, tu web habrá nacido y deberá presentar el siguiente aspecto.

 

3. Compra e instalación de una plantilla en WordPress

Lo primero que tendrás que hacer es entrar en el panel de administrador de  tu WordPress, donde podrás hacer todos los cambios que desees. Para esto, escribe la barra de búsqueda la URL de tu página (la que has pinchado en el paso anterior para entrar en tu nueva web), seguida de /wp-admin, por ejemplo la de mi web sería https://sergiotena.com/wp-admin. Insisto, añade sólo /wp-admin a la URL.

Pon tu nombre de usuario y contraseña, eso que te dije en el punto 2 que apuntases, te logeas y ya estás dentro de tu escritorio de WordPress.

 

Una plantilla es un modelo de página web creado por diseñadores. A partir de esta plantilla empezarás a dar forma a tu web. Hay plantillas muy curradas, aunque siempre hay modificaciones que hacer, para alguien inexperto pueden valer haciendo pocos cambios.

Comprando una plantilla

Con WordPress vienen algunas plantillas gratis, pero no nos llevarán a crear una web profesional, esta bien para algo amateur, pero son muy limitadas.

Hay un gran repertorio donde elegir, por lo que tomar una decisión puede ser desesperante. Te recomiendo una plantilla de la llamadas  Multiproposito o «Multipurpose», ya que ofrecen varias demos, para así poder escoger la que mejor se adapte a tu negocio.

No debes confundir plantilla con demo, la primera es el conjunto de elementos con una estética y características determinadas y las demos son las diferentes combinaciones que los diseñadores de la plantilla han creado con todos esos elementos. 

Te recomiendo la plantilla Bridge, ya que es una de las más exitosas del mercado y viene con más de 376 demos (modelos de páginas web), de las cuales puedes disponer al completo cada vez que desees, seguro que alguna de ellas es perfecta para tu proyecto. Con el tiempo, si quieres, puedes cambiar el aspecto de tu web instalando otra demo de tu plantilla sin perder el contenido, aunque es posible que debas hacer algunos ajustes estéticos.

También sería conveniente que la plantilla por la que te decidas soporte el plugin de maquetación web Visual Composer, una de las mejores herramientas, sino la mejor bajo mi punto de vista, para dar forma a una página web. Muchas plantillas premium como Bridge, lo traen gratis, si la que has elegido no lo trae tendrás que comprarlo (40 €). 

Si no te gusta Bridge, aquí te dejo una selección de las plantillas más vendidas en 2018 y dos artículos que te pueden ayudar en tu elección; «Las 35 mejores plantillas y temas para WordPress» y «Las 100 mejores plantillas y temas para WordPress de 2018«, pero recuerda que aquí vamos a crear nuestra web con Visual Composer, así que sería ideal que elijas una plantilla que te permita usarlo de manera gratuita. 

También debes asegurarte que tu plantilla sea «responsive«, lo que significa que esté adaptaba para ser visualizada de manera correcta en dispositivos móviles (teléfonos, tablet, etc…), algo de vital importancia si tenemos en cuenta que Google ya penaliza a las webs que no estén adaptadas para este tipo de dispositivos.

Para nuestro ejemplo y los videotutoriales utilizaremos Bridge, ya que cumple todos los requisitos de los que os he hablado anteriormente.

Instalando nuestra nueva plantilla

Una vez hayas decidido que plantilla comprar, tendrás que seguir los siguientes pasos:

  • Haz la compra  y descarga el archivo de la plantilla, suele tener la extensión .zip.
  • Ahora vas a la pestaña de tu escritorio «Apariencia / Temas«.

  • Seguidamente haces clic en «Añadir nuevo«.

  • Y ahora en «subir tema«.

  •  Selecciona el archivo «.zip» que has descargado al comprar la plantilla y cuando hagas clic en «instalar ahora» se instalará la nueva plantilla en tu WordPress.

  •  Pincha en «activar» y ya tendrás activa tu nueva plantilla.

Ahora toca elegir la demo que más te guste o se adecue a tus necesidades de entre las que ofrece tu plantilla, en caso de que tenga más de una.

Tómate tu tiempo para elegirla, pero piensa en lo que necesita tu negocio y elije con sabiduría, puedes visitar a la competencia y ver cómo son sus páginas.

A menudo las páginas más simples y limpias son las que mejor resultados dan, no confundas a tus usuarios con muchos elementos móviles, sliders, letras que suben, imágenes que bajan y todo ese tipo de cosas.

Otro factor a favor de tener una web ligera es la velocidad de carga, algo de suma importancia para la experiencia de usuario y para que Google puntúe bien nuestra página, por lo que demasiadas filigranas no son aconsejables.

Cuando hayas decidido, aquí puedes ver todas las demos de Bridge , haces lo siguiente:

  • Como verás, después de instalar la plantilla, en el menú de tu escritorio han aparecido pestañas nuevas. En este caso, la que nos interesa es «Qode Import«

  • Haz clic en «Qode Import» y llegarás a la siguiente página.

  • En la casilla desplegable con el texto «Demo – Original» busca el nombre de la demo elegida.
  • En «Import Type» selecciona la opción «All«.
  • Marca la casilla de «Import Attachments«.
  • Haz clic en «Import«.

De acuerdo, ya tienes instalada la demo. Ahora tienes que instalar, sobre todo, el plugin «Visual Composer«. Este paso es muy importante, sino la web no se verá correctamente. Para ello vas al escritorio y haces clic en » begin installing plugin«.

Hacemos clic en «install» a todos los plugin que sean indispensables para que la demo funcione.

 

Ya hemos terminado!!! Ahora sólo falta comprobar que nuestra demo se ha instalado correctamente. Para hacer esto haz clic en «visitar sitio» y podrás ver cómo queda tu web con la demo de la plantilla que has instalado.

Nota: Es posible que algunos elementos, como por ejemplo los «sliders» (imágenes que se van alternando en la cabecera de la web) que aparecían en la previsualización no se vean bien en nuestra web WordPress. Esto se debe a que los «sliders» hay que crearlos. No te preocupes, en uno de los vídeo tutoriales que encontrarás al final del artículo te explico cómo crearlos. 

4. Video tutoriales para personalizar tu plantilla WordPress

¿Qué tengo que hacer ahora?

Los siguientes pasos te los explico en estos vídeos para que te sea lo más fácil posible ir dando forma a tu web. Para estos tutoriales he usado la Demo Original de la plantilla Bridge.

  1. Ajustes Básicos de WordPress.
  2. Recreando una página de nuestra demo con Visual Composer.
  3. Cómo hacer un Slider con Qode Sliders.
  4. Hacer un formulario de contacto con el plugin Contact Form 7.
  5. Cómo crear un portfolio para mostrar nuestros trabajos.
  6. Creación de menús.
  7. Cómo modificar el footer y para qué sirven los widgets.
  8. Por último, con esta guía sobre la RGPD, sabrás cómo adaptar tu web a la nueva ley de protección de datos, escrito por Arantxa García del equipo de Aula CM, encontrarás la información necesaria para cumplir con la nueva legislación que entró en vigor el pasado 25 de mayo.

 

Espero que llegues hasta el final y puedas darle un empujón digital a tu proyecto creando tu propia página web.

Ya sabes, si tienes alguna duda o aporte que hacer para que este contenido sea cada vez mejor, no dudes en dejar tu comentario.

Saludos y gracias compañeros!!!

 

Rate this post
Sergio Rodríguez Tena
info@sergiotena.com

Aficionado al cine, la lectura y las buenas historias, sobre todo de cine negro. Graduado en Publicidad y Relaciones Públicas | Máster en Gestión e Investigación de la Comunicación Empresarial | Cursando el Máster en Marketing Digital en Aula Cm.

No hay comentarios

Si quieres dejar un comentario, puedes hacerlo aquí debajo, gracias.

Share This