Documentação Advanced Gutenberg

I. ADVANCED GUTENBERG INSTALAR

1.1 Instale

Para instalar o nosso plugin, você deve usar o instalador padrão do WordPress, ou descompactar e colocar tudo na pasta em / wp-content / plugin.

 

Então clique em ativar plugin, para ver o menu Advanced Gutenberg aparecer no menu esquerdo do WordPress.

1.2 Atualize o plugin

Para atualizar o Advanced Gutenberg, você pode usar o atualizador padrão do WordPress. Você também pode remover e instalar a nova versão de um arquivo .zip baixado www.joomunited.com. Em qualquer caso, você não perderá nenhum conteúdo porque tudo está armazenado no banco de dados.

 

 

Certifique-se de sempre ter a versão mais recente para evitar problemas de segurança e estabilidade.

II. FUNÇÕES COMUNS

2.1. Lista de bloqueio

Usando nosso plugin, você pode criar vários perfis e selecionar quais blocos no Lista de blocos estará disponível para cada perfil.

Para configurar seu próprio perfil, você pode usar o "Atribuição de perfil" guia no "Advanced Gutenberg" cardápio. Escolha um dos perfis e você verá a configuração do perfil.

 

 

Você pode ativar / desativar blocos em Gutenberg clicando neles. Quando terminar, pressione o botão Atualizar lista para atualizar novos ícones de bloco.

 

 

 

Depois de salvos, os blocos estarão disponíveis no seu editor.

 

 

Bloqueio de botão avançado

Você pode criar um Botão Avançado clicando no botão na seção Advanced Gutenberg.

 

 

No painel direito, você pode ajustar algumas configurações para o botão:

• Estilos: 4 estilos predefinidos

  • Padrão

  • Delineado

  • Ao quadrado

  • Esboço quadrado

• Link do botão:

  • URL do link

  • Abrir em uma nova guia: On / Off.

 

 

• Cor do texto:

  • Tamanho do texto

  • Cor de fundo

  • Cor do texto

 

 

• Fronteira:

  • Raio da borda

  • Estilo da borda: sólido, pontilhado, cume, ...

  • Cor da borda

  • Largura da borda

 

 

• Margem: superior, direita, inferior e esquerda.

• Preenchimento: superior, direita, inferior e esquerda.

 

 

• Flutuar:

  • Configurações de cor: cor de fundo, cor do texto e cor da sombra.

  • Sombra (H (horizontal) offset, V (vertical) offset, blur, spread), opacidade e velocidade de transição.

 

 

Bloco de lista avançada

Você pode criar um Lista Avançada clicando no botão na categoria Advanced Gutenberg.

 

 

Depois de inserir o conteúdo, você pode ajustar as configurações no painel direito:

• Configurações de texto

  • Tamanho do texto

• Configurações de ícone

  • Ícone (lista, cor e tamanho)

  • Altura da linha

  • Margem

  • Preenchimento

 

 

Bloco de resumo

Você pode criar um Resumo bloquear clicando no botão na categoria Advanced Gutenberg depois de definir pelo menos uma tag Heading na postagem ou na página. O resumo pode ser alinhado à esquerda, ao centro ou à direita. Para atualizá-lo, use o botão Atualizar Resumo.

 

 

No painel à direita, há algumas opções que você pode ajustar:

• Carga minimizada: para mostrar / ocultar o resumo por padrão

• Título do cabeçalho de resumo: o texto do cabeçalho do resumo, que é exibido quando o Carga minimizada a opção está ativada

• Cor da âncora: escolha uma cor para o resumo

 

 

Bloco Contador (Contagem)

 

Você pode criar um Conte para cima bloco, possivelmente com um símbolo, clicando em seu botão na categoria Advanced Gutenberg.

 

 

Então, no painel direito, você pode ajustar algumas opções para o contador:

• Configurações de cor: Cor do cabeçalho, cor do Count Up e cor do Description

• Colunas: 1-3

• Tamanho do Número do Contador: definir o tamanho dos números

• Símbolo de Contador: adicione um caractere antes ou depois do contador

• Botão de alternância: defina a posição do símbolo (On ​​significa que o símbolo vem depois dos números)

 

 

Bloco de Imagem Avançada

o Imagem Avançada bloco pode ser usado para criar uma imagem. Para adicionar um, clique no Imagem Avançada botão na categoria Advanced Gutenberg e, em seguida, escolha uma imagem para inserir.

 

 

Em seguida, você pode alterar o título da imagem e seu subtítulo. Você pode ajustar as configurações da imagem no painel direito.

• Ação ao clicar: abra a imagem em um lightbox ou abra um URL personalizado

• URL do link: Abrir link em nova guia (botão de alternância)

• Abrir link em nova aba: Ligado desligado

• Tamanho da imagem: se a imagem deve ser exibida com largura total ou com altura e largura personalizadas

 

 

• Selecionador de ponto focal: selecione o ponto para focar na imagem ou defina a posição horizontal / vertical

• Sobreposição de opacidade padrão

• Sobreposição de opacidade ao passar o mouse

• Configurações de cor: Cor do título, cor da legenda, cor da superposição

• Alinhamento de texto: Alinhamento vertical (Superior, Central, Inferior), Alinhamento horizontal (Esquerda, Central, Direita)

 

 

Bloco Testimonial

Você pode inserir um depoimento em seu conteúdo clicando no Testemunho botão na categoria Advanced Gutenberg. Depois, você pode alterar o avatar, nome, cargo e descrição do depoimento.

 

 

Por fim, no painel direito, você pode ajustar as configurações do Depoimento. Quando a opção de exibição Slider está desativada, estas são as configurações:

• Colunas: O intervalo de colunas na exibição Normal é de 1 a 3 e na exibição de Slider é de 4 a 10.

• Avatar: Tamanho do avatar, cor de fundo e configurações de borda, que incluem cor, raio e largura

• Cores de texto:

  • Cor do nome

  • Cor da posição

  • Cor da descrição

 

 

Quando você ativa Vista do slider opção, algumas opções adicionais para o controle deslizante serão exibidas:

• Número de ítens
• Itens para mostrar
• Itens para rolar

• Modo central
• Pausar ao passar o mouse
• Reprodução automática
• Velocidade de reprodução automática (ms)
• Loop infinito
• Velocidade de transição (ms)
• Mostrar pontos
• Mostrar Setas
• Tamanho da seta

 

• Cores do controle deslizante:
  • Cor da seta e da borda
  • Cor dos pontos

 

 

Bloco de mapa

Para usar o Mapa bloco, você precisa adicionar uma chave de API do Google na configuração. Depois disso, você deve seguir este ligação, Clique em Ativar APIs e serviços , em seguida, pesquise e ative a Geolocation API, a API JavaScript do Google Maps.

Uma vez adicionado, você pode criar o mapa clicando no Mapa botão na categoria Advanced Gutenberg.

 

 

No painel direito, você pode inserir um local inserindo Latitude e Longitude ou inserindo um Endereço e pressionando o botão Buscar Local.

Algumas opções adicionais para o mapa estão disponíveis:

• Nível de zoom

• Altura

• Ícone de marcador

• Título do Marcador

• Descrição do marcador

• Dica de ferramenta de marcador aberto

• Estilos de mapa: silver, retro, night, ... e você também pode adicionar seu estilo personalizado.

 

 

Bloco de Vídeo Avançado

Você pode criar um vídeo para uma postagem clicando no Vídeo Avançado botão na seção Advanced Gutenberg. Em seguida, você pode colar o URL do Youtube ou Vimeo ou usar qualquer vídeo local do seu servidor. Você pode alterar a imagem de visualização clicando no botão Editar no canto superior esquerdo.

 

 

Em seguida, você pode ajustar as configurações do vídeo no painel direito.

• Abra o vídeo na caixa de luz: a mesa de luz oferece opções de exibição adicionais

• Largura completa: se estiver desligado, você precisa definir uma largura personalizada para o vídeo

• Altura do vídeo

• Configurações de cor: Cor de sobreposição e cor do botão Reproduzir

• Botão Play: Estilo do ícone, tamanho do botão Reproduzir

 

 

Bloco de tabelas avançadas

Você pode criar uma tabela clicando no Tabela Avançada botão na categoria Advanced Gutenberg.

 

 

Você pode editar a tabela depois de definir o número de coluna e linha.

 

 

Depois disso, você pode inserir texto ou ajustar linhas e colunas do próprio editor logo acima do bloco da tabela. Mais configurações podem ser modificadas no painel direito.

• Estilos

  • Padrão

  • Listras

 

 

• Configurações da tabela

  • Largura máxima: Defina isso como 0 para tornar a largura máxima equivalente a 100%

  • Células da tabela de largura fixa

  • Cabeçalho da tabela, rodapé

  • Fronteira colapsada

 

 

• Configurações da Célula

  • Configurações de cor: Cor de fundo, cor do texto

  • Fronteira: estilo de borda, cor e largura

  • Preenchimento: parte superior, inferior, esquerda e direita

  • Alinhamento de texto: alinhamento horizontal e vertical

 

 

Você pode até mesmo mesclar células (usando o botão Shift) e dividir as células mescladas com o Tabela Avançada quadra.

Bloco de Acordeão Avançado

Você pode criar um Acordeão Avançado quando precisar exibir mais conteúdo em uma área menor clicando no Avançado Acordeão botão na categoria Advanced Gutenberg. Depois disso, haverá dois elementos de acordeões de grupo sendo exibidos por padrão.

 

 

Uma vez criado, você pode ajustar as opções de cabeçalho, corpo ou borda no painel direito.

• Configurações de acordeão:

  • Espaçamento inferior: Defina o espaço entre cada acordeão (somente na exibição Frontend)

  • Inicial recolhida: Faça todos os acordeões desmoronados por padrão.

• Configurações de cabeçalho

  • Estilo de ícone de cabeçalho

  • Configurações de cor: Cor de fundo, cor do texto e cor do ícone

 

 

• Configurações de cor corporal

  • Cor de fundo

  • Cor do texto

• Configurações de borda

  • Estilo de borda: sólido, tracejado ou pontilhado

  • Configurações de cor

  • Largura da borda, raio

 

 

Bloco de guias avançadas

Da mesma forma, você pode criar um Advanced Aba bloquear quando você precisar exibir mais conteúdo em uma área menor. Para inserir um, clique no Guia Avançado botão na categoria Advanced Gutenberg.

 

 

Em seguida, você pode ajustar as opções de guia, corpo ou borda no painel direito.

• Estilo de guias
  • Computador, tablet ou celular
  • Horizontal ou Vertical
• Configurações de guias
  • Guia Abrir inicial

 

 

• Cores de abas

  • Cor de fundo

  • Cor do texto

  • Cor do plano de fundo da guia ativa

  • Cor do texto da guia ativa

 

 

• Cores do corpo

  • Cor de fundo

  • Cor do texto

• Configurações de borda

  • Estilo: sólido, tracejado ou pontilhado

  • Cor

  • Largura da borda, raio

 

 

Bloco de links sociais

Você pode compartilhe seus links sociais com muita facilidade usando o Links Sociais bloco, que pode ser criado clicando no botão na categoria Advanced Gutenberg.

 

 

Você pode usar o ícone já pronto ou carregar seu próprio ícone e ajustar mais algumas opções no painel direito.

• Ícones Predefinidos: você pode fazer upload do seu ícone personalizado

• Cor do ícone predefinido

• Configurações de ícones

  • Tamanho do ícone, espaço

 

 

Bloco de Mensagens Recentes

Existem três layouts disponíveis para exibir suas postagens recentes: as visualizações Grade, Lista e Controle deslizante. Você pode criar qualquer uma dessas visualizações clicando no Postagens recentes botão na categoria Advanced Gutenberg.

 

 

Você pode ver como os blocos serão exibidos no frontend na imagem acima ou na nossa Demonstração Advanced Gutenberg.

No painel direito, você pode ajustar as configurações de cada layout:

• Ordenar por

 

• Categoria

• Número de ítens

• Colunas (somente para exibição em Grade)

• Exibir imagem em destaque

• Exibir mensagem do autor

• Exibir data de postagem

• Exibir mais links

• Leia mais texto

• Exibir trecho de postagem

• Primeiro texto postado como trecho: exibir alguma parte do primeiro texto encontrado no post como trecho.

 

 

Woo Products Block

Existem 2 layouts disponíveis para o Woo Products block: as visualizações Normal e Slide podem exibir produtos WooCommerce no seu blog WordPress. Você pode inserir este bloco clicando no botão Woo Products botão na categoria Advanced Gutenberg.

 

 

Você pode ver como os blocos serão exibidos no frontend na imagem acima ou na nossa Demonstração Advanced Gutenberg

No painel direito, você pode ajustar as configurações de cada layout:

• Configurações de produtos

  • Status do produto

  • Categoria

• Configurações de Layout

  • Colunas

  • Número de produtos

  • Ordem

 

 

Bloco Deslizante de Imagens

Se você quiser exibir um número de imagens como um slide, clique em Slider de imagens botão na categoria Advanced Gutenberg.

 

 

Então pressionando Adicionar imagens botão para escolher suas imagens mostradas no slide. Depois disso, você pode inserir o texto Título e Texto descrição para cada imagem.

 

 

Você pode editar as configurações do controle deslizante no painel direito.

Configurações de imagem

• Ação ao clicar: Nenhum, Abrir imagem na mesa de luz e Abrir link personalizado

• Largura completa

• Altura automática

• Sempre mostrar sobreposição

Configurações de cor

• Hover Color

• Cor do Título

• Cor do texto

 

 

Alinhamento de texto

• Alinhamento vertical

  • Topo

  • Centro

  • Inferior

• Alinhamento horizontal

  • Esquerda

  • Centro

  • Certo

 

Bloco de contato

Você pode obter uma notificação de contato por e-mail do cliente com este bloco. Você pode criar esse formulário clicando em Formulário de Contato botão na categoria Advanced Gutenberg.

 

 

Você pode editar as configurações do Formulário de Contato no painel direito.

• Aviso prévio: Ele não aparecerá se você ativar a opção reCAPTCHA em Configurações.

• Remetente de e-mail: Você pode mudar em Configurações. Um e-mail será enviado para o e-mail admin (por padrão) sempre que um formulário de contato for enviado.

• Rótulo de Texto:

  • Placeholder de entrada de nome

  • Espaço reservado para entrada de email

  • Espaço reservado para entrada de mensagens

  • Envie o texto

  • Texto de aviso de campo vazio

  • Envie o texto de sucesso

 

 

• Cor de entrada: Cor de fundo e cor do texto

• Configurações de borda: Cor da Borda, Estilo da Borda e Raio da Borda

• Enviar configurações do botão:

  • Configurações de cor: Fronteira e texto, plano de fundo

  • Raio da borda do botão

  • Posição do botão: Esquerda, Centro e Direita

 

Bloco de boletim informativo

Para obter o e-mail do cliente, você pode criar o bloco de e-mail clicando em Boletim de Notícias botão na categoria Advanced Gutenberg.

 

 

Você pode editar as configurações da Newsletter no painel à direita.

• Aviso prévio: Ele não aparecerá se você ativar a opção reCAPTCHA em Configurações.

• Configurações de formulário:

  • Estilo de formulário: padrão / alternativo

  • Largura do formulário (px)

• Rótulo de Texto:

  • Espaço reservado para entrada de email

  • Envie o texto

  • Texto de aviso de campo vazio

  • Envie o texto de sucesso

 

 

• Cor de entrada: Cor de fundo e cor do texto

• Configurações de borda: Cor da Borda, Estilo da Borda e Raio da Borda

• Enviar configurações do botão:

  • Configurações de cor: Fronteira e texto, plano de fundo

  • Raio da borda do botão

 

 

Bloco Gerenciador de Colunas

Se você quiser criar um bloco contendo outros blocos dentro, você deve escolher Gerente de Colunas na categoria Advanced Gutenberg. Aparecerá o estilo do bloco ao criar um novo.

 

 

Então você pode adicionar qualquer tipo de bloco que você quiser em cada coluna. Aqui está um bloco do gerenciador de colunas que inclui 2 colunas: a da esquerda é Advanced Image e a da direita é Paragraph, Advanced List.

 

 

E no painel direito, você pode ajustar as configurações do bloco Gerenciador de Colunas.

• Configurações responsivas

  • Estilo para cada tipo de dispositivo: desktop, tablet, celular

  • Espaço entre colunas

  • Preenchimento: Superior, Direito, Esquerdo e Inferior

  • Margem: Superior, Direita, Esquerda e Inferior

 

 

 

• Configurações de linha

  • Colunas envolvidas: se suas colunas estiverem sobrecarregadas, elas serão separadas para uma nova linha (por exemplo: use isso com o espaçamento entre colunas).

  • Tag do envoltório: Div, Header, Main, ...

  • Largura Máxima do Conteúdo (px vw,%)

  • Altura mínima do conteúdo (px, vw, vh)

  • Conteúdo Max Height (px, vw, vh)

 

 

Login / Register Form Block

Você pode criar um formulário de login ou formulário de registro para o seu site Clicando Formulário de Login / Registro botão na seção Advanced Gutenberg.

 

 

E você pode mudar a visualização de Login para Register na barra de navegação deste bloco ou no painel direito.

 

 

E então você pode ir para o painel direito para ajustar mais detalhes sobre o formulário.

• Formulário inicial: Entre ou Registre-se

• Redirecionar após o login: Página inicial, painel ou personalizado

• Largura do formulário (px)

• Mostrar logotipo

• Largura do logotipo (px)

• Mostrar ícone do campo de entrada

• Mostrar link de registro / cabeçalho

• Cor do cabeçalho

• Mostrar link de senha perdida

 

 

• Placeholder de entrada

  • Espaço reservado para entrada de login

  • Placeholder de entrada de nome de usuário

  • Espaço reservado para entrada de email

• Texto / cor de entrada

  • Cor de fundo de entrada

  • Cor de entrada

  • Cor do texto

• Configurações de borda

  • Cor da borda

  • Estilo de borda

  • Largura da borda

 

 

• Enviar configurações do botão

  • Fronteira e Texto

  • fundo

  • Raio da borda do botão

  • Posição do botão

• Botão Enviar Hover

  • Cores pairadas: Fundo, texto e cor de sombra

  • Sombra: Opacidade, velocidade de transição e sombra (deslocamento horizontal (H), deslocamento vertical (vertical), desfoque, espalhamento)

• Aviso prévio: É altamente recomendável ativar o reCaptcha do Google para evitar spam. Você pode ativá-lo no formulário Recaptcha em Adv. Gutenberg> E-mail e formulário .

 

 

Bloco de Barras de Pesquisa

Você pode criar uma caixa de texto de pesquisa no frontend clicando no Barra de pesquisa botão na categoria Advanced Gutenberg.

 

 

Você pode ajustar as configurações da barra de pesquisa no painel direito.

• Estilos: existem 2 estilos predefinidos: padrão e clássico

• Estado da barra de pesquisa

  • Largura total: on / off

  • Largura

• Configurações do ícone de pesquisa

  • Ícone de pesquisa à direita: ativado / desativado

  • Ícone de pesquisa

 

 

• Configurações de entrada de pesquisa

  • Placeholder de pesquisa

  • Cor de entrada: cor de fundo e texto

 

 

• Configurações do botão de pesquisa

  • Mostrar botão de envio: ativado / desativado

  • Botão de pesquisa à esquerda: On / Off

  • Cor de fundo e texto

  • Raio da borda

• Cores pairadas: Fundo, texto e cor de sombra

• Hover Shadow: Opacidade, velocidade de transição e sombra (deslocamento horizontal (H), deslocamento vertical (vertical), desfoque, espalhamento)

 

 

2.2. Configuração

Para usar o recurso lightbox e de legenda para imagens, é necessário ativar o Galerias abertas na mesa de luz e Legenda da imagem opções respectivamente em Guia Configuração do Advanced Gutenberg nas configurações.

 

 

• Abrir galerias na lightbox: Abrir imagens da galeria como um pop-up de estilo de caixa de luz

• Legenda da imagem: Carregar o atributo de imagens (alt) como legenda para imagens de lightbox

• Remover Autop: Remova a função WordPress autop, usada para evitar que parágrafos indesejados sejam adicionados em alguns blocos

• Chave da API do Google: essa chave de API é necessária para usar o bloco de mapas

Configurações de Blocos

• Ativar espaçamento de blocos: Aplique espaçamento mínimo de bloco vertical automaticamente - o padrão é nenhum, e os valores devem ser dados em pixels

• Blocos de cor do ícone: Definir cor para ícones de blocos no admin, aplicar apenas para blocos Advanced Gutenberg

• Largura do editor: Definir o tamanho da largura do editor admin do Gutenberg

• Miniatura predefinida: Definir a miniatura de postagem padrão para usar nos blocos de postagens recentes

• Ativar o guia visual de colunas: Ativar borda para materializar Adv. Bloco de colunas Gutenberg

Você também pode encontrar Adv. Configurações de Gutenberg no canto superior direito do seu editor, ao lado do Definições ícone.

 

 

2.3 Configuração Padrão de Blocos

 

Para ajustar os blocos no Advanced Gutenberg, você pode ir ao menu Advanced Gutenberg> Configuração> guia Configuração de Blocos Padrão.

 

 

Para cada bloco, você pode editar suas configurações padrão clicando no botão adjacente Definições ícone.

 

 

2.4 E-mail e Formulário

Configurações de email

Você pode definir as informações de remetente e receptor Formulário de Contato quadra:

 

 

Formulário ReCaptcha

Primeiro, você deve registrar o reCaptcha no seu site Aqui, depois clique em Consola do administrador botão para introduzir a informação.

Depois disso, preencha o site reCAPTCHA e a chave secreta reCAPTCHA. Lembre-se de ativar a opção reCAPTCHA. Você pode selecionar o idioma e o tema para o reCAPTCHA também.

 

 

Dados de formulários

A partir daqui você pode baixar Formulário de Contato e Formulário de boletim dados. Você pode exportar um arquivo .CSV ou .JSON.

 

 

2.5 estilos personalizados

o Advanced Gutenberg A configuração também permite que você defina snippets CSS personalizados que podem ser usados ​​em suas opções de editor e tag HTML. Para usar estilos personalizados, navegue até o Estilos Personalizados página de Advanced Gutenbergesquerda do menu.

Para criar um novo estilo, clique no “Adicionar nova turma” botão na parte inferior da lista de estilos. Você pode editar seu CSS diretamente no campo CSS personalizado.

 

 

Todas as alterações feitas serão exibidas na parte esquerda da página. Eles serão aplicados à string com “Texto de exemplo”. O texto acima e abaixo da string mostra a aparência dos seus estilos no restante dos elementos. Depois de editar seu estilo personalizado, salve-o usando o “Salvar estilos” botão.

Para aplicar um estilo ao elemento no editor, você deve selecionar o elemento e escolher um estilo na lista suspensa denominada “Estilos personalizados”. Para reverter para o estilo padrão e excluir todos os estilos personalizados, escolha "Parágrafo" opção.