Hola, hoy vamos a hablar de cómo diseñar una portada de blog personalizada. Con esto me refiero a la página donde se muestran todas las entradas de un blog, normalmente la url /blog.
Como sabéis, Elementor Pro dispone del widget «Posts», que te permite añadir un listado de entradas con dos diseños predefinidos: classic y cards. A parte de esto, tiene una serie de preferencias para modificar el diseño a tu medida.
Sin embargo, no tenemos toda la potencia del editor visual para poder generar estos layouts con total libertad, estamos limitados por esas opciones de personalización.
Este problema se puede resolver con el plugin gratuito Elementor Custom Skin desarrollado por Liviu Duda. El plugin se integra totalmente con la sección de «Plantillas» de Elementor creando una nueva categoría llamada «Loop», en la que podremos crear un diseño diseño personalizado utilizando el editor visual. Lo que haremos es crear un layout a medida para nuestras entradas, que posteriormente integraremos con el Posts Widget.
Aquí van algunos ejemplos reales de cómo puede quedarnos el blog:
37 comentarios
Hola instale el plugin para realizar un diseño diferente de del listado de productos de Woocommerce pero no me funciona no muestra ni la imagen del producto, titulo etc. sabes si tiene una limitante o es que me falta activar algo? de antemano muchas gracias
Hola Richard, no hace falta nada más que el plugin para que funcione..cual es exactamente el fallo? tienes los post públicos?
Cualquier duda puedes escribirme al formulario de contacto de la web.
Saludos.
Hola Aberto, primero gracias por responder y tomar unos minutos de tu tiempo en asesorarme, fíjate yo entro a crear mi Loop, al crear la caja, arrastro el widgets o elemento de imagen, luego no busco imagen si no que pulso el icono de Dinámico y busco de las opciones de Woocommerces – product imagen, luego arrastro el elemento de titulo y realizo la misma operación, icono de Dinámico y busco en la opciones de Woocommerce – Product title. solo con eso para hacer una prueba, en pantalla no muestra nada, igual guardo ese diseño.
Ahora al crear la página para poder usar ese loop, es donde viene el otro detalle, que elemento seleccionar ya que si arrastro del PRO – Post este me da tres opciones en Diseño – Classic, Cards y custom, yo selecciono custom y me da la opción de escojer la plantilla que hice pero no me muestra nada, pensé que era por que el Post es solo para eso para las entradas, por eso busque en Woocommerce y arrastre el elemento Products pero este no me deja seleccionar Diseños me muestra el siguiente mensaje : To change the Products Archive’s layout, go to Appearance > Customize. y de ahí no he podido avanzar.
Te agradezco lo que me puedas orientar para saber que estoy haciendo mal. de antemano muchas gracias.
Hola, estoy tratando de crear mi primera web. Estoy usando el tema «Ashe» con Elementor. Me pasa que trato de construir la pagina de «Blog» y editarla pero me sale un error » no se encontró el área de contenido de tu pagina».
No tengo plug-in activados, he probado el modo seguro, modo incógnito, he modificado el , he desinstalado el tema y lo he vuelto a instalar. He borrado todos los temas que había descargado.
No se que mas puedo hacer para poder construir la pagina del blog!
Hola Verónica, el problema es que la página de Blog está siendo utilizada por tu tema.
Tienes dos opciones:
1) En ajustes -> lectura, quita la página de entradas que está puesta y crea tu una de blog y edítala como quieras.
2) Quita el tema y pon Hello Elementor que es totalmente compatible con Elementor.
Saludos.
Hola Albert,
gracias de la info. ¿Sabes como se puede elegir con Elementor unas entradas asociadas solo ad algunas categorías?
gracias,
saludos
Hola Valeria,
Sí, esto debes hacerlo en las «Condiciones de visualización» a la hora de publicar tu plantilla de post, eligiendo que esa plantilla afecte a la categoría que quieras.
Hola Alberto! Lo primero Gracias por el post! Alguna duda: Se puede poner un espacio para los comentarios de los seguidores? Se pueden hacer share a redes sociales? Ese tipo de cosas para que sea más completo. Gracias y saludos!!
Hola Guillermo, si te refieres a habilitar los comentarios nativos de WordPress…sí claro, se puede integrar simplemente arrastrando el widget de Post Comments. El share con redes sociales también, con el widget Share Buttons.
En mi canal de youtube tengo un vídeo personalizando una plantilla de post donde comento todos estos aspectos: https://www.youtube.com/watch?v=qfEkWUr61zM
Saludos.
Hola Alberto,
Estoy intentando modificar una página de mi web con elementor, y cuando hago click en editar con elementor, me aparece este mensaje:
No se pudo cargar la vista previa
Lo sentimos pero algo fue mal,….
Haz click para una vista previa de la depuración
He intentando hacerlo mediante el modo incógnito, pero me aparece lo mismo. ¿Cómo la puedo editar con elementor?
Hola Patricia, qué página es exactamente? Puede que sea una página protegida o que se esté usando por tu plantilla.
De todas formas, echa un ojo a este vídeo: https://www.youtube.com/watch?v=TbHmMPiquZM
Saludos.
hola, gracias por tus aportes, a mi me pasa lo mismo que a patricia, pero solo me sale ese mensaje de
No se pudo cargar la vista previa
Lo sentimos pero algo fue mal,….
Haz click para una vista previa de la depuración
solo me sale cuando intento editar la pagina tienda/productos y cuando intento editar la pagina de la entradas blog.
A mi entender, creo que elementor no tiene a su alcance o los permisos para poder editar estas dos secciones de una pagina wordpress!
Hola Felipe, esto pasa porque o bien WooCommerce o tu plantilla está editando ya esa página de tienda. Prueba a quitar de la configuración de WooCommerce esa página como la página por defecto para Tienda o bien abre una nueva página y editala, verás que te deja usarla y meter los productos.
De todas formas, la manera más correcta de configurar una tienda con WooCommerce es creando una plantilal de archivo de productos y diciéndole en las condiciones de visualización que sea la página de Tienda y que afecte también a las categorías (si quieres). Saludos.
hola, estoy intentando editar la pagina de entradas de mi blog y me aparece «El área de contenido no se encontró en su página». mi pregunta es: necesito tener elementor pro para poder editar la pagina de entradas (archive page)?
Hola Maria Mercedes,
Eso puede ser porque la página de Blog la esté usando ya tu plantilla. Prueba a crear una página nueva y arrastra el widget de Posts. De todas formas, para utilizar el theme builder de Elementor necesitas ser premium, sí.
Saludos.
Hola! Gracias por tu contenido!
He diseñado una web con elementor y tengo un error desde el principio que no consigo solucionar! Cuando maqueto hay acciones que me producen error 403 forbidden, por ejemplo cuando inserto un intro en el texto. He comprobado los aspectos básicos del error 403 y todo esta ok… (memoria límite, version php, permisos….) ¿Podria ayudarme?
Buenas Alberto,
Tu tutorial es muy interesante aunque me he topado con un problema, no me visualiza la plantilla bucle para poderla meter en el post widget, ¿alguna idea de por qué puede ser?
Gracias
Hola Rosa,
Hace poco he vuelto a trabajar con Ele Custom Skin y aunque han cambiado algunas cosas…la forma de trabajar es la misma. En el theme builder has podido crear la plantilla bucle y dejarla pública? Luego tienes que ir al widgets de posts y te debería aparecer en el desplegable de diseños, perosnalizado. Saludos.
Hola Alberto. Sabes como puedo añadir un modo de previsualizacion de la página a las que ya hay añadidas?
Hay 3 que son escritorio, tablet y móvil. Pero mi tablet Samsung coge el ancho menor de 768 y no puedo editar como quedaría en elementor porque no tengo esa previsualizacion y tampoco coincide con la del móvil. Seria quizar añadir una más y que hubiera 2 ee tablet por ej 500 y 768. Se puede hacer?
Hola Alberto,
Tengo una duda con las categorías del blog y es que cuando creo la plantilla de categorías la visualización de ve como si las entradas ocuparan el 50% del espacio que deberían ocupar, es una cosa extraña. ¿Sabes a qué se puede deber?
Me ha pasado con 2 páginas que están hechas ambas con Elementor pro + Generatepress. Muchas gracias.
Hola Miriam, cómo has creado la plantilla de categoría? Está hecho con el widget de Posts nativo de Elementor? Aun así, me es difícil averiguarlo sin ver una captura o la url exacta para poder inspeccionar el código. Si quieres puedes mandarmelo por correo a hola@albertoperojo.com
Saludos.
Buenas tardes Alberto. Estoy intentando editar con elementor y cuando quiero incorporar algún widget no me deja (está como en una carga constante). He leído que hay que activar el modo seguro, pero no me deja hacerlo. No tengo plugins instalados y el tema que uso es Astra (ya lo utilice en otra época con elementor sin problemas).
Me podrías ayudar?
Saludos y gracias
Dario
Hola Dario, es un error bastante común y suele estar relacionado con un parámetro de PHP que se llama memory_limit. Tienes que aumentarlo por lo menos a 256MB. Puedes hacerlo en el panel de proveedor de hosting o hablar con ellos directamente para que te lo cambien. Aquí te dejo un vídeo donde explico el tema: https://www.youtube.com/watch?v=TbHmMPiquZM
Saludos.
Hola Alberto!! Lo primero, gracias mil por todos tus vídeos, post…!! Son oro puro para mi.
Te hago una pregunta sobre Elementor Custom Skin a ver si me puedes orientar porque me estoy volviendo loca. Hice un CPT y lo estoy customizando con este plugin. Ya hice el Loop y todo correcto. Luego creé la página donde quiero que se visualice y lo monté todo sin problema. Dentro del editor de Elementor se ve todo perfectamente. El problema me surge cuando le doy al icono de “previsualizar cambios” ( icono del ojo) para que me lo muestre tal cual se va a ver. Se desconfigura completamente con respecto a lo que veía desde el editor de Elementor. ¿Se te ocurre qué me puede estar pasando? ¿Tuviste un problema similar alguna vez?
Un saludo!!
Hola Alberto, mi consulta es si me puedes recomendar una manera de hacer un backend personalizado de modo que mi cliente tenga ya determinado dentro del editor de texto el lugar para poner el título, el subtitulo, el texto, subir un video o foto y el calendario para programar la publicación del blog, he probado con whitelabel, y frontend dashboard pero no cumplen todos los requisitos que estoy buscando, te agradecería cualquier información
Hola Ricardo, has visto este vídeo? https://www.youtube.com/watch?v=HbcqpnSj2Ms
Muestro cómo crear un Custom Post Types de Eventos donde rellenas los datos necesarios y se muestran en un calendario. Espero que te sirva. Saludos.
Muchas gracias Alberto por tus tutoriales tan útiles para nosotros! Una pregunta, al mostrar más de 9 posts mediante CPT+ACF y Ele Custom Skin se ralentiza muchísimo la página, sin embargo con cualquiera de las plantillas predeterminadas CARDS, CLASSIC los muestra instantáneamente, sabes a que puede ser debido? Muchas gracias
Hola Jesús, cuando utilizas Ele Custom Skin se añade más complejidad a la estructura HTML de la página indudablemente, eso puede ser uno de los motivos. De todas formas, a no ser que tenga mucha anidación de secciones, debería funcionar correctamente. Has mirado si tienes la memoría límite de PHP en un valor mayor a 256M? Saludos.
Hola Alberto, tengo varias condiciones dinámicas para mostrar información o no, pero no creo que sea eso, es que le lleva 20 segundos mostrar la página!! Tengo 256M de memoria límite en php. Muchas gracias por tu respuesta
Hola Jesus, perdona por el retraso. Pues la verdad que no se que puede estar pasando sin analizar el caso en detalle. Has probado a quitar esos condicionales? o hacerte un bucle a parte sencillito para ver si se muestra bien? Saludos.
Hola Alberto, no te disculpes que bastante haces con contestar y te lo agradezco mucho. Si he probado a quitar todos los condicionales y dejar uno solo y el resultado es el mismo. No sé que puede ser la verdad. Seguiré investigando. Un última pregunta, sabes de algún otro plugin que haga lo mismo? o alguno que te deje añadir a las plantillas básica Cards o Classic otros metadatos para mostrar? Muchas gracias y un saludo
Sí, hay más plugins que hacen esta funcionalidad. Los más famosos son JetEngine (con la opción de Listings) y Anywhere Elementor Pro.
Si quieres escríbeme al formulario de contacto de la web y te intento ayudar más detenidamente, o podemos hacer una asesoría.
Saludos!
Pues voy a echarle una ojeada al Anywhere elementor pro cuando tenga más tiempo, si no consigo nada ya te escribo para la asesoría. Muchas gracias Alberto
¡Muchas gracias por este Tutorial, Alberto! Ya estaba por utilizar ACF pro con CSS.
Me alegro que te haya gustado Julius. Un saludo.
Me pareció un bien la manera de explicar todo, la verdad es que no tenía idea de como lograrlo pero ahora si, saludos!
Muchas gracias por la información, definitivamente la parte del blog había sido un tema muy relevante para los diseñadores que usamos Elementor. Yo normalmente usaba la plantilla Generatepress para definir la parte visual de todo lo relacionado con el blog. Ahora ya estoy comenzando a desarrollar todo con Elemento y obtener resultados visualmente más atractivos. Saludos!