00:00 – Introducción al curso
02:55 – Registrar un Hosting 🎁 20% de descuento👉🏻 https://pedro-seo.com/start
07:30 – Configuración SSL
09:40 – Interfaz WordPress
10:32 – Crear usuarios
12:03 – Instalar Plugins
13:00 – Configurar Elementor Pro 👉🏻 https://pedro-seo.com/descargar-elementor
20:57 – Estructura Web (Bloques y Columnas)
26:56 – Importar una Plantilla
30:22 – Crear Menú (Header)
36:40 – Crear Pie de Página (Footer)
41:12 – Aplicar una copia de Seguridad
41:42 – Sección Hero (Página Principal)
47:24 – Crear Botones
55:23 – Imágenes y Vídeos
1:01:21 – Crear Formularios
1:14:50 – Página de Contacto
1:19:30 – Crear Pop Ups (Con Marketing)
1:29:54 – Boton Sticky (Vende más)
1:32:03 – Adaptar Versión Móvil
1:39:10 – Crear Blog
1:47:33 – Configurar SEO Básico
1:55:46 – Cierre del curso y co-freelance 👉🏻 https://co-freelance.com/ 🎁20% Descuento cupón “youtube”
En el vídeo previo hemos visto cómo crear una página web con WordPress y Elementor paso a paso, y ahora entraremos en cuestiones más técnicas…
¿Qué CSM usar, WordPress o WiX?
Tanto WordPress como WIX son CMS (Content Managment System o Sistema de Gestor de Contenidos), es decir, ambos sistemas permiten a los usuarios crear sitios web gratis, de manera fácil y eficiente.
Y dado que ambos son sistemas de gestión de contenidos, mucha gente se pregunta cuál es es mejor para crear su página web.
La respuesta es sencilla.
Es mejor hacer la página web con WordPress.
¿Por qué?
Verás..
Lo que les diferencia a ambos CMS es que WordPress es un software libre y WIX es gratuito, esto quiere decir que WordPress facilita el acceso a TODO el código y WIX no.
Al ser de código abierto, WordPress ofrece una flexibilidad incomparable que permite personalizar casi todos los aspectos del sitio web, desde las funcionalidades hasta el diseño, con plugins gratuitos.
WordPress es altamente escalable y cuenta con una de las comunidades más grandes y activas. Esto significa un amplio soporte gratuito a través de foros, blogs, y tutoriales, además de una vasta cantidad de desarrolladores y expertos que ofrecen servicios pagos.
Otra de las ventajas que ofrece es su desarrollo SEO friendly, lo que facilita la optimización de sitios web para motores de búsqueda, lo que es vital para la visibilidad en línea.
Por otro lado, Wix es más restrictivo en cuanto a lo que puedes cambiar en sus plantillas y funcionalidades. Dado que no es un CMS de código abierto, a la mínima que quieres implementar funcionalidades o escalar, 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.
Otra gran desventaja es que al alojar la web en su servidor estás más “atado” a la plataforma. Migrar tu sitio fuera de Wix puede ser complicado.
WordPress te permite migrar y manejar tus datos libremente.
El ecosistema de Plugins y plantillas de Wix es muchísimo más limitado, a nivel SEO no ofrece tanto control sobre aspectos de optimización del sitio y a largo plazo puede ser más caro que WordPress.
Así que, si no tienes mucho presupuesto y no sabes HTML/CSS, el diseño web en WordPress es ideal para ti, por ser un CMS fácil, flexible y escalable, que ofrece pleno control sobre tu sitio
Una vez tengas claro el nombre de dominio, hay que registrarlo, pero no en cualquier hosting.
Para garantizar el rendimiento, seguridad y estabilidad de tu web WordPress es clave elegir un buen hosting, y eso no siempre es una tarea fácil.
En el mercado hay una auténtica jungla, en cuanto a proveedores de hosting, tanto en lo que se refiere a precios como a calidad de servicios, opciones de personalización, y soporte técnico.
Dicho esto, hay varios factores que debes tener en cuenta antes de contratar un hosting. Aquí te explico cuales son estos factores y te doy mi opinión sobre cual es el mejor hosting de todos.
Créeme, he trabajado con más de 30 proveedores de hosting diferentes y actualmente, la mejor relación calidad precio que he encontrado es Raiola Networks.
🎁Además, tengo un buen descuento con ellos:
Quiero el 20% de descuento
Es un hosting español con muchos años de experiencia, unos precios muy competitivos y un muy excelente servicio de atención al cliente.
Tienen varios planes, y un hosting especial para páginas web en WordPress, perfecto para mejorar la velocidad de carga y estabilidad del sitio.
Si sólo quieres crear una página, con el pack StartUp, por sólo 3,95€ al mes puedes alojar tu web en un servidor fiable.
Contratar un buen hosting es una inversión necesaria para mantener tu web segura y obtener los resultados esperados.
Además, se trata de una inversión relativamente pequeña. Cualquier negocio con un local físico te costaría más de 500€ al mes solo en alquiler, sin incluir otros gastos como la luz, el agua, los empleados, etc.
Un dominio web es, en esencia, la dirección de tu sitio en Internet. Es lo que los usuarios escriben en sus navegadores para encontrar tu página: “www.tunegocio.com”. Es único y sirve como la identidad de tu marca en el mundo digital.
Elegir el dominio puede ser una de las tareas más difíciles, ya que debe ser representativo de tu marca o negocio y debe contribuir a generar una impresión profesional.
Aquí te dejo algunos consejos para elegir un buen dominio:
⚠️ Por cierto, puedes tener el nombre de dominio (www.tunegocio.com) en un proveedor y el hosting (50Gb de espacio) en otro, aunque yo recomiendo tenerlos en el mismo sitio para agilizar trámites.
Una vez tengas claro el dominio vas a usar, hay que contratarlo.
👉 Si lo haces directamente desde Raiola Networks será muy fácil, ya que puedes usar un dominio que ya tengas comprado o comprarlo directamente en la plataforma.
Puedes buscar en otros proveedores pero el precio de los dominios no suelen cambiar mucho, así que si todavía no lo tienes te aconsejo contratarlo directamente en Raiola y así no tendrás que tratar con dos proveedores diferentes.
El proceso de contratación es muy sencillo e intuitivo. Solo tienes que elegir por cuánto tiempo quieres contratar el dominio (luego podrás renovarlo) y listo ya lo tienes.
Una vez hayas contratado Hosting y dominio web, el siguiente paso es configurar el hosting para que puedas poner en marcha tu sitio web rápidamente, así que vamos a ello.
Accede a tu área de cliente (cPanel) desde donde podrás crear cuentas de email personalizada, instalar el SSL para tener tu web segura e instalar el WordPress desde cero o migrar una web ya existente.
Es tan fácil como elegir la opción que necesitas en la opción “Instalación de aplicaciones”, en este caso crear una página web nueva en WordPress, sigue los pasos para la instalación y listo.
⚠️ Por cierto, en este caso elige WordPress sin Woocommerce, ya que se tratará de una web y no de un e-commmerce.
Si tu sitio web necesita una base de datos, ve a la sección correspondiente en tu panel y crea una nueva, lo mismo si tienes que subir archivos en tu web, usa el “Administrador de archivos” para subirlos con un clic. Así de fácil.
🔴 En el vídeo que encontrarás en el inicio del artículo te explico paso a paso cómo configurar tu hosting para WordPress de manera sencilla y rápida.
El siguiente paso para la creación de tu web en WordPress será la instalación del CMS. A continuación te explico como hacerlo desde cero, y verás que es muy sencillo.
Paso 1: Escribe la URL de tu dominio en el navegador, seguido de “/wp-admin“. Esto te llevará al panel de control o backoff de WordPress, si ya está instalado, o al asistente de instalación si es la primera vez.
Paso 2: Si es tu primera instalación, verás una pantalla de bienvenida de WordPress, y un menú lateral a la izquierda donde te saldrá todas las opciones para que puedas configurar el sitio.
Paso 3: El siguiente paso es la pestaña → “Usuario” del menú lateral, selecciona → “todos los usuarios” y una vez dentro es tan sencillo como elegir la opción → “añadir nuevo”. Ingresa el nombre de usuario, contraseña y una dirección de correo electrónico.
Este paso es importante ya que serán tus credenciales para administrar tu sitio WordPress. Aquí deberás seleccionar el idioma de tu preferencia para el proceso de instalación y posterior administración de tu sitio.
Paso 4: Ir a la opción de → “Ajustes” para introducir el título de tu sitio web y una descripción corta. Esto es bastante útil porque cuando alguien busque tu web en Google saldrá el título y descripción de tu web.
En este apartado también puedes configurar la visibilidad en los motores de búsqueda, seleccionar el idioma del sitio, zona horaria y formato de la fecha.
Paso 5: Antes de ponerte a diseñar tu nueva web, echa un vistazo al apartado de → plugins. Verás que algunos que ya vienen instalados por defecto, pero en la opción → “Añadir nuevo” encontrarás un montón de opciones que podrás instalar para añadir nuevas funcionalidades para crear una página web profesional WordPress
Y para continuar con el diseño, se hace indispensable que instales el plugin Elementor para diseñar la web de manera sencilla sin necesidad de tocar código.
Elementor es un constructor de páginas “drag-and-drop”, lo que significa que puedes diseñar en WordPress simplemente arrastrando y soltando elementos en la interfaz, sin necesidad de escribir ni una línea de código.
Es el segundo plugin más popular de WordPress, después de WooCommerce, y eso se debe a que es muy potente, súper intuitivo y ofrece una amplia gama de widgets y herramientas que permiten personalizar cada aspecto del sitio, desde fuentes y colores hasta el diseño de encabezado, pie de página y otros elementos estructurales.
Para mí, sin duda alguna, es 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.
Tiene una versión gratuita y una de pago, pero como es de esperar la versión gratuita está mucho más limitada, por eso recomiendo adquirir la versión de pago. Se trata de una pequeña inversión, y te aseguro que merece mucho la pena.
Con Elementor Pro tendrás a tu disposición widgets avanzados para crear formularios, sliders, tablas de precios, Popups, etc.
También tendrás acceso a una extensa biblioteca de plantillas y bloques exclusivos que te permitirá realizar la integración de WordPress con otras herramientas y plataformas como WooCommerce o MailChimp, por si quieres convertir la web en una tienda online o tener una newsletter.
Tienen disponibles distintos planes, y puedes elegir el que mejor encaje con tus objetivos. Es un plugin de pago anual, pero si al finalizar el año no lo renuevas, no te quedarás sin web. Lo único que pasará es que no podrás volver a editarla con Elementor Pro.
Si quieres adquirir Elementor Pro, te dejo el link para acceder 
Una vez comprado el plugin, → “inicia sesión” en tu cuenta de Elementor, y una vez accedas al área de usuarios ve a la sección de → “descargas” para descargar el archivo ZIP de Elementor Pro.
Cuando lo tengas, regresa al backoffice de WordPress para instalarlo. En tu panel de administración en el menú lateral, haz clic en → “Plugins” → “Añadir nuevo” → “Subir Plugin”.
Elige el archivo ZIP de Elementor Pro que descargaste y haz clic en → “Instalar ahora”, y una vez subido el archivo, haz clic en → “Activar plugin” para activar Elementor Pro en tu web WordPress.
✅ Cuando lo hagas, te aparecerá un mensaje de aviso para activar el Elementor Pro, lo aceptas y pum, ya está instalado.
Una vez hechos estos pasos verás que en la barra lateral izquierda WP te aparece Elementor Pro. A continuación, accedes a este nuevo apartado, vas a → “License” para activarla y listo. Ya puedes acceder a todas las características avanzadas que ofrece este plugin.
Otro paso importante a tener en cuenta para que tu página funcione de la forma más eficiente es configurar un par de aspectos relacionados con el SEO para mejorar el posicionamiento del sitio en los buscadores.
Para ello, accede a la opción → “Enlaces Permanentes” en el menú lateral para ajustar la configuración.
Por defecto viene “Estructura personalizada” pero yo recomiendo elegir la opción → “nombre de la entrada” de esta manera tendrás el nombre de URL que quieras, lo que es adecuado para potenciar el posicionamiento del sitio. Guardas y listo.
Los enlaces permanentes te permiten estructurar las URLs de tu sitio de una manera lógica y fácil de entender.
❌ Si no haces tendrás una dirección con números y signos difíciles de recordar.
✅ Google prefiere las URLs que son descriptivas y dan una idea del contenido de la página.
Por ejemplo, puedes tener una URL pedro-seo.com/5-razones-por-las-que-necesitas-una-web/
Por eso, una buena estructura de enlaces personalizada puede mejorar el SEO de tu sitio.
El SSL (Secure Sockets Layer) es un protocolo de seguridad estándar utilizado en Internet para establecer una conexión cifrada entre un servidor web, y es esencial que lo tengas instalado para tener una web segura.
Además, a nivel SEO también es importante. Google favorece a los sitios web seguros en sus resultados de búsqueda, de modo que tenerlo te ayudará a mejorar el ranking de tu sitio.
Si todavía no lo tienes instalado, volvemos a Raiola Networks, y si tienes el hosting contratado con otro proveedor, funcionará más o menos igual, así que vamos a ello.
Inicia sesión, luego vas al apartado → “sitios web”, busca la sección → “SSL” y le das a activar a la opción SSL Let’s Encrypt Wildcars.
Después de la instalación te recomiendo ver el estado del SSL, esto se hace desde el apartado → “herramientas”. Si haces clic se te abrirá nueva pantalla.
Para asegurarte, selecciona todos los elementos y dale a → “ejecutar auto SSL” para forzarlo, y listo.
Ahora vamos al siguiente paso…
Ahora que ya tienes todo lo esencial configurado, empieza lo más divertido. Diseñar tu web con WordPress y Elementor.
Ahora regresas al panel de administrador de WordPress, y el menú lateral elige la opción → “páginas” → “Crear nueva”.
Es desde este apartado donde vas a configurar la página principal WordPress y demás páginas del sitio, es decir, la página de quiénes somos, productos o servicios, contacto, etc.
Dicho esto, le das a crear nueva página, le pones el nombre de la página en el apartado de título, por ejemplo: Home o About, y haces click en el botón azul de editar con Elementor.
Si no te quieres liar construyendo la página desde cero con Elementor, lo puedes hacer de manera sencilla con una plantilla.
Hay literalmente decenas de plantillas que puedes utilizar para crear tu web en pocos pasos, y para ello, tienes que volver al menú lateral de WordPress, en la opción → “Plantillas” y una vez abres el desplegable elige → ”Biblioteca de kits”.
Dentro verás un montón de plantillas de Elementor Pro disponibles lista para ser instaladas con un clic.
Elige la que más te guste, y que a la vez se adapte a tus necesidades. Por eso, antes de elegir una, previsualiza los templates para valorar si encaja con lo que necesitas, teniendo en cuenta los objetivos de la página.
Cuando hay elegido una, la abres y para instalarla es tan fácil como ir al botón que está situado arriba a la derecha → “Apply Kit” → “Aplicar”. Te saldrá un mensaje para que actives la “carga de archivos”, le das → “Activar” y listo.
Tu kit estará activo. Ahora, si vuelves a acceder a la página que habías creado ya te saldrá con la plantilla que has elegido. Solamente tendrás que cambiar los textos y tu web estará lista.
Ahora que ya tienes tu página llena de elementos que conforman la plantilla elegida, el siguiente paso será entender un poquito cómo funciona Elementor, para editar las plantillas WordPress a tu gusto.
Para ello, ve a la barra superior, en la cabecera de página y haz clic en → “Editar con Elementor” lo que te permitirá editar todos los elementos de la página.
Podrás cambiar los textos, imágenes, enlazar los botones a las páginas que quieras, etc.
Verás que Elementor utiliza un sistema jerárquico de cajas que se dividen en “Secciones”, “Columnas” y “Elementos” para organizar los apartados de la página.
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.
En el curso gratuito de creación de páginas web con WordPress que encontrarás en el vídeo al inicio de esta guía encontrarás todos estos pasos explicados al detalle.
A lo mejor también te interesa saber cuál es la mejor plantilla para WordPress. Te lo cuento en este vídeo 👇
Para editar este apartado, lo que tienes que hacer es situar el cursor en la caja más grande, llamada sección, y luego haz clic en la → “pestaña azul” que te aparecerá en la parte superior, justo en los seis puntos.
Verás como en el lateral izquierdo ya te aparecen las opciones para editar esta sección.
Cada sección incluye tres categorías:
En Contenido, puedes ajustar dimensiones como anchura y altura de la sección, eligiendo si será de ancho completo (full width) o en formato de caja.
En Estilo, puedes modificar los elementos visuales como el color de fondo, añadir imágenes, patrones o vídeos. También puedes jugar con la capa de fondo para añadir profundidad, movimiento o efectos en hovers.
En este apartado también podrás añadir bordes o divisores y jugar con el ancho de los mismos. Seleccionando únicamente la parte superior o inferior del borde, crearás divisores.
Alternativamente, los divisores se pueden configurar desde el apartado específico, eligiendo entre diversas opciones predefinidas.
En avanzado es donde puedes realizar ajustes más específicos y técnicos. Aquí, personalizas aspectos como los márgenes y el relleno (padding) de la sección, lo que afecta el espacio alrededor y dentro de tu sección respectivamente.
También puedes aplicar efectos CSS personalizados, como animaciones o transiciones, y configurar respuestas específicas a interacciones.
Las secciones pueden subdividirse en varias columnas para una organización más detallada del contenido. Eso en la versión desktop, ya que el espacio lo permite, en cambio en la versión móvil, el límite es de dos columnas.
Para editar una columna, simplemente → haz clic en el icono gris ubicado en la parte superior izquierda de la columna al pasar el cursor sobre la sección.
La edición de columnas en Elementor es similar a la de las secciones. Aquí, tienes la capacidad de ajustar la anchura y la posición de los elementos dentro de la columna.
Además, puedes personalizar el color de fondo y los bordes de la columna para que se alinee con el diseño general de tu página.
Si necesitas duplicar una columna o incluso toda la sección, puedes hacerlo fácilmente con un clic derecho sobre el icono de la columna y seleccionando la opción→ “Duplicar”.
Esta funcionalidad es especialmente útil para mantener un diseño coherente en toda la página o para replicar un estilo específico en diferentes secciones.
Suponiendo que hayas elegido una plantilla, en este caso estás trabajando sobre una página ya prediseñada.
Para editar los Elementos (Texto, imágenes, botones, iconos, etc.), lo único que tienes que hacer es hacer clic sobre el elemento ya creado que quieres editar, y verás que en el lateral izquierdo se activan opciones específicas de edición.
Por ejemplo, al seleccionar un texto, podrás modificar su contenido, estilo y alineación.
Con los botones, aparte de cambiar el texto y su estilo, tienes la posibilidad de configurar su funcionalidad, como enlazarlo a una página o sección específica.
En el caso de las imágenes, puedes ajustar su tamaño, posición y aplicar efectos visuales.
Esta interacción directa y visual con los elementos hace que personalizar tu página WordPress sea un proceso intuitivo y eficiente, permitiéndote adaptar cada componente a tus necesidades y al estilo general de tu sitio web.
Como te expliqué en el apartado anterior, agregar y editar textos en Elementor es muy sencillo. Al pasar el cursor y seleccionar el texto que quieres cambiar, verás que en el menú lateral izquierdo se despliega la sección → “Contenido”, donde puedes escribir y editar el texto a tu gusto.
En la sección → “Estilo”, tendrás la oportunidad de personalizar aspectos visuales del texto, como el tamaño, la fuente, el color y otros atributos que definen la apariencia del texto en tu página.
Para ajustes más precisos y técnicos, el apartado → “Avanzado” te permite realizar modificaciones detalladas. Aquí puedes mover el texto a una posición específica, ponerlo sobre una imagen o aplicar configuraciones más sofisticadas que afectan cómo se muestra el texto en relación con otros elementos de la página.
⚠️ Además, Elementor te da la opción de definir la jerarquía de los textos con etiquetas HTML como h1, h2, h3, etc., lo cual es crucial para la SEO y la accesibilidad de tu sitio web.
Así, puedes asignar niveles de importancia a tus titulares y textos, utilizando estas etiquetas para estructurar correctamente el contenido y mejorar la experiencia del usuario.
La edición de botones en Elementor sigue un proceso similar al de otros elementos, pero con opciones específicas para botones en la pestaña → “Contenido” del menú lateral.
En esta sección, puedes modificar el texto del botón, incluyendo su alineación dentro del botón. También tienes la capacidad de ajustar el tamaño del botón para que se adapte al diseño general de tu página.
También puedes añadir iconos al botón, lo que puede mejorar su atractivo visual y funcionalidad.
Un aspecto crucial en la edición de botones es su correcta vinculación. Puedes asignar un enlace a cada botón, dirigiendo a los usuarios a la página deseada.
Esto se hace escribiendo la URL en la opción correspondiente. Aunque Elementor también ofrece configuraciones más avanzadas para los enlaces, centrarse en los ajustes básicos es suficiente para una funcionalidad efectiva y directa del botón.
Para editar medios como imágenes o videos en Elementor, simplemente haz clic sobre el elemento que deseas modificar. Esto activará el menú lateral, que te ofrece diversas opciones de edición.
Si necesitas agregar un nuevo medio, → utiliza el icono de los nueve cuadradillos que aparece en el menú lateral. Aquí encontrarás una amplia gama de opciones para añadir contenido a tu página. → Selecciona entre añadir una imagen o un video, según tus necesidades.
Una vez seleccionado el medio, tendrás la posibilidad de realizar ajustes como cambiar el tamaño, modificar la alineación y aplicar distintas opciones de estilo para que se integre perfectamente en tu diseño.
En el caso de los videos, puedes insertarlos mediante un enlace de YouTube o Vimeo, o subirlos directamente al editor. Elementor te permite editar aspectos clave del video, como la autoreproducción, la opción de silenciarlo o ponerlo en bucle, brindándote un control total sobre cómo se presenta el video en tu página web.
Para ajustar los márgenes y espacios entre elementos en tu web WordPress puedes hacerlo de dos formas:
▪️ Primero, ajusta los márgenes directamente en cualquier sección, columna o elemento. Para ello, accede a la opción → “Avanzado” en el menú de edición de la sección, columna o elemento seleccionado.
⚠️ Es importante desactivar la opción de “guardar proporción” si deseas modificar un margen específico sin afectar a los demás. Esta herramienta te permite incrementar o reducir el espacio entre los elementos según tus necesidades.
▪️ La segunda opción es utilizar el widget “Espaciador” de Elementor, especialmente útil para añadir separación entre elementos de forma rápida y sencilla.
Para hacerlo, simplemente selecciona el widget “Espaciador” de entre las opciones disponibles y ajusta el espacio que deseas añadir. Este método es ideal para crear separaciones claras y definidas sin necesidad de ajustar manualmente los márgenes.
Para añadir secciones o plantillas en Elementor, interactúa con las secciones existentes en tu página. Al pasar el cursor sobre ellas, verás un recuadro azul en la parte superior.
Si deseas añadir una nueva sección personalizada, haz clic en el símbolo de → “+”. A continuación, → selecciona la estructura de columnas que prefieras y arrastra los widgets que necesites para construir tu sección desde cero.
Alternativamente, puedes optar por utilizar plantillas pre-diseñadas, que ofrecen soluciones para una variedad de secciones y estilos. Para acceder a estas, haz clic en el icono de carpeta, lo que abrirá el menú de plantillas. En la sección de → “Bloques”, simplemente elige el bloque que prefieras e insértalo en tu página.
Estas plantillas son completamente editables, lo que te permite personalizarlas para que se ajusten perfectamente al estilo y necesidades de la página. Así, Elementor te facilita la creación de un sitio WordPress profesional ya sea comenzando desde cero o utilizando plantillas como punto de partida.
Si quieres que tu web se efectiva, para conseguir los resultados que te propones, es crucial que todo se vea bien.
En este sentido, animar los botones hará que la página se vea más llamativa, y además te ayudará a aumentar la tasa de clics (CTR), lo que a menudo se traduce en más conversión.
Para animar los botones del sitio, haz clic en el botón que deseas modificar. En el menú de edición, ve al apartado → “Estilo” y selecciona la pestaña → “Encima”. Aquí podrás editar los efectos de hover, es decir, los cambios que ocurren cuando el cursor pasa sobre el botón.
En la sección de → “Animación al pasar el ratón”, encontrarás varias opciones de animación para elegir, pero ojo no te vuelvas loco animando los botones.
✅ Mi consejo es que uses como máximo dos tipos de animaciones en todo tu sitio web. Esta consistencia en las animaciones no solo mantiene la coherencia visual, sino que también fortalece la identidad de tu marca.
Una animación bien elegida y aplicada de forma coherente puede hacer que tu sitio web destaque y sea más atractivo para los usuarios.
Previamente ya te hable de los elementos en Elementor, pero en este apartado vamos a aprender cómo añadir nuevos elementos a la página. Imagina que usas una plantilla, pero quieres incluir un apartado extra, pues tendrás que añadir un nuevo elemento.
Para ello, haz clic en el icono de los nueve cuadraditos ubicado en el menú horizontal. Esto despliega una amplia gama de elementos disponibles para personalizar y enriquecer tu sitio web.
Elementor Pro ofrece una variedad de elementos útiles y versátiles, aunque no es posible detallar cada uno aquí. Mi recomendación es dedicar tiempo a explorar todas las opciones que Elementor Pro proporciona.
Esta exploración te permitirá familiarizarte con las herramientas y facilitará el proceso de creación de tu sitio web.
Con Elementor, tienes la opción de crear llamadas a la acción (call to action) efectivas, insertar secciones dentro de otras secciones, integrar mapas de Google, mostrar publicaciones de tu blog, crear tablas de precios, gráficos animados, temporizadores de cuenta atrás y muchos otros elementos.
Esta variedad te permite diseñar un sitio web que no solo cumpla con tus necesidades funcionales, sino que también refleje fielmente la visión que tienes para tu presencia en línea.
Con correo profesional me refiero a un e-mail tipo Pedro@pedroseo.com y no un e-mail @gmail, por ejemplo.
A nivel profesional, no queda nada profesional usar un Gmail, y por eso es importante crear un email asociado a tu sitio web, así que vamos a hacerlo.
Si finalmente tienes el hosting con Raiola Networks, lo podrás hacer de manera muy sencilla. Inicia sesión en tu cuenta para acceder a cPanel.
Una vez dentro, navega hasta la sección de servicios y selecciona la opción para → “gestionar tu Hosting”.
Posteriormente haz clic en → “Site Tools”, y una vez allí, haz clic en → “Cuentas de email”. Se te presentará la interfaz donde se listan las cuentas de correo existentes. Para crear una nueva, pulsa el botón → “Crear” y sigue los pasos indicados.
Es decir, ingresa el Nombre de Usuario, que es la parte del correo electrónico antes del “@”, como “nombre@tudominio.com”, introduce la contraseña y haz clic en “crear”. Listo. Ya tienes un email profesional.
La newsletter te permitirá mantener un contacto directo y regular con tu audiencia. Podrás ofrecer contenidos personalizado que puede fortalecer la relación con tus clientes o seguidores, y por este motivo te recomiendo crearla.
Para ello, volvemos al panel de administrador de WordPress Elementor, y como todos los elementos, tenemos dos modos de insertarlo: usando una plantilla predefinida o seleccionando el elemento de formulario desde el menú lateral izquierdo.
Si usas una plantilla…
En la pestaña → “actions after submit”, configura las acciones posteriores al envío del formulario, como redirigir al usuario a otra página, enviar un email de agradecimiento o mostrar un pop-up.
También es necesario configurar los detalles para que el email de agradecimiento llegue a quienes se registren.
En la pestaña → “contenido”, bajo el campo de email, y en el form field de email, en el apartado avanzado, copiaremos el shortcode.
Este shortcode lo pegaremos en “To” de la sección e-mail.
Con estos pasos, podrás configurar el formulario para tu newsletter, mejorando la interacción con tus suscriptores y potenciando tu estrategia de marketing.
Seguro que tu web ya va cogiendo forma, pero todavía no hemos hablado de un apartado clave: el menú.
Diseñar el menú de tu web WordPress con Elementor es facilísimo. Te explico, accede al backoffice de tu sitio WordPress, y una vez dentro, en el menú lateral situado a la izquierda haz clic en → “Apariencia” y luego a → “Menús”.
En esta sección, encontrarás el menú principal de tu página, donde tienes la posibilidad de añadir páginas ya creadas o enlaces externos para configurar tu menú.
Tras crearlo, el siguiente paso es regresar a la home del backoffice, seleccionar → “Plantillas” y luego → “Añadir Nueva”. Aquí, elige el tipo de plantilla, en este caso → “Header”, y dale un nombre.
Finalmente, selecciona el diseño de cabecera que más se ajuste a tus necesidades y procede a insertarlo. Este flujo de trabajo te permite personalizar y adaptar el menú de tu sitio web, aprovechando las capacidades de Elementor para una integración efectiva.
El logotipo es más que una simple imagen; es la representación visual de tu marca y juega un papel crucial en la identidad de tu sitio web.
Por eso debes añadir un logo personalizado, que transmita, a través del diseño, tipografía, y colores, la esencia de tu marca.
Cambiar el logo en WordPress con Elementor es muy fácil. Simplemente tienes que acceder al panel de administración de WordPress, y en el menú lateral ve a → “Apariencia” → “Personalizar” → “Identidad del Sitio”. En este apartado podrás podrás subir tu logotipo.
Asegúrate de que el logo se vea bien en diferentes dispositivos y navegadores. Revísalo para garantizar una visualización óptima tanto en ordenadores como en móviles y tablets.
🔵 Consejos Clave:
El footer o pie de página de tu sitio web es un apartado clave para mejorar la experiencia de usuario, siempre y cuando incluyas información útil y fortalecer tu marca.
Los pasos para editar el footer con Elementor son muy parecidos a los que te expliqué en el apartado de menú.
Desde el panel de WordPress, ve a → “Elementor” → “Plantillas” → “Añadir Nueva”.
En la opción → “Footer”, revisa las diferentes opciones disponibles y selecciona la que mejor encaje con tu diseño WordPress.
Utiliza los widgets de Elementor para añadir texto, imágenes, enlaces, formularios de suscripción, y más. Asegúrate de que el diseño sea coherente con el resto de tu sitio.
⚠️ Importante: Incorpora elementos útiles que mejoren la experiencia del usuario, como mapas de sitio o enlaces a políticas de privacidad y términos de uso.
No obstante, mantén la información concisa y fácil de leer. El pie de página de tu WordPress no debe estar sobrecargado.
Ya tienes tu página web con WordPress prácticamente lista, pero no corras. Quedan algunos detalles importantes.
Es posible que al insertar la dirección web de tu página no te aparezca la página de inicio, sino la página de entradas del blog.
A veces, por la configuración que viene por defecto, la página de inicio muestra las entradas o blog, de modo que para que muestre la home tienes que definir cuál página quieres que se muestre, así que vamos a ello.
En tu panel de administración de WordPress, busca en el menú lateral la opción → “Apariencia” → “Personalizar” → “Ajustes de página de inicio”.
En este apartado encontrarás las opciones para definir cómo se muestra tu página principal. En “Ajustes”, selecciona la opción de → “Página Estática”. Esto te permite mostrar una página particular en lugar de mostrar tus últimas entradas.
Posteriormente elige la página que deseas establecer como página de inicio desde el menú desplegable. Puedes elegir cualquier página que hayas creado, pero lo más normal y recomendable es que elijas la → “Home” para ser la primera página que vean tus visitantes.
Una vez hayas seleccionado tu página de inicio, asegúrate de guardar los cambios. Esto actualizará la configuración de tu sitio y asegurará que los visitantes sean dirigidos a la página correcta al acceder a tu sitio web.
Para hacer una página web con WordPress efectiva, es clave que tengas un diseño responsivo, es decir, que se vea y funcione bien en todos los dispositivos, desde ordenadores de escritorio hasta móviles y tabletas.
En WordPress, usando Elementor, puedes ajustar el responsive del sitio fácilmente. Te explico cómo hacerlo.
Mientras editas tus páginas en Elementor, encontrarás en la parte inferior del menú lateral izquierdo un icono que representa una pantalla de ordenador, llamado → “Modo Adaptable”. Al hacer clic en este botón, podrás previsualizar cómo se ve tu sitio en diferentes dispositivos (ordenador, tableta, móvil).
Si detectas algún elemento que no se visualiza correctamente en la versión móvil, no te preocupes, tiene solución. Regresa a la vista de escritorio y duplica la sección problemática utilizando el botón secundario del ratón. En esta copia, realiza los ajustes necesarios, como centrar textos o eliminar columnas si hay más de dos, para mejorar su visualización en dispositivos móviles.
Una vez ajustada la versión para móvil, tendrás dos versiones de la misma sección: una optimizada para ordenador y otra para móvil.
En la versión móvil de la sección, ve a la pestaña → “Avanzado” y, dentro de la opción de → “Adaptabilidad”, oculta esta sección en ordenadores.
Luego, en la versión de escritorio, ocúltala en dispositivos móviles y tabletas.
Asegúrate de revisar ambas versiones en diferentes dispositivos para confirmar que cada una se muestra solo en el dispositivo correspondiente.
✅ Consejos para un diseño responsivo efectivo:
▪️ Simplicidad: Los diseños web para móviles deben ser más simples y directos, dada la limitación de espacio.
▪️ Texto y botones: Asegúrate de que los textos y botones sean fácilmente legibles y no se vean cortados en las pantallas más pequeñas.
▪️ Imágenes: Utiliza imágenes que se adapten bien a diferentes tamaños de pantalla sin perder calidad.
El SEO (Search Engine Optimization) on-page es crucial para mejorar la visibilidad y el ranking de tu sitio web en los motores de búsqueda.
Hay muchos plugins SEO para WordPress que puedes utilizar para mejorar el SEO de tu web. Plugins como Yoast SEO o SEO Press son buenas opciones, pero por mi experiencia, uno de los mejores es Rank Math, por eso lo recomiendo.
A continuación te guío sobre cómo empezar a trabajar con Rank Math para mejorar el SEO de tu sitio. El primer paso es instalar y activar el plugin Rank Math en tu sitio WordPress.
Posteriormente, ve a la sección de → “Páginas” en tu panel de WordPress. Elige la página que quieres optimizar y haz clic para editarla, pero no entres al editor de Elementor aún.
Si haces scroll verás abajo las opciones de Rank math. Haces clic en → “edit snippet”, aquí podrás editar elementos clave de SEO como el título y la descripción meta.
Elige un título que refleje cómo quieres que tu página aparezca en los resultados de búsqueda de Google. Este título debe ser atractivo y contener tus palabras clave principales, pero también debe ser claro y descriptivo.
Y en lo que respecta a la meta descripción, debe resumir el contenido de la página e incluir palabras clave relevantes.
Este apartado es importante, ya que a menudo es lo primero que ven los usuarios en los resultados de búsqueda, así que debe motivarlos a hacer clic en tu enlace.
Crear un sitio web exitoso y profesional es más accesible que nunca tanto para profesionales independientes como negocios.
Podrás crear una web de manera fácil y rápida si sigue los pasos de este tutorial de WordPress y Elementor.
Puedes tomar el control total de tu presencia online y dar vida a tu negocio digital creando una web atractiva y profesional sin necesidad de saber programar.
Recuerda elegir un hosting confiable como Raiola Networks y aprovechar las capacidades de Elementor Pro para asegurar un sitio rápido, seguro y optimizado para SEO.
Y si tienes cualquier duda, deja tu pregunta en los comentarios y estaré encantado de ayudarte.
EMPECEMOS A TRABAJAR JUNTOS
Envíanos un mensaje
Antes de empezar cualquier proyecto, necesitaremos conocer varios detalles del negocio, situación actual, objetivos… Por eso, recomendamos que completéis este formulario para que podamos analizar vuestro caso y poder crearos una propuesta ajustada a vuestras necesidades.
De todas formas, podéis completar este formulario y os indicaremos como seguir 🙂
NO SPAM – Contenido 100% auténtico.
¿Quieres estar al día?
Páginas Legales
About
Servicios
Páginas de interés
🎁 Descárgate el Checklist de SEO
Revisa todos los errores SEO que comete tu web con esta checklist creada por +100 especialistas SEO.
🚨 Advertencia: Cada proyecto requiere de una estrategia adaptada a sus necesidades, este checklist te servirá para detectar rápidamente errores.
¿A qué e-mail te lo envio?
Un comentario
Gracias por comentar!