No mundo do WordPress, os shortcodes são ferramentas poderosas que permitem adicionar funcionalidades e conteúdos dinâmicos às suas páginas e posts. No entanto, muitos usuários ainda não sabem como estilizar as saídas desses shortcodes de maneira eficaz. Neste guia, vamos explorar como você pode utilizar o Elementor Pro para estilizar as saídas de shortcodes, facilitando a personalização do seu site.
Passo 1: Compreendendo os Shortcodes
Os shortcodes são pequenos trechos de código que você pode usar em suas páginas e posts para inserir elementos dinâmicos. Por exemplo, você pode usar um shortcode para exibir uma lista de posts, um formulário de contato ou até mesmo um botão. A utilização de shortcodes facilita a adição de complexidade ao seu site sem a necessidade de codificação avançada.
Passo 2: Usando Shortcodes no Elementor
A primeira coisa que você precisa saber é que o Elementor permite a inserção de shortcodes através de seus widgets. Para isso, você deve usar o widget de shortcode do Elementor. Isso parece simples, mas muitos usuários ainda não aproveitam essa funcionalidade ao máximo.
Para adicionar um shortcode, siga estes passos:
- Acesse a página que deseja editar com o Elementor.
- Arraste o widget de shortcode para a área desejada.
- Insira o shortcode que deseja utilizar.
Porém, a saída do shortcode pode não ser estilizada como você gostaria. É aqui que entra a verdadeira magia do Elementor.
Passo 3: Estilizando a Saída do Shortcode
Quando você insere um shortcode diretamente no widget de shortcode, não há opções de estilo disponíveis. Para contornar isso, você pode usar um widget que possua opções de estilo, como o widget de título.
Veja como fazer isso:
- Em vez de usar o widget de shortcode, arraste um widget de título para a área desejada.
- Na aba de conteúdo, clique na tag dinâmica e selecione a opção “Shortcode”.
- Insira o seu shortcode na caixa que aparece.
Dessa forma, você poderá aplicar todos os estilos disponíveis no Elementor ao conteúdo gerado pelo shortcode.
Passo 4: Exemplificando com Shortcodes Simples
Para ilustrar, vamos criar um shortcode simples que exibe o e-mail do usuário logado. Para isso, você pode usar um plugin como o Code Snippets para adicionar o seguinte código:
add_shortcode('email_user', function() {
return wp_get_current_user()->user_email;
});
Depois de adicionar o shortcode, você pode inseri-lo em um widget de título, como mencionado anteriormente. Isso permitirá que você estilize a saída, mudando a cor, o tamanho da fonte e muito mais.
Passo 5: Usando Shortcodes com Jet Engine
Se você está utilizando o Jet Engine, pode aproveitar ainda mais a funcionalidade dos shortcodes. O Jet Engine permite que você crie campos dinâmicos que podem ser utilizados em seus shortcodes. Por exemplo, você pode criar um shortcode que retorna o título de um post com base em seu ID.
O código do shortcode pode ser algo assim:
add_shortcode('post_title', function($atts) {
$atts = shortcode_atts(array('id' => ''), $atts);
return get_the_title($atts['id']);
});
Depois de criar o shortcode, você pode usá-lo em um widget de título e passar o ID do post dinamicamente. Isso é especialmente útil se você deseja exibir informações específicas de diferentes posts sem precisar criar vários shortcodes.
Passo 6: Estilizando com CSS
Além de usar as opções de estilo do Elementor, você também pode adicionar CSS personalizado para estilizar ainda mais a saída do seu shortcode. Para fazer isso, você pode ir até as configurações avançadas do widget e adicionar suas regras CSS na seção de CSS personalizado.
Passo 7: Conclusão
Estilizar as saídas dos shortcodes no WordPress usando o Elementor pode parecer desafiador à primeira vista, mas com as técnicas certas, você pode obter resultados impressionantes. Ao usar widgets que permitem estilização e a dinâmica de shortcodes, você pode criar layouts personalizados que se destacam.
Se você deseja aprender mais sobre WordPress e como maximizar suas funcionalidades, considere se inscrever em cursos ou tutoriais que aprofundem essas técnicas. Com prática e experimentação, você se tornará um especialista em personalização no WordPress.
Agora que você conhece os segredos para estilizar saídas de shortcodes, comece a aplicar essas técnicas em seu site e veja a diferença que isso pode fazer na apresentação do seu conteúdo!
