Revisão e instalação do plug-in do editor de blocos e construtor de páginas do Qubely Gutenberg

Publicados: 2019-11-22

À medida que os dias passam, as pessoas estão a gostar do editor de Gutenberg. Este editor WordPress baseado em blocos não apenas trouxe um novo sistema de construção de páginas, mas também permitiu aos usuários do WordPress muitos novos recursos. Com o bloco padrão do Gutenberg, você pode criar um site muito melhor do que antes. Mas você sentirá a extrema necessidade de blocos e funcionalidades avançadas para projetar páginas da web profissionais.

É aqui que entra o Qubely – um Visual Gutenberg Block Toolkit que minimiza as limitações do editor Gutenberg e abre possibilidades ilimitadas para criar qualquer layout simples a complexo em um site WordPress.

Com muitos blocos Gutenberg personalizados dedicados, seções integradas, layouts de página prontos e um mundo de opções de estilo, o Qubely não é apenas um plug-in de bloco Gutenberg, mas um kit de ferramentas de design no editor de blocos Gutenberg que você pode usar para projetar literalmente qualquer layout que desejar. pode imaginar.

Por que você precisaria de um plug-in de bloco Gutenberg?

Boa pergunta. Se o editor Gutenberg pode nos ajudar a criar páginas da web facilmente, por que eu precisaria de um plugin de terceiros, certo? A resposta é que, embora o Gutenberg facilite seus esforços e permita que você construa páginas da web de forma inteligente, ele tem algumas limitações e os blocos padrão podem não cobrir o tipo de conteúdo que você deseja publicar.

Ao fornecer blocos essenciais, um plug-in de bloco do Gutenberg como o Qubely oferece mais opções para fazer as coisas que você precisa fazer em seu site WordPress. Então, se você quiser levar seu editor Gutenberg a um novo nível, você só precisa de um plugin que estenda sua funcionalidade e ofereça blocos personalizados.

O Qubely estende o Gutenberg com muitos blocos personalizados que estão faltando no editor padrão, e você pode assumir o controle do editor de blocos do WordPress com a capacidade de aplicar várias opções de estilo. Além disso, você obtém muitas seções e layouts prontos, o que significa que você nem precisa projetar coisas do zero. Os blocos Gutenberg personalizados do Qubely permitem que você crie páginas da Web impressionantes e otimizadas para dispositivos móveis.

O que o plug-in de bloco Qubely Gutenberg tem para você?

Se você está convencido e deseja instalar um plugin de bloco Gutenberg em seu site WordPress, nossa recomendação, e não se surpreenda, é Qubely. Vamos mergulhar fundo no kit de ferramentas Qubely Gutenberg para ver o que ele reserva para você.

Recursos do Qubely Gutenberg Block Toolkit

  • Pacotes de layout de página prontos

Qubely, para começar, oferece muitos pacotes de layout de página e você pode importar layouts de página e personalizar sua aparência. O pacote de layout de página vem em diferentes categorias para que você possa navegar facilmente e escolher o que precisa. Cada pacote consiste em todas as páginas necessárias, dependendo do tipo.

  • Seções incorporadas

Há uma rica biblioteca de seções predefinidas no Qubely para ajudá-lo a construir um site rapidamente. Essas seções prontas podem ser importadas e usadas como blocos no editor Gutenberg e você não precisa criar seções do zero. Existem diferentes categorias de seções predefinidas para que você possa navegar facilmente por elas e encontrar a que deseja.

  • Blocos avançados de Gutenberg

É aqui que Qubely fica muito mais interessante. Existem vários blocos personalizados do Gutenberg no Qubely para criar qualquer layout que você possa imaginar. Ao instalar o plug-in Qubely, você pode adicionar mais de 22 blocos personalizados ao editor de blocos Gutenberg e levar a experiência de criação de páginas no Gutenberg para o próximo nível.

Blocos avançados de Gutenberg dentro do Qubely

  • Fileira

Crie layouts de linha e coluna totalmente personalizáveis ​​com funcionalidade incrível. Arraste para redimensionar as colunas para obter o layout desejado. Controle o espaçamento, adicione imagem, vídeo, cor, gradiente ou modo de mesclagem ao plano de fundo da linha.

  • Botão

Projete qualquer combinação possível de layout, formas ou interface em botões. Botão de estilo com as opções disponíveis no bloco de botão.

  • Testemunho

Exiba depoimentos de forma criativa com nomes, avatares, ícones e muito mais. Escolha um layout de depoimento entre as opções. Decida se deseja mostrar o ícone de cotação, mensagem, nome, designação, avatar e classificações.

  • Ícone

Coloque ícones em qualquer lugar com ícones Font Awesome e estilize-os do seu jeito. Exibir ícones com ou sem fundo e borda. Estilize os ícones definindo o tamanho do ícone, alinhamento, link, cor de fundo e sombra.

  • Mapa do Google

Incorpore o Google Maps e personalize a altura do mapa, o mapa de zoom e outras opções!

  • Divisor

Belos divisores pré-projetados com configurações de estilo e alinham os divisores de forma flexível.

  • Texto Avançado

Adicione e crie textos. Aplique bordas, sombra de caixa e ajuste a tipografia também.

  • Contador

Adicione um contador com configurações abrangentes, como limite e duração, design, prefixo e postfix, etc.

  • Abas

Exiba conteúdo em guias, adicione animações, ícones e muito mais!

  • Acordeão

Exiba conteúdo de texto recolhível com configuração de estilo ilimitada em uma interface suspensa.

  • Vídeo pop-up

Vídeo pop-up e estilize-os com ícones, wrapper, sobreposição para um incrível envolvimento do visitante. Aplique sobreposição e sombra de caixa e adicione animação ao pop-up de vídeo.

  • Cabeçalho

Títulos de estilo com animação, tipografia, borda e muitas outras opções avançadas.

  • Barra de progresso

Exiba estatísticas em barras de progresso com fundo de barra, animação e muito mais.

  • Ícones sociais

Adicione perfis de mídia social em um só lugar com um rótulo, ícone ou ambos.

  • Grupo de botões

Tenha vários botões em um único lugar com opções de design flexíveis e layouts criativos.

  • Caixa de informação

Coloque informações no site lindamente com Infoboxes que certamente chamarão a atenção do usuário. O bloco de caixa de informações vem com títulos, pré-título, animação, separadores e muitas das opções personalizadas para caixas de informações elegantes em seu site.

  • Lista avançada

Tenha listas avançadas para exibir com layouts prontos e opções de personalização.

  • Formulário de Contato

Permita que os visitantes do site interajam em formulários de contato com campos úteis. Ativar/desativar marcadores e marcadores em um formulário de contato. Projete tipografia de etiqueta com tamanho de fonte desejado, altura, espaçamento e muito mais. Melhore seus estilos de entrada e habilite o captcha.

  • Lista de ícones

Coloque listas de ícones atraentes com muitos ícones e personalize sua aparência.

  • Preços

Crie uma tabela de preços com diferentes planos individualmente usando vários layouts predefinidos. Mostre recursos, emblemas e texto do botão de postagem no plano. Configure a duração do plano, tipografia, emblemas de estilo e edite textos em tempo real.

  • Embalador de bloco

Envolve qualquer bloco com o plano de fundo de sua cor preferida e muito mais com o Block Wrapper.
Equipe: Recrute cada um dos membros da equipe individualmente com seus detalhes, como nomes, designações e imagens.

  • Imagem

Insira imagens e embeleze-as com o Qubely Image Block.

  • Linha do tempo

Apresente os cronogramas de vários eventos, como lançamento de produtos, histórico e marcos da empresa, atualizações futuras, conquistas e muito mais com o novo bloco Timeline do Qubely. Exiba cronogramas e roteiros detalhados e estilize-os com muitas opções de personalização.

Alguns dos melhores recursos do Qubely em detalhes

Construtor de layout inteligente (estrutura de linha-coluna)

Recurso Qubely do Smart Layout Builder

Você pode construir qualquer layout de página da web simples a complexo com estrutura de linha-coluna diretamente no editor Gutenberg. O conceito de construção de layout de linha-coluna amplamente usado dos principais construtores de páginas está dentro do editor Gutenberg, graças ao Qubely.

Combinações de várias linhas e colunas

Existem várias combinações de colunas de diferentes números e tamanhos. O bloco Row do Qubely permite que você leve de 1 a 6 colunas em uma única linha por vez. Você só precisa escolher o que precisa.

Colunas ajustáveis

Arraste e redimensione as colunas simplesmente. Depois de escolher uma linha de um certo número de combinações de colunas, basta ajustar os tamanhos das colunas arrastando-as. Faça o layout desejado com um sistema de coluna ajustável.

Configurações avançadas de coluna de linha

Além de aplicar preenchimento e margem às colunas, você também pode definir o plano de fundo da coluna e o plano de fundo do foco com uma única cor, imagem e gradiente. Dê borda de coluna, aplique border-radius e anime cada coluna individualmente. Além disso, vá além dessas opções de estilo de coluna adicionando CSS personalizado às colunas.

Cor de fundo clássico e gradiente

Recurso Qubely de cor de fundo clássico e gradiente

Quer ter um fundo em cor degradê? Não se preocupe. Você pode fazer isso agora. Qubely permite configurar um fundo de bloco com cores gradientes e clássicas. Ajuste a configuração de fundo e escolha qualquer cor. Há uma paleta de cores para escolher a cor.

Controle de tipografia personalizada

Você pode cuidar completamente da tipografia do seu site. Qubely oferece uma opção de controle de tipografia personalizada com cada bloco onde você pode definir a família de fontes, tamanho, peso e mais facilmente. Você também pode aplicar o peso da fonte, transformar a fonte, definir o tamanho da fonte, espaçamento entre letras, altura da linha, em px, em e porcentagem com base nos dispositivos em que serão exibidos.

Controles responsivos específicos do dispositivo

Recurso Qubely de controle responsivo específico do dispositivo

Crie layouts responsivos e conteúdo de página com blocos Qubely. Controle toda a capacidade de resposta do seu site definindo o ponto de interrupção para vários tamanhos de tela. Assim, tudo o que você cria com o QUbely se torna totalmente responsivo. Além disso, você pode decidir se deseja ocultar/mostrar conteúdo em dispositivos específicos.

Configurações globais de cor e tipografia

Configurações globais de cor e tipografia Recurso Qubely

Com o kit de ferramentas Qubely Gutenberg, você pode configurar a paleta de cores e a tipografia globalmente. Se você alterar as cores na paleta de cores global, as seções atribuídas receberão a cor automaticamente. Assim como a cor, você também pode selecionar a tipografia para diferentes textos, como corpo, título e botões, para serem aplicados globalmente em todo o seu site WordPress.

Efeitos de animação integrados

Efeitos de animação integrados no recurso Qubely gutenberg

Anime as seções da página aplicando efeitos de animação de fade, bounce, slide, zoom, flip, fold, girar, etc. Tenha efeitos de animação nos blocos e torne as páginas da web mais atraentes.

Introdução ao Qubely

Criar belas páginas da web com o Qubely é muito fácil. Você não precisa sair do editor padrão do WordPress. Qubely oferece seus blocos personalizados dentro do editor Gutenberg. Ao ter este plugin de bloco WordPress instalado em seu site, você terá todos os blocos Qubely em uma categoria de Qubely dentro do editor Gutenberg. Vejamos todo o processo abaixo.

● Instale o plug-in Qubely
● Configurar o Qubely
● Acessando blocos Qubely
● Use blocos Qubely
● Importar seções/layouts

Instalação do Qubely no site WordPress

Processo de instalação do Qubely gutenberg no WordPress

Instalar o Qubely é como instalar qualquer outro plugin do WordPress. Você pode instalá-lo pesquisando em seu painel ou baixando-o do diretório do WordPress e depois carregá-lo. A escolha é toda sua.

  • Plugin de configuração do Qubely

Não há tantas coisas para configurar dentro do Qubely. Qubely comece a trabalhar sem ter que modificar nada nas configurações. Ao instalar o Qubely em seu site, A Qubely Options será adicionado ao seu painel do WordPress. Clicar em Opções do Qubely o levará à página de Configurações do Qubely, onde você só precisa decidir onde salvar seu CSS. Selecione Header ou File System em CSS Save Method e clique em Save Changes abaixo.

  • Acessar Blocos Qubely

Existem 14 blocos personalizados dentro do Qubely agora. Aumentaremos gradualmente o número de blocos nas próximas atualizações. Vamos saber como acessá-los.

Acesso de Qubely Blocks no editor WordPress

Depois de instalar o Qubely em seu site, você pode acessar facilmente os blocos do Qubely no editor Gutenberg. Clique no sinal de mais, escreva “Qubely” na categoria de pesquisa do Qubely. Os blocos também podem ser acessados ​​escrevendo o nome do bloco específico na barra de pesquisa.

acessou blocos Qubely no painel do editor Gutenberg

  • Usar blocos Qubely

Usar blocos Qubely é como usar qualquer outro bloco no editor Gutenberg. Acesse os blocos pesquisando no Qubely ou no nome do bloco e clique no bloco a ser usado. O bloco selecionado receberá um design padrão que pode ser personalizado e estilizado com as opções avançadas do Qubely.

  • Importar Seções/Layouts

Importar seções ou layouts no editor qubely

Quer se sentir pronto desde o início? Qubely oferece muitos layouts prontos para serem importados como blocos. Você também pode personalizar e aplicar opções de estilo para torná-las ainda melhores. As seções e layouts prontos vêm em diferentes categorias para facilitar a navegação por eles.

Embrulhando-o

Qubely está melhorando com mais funcionalidades, designs prontos e novos blocos a cada atualização. Portanto, há uma chance de que o Qubely o inspire a usar o Gutenberg e o capacite com muitas opções para publicar as coisas que você deseja compartilhar com o mundo com talento.

Então, o que você está esperando? Obtenha o Qubely hoje e comece a construir sites incríveis.