ūüíĽ 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 con “Visual Composer”

¬Ņ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!!!

 

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