🥇¿Cómo crear una página de Blog en WordPress con Elementor?

Hola amigos de Marieú Technology Corporation, ¿cómo crear una página de Blog en WordPress con Elementor? En efecto, en esta guía, paso a paso, aprenderás a crear todas las secciones de un Blog en WordPress con Elementor.

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo crear una página de Blog en WordPress con Elementor?

Dentro de Elementor y ajustes, nosotros vamos a activar el «tipo de contenido» de «entradas». Qué es lo que pasa, en algunos casos, estas entradas no están activas y, por ende, nosotros no podemos asignar un blog, no podemos editarlo. Dentro de «entradas» no podemos editar un blog o una página de Blog con Elementor. Entonces, para eso, nosotros tenemos que activarlo.

Vamos a crear una categoría, esta categoría nos sirve mucho para diferenciarlo el tipo de blog. De repente es un tipo de blog de diseño web, de repente es un tipo de Blog para marketing, quizás para edición de videos, entre otros. Para ello, nosotros vamos a asignar una categoría. Vamos a crear una plantilla con las siguientes secciones. Nos vamos a ir, dentro de WordPress, a plantillas y, en plantillas, nosotros crearemos varias secciones. Sección de header, sección de encabezado sección de «body,» comments y, finalmente, de «footer».

Lo vamos a trabajar por plantillas y, después, lo vamos a integrar como «short code» en las entradas. Tenemos nuestra página de Blog y, de esa página de blog, va a tener varios enlaces a las entradas. Cada una de estas entradas son un blog en particular, una publicación, en particular, de cada uno de ustedes. Finalmente, la última actividad en WordPress sería la siguiente. Vamos a ajustes, enlaces y vamos a cambiar los enlaces permanentes a /blog/%postname%/.

Entonces, ¿para qué nosotros queremos cambiar este enlace permanente?, si nosotros no cambiamos este enlace permanente, nosotros vamos a tener nuestros blog, tenemos nuestro dominio «/» y vamos a tener el nombre de Blog. Imaginemos blog 1, blog 2, pero, cuando ya nosotros comenzamos a tener de 5 a más blogs, nosotros tenemos que ordenarlos. Va a estar dentro de toda la página de blog, ingresamos a la página de blog y vamos a tener nuestros enlaces propios.

Entonces, para eso, nosotros tenemos que cambiar dentro de «ajustes», «enlaces permanentes» y cambiar el «postname». En el caso de Elementor, nosotros lo estamos dividiendo en dos secciones. Nosotros lo estamos dividiendo en dos partes. Para el encabezado, nosotros vamos a agregar un título de blog, vamos a agregar nuestro título y, para la parte del cuerpo o del «body», nosotros vamos a integrar fecha, vamos a integrar título de lectura, vídeos, textos, foto del autor e información profesional, y, también, vamos a incluir la categoría que hemos creado en WordPress.

Diagrama de Arquitectura: Tutorial de Blog en WordPress con Elementor.
Fuente: Propia, mediante software Miro.

Entonces aquí estamos en WordPress y nos estamos ubicando dentro de Elementor. Dentro de Elementor, nosotros vamos a colocar «ajustes». En «ajustes» nosotros vamos a activar, el tipo de contenido, «entradas» y, lo que viene por defecto, las páginas. Ambos tienen que estar con el check list o el la casilla de verificación activa. Ahora, nosotros vamos a crear una categoría, nos vamos a ir a «entradas». Si nosotros nos ubicamos en «entradas», vamos a notar que ya tenemos la opción de editar con Elementor. En el momento que nosotros hemos habilitado la opción de «entradas», esta opción, dentro de cualquier blog, se va a habilitar «editar con Elementor».

Ahora, nosotros vamos a incluir una categoría, recuerden, nos vamos a «categoría». Ya en «categoría», nosotros tenemos tres categorías de la empresa de Marieú. Por un lado, tenemos diseño web, marketing digital y tenemos producción audiovisual. ¿Cómo nosotros creamos una categoría desde cero?, ponemos aquí, el nombre de la categoría. Imaginemos, vamos a colocar «tecnología», es el nombre de la categoría.

Ahora, después del nombre tenemos el «slug». El «slug» viene a ser la URL, en ese caso, de la categoría. Siendo así, si nosotros tenemos nuestro dominio ponemos «/» o barra y agregamos el «slug», okay. Entonces, por ejemplo, nuestro dominio que, en este caso, sería marieutechnologycorporation.com/tecinología, ese sería el «slug». Entonces, vamos a colocar «tecnología» y, después, tenemos el «slug» de la categoría de tecnología. Entra el usuario dentro de categoría de tecnología y ve nuestra URL que es tecnología. Entonces, es una URL amigable, donde el usuario va a poder reconocerlo.

Además, nosotros podemos colocar una categoría superior, ¿qué quiere decir?, que si nosotros colocamos «diseño web», dentro de «diseño web» va a estar la categoría de tecnología. En este caso, lo vamos a colocar «ninguna». Finalmente, una pequeña descripción para que podamos reconocer, de repente, si hemos colocado algún nombre a nivel de código o números, nosotros, con esta descripción, vamos a poder reconocer, claramente, a qué categoría pertenece. Cuando hemos completado estos campos o estos «fields», ponemos «añadir una nueva categoría» y aquí, en la mano derecha, lo tenemos «tecnología», okay.

Ahora nosotros vamos a crear las plantillas para las secciones de los blogs. Vamos a irnos a plantillas, vamos a crear varias plantillas. Estas plantillas van a corresponder al encabezado, al «header», al «fooder», al «body» o al cuerpo. Para ello, nosotros nos vamos a ubicar aquí «plantillas». Ahora, nosotros vamos a crear las plantillas. Para el «header» y el «footer», para estas dos, recuerden que ya lo tenemos creado dentro del «theme builder». Entonces, no es necesario crearlo como plantilla porque ya lo tenemos. Vamos a centrarnos dentro de la sección encabezado, «body» y «comments».

Entonces, aquí en plantillas, nosotros vamos a añadir una nueva, ponemos «añadir nueva» y aquí vamos a colocar el tipo de plantilla «página». Nombre de la plantilla, vamos a colocar «blog cabecera content 7» y colocamos «crear plantilla». Entonces, aquí tenemos ya la plantilla de «blog cabecera content 7», ya está lista para poder editar. Si nosotros nos saltamos a un blog que ya está creado la cabecera, lo tenemos así, está conformado por lo siguiente. Tenemos la sección, dentro de la sección la columna, tenemos dos encabezados y un editor de texto.

En el primer encabezado, hemos colocado tutorial y, el segundo, el título del Blog. Ya para el tercero que es el «editor de texto», hemos colocado algunas palabras clave principales del contenido del Blog, qué es lo que vas a desarrollar. En este caso, elaborar un catálogo digital, donde aprenderás capas, textos, imágenes, colores y cómo realizar una exportación. Además de incluir un vídeo «paso a paso».

Además de estos tres textos, hemos agregado un «lottie», este «lottie» son los aros que ustedes pueden visualizar de fondo, ¡ahí está! Entonces, si nosotros quisiéramos cambiar, de repente, el fondo del encabezado, nos vamos a la «sección», seleccionamos «sección» y dentro de «estilo» nosotros podemos cambiar el color de fondo.

Seleccionamos aquí y podemos cambiar un color. En este caso es un color degradado y ¡ahí está!, lo podemos cambiar. Se recomienda un color que se alinee mucho a su empresa. Puedes cambiarlo color verde, imaginemos, vamos a retirar las mayúsculas, vamos a colocar formulario con Elementor, aquí ponemos Sheets, ElementsKit y Google Cloud, okay, y ¡ahí está! Quitamos las mayúsculas, en el caso de formulario, y lo dejamos solamente con la primera letra en mayúscula.

Ahora faltaría el «editor de texto», vamos a colocar «elaborar un formulario para tus clientes y aprenderás a crear un proyecto en Google Cloud» y ¡listo! Entonces, ya tenemos nuestro encabezado con los textos del nuevo blog. Recuerden actualizar para que se puedan guardar los cambios.

Ahora nosotros vamos a crear una plantilla, para el cuerpo o el «body» del Blog. Ponemos «añadir nuevo», página, vamos a colocar «blog body content 7» y colocamos «crear plantilla». Entonces, aquí nosotros vamos a integrar todo el texto, los vídeos, también vamos a colocar una reseña del autor del Blog que estamos realizando. De igual manera, aquí tenemos también un modelo, de un blog anterior, con todo el detalle del vídeo, del texto, los subtítulos, algunos datos de las fechas de publicación, el apellido del autor y el tiempo de lectura.

Si nosotros abrimos esta sección, tenemos dos columnas. La primera columna es solamente correspondiente al texto, archivos multimedia y, la segunda, es para las últimas publicaciones. Si nosotros tenemos más de dos publicaciones, las últimas publicaciones, como lo hemos asignado con «categoría», recuerden, como entrada y categoría, nos va a aparecer aquí en el listado. ¿Cómo activamos estas últimas publicaciones?, con el siguiente widget «blog posts», ese widget ustedes lo pueden encontrar aquí. Si vamos a «añadir un widget», ponemos «blog posts» y ¡ahí está!

Ya en el widget, nosotros recomendamos lo siguiente: dentro de query, vamos a agregar «recientes posts» o recientes publicaciones. Ya con estas recientes publicaciones y que tengamos ya activo dentro de las entradas, se nos va a aparecer todos los blogs recientes que hemos publicado, por fecha. Recuerden que esta es la categoría, esta es categoría de marketing digital, diseño web, entre otros. Vamos a irnos a la primera columna, dentro de la primera columna, tenemos los encabezados, tenemos el vídeo, espaciadores, compartir en redes sociales, entre otros.

Entonces, nosotros vamos a cambiar aquí, primero el encabezado. Vamos a colocar una palabra que represente este último blog. Recuerden que estamos haciendo el formulario, vamos a colocar «formulario» y como segundo encabezado, vamos a colocar «Elementor». Ya para el tercer widget de encabezado, nosotros vamos a colocar la fecha, la fecha de publicación. Ponemos 8 de octubre del 2023 y, a la siguiente, sería el apellido del autor y la inicial de su nombre. Tiempo, vamos a asignarlo unos 20 minutos de lectura y ¡listo!

Entonces, lo que sigue es el vídeo, vamos a cambiarle este vídeo que tenemos aquí. También está asignado como un widget de vídeo, lo pueden encontrar aquí. Ponemos buscar widget, ponemos vídeo, ¡ahí está! Recuer recuerden, si nosotros queremos cambiar este vídeo, seleccionamos dentro del «navigator» o si no ponemos el lápiz de «editar vídeo». Entonces, se nos apertura el contenido del widget de vídeo y cambiamos el enlace, ¡ahí está!

Además, nosotros vamos a agregar un poco de texto. ¿Cómo agregamos texto?, con el widget de «editor de texto». Vamos a comenzar a editar un poco de texto. Vamos a poner «Hola amigos de Marieú Technology Corporation», si nosotros queremos cambiarlo, subrayamos el texto y colocamos «insertar enlace». Como nosotros ya lo tenemos incluido, simplemente, si queremos cambiarlo, ponemos editar y ahí ponemos la nueva URL, ponemos aplicar.

Entonces, después nosotros vamos a colocar el título de nuestro blog. Vamos a pegar nuestro título, aquí lo tenemos. Recuerden que lo hicimos en una etapa inicial, copiamos y aquí lo vamos a pegar. Vamos a quitar el emoji y ¡ahí está! Entonces, ponemos formulario con Elementor, Google Sheets, Elements Kit y Google Cloud. Y colocaremos aquí «en efecto», vamos a colocar a «cómo integrar un formulario en WordPress con Elementor». Entonces, ya para el segundo párrafo, nosotros vamos a colocar algunas características de la aplicación que vamos a utilizar. En este caso, vamos a asignar del plugin de Elementor.

Nosotros vamos a eliminar este concepto anterior y vamos a asignar el nuevo concepto, en este caso, de Elementor. Por ejemplo, aquí, en particular, para el segundo párrafo, hemos asignado dos enlaces. Uno que es Elementor, te direcciona a la página principal de Elementor y, para el segundo, te lleva a la página de WordPress y en mención al plugin de Elementor, ¡ahí está! Ya para la pregunta, nosotros hemos colocado lo siguiente: ¿cómo integrar un formulario con Elementor y Google Sheet?.

Vamos a cambiar las imágenes, recuerden que estas imágenes son del blog anterior. Nos vamos a la sección de «editor de texto», realizamos un salto y ponemos «añadir medios». Dentro de «añadir medios», nosotros vamos a agregar uno, vamos a subir un archivo. Ya tenemos almacenado el diagrama y algunos archivos de ElementsKit. Para este blog, seleccionamos, arrastramos y soltamos. Colocamos «insertar en la entrada» y ¡ahí está! Vamos a eliminar el anterior y vamos a colocar, que esta imagen, la alineación sea a la izquierda. Colocamos en «editar», dentro de editar, nosotros, en «ajustes de visualización», vamos a asignar «tamaño completo».

Alguna recomendación aquí adicional, dentro de «opciones avanzadas» el atributo «title», de la imagen, asignamos el nombre de la imagen. Entonces, si nosotros nos vamos aquí, tenemos el nombre completo de la imagen, copiamos, pegamos y ponemos actualizar. Recuerden que este atributo nos ayuda mucho cuando un usuario ingresa a «Google Images» o Google imágenes y encuentra tu imagen, le interesa tu imagen, quiere abrir la página o, de repente, descargarlo y le va a aparecer todo el título, ponemos actualizar.

Ahora nos vamos con la siguiente imagen, aquí tenemos la siguiente imagen, vamos a cambiarlo y agregamos un salto. De igual manera que el anterior, «añadir medios», subir archivos y, dentro de «subir archivos», vamos a arrastrar el archivo que ya tenemos, colocamos «insertar en la entrada». De manera similar, vamos a colocar «alineación a la izquierda», seleccionamos «editar». Dentro de «ajuste de visualización» colocamos el mismo «tamaño completo», atributo «title» colocamos el de aquí, el mismo del imagen, en este caso, «activar Google Sheets con Elementor Marieú», ponemos actualizar y vamos a asignar las referencias.

Para este caso, vamos a colocar «activar Google Sheets con Elementor», fuente «propia, mediante el software de ElementsKit». Para la primera imagen, vamos a colocar «diagrama arquitectura Elementor Mailing Google Cloud y Google Sheets» y la fuente «propia, mediante el software de Miro», listo chicos. Entonces, ahora ya hemos agregado también el texto, lo hemos separado por párrafos. Recuerden, no es recomendable hacer todo un párrafo completo, siempre es bueno dejar algunos espacios, para que sea mucho más cómodo leer al usuario.

Si nosotros queremos buscar algún texto en particular, dentro de nuestro blog, ponemos «control F», ponemos «respecto». Aquí, nosotros queremos separar o dar un salto, para que sean dos párrafos. Ya lo identificó, vamos al «editor de texto» y damos un salto, ¡ahí está! Tenemos nuestras dos imágenes, los resultados finales y un pequeño enlace también a la página principal de Marieú Technology Corporation.

Después del texto, hemos agregado una pequeña foto del autor. Este widget ustedes lo pueden ubicar como «editor de texto». Algunas recomendaciones, de repente, colocar un fondo de un color que se alinee mucho a tu empresa, por ejemplo, aquí hemos colocado un color lila. ¿Cómo hacemos el cambio?, nos ponemos dentro de «avanzado» y en «avanzado» nos vamos a fondo.

En particular, hemos colocado un código hexadecimal, que representa un color similar a la página web de Marieú. Ya, dentro de contenido, ustedes pueden agregar el nombre del autor, pueden, de repente, seleccionar un hipervínculo, una web externa de su LinkedIn y el detalle de su perfil profesional. Algunos enlaces adicionales, como compartir en redes sociales, también, ustedes pueden ubicarlo ese widget como «compartir en redes sociales». Ponemos widgets «compartir en redes sociales», lo seleccionan, lo arrastran y lo sueltan.

Algunos detalles, puedes seguir añadiendo, quizás si tienes Facebook, Twitter, Pinterest, WhatsApp, pueden seguir ustedes añadiendo. Incluye lo que son íconos, tienen varios iconos. La biblioteca de iconos de Elementor tiene muchas de las redes sociales que actualmente nosotros conocemos. Además de agregar los iconos, pueden ustedes asignar un color en particular, por ejemplo, hemos haciendo un color verde, característico del icono de WhatsApp. Si no se asigna el color, va a estar en blanco y negro, así. Entonces, recomendamos también agregar el color. Ya para finalizar, recuerden «publicar» para guardar los cambios.

Vamos a agregar los comentarios. Realizamos la sección del encabezado, del Body y ahora vamos a hacer la sección de los comentarios. Vamos a añadir una nueva, ponemos «página» y colocamos «content 7», colocamos «crear plantilla». De igual manera, aquí vamos a colocar los comentarios, el widget que ya hemos colocado en los blogs anteriores se llama «post commets», copiamos la sección y lo pegamos aquí. ¿Cómo podemos agregar este «post comments»?, nos vamos aquí buscar widgets «post comments» y ¡ahí está!

Por defecto, nos muestra una alerta de «comments» está cerrado, está «closed»; sin embargo, nosotros lo vamos a visualizar directamente en la entrada, como plantilla no lo podemos modificar. Recuerden que también tenemos un video en particular, para poder cambiar algunos detalles o diseños dentro de este widget de comentarios. Antes de publicar, hemos agregado un espaciador de 40 píxeles, para que no se cruce, un poco, con el el «footer», ponemos publicar.

Entonces, ahora nos vamos a la opción de entradas, dentro de entradas, nosotros vamos a crear una nueva página de Blog. Por defecto, se nos apertura una ventana dentro de WordPress. Antes de pasar a Elementor, vamos a crear el título. Recuerden que aquí tenemos el título «formulario con Elementor, Google Sheets, ElementsKit y Google Cloud», copiamos y aquí vamos a pegar. Vamos a retirar el emoji y, dentro de categorías, vamos a asignar, en este caso, «diseño web». Una vez aquí, vamos a colocar «editar con Elementor», ponemos salir.

Algo similar que los anteriores Blogs, como ya tenemos también una plantilla, un «template» de las entradas, aquí tenemos uno listo, vamos a copiar la primera sección, pegamos aquí, lo mismo con la segunda, tercera, cuarta y quinta sección, las cuales, corresponden, en este caso, al encabezado, tercero corresponde al «body», el cuarto corresponde a los comentarios, ¡ahí están los comentarios!, sexto el «footer». Vamos a ver el «footer» y ¡ahí está!

Entonces, para que nosotros integremos mediante «short code» esas plantillas, tenemos aquí la cabecera del «content 7», recuerden la cabecera, el «body» y el «comments», copiamos la cabecera el código de ID del «short code» y lo pegamos aquí, la segunda sección, pegamos y ponemos aplicar. Vamos con la siguiente que es el «body», copiamos el código del «short code» y lo pegamos aquí, colocamos «aplicar». Finalmente, el «comment», «short code» y colocamos «aplicar». Recuerden que, en algunos casos, el «short code» no se ve en vista previa, para ello nosotros ponemos «publicar» y actualizamos la página.

Integrar un formulario con Elementor y Google Sheets.
Fuente: Propia, mediante software Elementor.

Resultados Finales

Ya para finalizar, nosotros vamos a ir enlaces permanentes: «ajustes», «enlaces permanentes» y aquí, «enlaces permanentes», recuerden, le cambiamos a «/blog/%postname%/», estructura personalizada y lo cambiamos. Una vez cambiado aquí, nosotros vamos a poder visualizar nuestra URL adecuadamente, de la siguiente manera.

Ya como resultados finales, tenemos lo siguiente: vamos a «blog», dentro de Blog vamos a buscar nuestro última publicación de formulario, ¡aquí está». Ponemos formulario y nosotros vamos a visualizar la URL que está dentro de Blog dado este cambio que hemos hecho, dentro del enlace permanente y, seguidamente, el nombre de la URL de este blog, ¡ahí está! ¡Listo, gracias amigos de Marieú Technology Corporation!