YT Cómo ocultar los campos de ACF en Divi si están vacíos

Cómo ocultar los campos de ACF en Divi si están vacíos



Contenido Restringido 🖐

Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐

Si alguna vez te has preguntado cómo ocultar esos molestos campos de Advanced Custom Fields (ACF) en Divi cuando están vacíos, ¡este es tu día de suerte! En este video, que forma parte de nuestro contenido premium, te enseñaré paso a paso cómo lograrlo, incluyendo el código mágico que necesitas. ¿Listos para llevar sus diseños en Divi a otro nivel? ¡Suscríbete a nuestro contenido premium y no te pierdas este valioso conocimiento!

Índice

¿Cuál es el problema?

Cuando trabajamos con campos de ACF en Divi, especialmente al traer información de forma dinámica con el constructor visual o el Theme Builder, surge un pequeño gran inconveniente. Si un campo de ACF está vacío, el módulo en Divi donde se llama a esta información sigue apareciendo en el diseño.

El resultado: un diseño desbalanceado o con espacios vacíos que simplemente no se ven bien. Es un detalle que puede arruinar la experiencia del usuario y la estética del sitio. Pero no te preocupes, ¡tenemos la solución! Mira una demo de lo que sucede cuando dejamos un campo vacío.

¿Cómo se soluciona?

La solución es más sencilla de lo que parece. Mediante un pequeño Snippet de código que te proporcionaré, podrás decirle adiós a este problema. Este Snippet está diseñado para ocultar automáticamente cualquier campo de ACF vacío en tus diseños Divi. Este código es oro puro y está disponible exclusivamente para nuestros usuarios premium en la parte inferior del tutorial.

Contenidos donde trabajamos campos de ACF de forma dinámica con Divi

Para que amplíes tus conocimientos, te recomiendo estos contenidos relacionados:

  1. Tutorial de ACF, Divi y su información dinámica: Aprende lo básico y más allá sobre cómo integrar ACF con Divi.
  2. Curso de Learndash Básico: Descubre cómo crear cursos increíbles con Learndash y Divi.
  3. Curso de Learndash Intermedio: Lleva tus cursos al siguiente nivel.
  4. Curso de Directorio de Propiedades de Bienes Raíces: Un curso específico para quienes quieren especializarse en sitios web de bienes raíces con Divi.

Conclusiones finales

Recuerda, pequeños detalles pueden hacer la gran diferencia en tus proyectos web. Ocultar campos de ACF vacíos es una técnica esencial para mantener tus diseños limpios y profesionales. Con este tutorial, te aseguro que tu habilidad con Divi y ACF dará un salto cualitativo. Para acceder al videotutorial premium, regístrate como suscriptor premium ⭐ en UXDivi en https://uxdivi.com/planes.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Artículos relacionados

Comentarios

      1. Buenos días Jeff,
        Te agradezco mucho la respuesta. Sí, seguí tu tutorial y lo extraño que llegó a funcionar pero de buenas a primeras dejó de funcionar. ¿No puedo adjuntarte capturas?

        https://dermotrain.com/cursos/master-abc-protocolo-comercial-estetica/

        Te explico:
        Por ejemplo, creé el Campo Personalizado con el nombre “lo_que_aprenderas_6” que es la clase que añadí al Módulo Divi. Luego agregué al archivo functions.php el código que pusiste adaptado:

        /*================================================
        #ocultar los campos de ACF en Divi si están vacíos
        ================================================*/

        //El modulo de divi que llama el contenido dinámico debe tener una clase con el mismo nombre del slug del campo
        function ocultar_campos_vacios(){
        echo “”;
        //inicio insertar funcion con clase a verificar el valor
        verificar_campo_personalizado(“lo_que_aprenderas_1”);
        verificar_campo_personalizado(“lo_que_aprenderas_2”);
        verificar_campo_personalizado(“lo_que_aprenderas_3”);
        verificar_campo_personalizado(“lo_que_aprenderas_4”);
        verificar_campo_personalizado(“lo_que_aprenderas_5”);
        verificar_campo_personalizado(“lo_que_aprenderas_6”);

        verificar_campo_personalizado(“a_quien_va_dirigido_1”);
        verificar_campo_personalizado(“a_quien_va_dirigido_2”);
        verificar_campo_personalizado(“a_quien_va_dirigido_3”);
        verificar_campo_personalizado(“a_quien_va_dirigido_4”);

        //Fin insertar funcion con clase a verificar el valor
        echo “”;
        }

        function verificar_campo_personalizado($slug) {
        $mi_campo_personalizado = get_field($slug);
        if(empty($mi_campo_personalizado)) {
        // El campo personalizado está vacío
        echo “.”.$slug.”{display:none;position:absolute;}”;
        }
        }
        add_action(‘et_theme_builder_template_after_body’, ‘ocultar_campos_vacios’);