O método Hide if Empty (Ocultar se vazio) do Elementor Pro utiliza CSS, o que significa que o elemento é definido como invisível (exibição) mesmo que ainda exista no código fonte.

A vantagem é que funciona com todos os fornecedores de campos personalizados, como ACF, JetEngine, Pods, Metabox, etc.

Se pretender um método Elementor hide (if empty) que remova completamente a marcação do documento, terá de utilizar Dynamic.ooo, JetEngine ou outro plugin.

Primeiro, adicione o seguinte trecho de código ao arquivo functions.php do plugin ou tema filho selecionado. Uma vez que se trata de código PHP, não pode ser adicionado diretamente ao código personalizado do Elementor.

1、Utilização de plug-ins

Se optar por utilizar o plug-in Code Snippets, siga estes passos:

1. Navegue até ao painel de controlo do WordPress, Plugins > Adicionar novo plugin, e na barra de pesquisa introduzaTrechos de códigoInstalar e ativar o plug-in.

2. Actualize o painel de controlo do WordPress e vá a "Snippets" > "Add New" (Adicionar novo).

3. Cole o seguinte código na caixa de código.

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

3. Adicione uma descrição como "Ocultar o widget Elementor se estiver vazio".
4. Clique em "Guardar alterações e ativar".

garantir quea sua chave de campoSubstitua pela chave do campo que pretende verificar. Desta forma, se o campo estiver vazio, o widget ficará oculto.

Utilizar o Elementor

Para ocultar um elemento na página do Elementor se o campo estiver vazio, pode seguir os passos abaixo:

1. Vá para a página ou modeloSelecione a página ou o modelo do Elementor onde o elemento deve ser escondido.
2. Selecione o elemento a ocultarSelecione o elemento que fica oculto quando o campo está vazio.
3. Aceda a Definições de elementosNo editor do Elementor, localize o elemento selecionado na secção "Definições de elementos" e selecione "nível elevado".
4. Adicionar classes CSSNo separador "Avançadas", localize a definição "Classes CSS" e introduza um nome de classe na caixa de entrada, como "hide-if-empty".

5. Guardar páginaGuarde a página ou o modelo.
6. Adicione CSS personalizadoSelecione "CSS adicionais" em WordPress Appearance > Personalizar (a localização exacta pode variar) e adicione o seguinte código CSS:

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

E se quiser um nome de turma?

Se pretender utilizar mais do que um nome de classe no mesmo elemento, basta seguir estes passos:

1. Vá para o elemento da sua escolha no editor do Elementor.
2. Selecione o separador Avançadas no painel Definições de elementos, à direita.
3. Na definição "Classes CSS", introduza o nome da primeira classe, termine com um espaço e, em seguida, introduza o nome da segunda classe.

4. Certifique-se de que cada nome de classe está separado por um espaço para que o Elementor os reconheça corretamente.
5. Guarde a sua página ou modelo.

3. adicioneCódigo curto

Se pretender ocultar elementos com base no facto de a publicação atual ter uma imagem em destaque ou um conteúdo de publicação, pode seguir estes passos:

1. Selecione o elemento a ocultarSelecione os elementos que pretende ocultar com base na condição no editor Elementor.
2. Aceda a Definições de elementosSelecione o separador Avançadas no painel Definições de elementos, à direita.
3. Adicionar classes CSSNa definição "Classes CSS", introduza o nome da classe, termine com um espaço e introduza um segundo nome de classe. Certifique-se de que separa cada nome de classe com um espaço.
4. Adicionar condição de código curtoDepois de adicionar o nome da classe, introduza o seguinte no campo "Shortcode":

[elementor_if has_post_thumbnail="yes"]

Verifica se a publicação atual tem uma imagem em destaque. Se quiser verificar se o conteúdo da publicação está vazio, pode utilizar o seguinte Shortcode:

[elementor_if has_excerpt="yes"]

Adicione ao Shortcode o nome da classe a ser ocultada quando a condição for satisfeita. Por exemplo, se quiser ocultar elementos, o Shortcode completo pode ser semelhante a:

[elementor_if has_post_thumbnail="yes"] o seu nome de classe [/elementor_if]

5. Guardar páginaGuarde a página ou o modelo.

Resumo:

No Elementor, os elementos podem ser ocultados com base em condições específicas, utilizando classes CSS e condições Shortcode. Este método não só é fácil de utilizar, como também não requer plug-ins adicionais, apenas o Elementor Pro. A apresentação dos elementos da página pode ser controlada de forma flexível, definindo condições com base no facto de um campo estar vazio ou de a publicação atual ter uma imagem em destaque ou um conteúdo de publicação. Esta funcionalidade não só melhora a flexibilidade do design da página, como também optimiza a velocidade de carregamento da página e a experiência do utilizador.