En este post te voy a mostrar como crear una web desde cero con WordPress y paso a paso. Además, utilizando los layouts de Divi voy a mostrarte como conseguir crear una página web muy rápido y con una apariencia profesional.
En el ejemplo voy a crear una web para un diseñador web autónomo (freelance). Pero como verás, dependiendo de tu tipo de negocio podrás utilizar los diseños más apropiados para el tipo de web que quieras crear.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
Cómo crear una página web con WordPress
- Registrar dominio y Contratar hosting para hospedar la página web
- Instalar Wordpress para crear la página web
- Comprar e instalar el tema Divi para hacer la página web con Wordpress.
- Crear estructura de la página web y menú.
- Importar plantillas o layouts de Divi en cada página de la web y personalizar el contenido
- Realizar las modificaciones de diseño generales de la página web
- Subir el logo
Registrar dominio y Contratar hosting para hospedar la página web
Lo primero que debes hacer es registrar el dominio para tu sitio web y contratar un hosting donde alojarla.
Yo te recomiendo que uses Webempresa. En mi opinión es el mejor hosting para WordPress, que es la aplicación que voy a utilizar para crear el sitio web.
Haz clic en el siguiente enlace para ir a la página de compra de Webempresa. Desde ella podrás registrar dominio y contratar alojamiento:
IR A WEBEMPRESACupón de descuento del 25%: horizonweb
i.- Elegir plan de hosting: Si quieres, puedes elegir el plan MINI, y más adelante si es necesario pasar a otro plan superior. Con este plan podrás tener hasta dos sitios web en el hosting y tienes un espacio de 11GB de almacenamiento.
Haz clic en el botón “Contratar” del plan MINI
ii.- Selección de dominio: marca la opción “Quiero registrar un nuevo dominio” y pon el nombre del dominio en el campo. Selecciona la extensión del dominio y haz clic en “Comprobar”
Una vez Webempresa te indique que el dominio está libre, haz clic en “Continuar”.
iii.- Descuento: en la pestaña “Cupón de descuento” introduce el texto: horizonweb. Después haz clic en “Validar código”. Se te aplicará un 25% de descuento. A continuación, haz clic en “Confirmar pedido”.
iv.- Datos, selección de forma de pago y compra: En esta pantalla rellena tus datos, selecciona la forma de pago que quieres utilizar y haz clic en “Finalizar pedido”.
Finalmente te aparecerá una especie de factura, desde la cual podrás iniciar el proceso de compra, seleccionando la forma de pago que quieres utilizar. Una vez realizado el pago ya habrás realizado la contratación de alojamiento web y registro del dominio de tu sitio web.
Instalar WordPress para crear la página web
WordPress es la aplicación que voy a utilizar para crear la página web. La tienes disponible para instalar en cualquier hosting y de manera gratuita.
Para no tener problemas con la instalación de WordPress, te recomiendo que hagas la instalación, por lo menos 24 horas después de registrar el dominio. Esto es debido a que el dominio necesita un tiempo para propagarse por internet.
Instalar wordpress con certificado SSL para hacer la página web con WordPress
El certificado SSL es algo fundamental hoy en día, ya que permite que los datos que envía el cliente al hosting cuando rellena algún formulario en la página web, viajen cifrados y por tanto no puedan ser interpretados por nadie ajeno. Por ejemplo, cuando un usuario rellena un formulario de contacto, si la web tiene certificado SSL esos datos viajarán cifrados.
Todas las empresas de alojamiento, hoy en día, permiten la instalación de un certificado SSL gratuito llamado Let’s Encrypt.
Para instalar WordPress con Webempresa, tendrás que acceder al CPanel o panel de administración del hosting.
La url de acceso, nombre de usuario y clave las tienes en el email que te envió Webempresa cuando contrataste el hosting.
El proceso para instalar WordPress es el siguiente:
i.- Instalador: para acceder al instalador de WordPress haz clic en el icono “Instalar wordpress” situado en el apartado “Aplicaciones Webempresa”.
ii.- Nombre del sitio: escribe el nombre del sitio web. NO el nombre de dominio, sino el nombre de la página web.
iii.- Selecciona dominio: selecciona el dominio principal de tu web.
Puedes elegir el que tiene las tres “w” o el que no tiene las tres “w” como principal. El otro se redireccionará automáticamente hacia el principal. Actualmente, la moda es no utilizar las tres “w” en el dominio.
OJO, Selecciona el dominio con certificado SSL. Es decir, que empiece por “https://” y NO por “http://”
iv.- Quiero instalar wordpress sin HTTPS, sobre HTTP: NO marques esta opción, que sería para instalar WordPress sin certificado SSL, cosa que no queremos.
v.- Ruta: deja este campo sin rellenar. Este campo sería para hacer una instalación de wordpress fuera de la raíz del dominio, que NO es lo que queremos.
vi.- Email administrador: escribe el email que tendrá el administrador de wordpress. Con este email podrás acceder a la administración de WordPress.
vii.- Usuario administrador: escribe el que será el nombre de usuario del administrador de wordpress. Con este dato podrás acceder al panel de administración de WordPress.
viii.- Contraseña: marca la opción “crear una contraseña aleatoria y recibir por correo” para que el instalador establezca una contraseña aleatoria segura (podrás ver la contraseña desde CPanel > Aplicaciones Webempresa > Aplicaciones instaladas > Opciones)
A continuación, haz clic en “Instalar WordPress”.
Acceso a administración y configuraciones iniciales de WordPress
La url de acceso al panel de administración de WordPress será el dominio que hayas utilizado + /wp-admin . Es decir, que si tu dominio es, por ejemplo: https://mystore.com la url de acceso al panel de administración sería: https://mystore.com/wp-admin
Una vez accedas a dicha url te aparecerá un formulario con dos campos. En el superior podrás introducir tu nombre de usuario o tu email (que utilizaste la instalar wordpress). En el campo inferior has de poner la clave que se estableció durante la instalación.
Para ver esa clave, accede al CPanel. Después, haz clic en el icono: “Inicio” dentro del apartado “Aplicaciones Webempresa”
En el apartado “Aplicaciones instaladas” haz clic en el botón “Opciones” de tu web.
Verás una serie de datos sobre tu web. En el campo “contraseña” tienes la clave para acceder al panel de administración de wordpress
A continuación, una vez hayas accedido al panel de administración de WordPress realizaremos la siguientes acciones:
- Ajustes generales: ahora ve a: “Ajustes > Generales” en el menú lateral y en el selector “Zona horaria” selecciona “Madrid”. Guarda los cambios haciendo clic en el botón que te aparece en la parte final de la página.
- Enlaces permanentes: A continuación, ve a: “Ajustes > Enlaces permanentes”. Asegúrate que en “Ajustes comunes” está seleccionada la opción: “Nombre de la entrada”. Si no es así, selecciona dicha opción y haz clic en el botón “Guardar cambios”.
Comprar e instalar el tema Divi para hacer la página web con WordPress.
El tema o plantilla da a WordPress la apariencia estética, la parte visual.
Para la creación de esta página web voy a utilizar el tema Divi, que es actualmente el más usado para WordPress a nivel mundial.
Este tema incluye un potente constructor de páginas (page builder), denominado Divi builder, para crear el contenido de cada página de la web que voy a realizar. Además, dispone en el momento de escribir este post de más de 1.800 plantillas o layouts (cada día se publican nuevas plantillas) que podremos reutilizar para crear rápidamente nuestro sitio y con una apariencia profesional.
Estos layouts o plantillas servirán para arrancar los contenidos, pero son totalmente personalizables. Es decir, podremos hacer y deshacer a nuestro antojo.
VER LAYOUTS O PLANTILLAS DE DIVI
Comprar el tema divi para WordPress
Divi dispone de dos tipos de planes diferentes de contratación:
- Plan Yearly Access (anual): por el que tendrás que realizar una pago anual de 89 $. Se renueva anualmente.
- Plan lifetime Access (para toda la vida): con este plan solo tendrás que realizar un solo pago y disfrutarás de Divi de por vida. El precio es de 249 $
Aquí te dejo el mayor descuento que hay actualmente en los dos planes de contratación de el tema Divi.
DESCUENTO DIVI
En cualquiera de los dos casos, podrás usar el tema Divi en todos los sitios web que quieras.
Haz clic en el botón “SIGN UP TODAY” sobre el plan que quieras contratar y rellena los datos.
Rellena los datos username (nombre de usuario) y password (clave). Estos datos te servirán para acceder posteriormente a tu cuenta de Elegant Themes y poder descargar Divi.
Al seleccionar “Spain” en el selector “country of residence” se aplicará el IVA (VAT) a la compra.
El campo VAT Number es opcional. Si eres empresa o autónomo y tienes número de IVA puedes ponerlo y se te deducirá el IVA. Recuerda que el VAT Number será tu NIF o CIF precedido por ES (de España). Por ejemplo, ES22442778T
Rellena los datos de tu tarjeta, marca el checkbox “You Agree to Our Terms Of Service” para indicar que estás aceptas los términos del servicio y haz clic en el botón “Complete Registration”
Descargar e instalar Divi en WordPress
Es el momento de descargar e instalar Divi en WordPress. Para lo que tendrás que acceder en primer lugar a tu cuenta de Elegant Themes en la página: Elegant Themes
y hacer clic en “ACCOUNT”. Después, rellena tus datos de usuario y contraseña.
A continuación, busca el bloque de Divi y haz clic en el botón “Download the Divi Theme” y guarda el archivo comprimido en el escritorio de tu PC (si te lo descargas descomprimido vuelve a comprimirlo).
Entra ahora en el panel de administración de WordPress para proceder a instalar el tema Divi.
Ve a “Apariencia > temas” en el menú lateral.
Haz clic en “Añadir nuevo”, a continuación en “subir tema”, después en “seleccionar archivo”, selecciona el archivo comprimido del tema Divi que tienen en el escritorio y haz clic en “Instalar ahora”.
Ya está instalado el tema Divi, ahora has de proceder a activarlo. Para lo que tendrás que acceder nuevamente a “Apariencia > temas”, poner el cursor del ratón sobre el tema Divi y finalmente hacer clic en el botón “Activar”.
Activar licencia de Divi
Ya está el tema Divi instalado y activo. Ahora, con respecto a Divi, lo único que queda hacer es activar la licencia, para que podamos realizar actualizaciones desde el panel de administración de WordPress y disfrutar de los más de 1.800 layouts o plantillas.
Para activar la licencia tendrás que acceder otra vez a tu cuenta de Elegant Themes y copiar la API Key que encontrarás en la pestaña “Account” y después haciendo clic en “API KEYS”. En la parte inferior verás un código muy largo que es tu clave API. Cópiala y ahora te indico donde tienes que ponerla.
Accede al panel de administración de tu WordPress y ve a: “Divi > Opciones del tema” en el menú lateral.
A continuación, haz clic en la pestaña “Actualizaciones” e introduce los siguientes datos:
- Nombre de usuario: el nombre de usuario que tienes para acceder a tu cuenta de Elegant Themes (lo creaste cuando compraste la plantilla)
- Clave API: Aquí tienes que pegar la clave API que acabas de obtener de tu cuenta de Elegant Themes.
Finalmente, haz clic en “Guardar cambios”
Ya tenemos Divi lista y dispuesta para crear nuestra página web con WordPress.
Es el momento de crear la estructura de páginas que formarán el sitio web. Así, como la creación del menú de la web.
Por el momento, crearemos las páginas de la web, pero no les daremos ningún contenido. El contenido lo añadiremos más adelante.
https://www.youtube.com/watch?v=-BfnRQ5jmYw
Crear páginas de la web (páginas WordPress)
Voy a proceder a crear las siguientes páginas: Inicio, Quienes somos, Servicios y Contacto. Evidentemente, tu puedes crear todas las páginas que quieras.
Para crear una nueva pagina ve a: “Páginas > añadir nueva” (en el menú lateral de la administración de WordPress)”
Si te aparece una ventana emergente con el título “Bienvenido al editor de bloques” haz clic en el aspa (x) que aparece en la parte superior derecha.
A continuación, en donde dice “Escribe un título” pon el nombre de la página. Es decir, “INICIO” y haz clic en el botón “Publicar” que aparece en la parte superior derecha de la pantalla. Después, haz clic otra vez en “Publicar”
Ya está creada la página “INICIO”, ahora es el momento de crear el resto de páginas.
Haz clic en el icono de WordPress que aparece en la parte superior izquierda de la pantalla que te llevará a “Páginas > Todas las páginas”.
Aquí podrás ver las páginas que hay creadas. Verás la página “INICIO” que acabas de crear y seguramente la página “sample page” (que es una página de ejemplo que crea por defecto WordPress)
Para crear una nueva página, haz clic en el botón que aparece en la parte superior con el texto: “Añadir nueva” y sigue el mismo proceso que antes.
Aparte de la página “INICIO”, que ya la has creado, crea las páginas: QUIEN SOY, SERVICIOS Y CONTACTO.
Ahora es el momento de crear la estructura del menú del sitio web. Para ello has de ir a “Apariencia > menús”
En el campo “Nombre del menú” pondremos el nombre que queremos dar al menú. Por ejemplo: “menu1”
Después marca el checkbox de la zona de la web donde quieres que se muestre el menú. Marca la opción “menú principal” que hace referencia a la zona principal del header o cabecera de la web.
A continuación, haz clic en: “Crear menú”
Es hora de añadir las páginas que antes hemos creado al sitio web. Para lo que en el bloque: “Añadir elementos al menú”, en la pestaña “Páginas”, haz clic en “ver todo” y se mostrarán todas las páginas que hay creadas en el sitio web.
Selecciona las páginas: INICIO, QUIEN SOY, SERVICIOS Y CONTACTO y haz clic en el botón: “Añadir al menú”.
Una vez situadas las páginas en el menú, puedes cambiar la posición de las mismas haciendo clic con el botón izquierdo del ratón sobre una de ellas y arrastrando hasta su posición definitiva.
Parar guardar todos los cambios haz clic en el botón “Guardar menú”.
Asociar la página de nombre inicio como home de la web
Debemos indicar a WordPress que la página de nombre Inicio es la página que queremos que se muestre cuando alguien accede a la página principal de nuestro sitio web.
Para lo que tenemos que ir a “Ajustes > Lectura” en el menú lateral de WordPress.
En el selector: “Tu página de inicio muestra” selecciona: “Una página estática (seleccionar abajo)”.
Después, en el desplegable: “Portada” selecciona “INICIO”.
Finalmente, haz clic en el botón “Guardar cambios”.
Importar plantillas o layouts de Divi en cada página de la web y personalizar el contenido
Para crear una página web muy rápidamente y que tenga un aspecto profesional, utilizaremos los layouts o plantillas de Divi que puedes ver en el siguiente enlace:
VER LAYOUTS DE DIVI
Las plantillas o layouts están clasificados en packs. Cada packs contiene varias plantillas: una para la página de inicio, otra para la de contacto, etc.
Aunque puedes usar cualquier pack para tu sitio web, en la barra lateral puedes filtrar los resultados sugeridos según el tipo de web que quieras hacer: Art & Desing (webs relacionadas con arte y diseño), Business (webs relacionadas con negocios o empresas), etc.
En el filtro “services” tiene para casi cualquier tipo de web de servicios y negocio.
También tienes una barra de búsqueda donde puedes buscar por palabras. Pero recuerda poner la palabra en inglés para hacer las búsquedas.
En este ejemplo, queremos hacer una página web para un diseñador web freelance (autónomo) por lo que finalmente me he decantado por utilizar este pack de layouts: web freelancer
https://www.youtube.com/watch?v=_WnpRTISLjg
Importar layouts de Divi a cada página de la web
En primer lugar voy a proceder a importar un layout del “pack web freelancer” en cada una de las páginas del sitio web.
En concreto importaré:
el layout “home” en la página “INICIO”
el layout “About” en la página “QUIÉN SOY”
el layout “Services” en la página “SERVICIOS”
el layout “Contact” en la página “CONTACTO”
Voy a explicarte como se haría la importación en la pagina de inicio. En el resto de páginas sería exactamente igual.
En el panel de administración de WordPress ve a “Páginas > Todas las página”. Acerca el ratón sobre la página de “INICIO” hasta que se muestre un enlace que dice “Ver”. Haz clic sobre «ver»
Después, en el menú superior, haz clic en: “Habilitar el constructor visual”.
Te aparecerá un PopUp emergente, haz clic en “Empieza a construir”. En la interface de creación de contenido para la página haz clic en el icono en forma de círculo que aparece en la parte inferior de la página y que incluye 3 puntitos en su interior.
Ahora haz clic en el icono circular con un signo + en su interior.
En la ventana emergente busca el layout “home” del pack web freelancer. Yo voy a hacer clic en el filtro “Art & Design” para localizar el pack más rápidamente.
Una vez localizado el pack, hago clic sobre él.
Ahora has de hacer clic sobre el layout “home” y después en el botón “Use this layout”.
Una vez realizada la importación procederemos a guardar la página, haciendo clic en el botón “Guardar” que aparece en la parte inferior izquierda de la interface.
Finalmente, en el menú superior haz clic en: “Salir del Constructor visual” para cerrar el page builder.
Ahora debes proceder a realizar la importación en el resto de páginas, para lo que tendrás que ir a “Páginas > todas las páginas” y repetir el proceso.
Personalizar páginas de la web
Es el momento de proceder a la personalización de cada página de la web utilizando el constructor de Divi, el Divi builder.
Para ello has de ir a cada una de las páginas, lanzar el constructor, realizar la personalización del contenido y guardar los cambios.
El proceso será el siguiente:
Ir a “Páginas > todas las páginas”, acercar el puntero del ratón a la página que quieres personalizar y hacer clic en “ver”.
Después, en el menú superior hacer clic en “Habilitar el constructor visual”.
A continuación, deberás realizar las modificaciones y personalización de la página.
Hechas la modificaciones tendrás que guardar los cambios haciendo clic en el icono que aparece en la parte inferior de la página (círculo con 3 puntitos) y después en el botón verde “Guardar”.
Una vez realizadas las modificaciones y guardados los cambios, haz clic en el menú superior en “Salir del constructor visual”.
Este mismo proceso habrá que hacerlo en cada una de las páginas del sitio web.
Finalmente, vuelve al escritorio de WordPress.
https://youtu.be/TPlq2dC7Gis
https://youtu.be/W2r7dkpU-RE
Realizar las modificaciones de diseño generales de la página web
Ahora debes proceder a realizar la personalización del header y el footer de la web.
Para lo que tendrás que ir a: “Divi > Personalizador de temas” en el menú lateral de WordPress.
- Para la personalización del header ve a: “Cabecera y navegación”
- Para la personalización del footer ve a: “Footer”
Recuerda ir guardando los cambios conforme vayas realizando modificaciones en el botón azul que aparece arriba: “Publicar”.
https://youtu.be/GDdfk9W-w3M
Subir el logo
Para subir el logo de la web ve a “Divi > Opciones del tema” en el menú lateral del panel de administración de WordPress.
En el apartado “Logo” haz clic en el botón “Subir” y sube el logo de tu página web.
Después, haz clic en el botón “Guardar cambios”.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
