Pagina inicial
- 12 de agosto de 2022 Nosso plug-in Beaver Builder ajuda você a criar sites completos com modelos e módulos. No entanto, pode haver momentos em que você deseja personalizar ainda mais seu site. Com os códigos de acesso do Beaver Builder, você pode adicionar conteúdo extra em módulos, cabeçalhos, rodapés e barras laterais.
Neste post, apresentaremos os códigos de acesso do Beaver Builder e mostraremos como inseri-los em seu conteúdo. Também exploraremos alguns exemplos que podem aprimorar o design do seu site. Vamos pular!
Índice
Se você já trabalhou com sites WordPress antes, talvez já esteja familiarizado com códigos de acesso. Esses são pequenos trechos de código que adicionam funcionalidade ao seu site.
Em vez de escrever tudo em HTML usando o editor de código, você pode simplesmente inserir um shortcode em sua página. Isso terá um slug ou ID que corresponde a um elemento do Beaver Builder, como um módulo, linha ou coluna. Você também pode usar códigos de acesso para postagens, páginas ou modelos de layout.
Neste exemplo, estamos adicionando uma linha salva a um módulo HTML:
Quando clicamos em Save , o Beaver Builder converte automaticamente o shortcode na linha salva a que corresponde:
Mais adiante no post, mostraremos como adicionar códigos de acesso no editor. Por enquanto, vamos discutir os benefícios de usar códigos de acesso do Beaver Builder.
Os códigos de acesso podem ser úteis para adicionar elementos visuais a áreas baseadas em texto. Por exemplo, você pode criar um módulo de preços e usar um código de acesso para adicionar uma foto do produto. Dessa forma, você não precisará trabalhar com dois módulos individuais (Pricing e Photo), pois eles serão combinados:
Os códigos de acesso também permitem que você insira elementos do Beaver Builder em seu conteúdo enquanto trabalha com o WordPress Block Editor. Isso significa que você não precisará alternar para o editor Beaver Builder para adicionar um módulo, linha ou coluna.
Você pode adicionar códigos de acesso a qualquer módulo do Beaver Builder com um campo de texto, incluindo:
No entanto, pode não ser aconselhável adicionar muitos códigos de acesso. Isso pode aumentar o tempo de carregamento, pois o servidor deve solicitar os arquivos CSS e Javascript para cada código de acesso. Recomendamos usar no máximo dois por página.
Existem muitos casos de uso para códigos de acesso do Beaver Builder. Vejamos alguns exemplos úteis.
Digamos que você tenha uma tabela de preços com várias opções de produtos em uma página de destino ou página de vendas. Você pode simplesmente listar os preços e, em seguida, direcionar os clientes para fazer o check-out com um botão na parte inferior da página. No entanto, os usuários precisarão rolar mais para baixo, o que pode prejudicar a experiência do usuário (UX).
Em vez disso, você pode criar um botão de Call to Action (CTA) que solicita que os clientes comprem o produto. Isso fará um link direto para a página de checkout para que os clientes não precisem navegar mais. Em seguida, você pode adicionar este botão à sua tabela de preços com um código de acesso:
Lembre-se de personalizar o botão CTA para combinar com sua marca visual.
Se você tiver um site comercial, poderá adicionar algumas guias à seção Sobre. Dessa forma, os usuários podem saber mais sobre sua empresa sem precisar rolar a página para baixo.
Digamos que você também queira que clientes em potencial entrem em contato com você sobre seus serviços assim que terminarem de ler. Os usuários já gastam tempo alternando entre suas guias. Direcioná-los para outro lugar pode dar a eles alguns segundos extras para repensar sua decisão de entrar em contato.
Em vez disso, você pode adicionar um formulário de contato a uma de suas guias, usando um shortcode:
É tão fácil! Agora os clientes podem entrar em contato com você sem precisar sair da página.
Ao construir suas páginas, você pode preferir adicionar imagens e texto a um único módulo. Embora você pudesse usar dois módulos separados, o conteúdo seria dividido e você não poderia colocar a imagem no meio do texto.
Combinar texto e imagens é uma maneira eficaz de exibir produtos em sua loja virtual. Por exemplo, você pode adicionar imagens ao seu módulo Pricing Box para mostrar diferentes recursos do produto:
Teoricamente, você poderia montar esse mesmo layout com módulos diferentes empilhados uns sobre os outros. No entanto, usar um código de acesso de imagem pode acelerar o processo de design.
Você também pode usar códigos de acesso do Beaver Builder ao trabalhar com o Block Editor. Isso pode ser particularmente útil se você estiver escrevendo uma postagem no blog e quiser adicionar elementos interativos ao seu artigo.
Você pode facilmente soltar um módulo Beaver Builder na página sem sair do Editor de blocos. Basta inserir um bloco Shortcode e colar seu código dentro:
Depois de publicar a postagem, o código de acesso exibirá o conteúdo no front-end:
Por exemplo, você pode inserir um módulo de formulário de contato. Você também pode adicionar um Call to Action que direcione os clientes para sua loja ou um mapa incorporado da localização da sua loja.
Nosso tema Beaver Builder vem com um shortcode de data personalizado. Isso exibe a data atual em qualquer parte da sua página, incluindo cabeçalhos, rodapés e barras laterais:
Este shortcode pode ser útil se você administra um site de notícias. Você pode adicionar a data usando qualquer um dos seguintes códigos de acesso:
| Código curto | Formato |
| 2022 | 2022 |
| 22 | 22 |
| 14 de agosto de 2022 | 28 de julho de 2022 |
| domingo, 14 de agosto de 2022 | quinta-feira, 28 de julho de 2022 |
| 14-08-2022 | 28-07-2022 |
| “8-14-22” | 28-7-22 |
| “14.08.22” | 28.07.22 |
Você também pode usar este código de acesso ao lado de sua mensagem de direitos autorais no rodapé. Dessa forma, você pode garantir que ele esteja sempre atualizado.
Acabamos de abordar vários cenários em que os códigos de acesso do Beaver Builder podem acelerar e simplificar seu processo de design. Agora, vamos ver como adicioná-los ao seu site:
Os códigos de acesso não estão prontamente disponíveis em seu site. Primeiro, você precisará salvar os elementos do Beaver Builder antes de inseri-los como códigos de acesso. Esses elementos podem incluir:
Por exemplo, digamos que você queira criar um módulo de formulário de contato personalizado. Você pode fazer isso navegando até Beaver Builder > Módulos salvos > Adicionar novo :
Você será solicitado a nomear seu módulo e escolher seu tipo:
Clique em Adicionar módulo salvo . Na página seguinte, selecione Launch Beaver Builder para acessar o editor. Aqui, você pode personalizar o formulário de contato ao seu gosto:
Quando estiver pronto, certifique-se de publicar seu módulo. Ele agora aparecerá na sua página de Módulos salvos . Se você estiver usando a versão mais recente do Beaver Builder, poderá ver os códigos de acesso gerados automaticamente:
Se você não conseguir ver a coluna ShortCode , precisará criar o código manualmente. Para fazer isso, você precisará do slug do módulo.
Se você clicar no botão Editar abaixo do seu módulo, poderá visualizar seu slug. Se você não conseguir vê-lo, abra o menu Opções de tela e marque a caixa ao lado de Slug :
Agora você pode usar o seguinte código para criar um shortcode para este módulo:
[fl_builder_insert_layout slug="my-post-slug"]Lembre-se de substituir “my-post-slug” pelo slug do seu módulo Beaver Builder. No nosso exemplo, ficará assim:
[fl_builder_insert_layout slug="contact-form"]É isso – agora você sabe como criar códigos de acesso para os módulos do Beaver Builder.
A etapa final é adicionar o shortcode à sua página. Na maioria dos casos, esse processo envolverá colar o snippet dentro do campo Text de um módulo.
Aqui está nosso exemplo de tabela de preços anterior. Como você pode ver, adicionamos o shortcode para o botão CTA na caixa de texto Feature 5 :
Como o Beaver Builder usa um editor front-end, você poderá ver seu módulo salvo imediatamente. Em alguns casos (como ao usar um módulo HTML), talvez seja necessário salvar suas alterações antes que o código de acesso seja convertido no elemento visual.
Os códigos de acesso do Beaver Builder permitem que você adicione rapidamente módulos, linhas, colunas ou layouts salvos em diferentes partes de suas páginas. Você pode usá-los para acelerar o processo de design e criar belas páginas do WordPress.
Para recapitular, você pode usar os códigos de acesso do Beaver Builder seguindo estas etapas simples:
Você está pronto para começar a criar páginas incríveis para o seu site? Confira a lista completa de recursos fáceis de usar do Beaver Builder!
O Beaver Builder fornece códigos de acesso para elementos salvos, como módulos, linhas, colunas e modelos. Você pode adicionar esses trechos a campos e módulos baseados em texto. Isso é possível tanto no editor front-end do Beaver Builder quanto no WordPress Block Editor. Além disso, os códigos de acesso permitem que você use seus outros plugins favoritos junto com o Beaver Builder.
Você não precisa do tema oficial do Beaver Builder para usar códigos de acesso. Você pode criar páginas e adicionar códigos de acesso com a maioria dos temas usando o plug-in do construtor de páginas. No entanto, alguns códigos de acesso, como o código de acesso Date, só funcionam com o tema Beaver Builder.
O Beaver Builder é uma ferramenta de criação de páginas que permite editar a área de conteúdo de páginas e postagens usando módulos e modelos. Por outro lado, o Beaver Themer é um plug-in complementar que permite editar áreas do seu site que normalmente são controladas pelo seu tema, como cabeçalhos, rodapés e barras laterais. Este conteúdo inclui modelos de tema, partes de modelo e grades de postagem.