En este content HUB te daremos el snippet para que logres que tu botón con Divi ocupe el ancho completo de cualquier columna, veamos.
Volver al contenido del HUB: Snippets Divi
Contenido de este HUB
Snippet para agregar contador de productos en el carrito del menú de Divi
En este content hub te daremos el snippet para agregar contador de productos en el carrito del menú de Divi.
Cambiar el icono del carrito de WooCommerce en Divi
En este content hub te explicaremos cómo cambiar el icono del carrito de WooCommerce en Divi. Lo haremos a través de % código CSS.
Cómo cambiar «read more» del blog en Divi
Si quieres cambiar el texto «read more» del módulo del blog en Divi, aquí te dejamos los pasos a seguir y el snippet que necesitas.
Igualar la altura en el módulo del blog en rejilla
En este content hub te daremos el snippet para Igualar la altura en el módulo del blog de Divi en su configuración de rejilla
Cuando realizamos un blog estilo rejilla con el módulo de blog de Divi pasa que si no tenemos los extractos del post, o los titulos del mismo tamaño, los «cuadros» de los post no tienen la misma altura inicialmente, porque cada artículo o publicación contiene una cantidad diferente de contenido, incluso si solo el título de la publicación es mostrado.
Aprende a crear un blog estilo magazzine con este tutorial premium.
Bien, para resolver esto aplicaremos un poco de código javascript y una clase especifica a nuestro módulo de blog. Veamos los pasos:
Paso 1: Haz copia de seguridad de tu WordPress
Como vamos a meter código al sitio, siempre recomendamos que antes hagas una copia de seguridad por si algo sale mal. En este post te enseñamos como hacer una copia de seguridad en WordPress y como recuperarla tambien.
Paso 2: Aplicamos una clase CSS al módulo del blog
En este paso debemos aplicar una clase CSS personalizada al módulo del blog para que nuestro código posterior surta efecto.
Ve al módulo del blog: Configuración del blog > Avanzado > ID y clases de CSS > Clase de CSS y coloca la siguiente clase:
et_blog_grid_equal_height
Paso 3: Aplicamos el código javascript en las opciones de integración de Divi
Luego inserta y guarda el siguiente código JavaScript en Divi > Opciones de tema > Integración > Agregar código al Head de su blog:
<script>
(function($) {
$(document).ready(function() {
$(window).resize(function() {
$('.et_blog_grid_equal_height').each(function() {
equalise_articles($(this));
});
});
$('.et_blog_grid_equal_height').each(function() {
var blog = $(this);
equalise_articles($(this));
var observer = new MutationObserver(function(mutations) {
equalise_articles(blog);
});
var config = {
subtree: true,
childList: true
};
observer.observe(blog[0], config);
});
function equalise_articles(blog) {
var articles = blog.find('article');
var heights = [];
articles.each(function() {
var height = 0;
height += $(this).find('.et_pb_image_container, .et_main_video_container').outerHeight(true);
height += $(this).find('.entry-title').outerHeight(true);
height += $(this).find('.post-meta').outerHeight(true);
height += $(this).find('.post-content').outerHeight(true);
heights.push(height);
});
var max_height = Math.max.apply(Math,heights);
articles.each(function() {
$(this).height(max_height);
});
}
$(document).ajaxComplete(function() {
$('.et_blog_grid_equal_height').imagesLoaded().then(function() {
$('.et_blog_grid_equal_height').each(function(){
equalise_articles($(this));
});
});
});
$.fn.imagesLoaded = function() {
var $imgs = this.find('img[src!=""]');
var dfds = [];
if (!$imgs.length) {
return $.Deferred().resolve().promise();
}
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function() {
dfd.resolve();
};
img.onerror = function() {
dfd.resolve();
};
img.src = this.src;
});
return $.when.apply($, dfds);
}
});
})(jQuery);
</script>
¡Y listo! Si todo sale bien, podrás igualar la altura en el módulo del blog en rejilla en tu blog con Divi.
El resultado será algo como esto:
Antes:
Después:
Entra aquí para ver en acción la DEMO →
Disclaimer: Este código funciona cuando se incluyen publicaciones de blog tipo estándar o de video en el módulo de blog, el uso del formato de publicación de audio o cualquier otro formato de publicación hará que el código no funcione.
¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.
Contenido de este HUB
Cómo hacer el botón de ancho completo en Divi
En este content HUB te daremos el snippet para que logres que tu botón con Divi ocupe el ancho completo de cualquier columna, veamos.
Snippet para agregar contador de productos en el carrito del menú de Divi
En este content hub te daremos el snippet para agregar contador de productos en el carrito del menú de Divi.
Cambiar el icono del carrito de WooCommerce en Divi
En este content hub te explicaremos cómo cambiar el icono del carrito de WooCommerce en Divi. Lo haremos a través de % código CSS.
Cómo cambiar «read more» del blog en Divi
Si quieres cambiar el texto «read more» del módulo del blog en Divi, aquí te dejamos los pasos a seguir y el snippet que necesitas.
¡Valóranos!
¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!
0 comentarios