Os dias de mega temas repletos de recursos parecem estar acabando, enquanto vemos o surgimento de temas mais enxutos que fornecem suporte para plug-ins de terceiros. Adicionar suporte para um construtor de páginas é uma ótima maneira de dar aos seus usuários poder extra quando se trata de construir um site com seus temas. Se isso é algo que você está considerando, adoraríamos que você escolhesse o Beaver Builder como seu construtor de páginas.

Pronto para uso, o Beaver Builder funciona muito bem com quase todos os temas. Até agora, não acho que tenhamos ouvido falar de um único tema com o qual não funcione. Mesmo assim, ainda existem algumas coisas que você pode fazer para que funcione ainda melhor. Antes de entrar em detalhes, aqui estão alguns motivos pelos quais acho que o Beaver Builder é uma boa escolha…

• É fácil para seus usuários começarem, pois há uma versão lite disponível em wordpress.org que eles podem usar sem gastar um único dólar.
• Você pode criar módulos personalizados que podem ser agrupados em seu tema usando nosso guia de módulos personalizados.
• Não há inchaço aqui. O Beaver Builder carrega apenas os scripts e estilos necessários em uma determinada página, e não tudo o que existe.
• Construímos o Beaver Builder para ser fácil de usar e ao mesmo tempo ter energia suficiente para realizar o trabalho. A simplicidade está sempre em nosso radar, então você não nos verá exagerando nos recursos.
• Seus usuários estarão em boas mãos se surgir algum problema. Oferecemos um suporte realmente incrível.

Se você está procurando ótimos exemplos de outros que fornecem suporte ao Beaver Builder em seus temas, não procure mais, nossos amigos da WebMan Design e UpThemes. Estamos extremamente lisonjeados por eles terem escolhido apoiar nosso construtor de páginas e esperamos que outros sigam seu exemplo.

Parece bom? Veja como fazer isso acontecer.

Segmentando elementos com CSS apenas nas páginas do Beaver Builder

Uma das coisas mais comuns que você verá que precisa ser feita ao longo desta postagem é direcionar elementos específicos apenas nas páginas do Beaver Builder. Seja seu cabeçalho, wrapper de conteúdo, botões ou qualquer outra coisa, isso é facilmente alcançado porque cada página do Beaver Builder tem uma classe no corpo chamada fl-builder (todas as nossas coisas são prefixadas com “fl” porque a empresa controladora do Beaver Builder é chamada Mídia FastLine). Saber que esta classe está no corpo permite que você escreva CSS específico para páginas do Beaver Builder.

Como? Digamos que você queira direcionar o wrapper de conteúdo do seu tema e remover todo o preenchimento das páginas do Beaver Builder. Com a classe corporal fl-builder, isso é tão fácil quanto…

 .fl-builder #my-content-wrapper { padding: 0; }

Bum! Feito. Sem preenchimento nas páginas do Beaver Builder. Existem alguns casos de uso específicos que discutiremos mais tarde, mas sinta-se à vontade para aplicar essa técnica conforme achar adequado às necessidades exclusivas do seu tema.

Desativando o título da página padrão

Na maioria das vezes, quando o Beaver Builder está ativo, não há necessidade do cabeçalho de página padrão. Normalmente apenas atrapalha. Seus usuários podem desativar isso acessando Ferramentas > Editar configurações globais > Cabeçalho de página padrão e inserindo o seletor CSS para os títulos de página em seu tema, mas por que não tornar as coisas mais fáceis para eles?

Com um pouco de mágica, você pode definir o seletor CSS como padrão para o seu tema, em vez do nosso, adicionando este código ao seu arquivo de funções.

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

Essa técnica é ótima para ocultar visualmente o título da página, mas não o remove da marcação. Se isso for uma preocupação para você, você precisará adicionar um pouco mais de código para remover completamente o cabeçalho da página nas páginas do Beaver Builder. Primeiro, adicione esta função auxiliar ao seu arquivo de funções…

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

Em seguida, no arquivo que contém o cabeçalho da sua página (possivelmente page.php), envolva o cabeçalho da sua página neste código assim…

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

Com esse código não haverá um único traço do cabeçalho da página na marcação quando o Beaver Builder for usado para criar uma página.

Removendo ou ajustando margens e preenchimento

Há muitas coisas em termos de estilo que o Beaver Builder deixa por conta do tema, enquanto algumas coisas ele deve cuidar sozinho. Uma dessas coisas é o preenchimento e as margens nas linhas e módulos. Como o Beaver Builder cuida disso, qualquer preenchimento ou margem no wrapper de conteúdo do seu tema não será necessário e pode até atrapalhar certas coisas, como fundos de linha de ponta a ponta.

Por exemplo, usando o tema Twenty Twelve, você pode ver que há espaço extra ao redor do layout do construtor que evita que a foto de fundo vá de ponta a ponta…

Com alguns ajustes de CSS usando a classe fl-builder que mencionei acima, consegui fazer com que ficasse assim…

Infelizmente, cada tema lidará com suas margens e preenchimento de maneira diferente. Não poderei fornecer uma solução que funcione em todas as situações aqui, mas se você tiver um bom conhecimento de CSS, o código a seguir está na linha do que você deseja implementar…

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

Linhas de largura total

Outro recurso popular do Beaver Builder que você pode querer oferecer suporte em seus temas são as linhas de largura total. As linhas de largura total não vão apenas para a borda do wrapper de conteúdo, elas vão para a borda do navegador. Uau!

Por padrão, todas as linhas no Beaver Builder têm uma largura máxima que pode ser ajustada nas configurações globais e dimensionadas adequadamente para dispositivos menores. Mesmo que o seu wrapper de conteúdo tenha largura total, as linhas e seu conteúdo ainda estarão contidos em um layout em caixa, como na captura de tela abaixo.

Quando um usuário opta por deixar uma linha com largura total nas configurações de linha, a largura máxima é removida e essa linha preencherá todo o espaço de ponta a ponta assim…

Esta é uma ótima técnica, mas só funciona se o wrapper de conteúdo do seu tema também for para a borda do navegador.

Assim como as margens e o preenchimento, cada tema irá lidar com a largura do seu wrapper de conteúdo de maneira diferente. Novamente, não poderei fornecer uma solução que funcione em todas as situações aqui, mas se você tiver um bom entendimento de CSS, o código a seguir está na linha do que você deseja implementar…

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

Cores padrão dos botões

O Beaver Builder oferece excelente suporte para uma ampla variedade de estilos de botões, mas o padrão, bem, é bem chato. Adicionar o seguinte CSS ao seu tema e ajustá-lo para corresponder ao seu design dará aos botões do Beaver Builder uma aparência padrão que melhor se adapta ao seu estilo.

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

Apenas tome cuidado para não substituir muitos estilos padrão do botão ou você correrá o risco de quebrar as configurações do módulo do botão.

Tenha cuidado com os índices Z

Provavelmente, se você escreveu algum CSS em sua vida, você se deparou com problemas de índice z. Do que especificamente estou falando? Coisas em cima de outras coisas que tornam algumas coisas inacessíveis. O quê?

A interface do Beaver Builder deve ficar no topo de toda a página, nada deve ficar acima dela. Como tal, definimos o índice z ridiculamente alto, mas não muito alto ao mesmo tempo. Após anos de experiência, minha recomendação é que você mantenha seus índices z os mais baixos possíveis. Eu sei que isso nem sempre é viável, então se você tentar mantê-los pelo menos abaixo de 100.000, você ficará bem.

Recomendo com o plugin TGM

No passado, os desenvolvedores de temas tinham que agrupar plug-ins de terceiros diretamente em seus temas para incluí-los para seus usuários. Na época, tenho certeza de que parecia uma ótima solução, e muitos ainda a fazem, mas todos nós sabemos hoje em dia por que não é uma boa ideia. Segurança e atualizações!

O que acontece se você agrupar um plugin de terceiros com o seu tema e uma falha de segurança for exposta? Adivinha? É sua responsabilidade enviar uma atualização aos sites de seus usuários; o desenvolvedor do plug-in não seria capaz de fazê-lo, pois o plug-in reside no diretório do seu tema. Já aconteceu antes e meu palpite é que acontecerá novamente até que os desenvolvedores de temas parem com essa prática.

Além disso, você também será responsável por enviar as atualizações mais recentes aos seus usuários. Só mais uma coisa em que você precisa pensar em sua vida agitada. O Beaver Builder lançou 50 atualizações em seu primeiro ano e não planejamos parar por aí. Você realmente quer ser responsável por isso?

Agora que coloquei em você o temor de Deus em relação à incorporação de plug-ins de terceiros em seus temas, gostaria de falar sobre uma alternativa que está se tornando bastante popular.

Ativação de plugin TGM: A melhor maneira de exigir e recomendar plugins para temas WordPress (e outros plugins). Do site deles…

TGM Plugin Activation é uma biblioteca PHP que permite que você facilmente exija ou recomende plug-ins para seus temas (e plug-ins) do WordPress. Ele permite que seus usuários instalem e até mesmo ativem plug-ins automaticamente de forma singular ou em massa usando classes, funções e interfaces nativas do WordPress. Você pode consultar plug-ins pré-empacotados, plug-ins do Repositório de plug-ins do WordPress ou até mesmo plug-ins hospedados em outro lugar na Internet.

Resumindo, você deve dar aos seus usuários a opção de instalar plug-ins de terceiros. Se eles decidirem, você pode deixar a atualização para o núcleo do WordPress e para o autor do plugin, não para você.

Ganhe algum dinheiro

Estamos muito lisonjeados com o fato de outros desenvolvedores terem elogiado nosso trabalho e terem chegado ao ponto de fornecer suporte para ele em seus próprios produtos. Estamos tão felizes com isso que agradecemos àqueles que fornecem suporte do Beaver Builder para seus temas.

Esse pequeno agradecimento é um filtro que permite substituir nossos links de atualização na versão lite pelo seu link de afiliado, essencialmente ganhando dinheiro sempre que alguém que usa seu tema decide atualizar para a versão paga do Beaver Builder.

Como funciona? Basta adicionar o seguinte código ao seu arquivo de funções enquanto altera o texto que diz YOUR_LINK_HERE com seu link de afiliado e pronto! Você está no negócio.

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

Concluindo

Com alguns ajustes aqui e ali, você pode colocar seu tema em funcionamento com suporte avançado para Beaver Builder rapidamente. Não hesite em nos informar se tiver alguma dúvida e sinta-se à vontade para compartilhar se decidir otimizar seu tema para o Beaver Builder ou sentir que algo está faltando nesta postagem. Adoraríamos ter você a bordo!