Como criar um bloco adesivo (fixo) em Gutenberg sem código

Você está procurando maneiras de criar um bloco adesivo em Gutenberg? 🤔

Se você deseja criar uma isenção de responsabilidade de afiliado, oferecer descontos ou chamar a atenção do visitante para recursos importantes do seu produto – um bloco adesivo pode ajudá-lo a atingir esses objetivos.

Os blocos fixos, também conhecidos como blocos fixos, permanecem visíveis na tela mesmo enquanto o usuário rola a página para baixo, garantindo que o conteúdo que você deseja destacar esteja sempre à sua vista.

👉 Aqui está um exemplo do que estamos falando – você pode ver como os ícones sociais ficam “presos” em suas posições mesmo quando o usuário rola a tela:

Adicionar um bloco adesivo no Gutenberg fornece uma experiência de usuário perfeita e envolvente, permitindo que você transmita sua mensagem de maneira eficaz e capte o interesse do seu público.

Gutenberg não oferece um bloco adesivo pronto para uso. Porém, existem ferramentas de terceiros que você pode usar para adicionar blocos fixos às suas postagens e páginas.

Neste tutorial, mostraremos como usar um plugin popular de Gutenberg chamado Otter Blocks para adicionar um bloco adesivo ao seu site WordPress.

Vamos mergulhar nisso. 🤿

Como adicionar um bloco adesivo no Editor Gutenberg

Para adicionar um bloco adesivo no Editor Gutenberg, você precisa seguir os seguintes passos:

• Passo 1: Instale e ative o plugin Otter Blocks
• Etapa 2: ative a ferramenta Transform to Sticky para o seu bloco
• Etapa 3: alterar a posição do bloco adesivo
• Etapa 4: configurar o deslocamento
• Etapa 5: ativar o bloqueio fixo no celular
• Etapa opcional: experimente o modo flutuante
• Etapa opcional: especifique o comportamento do bloco

Passo 1: Instale e ative o plugin Otter Blocks 🔌

Otter Blocks é um plugin para WordPress que amplia as funcionalidades do Editor Gutenberg.

Ele oferece uma coleção de blocos de construção de páginas, recursos de editor e modelos para ajudar a melhorar o design e a função do seu site.

Alguns dos blocos mais populares oferecidos pela Otter são tabelas de preços, depoimentos, ícones sociais, mapas, barras de progresso, animações, contagem regressiva e análises de produtos, entre outras coisas. Aqui está uma lista completa de blocos Otter.

Otter Blocks tem uma versão gratuita e uma premium (chamada Otter Pro).

Você pode usar a versão gratuita para criar um bloco adesivo básico em Gutenberg, então você pode seguir este tutorial gratuitamente.

No entanto, para realizar algumas das etapas que abordamos, como adicionar distância entre o bloco e a tela, remover o bloco aderente no frontend, exibir blocos aderentes no celular, etc., você precisa da versão premium do plugin.

Otter Pro está disponível por uma taxa anual de US$ 49 para um único site. Você pode comprá-lo aqui. E se você quiser experimentar o plugin antes de usá-lo, experimente esta demonstração.

➡️ Para continuar, instale a versão gratuita ou premium do Otter. No tutorial abaixo, tentaremos observar quando um determinado recurso requer a opção premium.

Etapa 2: ative a ferramenta Transform to Sticky para o seu bloco 🚧

Abra a página ou postagem onde deseja adicionar o bloco adesivo no Editor Gutenberg.

Selecione o bloco que deseja tornar fixo e vá até o painel localizado no lado direito do editor.

No painel navegue até Block e vá até a opção Block Tools . Expanda as Ferramentas de Bloco selecionando o sinal de mais .

Em seguida, escolha Transformar em Fixo no menu suspenso.

Uma nova opção chamada Sticky aparecerá logo abaixo de Block Tools. Expanda isso e vá para Sticky To .

Em Sticky To, você pode definir o elemento ao qual deseja que o bloco fique. Existem quatro opções:

1. Bloco de nível superior
2. Seção
3. Bloco pai
4. Tela

Para entender essas opções e qual delas se adapta ao seu post fixo, abra a Visão geral do documento no Editor Gutenberg e observe os blocos ao redor do seu bloco de post fixo.

O bloco superior é o bloco de nível superior. Ao selecionar o bloco de nível superior , você fixará seu bloco fixo no bloco mais superior . No nosso caso, é o bloco Grupo da imagem abaixo.

Em seguida, selecionar Section garantirá que o bloco adesivo seja fixado ao bloco Section, e selecionar Bloco pai fará com que o bloco adesivo seja fixado ao bloco logo acima do seu bloco adesivo .

No nosso caso, o bloco Parent é o bloco Section Column. Veja a imagem abaixo.

Por fim, selecionar a opção Tela instruirá o editor a ignorar todos os blocos e apenas colar a postagem no topo da tela do usuário .

A posição do bloco adesivo é, por padrão, definida como superior. Para saber como alterar sua posição, prossiga para a próxima etapa.

Etapa 3: altere a posição do bloco adesivo 🚩

Para alterar a posição do bloco adesivo, volte ao painel direito e procure Posição logo abaixo da opção Stick To.

Você pode posicionar o bloco adesivo na parte superior ou inferior da tela. A posição inferior está disponível apenas para usuários do Otter Pro .

Esta é a aparência do bloco em um de nossos sites de demonstração:

Etapa 4: configurar o deslocamento ⚙️

Depois de definir a posição do bloco adesivo, tente visualizá-lo. Se o bloco parecer muito longe ou perto da tela, use a opção Deslocamento para aumentar ou diminuir a distância entre o bloco adesivo e a tela.

Etapa 5: Habilite o bloqueio fixo no celular 📱

Por padrão, o bloco adesivo aparece apenas em desktops. Se você deseja habilitá-lo no celular, basta ativar a opção Habilitar no celular .

A propósito, apenas usuários do Otter Pro podem acessar a opção mobile .

Etapa opcional: experimente o modo flutuante 🏄

O bloco fixo pode ser configurado para flutuar ao longo da tela quando os usuários rolam pela página. É uma ótima maneira de chamar a atenção do usuário e direcioná-lo para o bloco fixo.

Somente usuários do Otter Pro podem usar o modo flutuante e ele pode ser aplicado apenas ao bloco de nível superior , que no nosso caso é o bloco de grupo.

Assim que você alternar o modo flutuante, será solicitado que você defina a largura , o lado e o deslocamento lateral do bloco.

A largura, claro, refere-se à largura do bloco e o lado ajuda a definir a localização do bloco (esquerda ou direita) na tela. O deslocamento refere-se à distância entre o bloco adesivo e o lado escolhido .

Recomendamos que você visualize a página após configurar o modo flutuante e faça os ajustes necessários.

Etapa opcional: especifique o comportamento do bloco 👨🏽‍💼

Usando o plugin Otter Block, você pode criar vários blocos fixos na mesma página. Às vezes, esses blocos podem colidir uns com os outros. Você pode ditar como um bloco adesivo responderá durante colisões usando a opção Comportamento .

Você pode definir o comportamento para recolher , desaparecer ou empilhar .

Escolher o colapso fará com que os blocos pegajosos com o mesmo movimento entrem em colapso quando colidirem, assim:

E escolher fade fará com que o bloco desapareça ou desapareça um no outro bloco .

Finalmente, escolher a pilha irá empilhar o bloco em cima dos outros blocos pegajosos nos quais ele colide, conforme mostrado no gif abaixo.

Tanto fade quanto stack estão disponíveis apenas para usuários do Otter Pro .

É isso. Agora você adicionou um bloco adesivo em Gutenberg. 🤩

Crie seu primeiro bloco adesivo em Gutenberg 🧱

Adicionar um bloco fixo ou fixo no Gutenberg é uma ótima maneira de chamar a atenção do visitante para as partes importantes do seu site WordPress.

Como Gutenberg não oferece um bloco fixo padrão, você precisa usar um plugin de terceiros para adicionar essa funcionalidade ao seu site.

Embora existam vários plug-ins de blocos fixos, Otter Blocks é o plug-in de blocos mais fácil e fácil de usar que existe.

Possui uma versão gratuita e uma premium. A versão gratuita pode ser usada para criar um bloco fixo, mas algumas das configurações avançadas, como fixar o bloqueio na parte inferior da tela ou ativar o bloqueio no celular, podem ser obtidas usando a versão premium do plugin.

👉 Para colocar um bloco fixo em funcionamento em sua página usando o plugin Otter Blocks, você precisa seguir as etapas abaixo:

Se você tiver alguma dúvida sobre como criar um bloco adesivo em Gutenberg, informe-nos na seção de comentários abaixo .