Plantillas de blog de Elementor: 10 diseños de páginas de blog y 5 plantillas de publicación única

Diseñar un blog en Elementor generalmente significa dos trabajos: la página que enumera sus publicaciones y el diseño que utiliza cada publicación. Esta colección cubre ambos. Hay 10 plantillas de blog de Elementor para la lista de publicaciones y 5 plantillas de publicaciones individuales para los artículos mismos, y cada una viene como un archivo JSON que puede descargar, una demostración en vivo en la que puede hacer clic y una breve guía para configurar. él.

Aquí todo se puede descargar gratis. Los diseños de las páginas del blog se colocan en cualquier página de Elementor. Los diseños de una sola publicación necesitan un creador de temas para aplicarlos a sus publicaciones, y la sección de una sola publicación a continuación muestra cómo hacerlo, incluso con un creador de temas que ya utiliza. Si también desea páginas completas para el resto de su sitio, el Biblioteca de plantillas de páginas Elementor tiene más de 200 de ellos en el mismo formato.

Lo que obtienes en cada descarga gratuita

Cada plantilla se descarga como un pequeño archivo zip. Descomprima primero: Elementor necesita .json archivar dentro de él. Encontrarás tres cosas:

• a preview carpeta con dos capturas de pantalla del diseño, desktop-1440.webp y mobile-390.webp, para que puedas comprobarlo antes de importar cualquier cosa
• la plantilla en sí, a .json archivo que lleva el nombre del diseño (ma-blog-mosaic-masonry.json en el ejemplo anterior), que es el archivo que importa a su biblioteca de plantillas Elementor
• a readme.txt eso enumera lo que necesita la plantilla y recorre una importación básica, además de cualquier configuración que se cambie posteriormente.

Todo el estilo de una plantilla se encuentra en un widget HTML en la parte superior del diseño, con el alcance de esa plantilla. No hay colores de tema ni fuentes globales que transferir ni imágenes grabadas en el archivo, por lo que el diseño se ve igual en su sitio que en la demostración. Tus propias publicaciones, imágenes destacadas y categorías completan el contenido.

Lo que necesitas antes de importar

Los diseños de las páginas del blog se basan en los complementos maestros Widget de publicaciones de blog, que es lo que atrae sus últimas publicaciones a la página. Los diseños de publicaciones individuales utilizan los complementos maestros Extensión de etiquetas dinámicas para completar el titular, la imagen destacada, el contenido, el autor y la fecha de cualquier publicación que lea un visitante.

También necesitas un lugar para ejecutar WordPress. Si está configurando un nuevo blog y aún no tiene alojamiento, Hostinger es a lo que señalamos a la gente para un primer sitio de WordPress.

10 plantillas de páginas de blog de Elementor gratuitas para descargar

Estos son diseños para la página que enumera sus publicaciones. Cada uno utiliza un diseño de publicaciones de blog diferente y una estructura de página diferente, desde una lista de lectura de una columna hasta una pared fotográfica de mampostería.

1. Señal: cuadrícula de revista con una publicación destacada

Una portada de revista. Su publicación más reciente se publica como un banner de ancho completo con el titular colocado sobre la foto, y los siguientes seis se encuentran en una cuadrícula de tarjetas de tres columnas debajo. Se adapta a sitios de noticias, revistas y cualquier blog que se publique con frecuencia.

La cuadrícula se salta la primera publicación, por lo que la historia destacada nunca aparece dos veces. Si cambia cuántas publicaciones muestra el banner, cambie el desplazamiento de la cuadrícula para que coincida.

2. Columna: lista editorial de una columna

Una lista de lectura para escritores. Cada publicación tiene una pequeña miniatura a la izquierda, la fecha y la categoría encima de un gran titular serif y un soporte de dos líneas primero. La página tiene 820px de ancho, lo que mantiene las líneas en una longitud cómoda. Funciona bien para boletines, ensayos y blogs personales.

3. Mosaico: muro fotográfico de mampostería

Una pared de mampostería de tres columnas para blogs basados en imágenes. Las fotos permanecen en escala de grises hasta que pasas el cursor, y cada titular se encuentra en una pequeña tarjeta blanca que se superpone a la imagen. Los blogs de comida, viajes y fotografía aprovechan al máximo.

La mampostería sólo se tambalea cuando las imágenes destacadas vienen en diferentes formas. Si cada foto es del mismo cultivo, la pared parece una cuadrícula normal.

4. Quiosco: centro de categorías con pestañas de filtro

Una cuadrícula de tarjetas con pestañas de categorías en la parte superior, para que los lectores puedan limitar la página a un tema sin salir de ella. Cada tarjeta lleva una insignia de fecha en la foto y una etiqueta de categoría debajo. Elija si publica sobre varios temas.

Las pestañas provienen de la configuración Filtro por categoría del widget, no de las categorías que utilizan sus publicaciones. Después de importar, abra el widget Publicaciones de blog, vaya a Configuración avanzada y elija sus propias categorías allí. Si lo deja vacío, obtendrá una única pestaña “Todos”.

5. Marquesina: carrusel destacado

Un banner giratorio de cuatro publicaciones destacadas en la parte superior, con reproducción automática y flechas, luego dos columnas de tarjetas cuyo texto se eleva sobre la imagen. Funciona como una página de blog o como la sección de publicaciones de una página de inicio.

Hay un segundo widget HTML de una línea directamente encima del carrusel. Mantiene el resto de la página dentro de su contenedor, así que déjela en su lugar.

6. Hoja ancha: blog clásico con barra lateral

El diseño que la mayoría de la gente imagina cuando dice “página de blog”. Una fuente de publicaciones horizontales corre hacia la izquierda y una barra lateral pegajosa a la derecha contiene un cuadro de búsqueda, publicaciones recientes, enlaces de temas y una tarjeta de suscripción. El cuadro de búsqueda es el widget de búsqueda de complementos maestros.

Los enlaces de temas son marcadores de posición. Apunte cada uno a una de sus páginas de categoría y apunte el botón de suscripción a su formulario de registro.

7. Medianoche: blog de cartas oscuras

Un diseño de tarjeta oscuro de dos columnas con tarjetas estilo vidrio, un suave brillo detrás del encabezado y un color de acento menta. Fue creado para blogs de productos, desarrolladores y agencias, y para registros de cambios que desean parecer parte del producto.

La página establece su propio fondo oscuro, por lo que funciona incluso en un tema claro. Si su tema agrega un encabezado claro y un pie de página a su alrededor, establezca el diseño de la página en Elementor Canvas.

8. Libro mayor: lista de bases de conocimientos

Un diseño compacto de centro de ayuda: una barra de búsqueda, pestañas de temas subrayadas y luego una fila corta por artículo con un botón Leer a la derecha. Úselo para documentación, notas de la versión o una biblioteca de recursos, donde los lectores escanean una lista de títulos para encontrar el que necesitan.

Al igual que Kiosk, las pestañas provienen de Filtrar por categoría, así que elija sus propias categorías después de importarlas.

9. Frost: filas de funciones de ancho completo

Una publicación por fila. Cada uno tiene una imagen ancha de 430 px con una tarjeta de título blanca levantada sobre su esquina inferior izquierda. Le da a cada historia un espacio de ancho completo, que se adapta a estudios, portafolios y escritos extensos, donde se publica con menos frecuencia y cada pieza merece el espacio.

10. Sencillo: mínimo de dos columnas

Un índice tranquilo y centrado de dos columnas sobre un fondo de papel suave. Cada tarjeta muestra una foto 4:3, una fecha y un titular serif, sin bordes, botones ni etiquetas de categoría. Es el que debe elegir cuando su tema ya es mínimo y el blog debe coincidir con él.

Cómo crear una página de blog con una plantilla Elementor

Las plantillas de la página del blog funcionan en cualquier página de Elementor. Los pasos son los mismos para los diez.

1. Descarga el zip y descomprímelo en tu computadora. Elementor importa el .json archivo; un .zip solo importa cuando la opción Habilitar cargas de archivos sin filtrar está activada en Elementor > Configuración > Avanzado.
2. En su panel, vaya a Plantillas > Plantillas guardadas y haga clic en Importar plantillas.
3. Elige el .json archive y haga clic en Importar ahora. La plantilla aparece en su lista de plantillas guardadas.
4. Crea una nueva página, llámala Blog (o lo que quieras) y ábrela con Elementor.
5. Haga clic en el icono de la carpeta, abra la pestaña Mis plantillas y haga clic en Insertar junto a la plantilla.
6. Publica la página y agrégala a tu menú.

Si no ha importado una plantilla de Elementor antes, el guía para importar plantillas de Elementor pasea por cada una de estas pantallas. Una vez que hayas hecho tuyo el diseño, podrás hacerlo guarde la página como plantilla y exporte como JSON reutilizarlo en otro sitio.

No lo configure como la “Página de publicaciones” de WordPress

WordPress tiene una opción de página Publicaciones en Configuración > Lectura. Déjelo vacío para la página que acaba de crear. Cuando una página se establece como página de publicaciones, WordPress la reemplaza con el archivo propio de su tema y su diseño Elementor nunca se muestra. Publique la plantilla como una página normal y vinculela desde su menú. Nuestro tutorial sobre cómo hacerlo crea una página de blog con Elementor explica por qué con más detalle.

Configuraciones que vale la pena verificar después de importar

• Publicaciones por página y orden en vivo en las Opciones de visualización del widget de Publicaciones de blog. Cada plantilla viene con entre 4 y 10 publicaciones por widget.
• Kiosk y Ledger necesitan sus propias categorías en Filtrar por categoría antes de que sus pestañas tengan sentido.
• El número de columnas debe permanecer en 1 columna en los diseños de la lista (columna, hoja ancha, libro mayor y escarcha), o la lista se convierte en una cuadrícula.

Activando la paginación

No verá números de página debajo de las publicaciones en nuestras demostraciones en vivo. Desactivamos la paginación allí a propósito, para mantener cada demostración en una pantalla de publicaciones. En su propio sitio puede activarlo con unos pocos clics y diseñarlo para que coincida con la plantilla que eligió.

1. Haga clic en el widget Publicaciones de blog y permanezca en la pestaña Contenido.
2. En Opciones de visualización, cambie la paginación a Sí. Publicaciones por página y luego establece cuántas publicaciones aparecen en cada página.
3. Cambie el texto de la página siguiente y el texto de la página anterior si desea etiquetas diferentes y elija una alineación.

Para cambiar el aspecto de los números de página, abra la pestaña Estilo y expanda la sección Paginación. Obtienes tipografía, colores separados para la página normal, flotante y activa, además de borde, radio, relleno y espaciado. En la captura de pantalla a continuación, la página activa usa el acento óxido de Signal y las demás son blancas con un borde delgado, por lo que los números se mezclan con las tarjetas.

En Signal y Marquee, active la paginación solo para el segundo widget de publicaciones de blog, la cuadrícula debajo de las publicaciones destacadas. El banner destacado y el carrusel en la parte superior deben permanecer iguales en cada página, así que déjelos desactivados.

Hacer que las páginas de tu categoría coincidan

Una plantilla de página de blog diseña la página en la que se encuentra. Sus archivos de categoría, etiqueta y autor son páginas separadas y mantienen el diseño de archivo de su tema a menos que lo reemplace. Para darles el mismo aspecto, cree una plantilla de archivo en un creador de temas, inserte el mismo diseño y configure la fuente del widget de publicaciones de blog en la consulta actual para que siga cualquier categoría que se esté viendo. El guía de plantillas de archivo cubre el lado del Creador de temas de complementos maestros.

5 plantillas de publicación única de Elementor gratuitas

Estos controlan lo que ve un lector cuando abre una de sus publicaciones. Cada campo está lleno de etiquetas dinámicas, por lo que una plantilla diseña cada artículo del sitio. Las demostraciones en vivo a continuación están llenas de un artículo de muestra para que pueda verlas con contenido real; la descarga contiene la versión dinámica que incluye tus propias publicaciones.

Debido a que los campos son Etiquetas dinámicas, que vienen con el complemento Master Addons gratuito, importar una plantilla lleva aproximadamente un minuto. No te preocupes si parece medio vacío inmediatamente después de la importación, con cuadros grises donde deben estar el titular, la imagen y el artículo (como la captura de pantalla de arriba). La plantilla no muestra nada hasta que tenga una publicación real para leer, por lo que necesita al menos una publicación publicada con un título, una imagen destacada y algo de contenido. Una vez que lo aplica en su creador de temas, cada publicación de su blog cambia automáticamente al nuevo diseño. Los pasos están en marcha Cómo crear una plantilla de publicación única en Elementor, justo después de los cinco diseños.

11. Folio: editorial clásica

El artículo de revista confiable. Una línea de categoría, un titular serif, un standfirst y una firma con la foto del autor se encuentran encima de una imagen amplia. A continuación viene un cuadro de contenido “En este artículo”, la publicación en una columna de lectura de 748 px, una tarjeta de autor y tres publicaciones relacionadas. El cuadro de contenido son los complementos maestros Widget de tabla de contenidos.

12. Inmersivo: héroe de sangrado completo

La imagen destacada llena la mayor parte de la pantalla con el titular, la categoría y la firma encima. Luego, el artículo se asienta sobre un panel blanco levantado sobre la foto, con botones para compartir que permanecen al lado del texto mientras te desplazas. Una banda de suscripción oscura y dos publicaciones relacionadas cierran la página. Úselo para artículos e historias con fotografías sólidas.

Los botones para compartir crean sus enlaces X, Facebook y LinkedIn desde la dirección de la página cuando se carga, y el cuarto botón copia el enlace. No se trata de ningún script de terceros.

13. Manual: tutorial de barra lateral adhesiva

Un diseño de documentación sin imagen destacada. Una insignia de categoría y una fecha “actualizada” se encuentran encima de un titular limpio, y un riel de contenido adhesivo a la izquierda resalta la sección que está leyendo. Los bloques de código, el código en línea y los cuadros de llamadas están diseñados para escritura técnica. La página termina con una fila de “¿Fue útil este artículo?” y una breve lista de qué leer a continuación.

14. Tranquilo: ensayo de texto primero

Sin imágenes en absoluto: un titular serif, un standfirst gris, una gorra y una columna de 660 px colocada en una cara serif. Las citas están centradas y en cursiva. Después del artículo hay una pequeña aprobación del autor, una tarjeta de suscripción y una lista de lecturas adicionales de solo texto. Se adapta a ensayos, artículos de opinión y boletines informativos que se encuentran en la web.

15. Archivo de casos: estudio de caso visual

Construido para agencias y estudios que publican sus trabajos como publicaciones. El titular se encuentra a la izquierda y una tarjeta informativa del proyecto a la derecha, seguida de una amplia imagen de portada, el artículo, una galería de tres columnas, un llamado a la acción y dos estudios de caso más.

La tarjeta informativa lee tres campos personalizados en cada publicación: client, year y service. La galería muestra las imágenes adjuntas a la publicación, es decir, las que se cargan desde el interior del editor de esa publicación. El lector me explica ambos.

Cómo crear una plantilla de publicación única en Elementor

Una única plantilla de publicación sólo tiene sentido dentro de un creador de temas. Colocadas en una página normal, las etiquetas dinámicas mostrarían el título de la página y una imagen vacía, porque una página no es una publicación. Un creador de temas es lo que le dice a WordPress que use su diseño cada vez que un visitante abre una publicación.

Con el creador de temas Master Addons

Así es como se construyeron y probaron las cinco plantillas. El tipo de plantilla única en los complementos maestros Creador de temas es parte de Complementos maestros Pro.

1. Importar el .json archivo en Plantillas > Plantillas guardadas, de la misma manera que una plantilla de página de blog.
2. Vaya a Complementos maestros > Creador de temas, haga clic en Agregar nuevo y elija Único como tipo de plantilla.
3. Edite la nueva plantilla con Elementor, abra el ícono de la carpeta, vaya a Mis plantillas e inserte el diseño.
4. Establezca la condición de visualización en Incluir > Singular > Publicar. Para utilizar un diseño solo para un tipo de contenido, como estudios de casos, elija esas publicaciones en la condición en lugar de todas las publicaciones.
5. Guarde y luego abra cualquier publicación en su sitio para verificarla.

El documentación de plantilla única muestra cada una de estas pantallas, y el Guía del creador de temas Elementor explica cómo encajan los otros tipos de plantillas (encabezado, pie de página, archivo y más).

Con Elementor Pro u otro creador de temas

Si ya utiliza Theme Builder de Elementor Pro u otro creador de temas que le permite diseñar el diseño de una sola publicación en Elementor, también puede usar estas plantillas allí. Cree una nueva plantilla de publicación única en su creador, inserte el diseño de Mis plantillas y configúrela para aplicarla a sus publicaciones.

Mantenga los complementos maestros instalados y activos. Los campos de titular, imagen, contenido y autor provienen de los complementos maestros Etiquetas dinámicas, y el cuadro de contenido y las publicaciones relacionadas provienen de los widgets de Master Addons. Sin el complemento, esas partes estarían vacías. Probamos las plantillas en Master Addons Theme Builder; Si algo desaparece en otro generador, las notas de lectura son el primer lugar para comprobarlo.

Dos detalles para dejar en su lugar

• El widget del cuerpo del artículo en Folio, Immersive, Manual, Quiet y Casefile incluye una clase CSS llamada entry-content. El widget de Tabla de contenido busca encabezados dentro de ese elemento, por lo que al eliminar la clase se vacía el cuadro de contenido.
• El widget HTML en la parte superior de cada plantilla contiene la hoja de estilo, y en Folio y Manual un script breve que llena la lista de contenidos si el widget aún no lo ha hecho. Edite los estilos allí, pero no elimine el widget.

Personalización de colores y fuentes

Cada plantilla mantiene sus colores en un puñado de variables CSS en la parte superior de su hoja de estilo: tinta para encabezados, cuerpo para texto de párrafo, silenciado para fechas y acento para enlaces y etiquetas. Abra el widget HTML, cambie esos valores y seguirá todo el diseño. Las fuentes están configuradas en la misma hoja de estilo, por lo que cambiar Georgia por su marca serif es un cambio de una línea.

Si prefiere trabajar sección por sección, el mismo enfoque pasa por nuestro plantillas de sección Elementor gratuitas, que combinan bien con estos diseños de blogs cuando estás construyendo el resto del sitio.

Solución de problemas

“Contenido no válido en el archivo” al importar

Está cargando el zip en sí o un archivo que no es una exportación de Elementor. Descomprima la descarga e importe el .json archivo.

La página del blog está vacía

El widget Blog Posts necesita publicaciones publicadas con imágenes destacadas. En Kiosk y Ledger, una cuadrícula vacía generalmente significa Filtrar por categoría y aún apunta a categorías que no existen en su sitio. Abra el widget y elija el suyo propio.

El diseño se ve diferente al de la demostración

Su tema puede ser agregar su propio encabezado, pie de página o ancho de página alrededor de la plantilla. Establezca el diseño de la página en Elementor Canvas o Elementor Full Width en la configuración de la página.

La plantilla de publicación única no se muestra en mis publicaciones

Verifique tres cosas en su creador de temas. El tipo de plantilla debe ser único, la condición de visualización debe incluir sus publicaciones y solo una plantilla única debe coincidir con las mismas publicaciones. En Master Addons Theme Builder, cuando dos plantillas activas coinciden, gana la más nueva. Borrar su complemento de caché después de guardarlo también ayuda.

El carrusel se derrumba dentro de pestañas o un acordeón

Los deslizadores miden su ancho cuando se carga la página. Si mueve el carrusel de Marquee a una pestaña oculta o al panel de acordeón, configure Observer en Sí en su configuración de carrusel.

Preguntas frecuentes

Elija un diseño y cree su blog

Comience con la plantilla de blog de Elementor que coincida con la forma en que publica: Señal o Marquee si publica con frecuencia y desea una página principal, Columna o Silencioso si las palabras son más importantes, Mosaico o Escarcha si las fotos lo hacen, y Libro mayor o Manual para documentación. Descargue el JSON, impórtelo y apúntelo a sus propias publicaciones.

Cuando el blog esté terminado, los mismos pasos de importación funcionan para cada dos páginas de su sitio, desde la página de inicio hasta el formulario de contacto.

Los enlaces “Obtener alojamiento” de esta publicación son enlaces de referencia. Si compra alojamiento a través de uno, podemos ganar una comisión sin costo adicional para usted.