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:
- 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.
- Curso de Learndash Básico: Descubre cómo crear cursos increíbles con Learndash y Divi.
- Curso de Learndash Intermedio: Lleva tus cursos al siguiente nivel.
- 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 ⭐
![[Actualizar] Propiedades (CPT) desde el Front-end con ACF y Divi](https://uxdivi.com/wp-content/uploads/2021/07/Actualizar-Propiedades-CPT-desde-el-Front-end-con-ACF-y-Divi.png)
Fenomenal tip Jefferson!! Llevaba tiempo queriendo resolver esto. Gracias!!
¡Si! es una gran solución para esta necesidad 😊🖐
Hola Jeff,
Soy suscriptor de tu canal y siguiendo el tutorial no he conseguido hacer que funcione. He agregado el código a functions.php y los campos vacíos sigues mostrándose. ¿Puedes ayudarme?
https://dermotrain.com/cursos/master-abc-protocolo-comercial-estetica/
Que tal David, ¿revisaste de haber colocado correctamente las clases en los campos que deseas ocultar?
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’);
Que tal David, por favor, envianos un ticket de soporte acá: https://uxdivi.com/soporte-premium
Con los accesos al sitio, para poder revisar por dentro que todo esté correcto.
Muchas gracias Jeff por el seguimiento. Ticket enviado!
Hola,
Tal vez sea por la actualización de DIVI pero en mi caso no funciona el código, eh seguido todo el tutorial de manera minuciosa pero no me funciona
Se me hace raro Wilmer, ¿revisaste colocar las clases CSS correspondientes en tus módulos?