¿Quiéres saber cómo crear una página web con WordPress, mientras que al mismo tiempo, yo como diseñador web, iré haciendo una página web para un cliente real, explicando cada etapa del proceso?
Esta guía tendrá el fin de enseñar aspectos generales a personas sin conocimientos en programación web, pero con el fin de alcanzar un resultado esperado, se mencionarán temas como: la elección de un tema de WordPress, los plugins esenciales para tu sitio web de WordPress, uso de Elementor para la construcción del sitio entre otros detalles técnicos que son necesarios mencionar para la creación de páginas web WordPress.
Requisitos obligatorios:
- Un ordenador con acceso a Internet
- Registrar un dominio
- Contratar un hosting
Requisitos opcionales:
- Copywriter con Inteligencia Artificial (para crear el contenido de tu web)
- Páginas para descargar imágenes en HD y sin derechos de autor
- Google Analytics
En la página de “recursos” de mi sitio web encontrarás una selección de TODO lo que necesitarás para la hacer tu página.
Contenido
- 1 Creación de dominio y contratación de hosting para una web con WordPress
- 2 Creando e instalando WordPress de forma segura en nuestro servidor
- 3 Elección de Tema para WordPress
- 4 Plugins necesarios para construir una página web profesional en WordPress
- 5 Como crear páginas web en WordPress a partir una plantilla con diseño predefinido
- 6 Cómo crear una pagina web con wordpress y elementor
- 7 Cómo hacer una página web bien optimizada
- 8 Copywriting para tu sitio web de WordPress
Creación de dominio y contratación de hosting para una web con WordPress
El primer paso es el registro de un dominio y la contratación del hosting.
Si no sabes para que sirve un hosting, puedes leer ese artículo donde explico de manera muy sencilla cómo funciona un hosting; ya que de esto depende que tu sitio web esté en Internet o no.
Ahora sí, ¡Sigamos!
¿Quieres una
página web profesional?
Hola, soy Gabriel. Diseñador web. Mi objetivo es hacer crecer tu negocio.
¿También es el tuyo?
Para este ejemplo usaré banahosting para la contratación del hosting y el registro del dominio con extensión .com.
Una vez registrado el dominio para nuestra página web, procedemos a pagarlo y luego debemos elegir un plan de hosting para alojar nuestra web. El propósito del hosting es dar la posibilidad de almacenar toda la información como: imágenes, plugins, base de datos, correos electrónicos corporativos entre otros.
Es aquí donde cargaremos nuestro CMS WordPress.
Dentro de Banahosting si solo tienes pensado tener un sitio web te recomiendo el plan más económico, en caso contrario, puedes optar por los otros paquetes del hosting.
Si descubres que las capacidades del hosting no se adaptan a lo que esperas, puedes contactarte con el soporte de esta empresa para definir el plan que más se adapta a tus necesidades. El soporte es en español, esto te ayudará muchísimo en la fluidez de la resolución de un problema que surja en el futuro.
Es importante que sepas que, por lo general, un dominio está habilitado para usarse inmediatamente, pero a veces puede demorar hasta 24 horas en su propagación para que esté listo para su uso, solo debes ser paciente y esperar su propagación.
Si ves que aparece activo el dominio, es porque ya esta listo para usarse sin restricción alguna.
Creando e instalando WordPress de forma segura en nuestro servidor
En mi experiencia como diseñador web hay 3 formas de instalar WordPress en un hosting con cPanel.
- Mediante FTP: Acá se usa un programa externo como Filezilla que se conecta con tu servidor de forma remota, y desde ahí puedes cargar los archivos de WordPress previamente descargados de WordPress.org
- cPanel: Descargar WordPress y subirlos a través del administrador de archivos del cPanel el cual se pueden descomprimir los archivos y luego en la sección de bases datos crear la base de datos y vincularlo con su usuario.
- Softaculous: La opción más fácil y que usaremos en esta guía. Te explicaré cómo hacerlo en los siguientes imágenes:
Accediendo a nuestro cPanel nos dirigimos al final de las opciones que se muestran hasta encontrar el grupo de “Softaculous Apps Installer”, ahí seleccionamos el icono de WordPress:
Luego de que hayas hecho clic te redirigirá a una sección donde te aparece información de WordPress el cual te indica datos como su definición general, la versión actual, la fecha de actualización. Selecciona el botón “Instalar ahora“.
Elección de protocolo de seguridad para tu web
Te aparecerá un cuadro donde tendrás que seleccionar el tipo de protocolo que usarás para tu web.
- http:// (sin certificado SSL, SITIO WEB NO SEGURO)
- http://www. (Sin SSL, SITIO WEB INSEGURO)
- https:// (Con certificado SSL)
- https://www. (Con certificado SSL)
Para este ejemplo seleccionaré la tercera opción el cual es la que me gusta. Básicamente no hay diferencia en funcionalidad o posicionamiento en elegir con o sin www.
Voy a explicar brevemente el cuadro de arriba. Al momento de escribir este artículo la versión más actual de WordPress es la 6.0.1 quizás cuando estés siguiendo esta guía, pueda que haya un número mayor a 6.0.1.
Asegúrate de colocar la versión mas reciente.
Por otro lado, coloca el nombre de tu sitio y una breve descripción (estos datos los podrás cambiar más adelante por el nombre que quieras)
Luego si desplazas hacia abajo encontrarás una sección para colocar el usuario y contraseña de tu sitio web de WordPress, estos datos son los que usarás para luego acceder al panel de administración de tu página web.
Si ya definiste los datos de acceso, desplázate al final de todo, sin tocar absolutamente nada más de lo que ves y presionas el botón “Instalar“.
Para poder acceder a nuestro WordPress, solo debemos dirigirnos a nuestro navegador y colocar la URL a continuación:
https://tudominio.com/wp-admin
Elección de Tema para WordPress
Hay infinidad de opciones de temas geniales para usar en la construcción de una página web, con sus ventajas y desventajas, sin embargo, la intención de esta guía no es explicar una gran cantidad de temas para tu WordPress, haciéndote perder tiempo en este punto.
Yo como diseñador web siempre elijo el tema para un proyecto web teniendo en cuenta estos criterios:
- Velocidad de carga
- Optimización SEO
- Adaptabilidad para smartphones y tablets (responsive)
- Soporte técnico
- Gran compatibilidad con muchos plugins de calidad
- Compatibilidad para venta en línea
- Simplicidad en personalización
El tema Astra tiene una optimización muy bien trabajada a nivel de SEO y un código muy limpio que da una excelente velocidad de carga.
En la construcción de las páginas web de mis cliente Astra es el que uso a menudo y es el tema que usaremos para esta guía.
Este tema lo puedes descargar gratuitamente desde el propio repositorio de WordPress. También tiene una versión PRO que te dará más funcionalidades, dando un acabado más profesional en tu web.
Instalación del tema
El proceso de instalación es el mismo para casi todos los temas gratuitos de WordPress.
- Iniciamos sesión en nuestro WordPress (tudominio.com/wp-admin/
- Colocamos nuestro usuario y contraseña.
- Nos dirigimos a Apariencia> Temas
- Presionamos el botón “Añadir nuevo“.
- Escribimos el nombre “Astra” en el buscador de temas.
- Posicionamos el mouse sobre el tema y presionamos Instalar y luego Activar.
Plugins necesarios para construir una página web profesional en WordPress
Al momento de crear una página web desde cero en WordPress los plugins serán la clave.
Acá te mostraré los plugins que siempre uso para todo tipo de web en WordPress. Pero no tienes porque hacer lo mismo que yo, si deseas usar otros plugins, los puedes descargar gratis desde WorPress.
- Elementor pro es un maquetador visual que usaremos (Este plugin nos da facilidad de editar textos, secciones, colores e imágenes dentro de nuestro WordPress) El plugin tiene una versión gratuita y paga, para esta guía usaremos la versión paga de Elementor PRO, ya que la diferencia es abismal en comparación a la versión free que es muy limitada.
He escrito una reseña de Elementor donde explico todo lo que debes saber antes de comprarlo.
- Yoast SEO para mejorar el posicionamiento en Google (posee versión gratis y paga el cual con la versión gratis es más que suficiente para un proyecto pequeño)
- WP Forms potente plugin para crear formularios de contactos (tiene una versión gratis y una premium)
- WP Fastest Cache para mejorar el rendimiento y velocidad de carga del sitio web (este plugin es gratuito básico, pero si quieres una optimización más avanzada te recomiendo el plugin WP Rocket)
- Join.chat Un plugin sencillo pero potente para vincular tu web de WordPress con WhatsApp
- Google analytics for WordPress: Para vincular Google Analytics con WordPress
Hay muchos otros plugins que dependiendo del tipo de página web que quieras crear será el que usarás.
Por ejemplo:
Si se trata de una tienda online te recomiendo siempre usar el plugin WooCommerce. Un plugin que hace todo lo que necesitas para tener una tienda online avanzada.
Cómo hacer un sitio web con Elementor
Antes de tocar el plugin de Elementor es importante mencionar que se deben usar los plugins correctos para una web profesional.
Hay sólo dos formas sencillas de Instalar un plugin en WordPress, te explicaré las dos maneras que existen:
Manera #1 Descargarlo gratuitamente del repositorio de WordPress
Nos dirigimos a la pestaña plugins, y le damos “Añadir nuevo” y en el buscador escribimos el plugin que estamos buscando, y le damos instalar y luego activar. Así como se expresa en los siguientes cuadros:
Este mismo procedimiento se aplica para los plugins Yoast SEO, WP Forms, WP Fastest Cache y todo plugin gratuito que quieras instalar del repositorio de WordPress.
Para los plugins de pago el procedimiento es ligeramente distinto.
Manera #2: Instalando un plugin de pago para WordPress
Una vez hayas comprado cualquier plugin, debes dirigirte al panel de administración de la empresa a la cual pertenece el plugin para así descargar el archivo de formato .zip del plugin y copiar la licencia de uso del plugin
Al tener los archivo en tu computadora el proceso es el siguiente. Plugins>Añadir nuevo> subir plugin> seleccionar archivo> Instalar>Activar Así como se expresa en las imágenes a continuación:
Nota: Es importante que tengas en cuenta que todos los plugin de WordPress se instalan tal cual se descargaron de sus autores originales, es decir, NO debes descomprimir y subir sus archivos y ficheros internos por que no te va a funcionar, debes subirlo como archivo .zip.
Aquí otro punto muy importante, los plugins se cargan uno por uno, si intentas subir varios al mismo tiempo, no te funcionará, en este caso Elementor cuenta con su versión FREE y su versión PRO, para que funcione debo instalar los dos, pero por separado.
Solo fata presionar el botón “Instalar ahora” para que comience la instalación…
Una vez instalado el plugin algunos autores colocan mensajes de bienvenida para mostrar información útil acerca del funcionamiento del plugin y cómo usarlo, puedes saltarte esta información o explorarlo para conocerlo a fondo.
En el caso de este plugin también debemos instalar su archivo PRO para que la instalación sea completa.
El procedimiento es el mismo y aplica para casi todos los plugins de pago para WordPress.
Al instalarse el plugin, se debe colocar la licencia para activar todas sus funciones PRO.
Seguidamente procedemos a colocar el código de la licencia, presionamos el botón activar y listo.
Una vez tengamos todos los plugins gratuitos o premium que vayamos a usar procedemos al siguiente paso
Como crear páginas web en WordPress a partir una plantilla con diseño predefinido
Hacer un sitio web con plantillas es la parte más interesante de esta guía, elegir una plantilla ya predefinida en el portafolio de la empresa Astra o Elementor es algo que lo dejo a tu elección. En este paso debes elegir la plantilla que más se adapta a tu giro de negocio con el fin de tener el diseño como base y empezar a editar desde ese punto.
Muchas veces yo decido diseñar desde cero un sitio web a través de Adobe XD, pero hay algunas ocasiones en las que decido usar plantillas ya prefabricada y empezar a editar desde ahí para así ahorrar tiempo.
Librería de plantillas de Elementor PRO
Puedes ver la librería de plantillas de Elementor PRO y elegir la plantilla que deseas usar para tu sitio web, allí encontrarás una amplia variedad de diseños, formas y secciones que las puedes reutilizar y empezar a crear a partir de esos diseños. Las plantillas son gratuitas cuando tienes la licencia de Elementor Pro
Plantillas de Astra PRO
Si no encontraste el diseño que buscas mostrar en tu página web con la librería de Elementor, tienes otra opción de librería de diseños de páginas web profesionales, en la que puedes buscar diferentes plantillas para el diseño que buscas.
Cabe mencionar que hay plantillas gratuitas y de pago, para adquirir las de pago debes comprar el paquete mini agency bundle que te dará los diseños premium y otros plugins y funciones en tu tema de Astra que te ayudarán a tener una web tal cual como la quieres en diseño.
Por su parte, para poder elegir diseños gratuitos, basta con ir al repositorio de WordPress e instalar el plugin Starter Templates.
Configuración y carga de plantilla predefinida de WordPress
Antes de importar una plantilla debes definir la página de inicio del sitio.
Cuando se instaló WordPress en los primeros pasos, por defecto WordPress carga información para rellenar, el cual muestra su estructura y sus secciones interiores.
Por ejemplo, la instalación de WordPress activo y publicó estas páginas:
Aquí para ahorrar tiempo posiciona el mouse sobre la título de la página “sample plage” y haz clic donde dice “Edición rápida” ahí sustituye el título y el slug por la palabra “Inicio”. Esto te servirá para que tengas ordenada internamente tu web y además sea de base para el siguiente paso:
Luego para definir la página inicio debes ir a Ajustes>Lectura y ahí seleccionar la opción “página estática” y selecciona la página inicio.
Carga de plantilla de Astra theme
¡Ahora si estamos listos para cargar la plantilla!.
Yo usaré una plantilla de Astra que me gusto mucho porque se adapta a lo que mi cliente necesita, en relación al servicio que ofrece y su tipo de público.
Para instalar una plantilla de Astra Premium, necesitas descargar e instalar el plugin que proporciona Astra con su licencia Mini Agency Bundle, para ello dirígete a tu cuenta de Brainstormforce.com y descarga el archivo correspondiente a las plantillas ( Premium Starter Templates)
En cambio, si se trata de una plantilla gratuita, solo debes usar el plugin gratuito “Starter templates”.
Para ambos plugins la forma de acceder a la biblioteca de plantillas es la misma que se muestra a continuación:
Debes instalar este plugin en tu WordPress como cualquier otro plugin de pago, después ir a la biblioteca de plantillas y ahí seleccionas Elementor como maquetador principal.
Luego cuando seleccionas la plantilla, te aparecerá una información mas detalla separada por cada sección que contiene, tu puedes elegir si descargar solo una página del sitio o la plantilla completa, lo que nos da una flexibilidad perfecta si queremos mezclar secciones de diferentes plantillas.
Una vez selecciones importar todo el sitio o la sección en específico, te aparecerá una ventana emergente y quizás te pedirá instalar algunos plugins adicionales que son necesarios para el correcto funcionamiento de la plantilla, solo debes darle continuar e importar. Después, te debe aparecer un mensaje como este:
Cómo crear una pagina web con wordpress y elementor
Entonces la pregunta sería la siguiente ¿Cómo diseñar una web en WordPress?
Para comenzar a editar los textos e imágenes que están en la plantilla que se ha cargado, debemos dirigirnos a la página que se debe editar y presionar el botón “editar con Elementor”
Por defecto ese botón estará habilitado para todas las páginas, ya sea la página de contacto, servicios, inicio entre otros. Esto depende de la plantilla que cargues para su edición.
Cuando está habilitado el constructor visual de Elementor te aparecerá una barra de herramientas en la parte derecha de la pantalla.
Si posicionas el mouse sobre cada elemento de texto, imagen, botón o cualquier otro, te aparecerá en la parte superior derecha un icono de edición; seleccionamos ese icono y cambiará la parte lateral izquierda tal cual como se ve en la imagen de abajo. Ahí puedes editar el contenido de ese encabezado además de editar la apariencia del texto en la sección de “Estilo” cambiando su tamaño, color o tipografía.
Así poco a poco voy sustituyendo los textos e imágenes de la plantilla…
Modificando el menú de navegación de WordPress y la carga de uno nuevo
Una de las secciones más importantes a tener en cuenta, es la edición del menú de navegación, el menú con diseño profesional se puede hacer con Elementor si vamos a la sección de plantillas> Añadir nueva, elegimos el tipo Header, le colocamos un nombre que sirva para identificarlo y presionamos el botón crear plantilla.
Es ahí donde podemos editar y colocar cualquier diseño que Elementor ya tenga preparado para usar o también se puede construir uno propio.
Asignando nuevos items en el menú de navegación
Para agregar nuevos items, nos dirigimos a Apariencia> Menú y ahí podemos agregar una nueva página al menú o modificar los nombres de las páginas en “etiquetas de navegación”, como se puede apreciar en la imagen a continuación:
Cómo hacer una página web bien optimizada
Cuando estás con la creación de páginas web con WordPress la optimización suele dejarse a un lado, siendo uno de los puntos más importantes.
Si una página web carga lento, los usuarios no dudarán ni un segundo en abandonar esa web por culpa de su velocidad de carga.
¿Cuánto debería ser la velocidad de carga de una página web?
Según Google en su video de Google Site Performance for Webmasters afirman que el tiempo de carga optimo de una web para dar una buena experiencia de usuario debe ser de 2 segundos (ese video es del año 2010)
Muchos años después, siguen con esa afirmación.
Como complemento donde me extiendo de una forma más detallada, puedes leer un artículo que publiqué recientemente donde explico cómo mejorar la velocidad de una página web.
Herramientas para medir rendimiento de una página web
Las herramientas que eso para medir la optimización de las páginas web de mis clientes son las siguientes:
- PageSpeed Insights
- Think With Google
- GTmetrix
- Web Page Test
No me voy a extender mucho en la cómo mejorar la velocidad de un sitio web, para ello, he escrito otro artículo donde te explico más al detalle de cómo hacer para que una web en WordPress sea rápida.
Sin embargo te comentaré de manera resumida los puntos que debes tener en cuenta para tener una buena optimización:
- Evitar imágenes de gran peso (una imagen debe pesar menos 120kb si se trata una que ocupa gran parte de la pantalla).
- No usar tantas animaciones en el sitio o directamente no usarlas.
- Evitar el uso excesivo de contenidos incrustados como Iframe de YouTube, feed de Instagram entre otros recursos de terceros.
- Instalar un buen plugin de caché interno.
Esta es la lista más importante de puntos que se deben tener en cuenta para mantener una web optimizada, obviamente hay otros puntos como el minificado de archivos HTML CSS y JS o la carga de Script donde realmente se necesiten, lo cual escribiré de ello en futuros artículos.
Por ahora, te recomiendo activar estas dos opciones, las otras las dejaré para otro artículo ya que nos extenderíamos demasiado en este punto.
Teniendo estos puntos que desde mi experiencia como diseñador web, son los más importantes para tener una web relativamente rápida, tus resultados de velocidad van a mejorar.
Copywriting para tu sitio web de WordPress
No pongas todos los huevos en la misma cesta y descuides el poder de un texto cautivador. No basta con tener un gran diseño o una velocidad de carga rápida, sino que es necesario un tono atractivo que mantenga a la gente leyendo.
Copybbloger define que el arte del redactor publicitario es conseguir que la gente actúe de alguna manera. Ya sea leyendo, escuchando o viendo, el objetivo de una buena campaña puede lograrse con un solo mensaje que estimule la acción de los clientes potenciales.
El estudio realizado por CB Insights reveló las principales razones del fracaso de las startups. El 42% citó la falta de necesidad del mercado como punto de fracaso, lo cual es comprensible dado que muchos productos nuevos no tienen una demanda inmediata y, por tanto, ¡apenas pueden generar ingresos por ventas!
Algunas los otros puntos que consideraron en el fracaso fueron los siguientes:
- Falta de conocimiento del producto o servicio.
- Los clientes no entendieron bien los beneficios de lo que ofrecian las empresas.
- No se sentían motivados en tomar una decisión del producto.
Para mejorar el copy de tu sitio web y tener a tus clientes cautivados con la información que proporcionas, ya sea si eres nuevo en el mundo online o silanzas un nuevo producto o landing page.
Tendrás dos opciones para elegir:
- Contratar a un copywriter profesional que se encargue del contenido de tu web
- Usar un software copywriter con Inteligencia Artificial que será tu asistente en la creación de contenido original.
Ambas opciones son ideal de interesantes para crear esos textos que motiven a tu audiencia a adquirir tus productos o servicios.
Conclusión
Haz aprendiendo a cómo crear un sitio en WordPress como un profesional, hoy en día las plantillas hacen gran parte del trabajo, ya que no tienes que crear estructuras de códigos o diseños desde cero, sin embargo, la explicación de crear una página web en WordPress no se puede colocar en su solo artículo, para ello necesitaría redactar todo un curso explicando de forma detallada cada etapa, por lo que debes tener consciente de que hay cosas que se aprenden con los años de experiencia en el diseño web.
En resumen: debes tener en cuenta estos aspectos básicos:
- Definir muy bien tu público objetivo.
- Tener una buena empresa de hosting.
- En la medida de lo posible contratar Elementor Pro y Astra Pro para llegar a resultados profesionales.
- Tener mucho tiempo para dedicar a cada etapa de la construcción del sitio.
¿Cómo te ha parecido esta guía paso a paso? ¿Tienes alguna duda?
¡Colócala en los comentarios!
2 comentarios en “¿Cómo crear una página web con WordPress? Guía paso a paso”
Excelente explicación, percibo que eres muy apasionado con lo que haces y eso es una gran ventaja. Éxitos a mil..!!
Muchas gracias Ysabel. 🙂 Saludos