Si quieres crea una página de blog con Elementor, tienes un par de opciones sólidas según tu presupuesto. Una página de blog dedicada mantiene sus publicaciones organizadas, ayuda a Google a indexar su contenido y brinda a los visitantes una razón para permanecer por más tiempo.
No es necesario que escribas ningún código para esto. Con el Widget de publicaciones de Elementor (Pro) o un complemento gratuito como Complementos maestros para Elementor, puedes crear una costumbre Página del blog de Elementor eso coincide con tu marca.
Este tutorial cubre dos métodos para crea una página de blog en WordPress con Elementor:
- Método 1: Usando el widget Elementor Pro Posts (pago)
- Método 2: Usando el widget Master Addons Blog (gratis)
Hay una tabla comparativa al final para que puedas ver exactamente lo que ofrece cada opción. También he grabado un tutorial en vídeo si lo prefieres.
Por qué su sitio de WordPress necesita una página de blog
La página de tu blog es el único lugar donde aparecen todas tus publicaciones. Los visitantes pueden buscar artículos, tutoriales, noticias y actualizaciones desde una URL. Para los propietarios de empresas, genera tráfico de búsqueda orgánico. Para los blogueros, es básicamente el objetivo del sitio.
Un bien Diseño de página de blogs de WordPress hace algunas cosas por ti:
- Tráfico SEO «google indexa contenido nuevo más rápido cuando se organiza en una página de blog adecuada.
- Sesiones más largas -an diseño del blog de Elementor con miniaturas, extractos y categorías, los visitantes hacen clic en más publicaciones en lugar de rebotar.
- Autoridad «La publicación regular sobre un tema lo convierte en el recurso de referencia en su nicho.
- Conversiones «Las publicaciones del blog guían a los lectores hacia sus productos, servicios o lista de correo electrónico.
Fuera de la caja, WordPress simplemente apila publicaciones en orden cronológico inverso. No hay mucho que mirar. Con la derecha Widget de blog de Elementor, puedes cambiar eso por cuadrículas, diseños de tarjetas, carruseles y más, todo sin código.
Antes de comenzar: requisitos previos
Necesitarás algunas cosas listas antes de comenzar:
- WordPress instalado en tu hosting (cualquier versión reciente funciona)
- Complemento Elementor instalado y activado (versión gratuita de WordPress.org)
- Se publicaron algunas publicaciones de blog - Necesitas al menos 3-6 publicaciones para que la página del blog tenga contenido para mostrar. Agregue imágenes destacadas a cada publicación para obtener el mejor resultado visual.
- Un conjunto de páginas de inicio estáticas - Încetează Configuración > Lectura y seleccione “Una página estática” Configure su página de inicio y cree una página separada para las publicaciones.
Para el Método 1, lo necesitarás Elementor Pro. Para el Método 2, solo necesitas el gratis Complemento de complementos maestros, que funciona con la versión gratuita de Elementor.
Tutorial en vídeo: cree una página de blog con Elementor
Si lo tuyo es el vídeo, este tutorial muestra cómo hacerlo crea una página de blog en Elementor usando el widget Master Addons Blog de principio a fin.
Bien, pasemos a los dos métodos.
Método 1: cree una página de blog con el widget Elementor Pro Posts
Si tienes Elementor Pro, ya tienes el Widget de publicaciones (a veces aparece como el elemento “Publicaciones” en el panel). Es la propia herramienta de Elementor para mostrar publicaciones de blog en cualquier página.
Paso 1: agregue el widget de publicaciones a su página
Abra la página donde desea que aparezca su blog en el editor Elementor. En el panel de widgets de la izquierda, busque “Publicaciones” y arrástrelo Widget de publicaciones en la sección de tu página.
El widget introducirá inmediatamente sus publicaciones publicadas y las mostrará en un diseño predeterminado.
Paso 2: elige tu diseño
Elementor Pro te ofrece tres aspectos de diseño para elegir:
- Clásico -- El aspecto predeterminado. Muestra publicaciones en una cuadrícula limpia con imágenes, títulos, metadatos y extractos destacados.
- Tarjetas -gnant Agrega un cuadro estilo tarjeta alrededor de cada poste con un sutil efecto de sombra.
- Contenido completo -- Muestra el contenido completo de la publicación en lugar de solo un extracto.
De forma predeterminada, el aspecto Clásico muestra una cuadrícula de 3 columnas con 6 publicaciones. Puede ajustar esto de 1 a 6 columnas y establecer cualquier número para publicaciones por página.
Paso 3: configure los ajustes de diseño
El Pestaña Diseño es donde marcas cómo estás Página del blog de Elementor realmente parece:
- Posición de la imagen «Coloque la imagen destacada arriba, izquierda, derecha u ocultela por completo.
- Tamaño y proporción de la imagen «Elija las dimensiones de miniatura adecuadas para su diseño.
- Etiqueta de título --Establezca la etiqueta HTML (H2, H3, H4, etc.) para los títulos de las publicaciones. Esto es importante para el SEO.
- Longitud del extracto -- Controla cuántas palabras del extracto de la publicación se muestran.
- Metadatos -- Elija qué metainformación mostrar: nombre del autor, fecha, hora y comentarios.
- Leer más texto -personaliza el texto del botón “Leer más”.
Paso 4: configure la consulta y la paginación
El Pestaña Contenido tiene dos secciones importantes: Consulta y Paginación.
Consulta le permite controlar qué publicaciones aparecen en la página de su blog. Puede filtrar por tipo de publicación, categorías, etiquetas o ID de publicación específicos. También puedes incluir o excluir ciertas publicaciones de los resultados.
Paginación controla cómo los usuarios navegan por varias páginas de publicaciones. Hay tres opciones disponibles:
- Números (1, 2, 3...)
- Flechas anterior/siguiente
- Números + Anterior/Siguiente combinados
Paso 5: diseñe el diseño de su blog
El Pestaña Estilo tiene cuatro secciones para ajustes visuales:
- Diseño -- Ajustar el espacio entre columnas, filas y alineación de contenido.
- Caja -configure el estilo del borde, el radio del borde, el relleno y la sombra del cuadro para cada tarjeta postal.
- Imagen --Defina el radio del borde y el espaciado para las imágenes destacadas.
- Contenido - Cambie la tipografía, los colores y el espaciado de los títulos de publicaciones, metadatos, extractos y el enlace Leer más.
Consejo: Utilice espacios y tipografía constantes en la página de su blog. Establezca el mismo radio de borde para imágenes y tarjetas para crear una apariencia pulida. Haga coincidir el color del enlace Leer más con el color de acento de su marca.
Ese es el enfoque Elementor Pro. Funciona bien para lo básico Cuadrícula de blogs de Elementor diseños, pero encontrarás límites bastante rápido: sin carrusel, sin efectos flotantes, solo 3 máscaras.
Si desea más opciones sin pagar por Pro, vale la pena echarle un vistazo al siguiente método.
Método 2: cree una página de blog con Elementor usando complementos maestros (gratis)
El Widget de blog de complementos maestros (etiquetado como “Blog MA” en el editor) es gratuito y incluye más opciones de diseño que el widget Elementor Pro Posts. 21 variaciones de diseño, animaciones flotantes, un carrusel incorporado, filtrado avanzado. Es uno de los más completos Widgets de blog de Elementor ahí fuera.
Paso 1: instale y active complementos maestros
Agarrar Complementos maestros para Elementor desde WordPress.org (gratis). Después de la activación, verá aparecer el elemento “Blog MA” en su panel de widgets Elementor.
Paso 2: agregue el widget de blog y elija un diseño
Arrastra el Blog de maestría widget en tu página. De forma predeterminada, muestra un diseño de blog clásico en una cuadrícula de 4 columnas.
Aquí es donde se pone interesante. Obtienes tres tipos de diseño:
- Cuadrícula - Diseño de cuadrícula estándar para páginas de blog limpias y organizadas
- Tarjeta -- Diseño de tarjeta elevada con sombras y bordes
- Lista - Diseño de lista horizontal, ideal para blogs estilo noticias o revistas
Cada tipo de diseño tiene 7 variaciones de estilo únicas, dándote un total de 21 diseños de páginas de blog diferentes (más soporte de mampostería). Puedes cambiar entre ellos con un solo clic.
Las 7 variaciones de estilo incluyen: Predeterminado, Superposición de contenido, Meta superior izquierdo, Tarjetas de alineación derecha, Tarjetas de alineación central, Alineación central con fondo degradado y Tarjeta de encabezado. Mézclalos con diseños de cuadrícula, tarjeta o lista para crear un verdadero página de blog personalizada en Elementor.
Paso 3: configurar las opciones de visualización
Obtienes un control granular sobre cómo aparecen las publicaciones del blog:
- Orden postal -angoliza por fecha, título, fecha modificada o aleatoria.
- Columnas -ñanset 1 a 6 columnas.
- Icono de formato de publicación --Mostrar iconos para diferentes formatos de publicación (vídeo, audio, galería).
- Metaseparador -gnójate el carácter que separa los metaelementos (pipe, punto, guión).
- Título Etiqueta HTML «Elija la etiqueta de encabezado para los títulos de las publicaciones (H2, H3, H4, etc.).
- Tipo de publicación - Mostrar publicaciones periódicas, tipos de publicaciones personalizadas o páginas.
- Espaciado de filas y columnas -afinar los espacios entre los postes.
- Alineación de contenidos -Izquierda, centro o derecha, alinee el contenido de su publicación.
- Publicaciones por página -ñame cuántas publicaciones mostrar por página.
- Paginación -- Habilitar o deshabilitar la navegación por la página.
Paso 4: configure las opciones de miniaturas
Aquí es donde Master Addons se adelanta a Elementor Pro. El panel de miniaturas te permite:
- Habilite o deshabilite las imágenes destacadas
- Establezca una altura personalizada para miniaturas
- Elija la posición en miniatura (arriba, izquierda, derecha)
- Elegir de 26 efectos de animación flotante (Colgar, pulsar, empujar, hacer estallar, flotar, hundirse y más)
- Aplicar 16 efectos de color (Enrojecimiento, Sepia, Escala de Grises, Brillo, etc.)
- Seleccionar de 5 formas de miniaturas (Predeterminado, redondeado, circular, bordeado de gradiente y más)
En la captura de pantalla de arriba, tengo aplicada la animación flotante “Hang”, el efecto de color “Flushing” y la forma de miniatura “Gradient Bordeed”. Pequeños detalles como estos son los que separan una página de blog de aspecto genérico de una que en realidad parece como si alguien hubiera diseñado tu Página del blog de Elementor a propósito.
Paso 5: configurar los metadatos de la publicación
Bajo Configuración de publicaciones, controlas qué metainformación aparece con cada publicación de blog:
- Título de la publicación (mostrar/ocultar)
- Imagen de avatar del autor
- Nombre del autor
- Fecha de publicación
- Categorías
- Recuento de comentarios
- Longitud del extracto (establezca el recuento exacto de palabras)
- Leer más texto (totalmente personalizable)
- Mostrar contenido completo versus extracto
Paso 6: utilice filtrado avanzado
El Ajustes avanzados el panel es donde se limita exactamente qué publicaciones aparecen:
- Excluir publicaciones específicas «Eliminar ciertas publicaciones por ID de la página del blog.
- Filtrar por etiqueta -- Mostrar únicamente publicaciones con determinadas etiquetas.
- Filtrar por autor -- Mostrar publicaciones de un autor específico (útil para blogs de varios autores).
- Compensación «Omita las primeras N publicaciones. Práctico cuando has presentado una publicación por separado.
- Abrir en nueva pestaña «Haga que los enlaces de publicaciones de blog se abran en una nueva pestaña del navegador.
Paso 7: habilite el carrusel de publicaciones del blog
Probablemente hayas visto sitios que muestran sus últimas publicaciones en un carrusel de desplazamiento en la página de inicio. El widget Master Addons Blog tiene esto incorporado. Alternar el Carrusel del blog de Elementor encendido y configúrelo:
- Reproducción automática «las publicaciones se desplazan automáticamente a la velocidad que establezca.
- Estilo de navegación -- Elige entre puntos o flechas.
- Posición de flecha -- Colocar flechas de navegación dentro o fuera del carrusel.
Combine el carrusel con Configuración avanzada para filtrar publicaciones específicas (como etiquetas “destacadas” o “elegidas por los editores”) y colóquelo en cualquier lugar de su sitio, no solo en la página del blog.
Importante: Asegúrate de haberlo habilitado “Cargar soporte Font Awesome 4” de Elementor > Configuración. De lo contrario, los iconos de flechas en el carrusel no se mostrarán correctamente.
Paso 8: diseña tu página de blog
El Pestaña Estilo cubre todos los ajustes visuales:
- Miniatura -contraposición de color, filtros CSS (brillo, contraste, saturación)
- Título y meta -tipografía, color del texto y color flotante
- Contenido -color de texto, color de fondo, tipografía, sombra de cuadro, relleno y margen de contenido
- Caja -Color de fondo, borde y sombra de caja para toda la tarjeta postal
- Paginación -- Tipografía, color del estado normal, color del estado de vuelo estacionario, borde y relleno
Entre estos controles, puedes hacer coincidir tu diseño del blog de Elementor a la marca de su sitio hasta el píxel. Colores, fuentes, espaciado, sombras, todos ajustables desde el panel Elementor.
Widget de publicaciones de Elementor Pro frente al widget de blog de complementos maestros
Aquí está todo dispuesto uno al lado del otro para que puedas ver cuál Widget de blog de Elementor se adapta a tu situación.
| Característica | Widget de publicaciones de Elementor Pro | Widget de blog de complementos maestros (gratis) |
|---|---|---|
| Precio | Requiere Elementor Pro ($59/año+) | Gratis |
| Variaciones de diseño | 3 máscaras (Clásico, Tarjetas, Contenido completo) | 21 variaciones (7 estilos x 3 tipos de diseño) |
| Tipos de diseño | Sólo cuadrícula | Cuadrícula, Tarjeta y Lista |
| Albañilería | Sí | Sí |
| Efectos flotantes en miniatura | Ninguno | 26 animaciones flotantes + 16 efectos de color |
| Formas de miniaturas | Sólo radio fronterizo | 5 formas (predeterminado, redondeado, circular, con borde degradado, etc.) |
| Opciones de metadatos | Nombre del autor, fecha, hora, comentarios | Avatar del autor, nombre del autor, fecha, categorías, etiquetas, recuento de comentarios |
| Filtrado de consultas | Tipo de publicación, Incluir/Excluir | Tipo de publicación, Filtrar por etiqueta, Filtrar por autor, Exclusión de publicación, Compensación |
| Paginación | 3 tipos (Números, Anterior/Siguiente, Combinado) | Números + Anterior/Siguiente con texto personalizable |
| Carrusel | No disponible | Carrusel completo con reproducción automática, control de velocidad, flechas o puntos |
| Abrir en nueva pestaña | No | Sí |
| Iconos de formato de publicación | No | Sí |
Para páginas de blog básicas, el widget Elementor Pro Posts hace el trabajo. Si necesita efectos flotantes, un carrusel o simplemente más diseño de página de blog de WordPress variedad, el widget Master Addons Blog cubre todo eso de forma gratuita.
Consejos para un mejor diseño de blog de Elementor
Algunas cosas que he aprendido al crear páginas de blogs para docenas de sitios de WordPress:
1. Utilice siempre imágenes destacadas
Una publicación sin una imagen destacada aparece como un rectángulo en blanco en la cuadrícula de su blog. Parece roto. Establezca una imagen destacada para cada publicación, incluso si se trata de un gráfico de marca simple. Si el tamaño de los archivos es una preocupación, aquí está nuestra guía sobre el los mejores complementos de optimización de imágenes de WordPress.
2. Mantenga breves los extractos
Extractos largos abarrotan la cuadrícula y empujan las publicaciones debajo de la página. 15-25 palabras son suficientes para decirles a los lectores lo que cubre la publicación. El objetivo es hacer que hagan clic, no leerlo todo desde la página del blog.
3. Utilice recuentos de columnas consistentes
Tres columnas funcionan mejor para la mayoría de las páginas de blogs. Dos columnas son buenas para sitios con mucho contenido y extractos más largos. Cuatro columnas funcionan cuando tienes muchas publicaciones breves con imágenes destacadas potentes. Y una vez que los lectores hacen clic en un artículo completo, ayúdelos a permanecer allí « el el mejor complemento de índice para WordPress agrega enlaces de salto para que las publicaciones largas sean fáciles de hojear.
4. Establezca etiquetas de título adecuadas
El título de la página de su blog debe ser H1. Los títulos de publicaciones dentro de la cuadrícula del blog deben ser H2 o H3. Esto ayuda a los motores de búsqueda a comprender la estructura de su página. Para obtener más consejos de SEO, lea nuestro mejores prácticas de SEO para Elementor guía.
5. Agregar categorías a los metadatos
Mostrar categorías en los metadatos de su publicación ayuda a los visitantes a encontrar contenido relacionado. El widget Master Addons Blog le permite mostrar categorías justo debajo de cada título de publicación.
6. Prueba en móvil
Obtenga una vista previa de la página de su blog en dispositivos móviles y tabletas antes de publicarla. Una cuadrícula de 3 columnas se acumula en 1 columna en pantallas pequeñas, lo cual está bien, pero a veces el espaciado o los tamaños de fuente desaparecen después del colapso. Desplácese rápidamente por su teléfono. Para obtener más control, consulte nuestra guía en diseño responsivo con puntos de interrupción Elementor.
7. Utilice un carrusel en su página de inicio
Pon un carrusel del blog de Elementor en su página de inicio además de la página del blog en sí. De esa manera, cada visitante ve sus últimas publicaciones justo cuando aterrizan, incluso si nunca hacen clic en “Blog” en el navegador. El widget Master Addons Blog tiene el carrusel incorporado, por lo que tarda unos 30 segundos en configurarse.
Preguntas frecuentes
¿puedo crear una página de blog con la versión gratuita de Elementor?
Sí. Si bien Elementor gratuito no incluye un widget de Publicaciones, puede utilizar Widget de blog de complementos maestros que funciona con la versión gratuita de Elementor. Le ofrece 21 variaciones de diseño, efectos de desplazamiento, soporte para carrusel y filtrado avanzado sin costo alguno.
¿cómo agrego una página de blog a la navegación de mi sitio web Elementor?
Cree una nueva página en WordPress (llámela “Blog”), diseñe con Elementor usando el widget Publicaciones o el widget Blog de complementos maestros, luego agregue esa página a su menú de navegación a través de Apariencia > Menús. También puedes usar el Creador de temas de complementos maestros para crear un encabezado personalizado con su navegación.
¿Cuántas publicaciones de blog debo mostrar por página?
De 6 a 12 publicaciones por página es el punto óptimo para la mayoría de los sitios. Menos de 6 pueden hacer que la página se sienta vacía, mientras que más de 12 aumentan el tiempo de carga y abruman a los visitantes. Habilite la paginación para que los lectores puedan explorar publicaciones más antiguas.
¿puedo mostrar publicaciones de blog de una categoría específica en mi página de blog de Elementor?
Sí. Tanto Elementor Pro como Master Addons admiten el filtrado de publicaciones por categoría. En Master Addons, utilice el panel Configuración avanzada para filtrar por etiqueta, autor o excluir publicaciones específicas. Esto le permite crear varias páginas de blog para diferentes temas.
¿cuál es el mejor diseño de blog de Elementor para SEO?
Un diseño de cuadrícula con imágenes destacadas, títulos de publicaciones que utilizan etiquetas H2/H3, extractos breves, metadatos de categorías y paginación adecuada es lo mejor para SEO. Asegúrese de que la página de su blog se cargue rápidamente optimizando imágenes y usando a tema Elementor ligero.
Pensamientos finales
Construyendo un página de blog personalizada en Elementor tarda entre 10 y 15 minutos con cualquiera de los métodos. El widget Elementor Pro Posts maneja bien los conceptos básicos si ya tiene una licencia Pro.
Para obtener más opciones de diseño, el Widget de blog de complementos maestros le ofrece 21 variaciones de diseño, 26 animaciones flotantes, 16 efectos de color, un carrusel y filtrado posterior avanzado. Eso es suficiente para crea una página de blog con Elementor parece que contrataste a un diseñador.
También funciona con la versión gratuita de Elementor. Descargar complementos maestros y pruébalo.
Si algo no funciona correctamente durante la configuración, envíenos un mensaje y lo solucionaremos.
Lectura relacionada:
