Crear Página web WordPress con Elementor Paso a Paso 2020

Resumen del vídeo:

✍CONTENIDO DEL VÍDEO:
02:34 – Que Hosting usar
05:13 – Contratar un Dominio Web
06:24 – Contratar un Hosting ➡️ https://bit.ly/35rNY8Y
07:06 – Instalar el WordPres
08:40 – Entrar al BackOffic
09:10 – Comprar Elementor Pro ➡️ https://bit.ly/32Ulcg
10:59 – Instalar Elementor Pr
11:45 – Enlaces Permanentes (SEO)
12:07 – Instalar SSL (SEO
13:47 – Crear una Página en WordPress
14:19 – Instalar la Plantilla
16:08 – Ajustar la Plantill
16:45 – Estructura de Elementor Pro
19:30 – Encabezados (SEO)
19:57 – Modificar los Texto
20:30 – Botones CTA
21:20 – Insertar Multimedia (Imágenes y Vídeos)
22:38 – Márgenes y Espaciados (Maquetando la web)
24:22 – Bloques y Estructura
25:00 – Animación en Botones CTA
26:50 – Listado de Precio
28:24 – Crear Email Profesional
29:04 – Newsletter
34:10 – Acciones de Marketing (En Newsletter)
36:12 – Sincronizar WordPress con Active Campaign
40:15 – Menú
42:53 – Logo
44:47 – Redes Sociales
46:28 – Sección Equipo
48:52 – Footer
51:20 – Ajustes Generales (Maquetación)
57:10 – Ajustar Página Principal
58:15 – Responsive Design (Adaptada a todos los dispositivos)
1:02:26 – SEO Básico

1. ¿Por qué usar WordPress?

Algo que no queda muy claro muchas veces es que tanto WordPress como WIX, son CMS (Content Managment System o Sistema de Gestor de Contenidos), esto quiere decir que puedes gestionar tu página web sin apenas tocar código.

Desarrollar una página en WordPress es sin duda la mejor opción si desconocéis de lenguajes de programación (HTML y CSS), ya que podrás editar TODO el contenido de tu sitio sin tocar una línea de código.

Lo que les diferencia WordPress a WIX es que WordPress es un software libre y WIX es gratuito, esto quiere decir que WordPress dan acceso a TODO el código y WIX no, con lo que la comunidad de WordPress es enorme y existen innumerables plugins gratuitos que hacen las funciones que necesites, a diferencia de WIX que necesitas pagar por casi cualquier cosa, aparte del hosting que tienes que alojarlo en su servidor con lo que te costará bastante más al mes.

Desarrollar una página completamente a código si no conoces el lenguaje es una misión suicida así que no lo recomiendo para nada… Ya que si queréis cambiar cualquier cosa necesitareis ayuda constantemente.

Así que espero haberlo dejado claro, si no tenemos mucho presupuesto y no conocemos lenguaje HTML/CSS, usaremos WordPress.

2. Qué Hosting usar para un WordPress

Una vez tenemos claro el nombre de dominio, hay que registrarlo en la inmensa cantidad de proveedor de dominios y hosting, la auténtica jungla.

He trabajado con más de 30 proveedores de hosting diferentes y el que mejor me esta funcionando hasta la fecha, ha sido Siteground. Pero vaya, podéis ver mi opinión sobre cual  es el mejor hosting de todos.

Es un hosting español, que nos da muy buen servicio de atención al cliente, con muchos años de experiencia y unos precios muy competitivos.

Creerme que después de usar muchos hostings diferentes si me quedo con este, es por su servicio. y por las facilidades que dan ante una web WordPress.

Una vez en la página de SiteGround podremos elegir que plan se ajusta más a nuestras necesidades. 
Si sólo queremos crear una web, tendremos que contratar el pack StartUp que por sólo 3,95€ al mes nos permitirá alojar una web en su servidor.

Pensar que si no podéis invertir en un Hosting para tener una web, no os saldrá a cuenta meteros en el mundo online. Pensad que cualquier negocio con local físico, ya esta invirtiendo más de 500€ al mes por el alquiler (Sin contar la luz, el agua, los empleados etc…)

3. Contratar domino Web

Hay que pensar cómo quieres llamarte en el internet, cuál será tu nombre de dominio.

Quizás es de las tareas más difíciles ya que no existen dominios .com con 4 caracteres ya. Así que la opción del .es es más que bienvenida.

Puedes tener el nombre de dominio (holaquetal.com) en un proveedor y el hosting (50Gb de espacio) en otro proveedor, yo recomiendo tenerlo en el mismo sitio para agilizar tramites.

Algún consejo a la hora de escoger un nombre de dominio:
– Palabra Clave: Usar una palabra clave con gancho y altas búsquedas para posicionarte rápido.
– Facilidad: Que sea recordable y facil de memorizar.
– Marca: Tu nombre de marca
– Competencia: Intenta buscar algo diferente a la competencia para no ser asociado a ellos.

Una vez tengamos claro que dominio vamos a usar, hay que contratarlo.

Si lo hacemos directamente desde SiteGround será muy fácil pues podemos usar un dominio que ya tengamos comprado o comprarlo directamente en SiteGround. Podéis buscar en otras páginas pero el precio de los dominios no suele cambiar mucho, así que si no tenéis os aconsejo contratarlo directamente aquí y así no tendríais que tratar con dos proveedores diferentes.

Elegimos por cuanto tiempo queremos contratar el dominio (siempre tendremos la oportunidad de renovarlo) y listo ya lo tenemos.

4. Configurar Hosting

Una vez hemos contratado Hosting y domino web, vamos al siguiente paso, configurarlo para nuestra web WordPress.
Le damos al botón de configurar cuenta, y aparecemos en una pantalla donde podemos elegir si crear nueva web o migrar una web ya existente.
Eligiéremos la opción que necesitemos, en este caso crear una página web nueva.
Una nueva opción nos aparecerá, aquí es donde empezamos a darnos cuenta de lo útil que es SiteGround.

Elegimos que tipo de aplicación instalaremos, en este caso WordPress, sin Woocommerce ya que se tratará de una web y no de un e-commmerce.

El siguiente paso es elegir a que dirección de e-mail corresponderá esta web, elegimos nuestro e-mail y contraseña y continuamos. 
Le damos a siguiente y esperar a que se instale todo. Así de fácil.

5. Instalar WordPress

Vamos a comenzar con la instalación de nuestra web wordpress.

Escribimos nuestro dominio en el navegador seguido de /wp-admin.
Insertaremos el e-mail con el que nos hemos registrado anteriormente y la contraseña.
Y ya estaremos dentro de nuestro panel de control.

6. Comprar Elementor Pro

Para mi el mejor plugin que existe para la creación de páginas wordpress con mucha diferencia.

La verdad es que no hay otro que se asemeje a la cantidad de opciones que te da y la facilidad de uso.
Es un plugin de pago, pero de verdad os diría que no escatimaseis en eso, pues 100% lo agradeceréis luego.

Compramos en el plan que nos interese. Deciros que es un pago anual, pero no significa que os quedéis sin web si no pagáis el año que viene. Solamente que no podréis volver a editarla con Elementor Pro.

Os dejo el link: 
https://bit.ly/32Ulcg

7. Instalar Elementor Pro

Una vez comprado el plugin, vamos a mi  cuenta dentro de la página de Elementor Pro y nos descargamos el plugin.
Regresamos al backoffice de nuestra página web WordPress  y hacemos click en Plugins, Añadir plugins y Subir plugin. Selecionamos nuestro plugin descargado y instalamos.
Activamos plugin, y ahora nos aparecerá un mensaje avisándonos que hemos de activar el Elementor pro. Aceptamos y pum, ya está instalado.
ahora nos aprece en la barra lateral izquierda, desplegamos Elementor Pro, vamos a License y la activamos.

8. Enlaces permanentes (SEO)

Primer paso antes de ponernos a tocar diseño y estructura, de nuestra web.
Tendremos que configurar un par de aspectos para que el SEO de nuestra página funcione de la forma mas eficiente.
Vamos a la pestaña ajustes de nuestro backoffice y clickamos en enlaces permanentes. Allí seleccionaremos los enlaces por nombre de entrada.

9. Instalar SSL (SEO)

Para que nuestra web aparezca como sitio web seguro necesitamos configurar el SSL.
Volvemos a Siteground y vamos al apartado sitios web, y a SSL. Selecionamos SSL Let’s Encrypt Wildcars y le damos a activar. En la nueva pantalla que nos aparecerá selecionamos de nuevo el tipo de SSL y obtenemos de forma gratuita.
Ya lo tenemos instalado, ahora vamos a asegurarnos. En la pestaña inferior en opciones, clickamos y activamos el botón switch para forzarlo.

10. Crear una página en WordPress

Comenzamos con e diseño de nuestro sitio web.
Regresamos al backoffice de nuestro WordPress, y vamos a la sección páginas, y vamos a crear una nueva. 
Le ponemos su nombre en el apartado de titulo y hacemos click en el botón azul de editar con Elementor.

11. Diseñar a partir de una plantilla

Ya estamos dentro de nuestra página y editando con Elementor.
Antes de nada un par de ajustes generales de la página.
Vamos a la ruedecilla que nos aparece en la parte inferior izquierda de la pantalla. Y abrimos el apartado ajustes, escondemos el titulo, y elegimos estructura de página : Elementor ancho completo.

En el centro de la página nos aparecerá un rectángulo de linead discontinuas, y dentro de este dos botones.
Sí queremos empezar a crear de 0 de daremos al +, pero si queremos partir de un diseño ya creado le daremos a la carpeta.
Boom, un montón de páginas ya diseñadas para poder incorporar lo que queramos y adaptara a nuestra idea.
Selecionamos la que nos interesa y insertamos.

12. Editar plantilla WordPress

Ya tenemos nuestra página llena de elementos que conforman la plantilla elegida.
Ahora vamos a entender un poquito como funciona, para poder editar nuestra página wordpress a nuestro gusto.

Las páginas están configuradas por cajones o cajas, dentro de otros cajones o cajas.

La caja más grande se llama Sección, dentro encontraremos las columnas y dentro de estas, los elementos. Todas estas cajas son editables para poder crear diferentes composiciones y diseños.

12.1 Editar Sección

Nos situamos en la caja más grande de todas, llamada sección.
hacemso click en la pestañita azul que nos aparecerá arriba, justo en los 6 puntitos que aparecen. 
Vemos como en el menú lateral de la izquierda nos aparecen ya las opciones para ediat esta sección.

En todas las cajas existen 3 apartados, Disposición o Contenido, Estilo y Avanzado.

Vamos a ver que se puede editar desde Disposición:
En disposición podremos ajustar tamaños, anchura altura de esta sección. Si queremos que sea full With o por el contrario sea una página en caja.

En Estilo podremos cmabiar precisamente eso, el estilo, color de fondo, o si queremos una imagen de fondo, un pattern o un video.
Aquí podremos jugar también con la capa de fondo para crear profundidades , movimientos o efectos en hovers.

También aquí si vemos bordes o divisor de forma podremos crear lineas de bordes mas anchas o gruesas para nuestras secciones. Eligiendo solo parte superior de borde o inferior crearemos divisores.
O podremos crearlos directamente desde el apartado divisores donde podremos elegir entre diferentes opciones ya prediseñadas.

12.2 Editar Columna

Una sección puede estar dividida en diversas columnas, en la versión desktop, en versión móvil el máximo de columnas será 2.
para editar la columna haremos click en icono gris que aparecen la parte superior izquierda al hacer hover en nuestra sección.

La columna es muy parecida a la sección, podremos tocar anchura, posición de los elementos,  color de fondo, borde…
Si queremos duplicar columnas o sección con el botón derecho sobre el icono de columna o sección haremos click a duplicar.

12.3 Editar Elementos

Suponemos que estamos trabajando sobre una página ya prediseñada, una plantilla. 
Ahora podremos clickar sobre los elementos ya creados, textos, botones, call to action, imagenes…

12.3.1 Editar Textos

Con un texto es muy sencillo, veremos que en el apartado contenido que nos aparecerá en el menú de la izquierda podemos escribir lo que queramos.
En el apartado estilo elegiremos tamaños, fuente color y demás aspectos de nuestro texto. Y en el apartado avanzado podemos hacer diferentes modificaciones, como moverlo a un punto justo o aspectos más avanzados.

En etiquetas HTML elegiremos que jerarquia le damos a cada titular y cuerpo de texto. Recuerda que textos como títulos irán en h1 o h2 dependiendo de la importancia.

12.3.2 Editar Botones

Realizaremos el mismo proceso para editar botones.
Veremos como en este caso en la pestaña contenido nos aparecen otras opciones.

Podemos cambiar el texto que aparecerá en el botón y como estará alineado, el tamaños del botón y si queremos un icono.
Lo más importante enlazarlo bien. Podemos enlazarlo escribiendo el enlace a la página que queramos. O usando los ajustes avanzados pero por ahora no nos centraremos en eso.

12.3.2 Editar media, videos o imagenes

Para editar una imagen o un video haremos click sobre él. y volveremos a tocar las opciones que nos permite el menú lateral.
Si queremos insertar una imagen o un video nuevo, clicaremos en los 9 cuadradillos que aparecen en nuestro menú lateral, allí aparecerán todas las opciones que tenemos para crear contenido.
Añadiremos imagen o video dependiendo de lo que queramos.
Una vez clickemos sobre ellos podremos editarlos, cambiar tamaños, alineación y opciones de estilo.
Para insertar un video podremos hacerlo usando un link de youtube o vimeo o subiéndolo directamente a nuestro editor. Y editar todos los aspectos de este como la autoreproducion, silenciarlo, ponerlo en bucle…

13. Margenes y espaciados

Para dar espacio o eliminar espacio entre elementos hay dos modos.
Podemos ir a editar sección, columna o elemento, y desde el apartado avanzado cambiar manualmente sus margenes, recordad desactivar el botón de guardar  proporción para poder tocar un margen en concreto.
De este modo podemos añadir o menguar el margen entre elementos.

Si sólo queremos añadir una separación lo más fácil será buscar entre todos los widgets de Elementor el espaciador.
Allí podemos añadir el espacio que queramos.

14. Añadir seciones o plantillas

Cuando hagamos hover en nuestras secciones nos aparece como siempre un recuadro azul en la parte superior.
Si apretamos al símbolo del +, se nos desplegaran las dos opciones que habíamos visto antes.
Si queremos añadir una sección creada por nosotros le daremos al +, elegiremos las columnas y arrastraremos los widgets que queramos.
Pero hay otra opción, usar plantillas ya diseñadas, las hay para todo tipo de sección y estilo.
Si hacemos click en la carpeta se abrirá el popup de las plantillas, si vamos al apartados bloques, solo hemos de elegir uno y insertarlo en nuestra página.
Por supuesto es totalmente editable así que cámbiala para que se adapte a tu estilo y continuemos.

15. Animar botones CTA

Si queremos que nuestro diseño de web WordPress sea profesional y consiga los resultados esperados es necesario que todo se vea bien. Para ello animaremos los botones para que tengan mejor CTR y conviertan mejor.

Hacemos click sobre el botón y en el apartado Estilo selecionamos la pestaña «ENCIMA» allí podremos editar los efectos de hover de este.
En el nuevo apartado que se ha creado Animación al pasar el ratón, podremos seleccionar la que nos guste más. Un consejo, tratar de usar como máximo dos tipos de animaciones para toda la web, eso le dará más coherencia a vuestra marca.

16. Añadir elementos

Haciendo click en los nueve cuadrados de el menú horizontal desplegamos todos los elementos con los que podemos jugar para diseñar nuestra web.
Hay elementos muy útiles pero no puedo centrarme en hablar de cada uno de ellos, la idea es que invirtáis un rato viendo las posibilidades que nos da elementor pro, para que luego os sea más fácil crear la web.
Podemos crear call to action, secciones dentro de secciones, Google Maps, Posts de nuestro Blog, tablas de precios, gráficos animados, cuentas atrás, un sin fin de elementos para diseñar la web exactamente como la tenemos en nuestra cabeza.

17. Crear E-mail profesisonal

Cuando me refiero a e-mail profesional me refiero a un e-mail tipo Pedro@pedroseo.com y no un e-mail @gmail, por ejemplo.

Vamos a ver cómo hacerlo. Entramos de nuevo en la web de SiteGround. Iniciamos sesión en nuestra cuenta. Hacemos click en servicios y a gestionar nuestro Hosting.

Clickamos en site Tools, y una vez allí desplegamos la pestaña e-mail. Hacemos click en cuentas y añadimos el e-mail que queramos crear. Hacemos click en crear y ya está creado.

18. Newsletter

Volvemos a nuestro back office, como todos los elementos tenemos dos modos de insertarlo, desde una plantilla o desde el menú lateral de la izquierda.

Si partimos de una plantilla la sección estará dividida en texto y un form.

Le damos al icono del lápiz que nos aparecerá al ponernos encima de la «Form».

Vamos a configurar este form para que se peudan suscribir a nuestra Newsletter, lo primero de todo será ponerle un nombre.

Tenemos sólo el campo del e-mail, no necesitamos más pero si queremos poner más campos solamente hemos de darle al botón de agregar campo.

Podemos jugar con el column with para ajustar el ancho de los campos, si ponemos 2 a menos de 50% se pondrán en una solo linea.

Podemos editar colores, tipografías y demás, pero algo importante a remarcar es la pestaña actions after submit, con este botón podemos enviar al usuario a una página, podemos hacer que automaticamente le llegue un e-mail de gracias, o hacer que salte un pop-up entre otras cosas.

Configuramos también todos los datos de la pestaña E-mail, para hacer que el e-mail de gracias le llegue al usuario que s eacaba de registrar, iremos a contenido y en el form field de email, en el apartado avanzado, copiaremos el shortcode.

Este shortcode lo pegaremos en en «To» de la sección e-mail.

19. Diseñar menú

Para crear un menú iremos a nuestra home del backoffice.
Y allí haremos click en Apariencia- Menús.
Allí nos aperecerá el menú principal de nuestra página, podremos añadir páginas ya creadas o poner enlaces externos para crear nuestro menú.
Una vez creado volveremos a la home del backoffice.
Y allí haremos click en plantillas y añadir una nueva.
Selecionaremos que tipo de plantilla, en este caso header, y le pondremos un nombre.
Elegimos cuál es el header que se ajusta más a nuestra idea. Y lo insertamos.

20. Logotipo

Para definir un logotipo como el logotipo de la página y que siempre aparezca ese, lo haremos desde Apariencia-Personalizar.
Al entrar en la nueva pantalla, haremos click en identidad del sitio, donde podremos poner el titulod e la web y su descripción, también aquí podrás subir el logotipo para que aparezca en el menú.

21. Footer

Para crear el footer haremos el mismo recorrido que con el menú,  iremos a plantillas pero esta vez selecionaremos una plantilla tipo footer, le pondremos un nombre y elegiremos cuál preferimos. 
Importante tanto en el header como en el footer, publicarlo y designar la visibilidad como entire the page, ara que aparezca en todas las páginas que creemos.

22. Ajustes generales

Es posible que al insertar la dirección web de tu página no te aparezca tu home y te aparezca una página de entradas, para definir que página quieres que sea la home. Iremos a Apariencia-Personalizar-Ajustes de página de inicio.
Allí seleccionaremos la opción de página estática y como página de inicio seleccionaremos nuestra Home.

23. Responsive Design

Cuando estamos editando nuestras páginas veremos que en el menú lateral de la izquierda, en la parte inferior nos aparece el icono de una pantalla de ordenador, llamado modo adaptable, con este botón podremos ver como se ve nuestra web en diferentes dispositivos.
Si hay algo que no funciona bien en móvil tiene solución no nos alarmemos
Volveremos a la vista de escritorio, y con el botón secundario duplicaremos la sección que no se vea bien en móvil, haremos los ajustes necesarios, generalmente centrar textos, eliminar columnas si hay más de dos…
Entonces tendremos dos versiones, una para ordenador y una para móvil, hacemos click en la versión móvil y vamos  la pestaña de avanzado. Desplegamos la pestaña adaptabilidad la ocultamos en ordenador. Ahora vamos a la versión de ordenador y la ocultamos en versión tableta y móvil.
Genial ya tenemos una web con dos versiones.

24. SEO on page

Si has usado siteground para instalar tu hosting ya tendrás instalado SEO Yoast y SG Optimizer. Si no es así tendrás que ir al apartado plugins-añadir nuevo y buscar Yoast SEO y lo instalamos.
Para comenzar con SEO Yoast iremos a páginas y entraremos en una de ellas sin entrar al editor de elementor.
Si hacemos scroll veremos abajo las opciones de Yoast SEO.
Hacemos click en «edit snippet», allí podremos poner el titulo y la descripción, pongamos como titulo la manera en que queramos aparecer en Google.

Si te ha gustado Como Crear una Página web en WordPress, seguro que ahora te interesa: