El método Hide if Empty de Elementor Pro utiliza CSS, lo que significa que el elemento se establece como invisible (mostrar) aunque siga existiendo en el código fuente.

La ventaja es que funciona con todos los proveedores de campos personalizados como ACF, JetEngine, Pods, Metabox, etc.

Si quieres un método de Elementor hide (if empty) que elimine completamente el marcado del documento, necesitarás usar Dynamic.ooo, JetEngine u otro plugin.

En primer lugar, añade el siguiente fragmento de código al archivo functions.php del plugin o tema hijo seleccionado. Dado que se trata de código PHP, no puede añadirse directamente al código personalizado de Elementor.

1、Uso de plug-ins

Si decide utilizar el plugin Code Snippets, siga estos pasos:

1. Vaya al panel de control de WordPress, Plugins > Añadir nuevo plugin, y en la barra de búsqueda introduzcaFragmentos de códigoInstale y active el plug-in.

2. Actualice el panel de WordPress y vaya a "Fragmentos" > "Añadir nuevo".

3. Pegue el siguiente código en el cuadro de código.

add_action( 'elementor/frontend/section/before_render', function( $section, $args ) {
    $settings = $section->get_settings_for_display();
    if ( empty( $settings['tu_clave_campo'] ) ) {
        $section->add_render_attribute( '_wrapper', 'style', 'display:none;' );
    }
}, 10, 2 );

3. Añade una descripción como "Ocultar widget de Elementor si está vacío".
4. Haga clic en "Guardar cambios y activar".

garantizan quesu_clave_de_campoSustitúyalo por la clave del campo que desea comprobar. De esta forma, si el campo está vacío, el widget se ocultará.

Uso de Elementor

Para ocultar un elemento en la página de Elementor si el campo está vacío, puede seguir los pasos que se indican a continuación:

1. Ir a la página o plantillaVaya a la página o plantilla de Elementor en la que desea ocultar el elemento.
2. Seleccione el elemento que desea ocultar: Selecciona el elemento que se oculta cuando el campo está vacío.
3. Ir a Ajustes del elementoEn el editor de Elementor, busque el elemento seleccionado en el campo "Configuración de elementos"y seleccione "alto nivel".
4. Añadir clases CSSEn la pestaña "Avanzado", busque la opción "Clases CSS" e introduzca un nombre de clase en el cuadro de entrada, por ejemplo "hide-if-empty".

5. Guardar página: Guarda la página o plantilla.
6. Añadir CSS personalizadoVaya a "CSS adicional" en Apariencia de WordPress > Personalizar (la ubicación exacta puede variar) y añada el siguiente código CSS:

.hide-if-empty {
    display: none;
}

¿Y si quiere un nombre de clase?

Si desea utilizar más de un nombre de clase en el mismo elemento, sólo tiene que seguir estos pasos:

1. Ve al elemento de tu elección en el editor de Elementor.
2. Seleccione la pestaña Avanzado en el panel Configuración de los elementos a la derecha.
3. En el ajuste "Clases CSS", introduzca el nombre de su primera clase, termine con un espacio y, a continuación, introduzca el nombre de su segunda clase.

4. Asegúrate de que cada nombre de clase está separado por un espacio para que Elementor los reconozca correctamente.
5. Guarde su página o plantilla.

3. AñadirCódigo corto

Si quieres ocultar elementos en función de si la entrada actual tiene una imagen destacada o el contenido de la entrada, puedes seguir estos pasos:

1. Seleccione el elemento que desea ocultar: Selecciona los elementos que deseas ocultar en función de la condición en el editor de Elementor.
2. Ir a Ajustes del elemento: Seleccione la pestaña Avanzado en el panel Configuración de elementos de la derecha.
3. Añadir clases CSSEn el ajuste "Clases CSS", introduzca el nombre de la clase, termine con un espacio y, a continuación, introduzca un segundo nombre de clase. Asegúrese de separar cada nombre de clase con un espacio.
4. Añadir condición ShortcodeDespués de añadir el nombre de la clase, introduzca lo siguiente en el campo "Shortcode":

[elementor_if has_post_thumbnail="yes"]

Comprueba si la entrada actual tiene una imagen destacada. Si desea comprobar si el contenido del post está vacío, puede utilizar el siguiente Shortcode:

[elementor_if has_excerpt="yes"]

Añada al Shortcode el nombre de la clase que se ocultará cuando se cumpla la condición. Por ejemplo, si desea ocultar elementos, el Shortcode completo podría ser similar a:

[elementor_if has_post_thumbnail="yes"] tu-nombre-clase [/elementor_if]

5. Guardar página: Guarda la página o plantilla.

Resumen:

En Elementor, los elementos se pueden ocultar basándose en condiciones específicas mediante el uso de clases CSS y condiciones Shortcode. Este método no sólo es fácil de usar, sino que no requiere plugins adicionales, sólo Elementor Pro. La visualización de los elementos de la página puede controlarse de forma flexible estableciendo condiciones basadas en si un campo está vacío o si la entrada actual tiene una imagen destacada o contenido de entrada. Esta función no sólo mejora la flexibilidad del diseño de la página, sino que también optimiza la velocidad de carga y la experiencia del usuario.