Loading...
Tutoriais WordPress2020-09-09T19:29:15-03:00

Tutoriais WordPress

Introdução2020-09-09T19:35:53-03:00

O Worpress é o Sistema de Gerenciamento de Conteúdo mais utilizado no mundo, devido à sua versatilidade, grande quantidade de recursos, aliadas à facilidade de utilização. Com ele podemos criar blogs, sites institucionais, lojas virtuais, portfólios, revistas, etc.

Considerando todas essas vantagens, a equipe do Xamativo trabalha preferencialmente com esse sistema.

Assim, nesse tutorial abordaremos passo a passo como utilizar as funções mais utilizadas desse sistema, tanto para aqueles que já possuem o seu site em Worpress quanto para aqueles que desejam criá-lo.

Para facilitar a consulta a este tutorial, dividimos em 35 Tópicos, em que serão abordados:

  • Instalação e configuração do wordpress.
  • Ferramentas do wordpress.
  • Criação de páginas e posts.
  • Configuração de alguns plugins especificos utilizados na construção das páginas.

Após a intalação do wordpress (que será abordada nos próximos tópicos) recomendamos a instalação dos seguintes plugins:

Aproveite! ????

Instalar WordPress2020-09-09T19:35:39-03:00

O primeiro passo para usar o WordPress é instalá-lo. Mas não se preocupe: você não vai precisar procurar o sistema, baixá-lo, fazer upload no servidor, criar um banco de dados e aí instalar.

Dentro do painel de controle da nossa hospedagem (Cpanel), você encontra o instalador automático de aplicativos “Softaculous”, que vai ajudar muito nessa tarefa. Vamos lá!

– Para instalar o WordPress acesse o CPANEL da sua hospedagem e vá até a aba “Softaculous Apps Installer” e clique no ícone “WordPress”

02 – Instalar WordPress

– Na tela seguinte clique em “Install Now”

02 – Instalar WordPress

– Em seguida clique em “Quick Install”

02 – Instalar WordPress

– Selecione a versão do wordpress que deseja instalar (em geral a última versão é a mais indicada), o domínio e o diretório onde deseja instalar. Para instalar no diretório principal do seu site, basta deixar o diretório em branco.

02 – Instalar WordPress

– Em “admin username” defina o nome de usuário que deseja utilizar. Em “admin password” defina a senha. E em “admin email” o email que deseja utilizar para recuperar o usuario e senha caso esqueça. Esses são os dados que você usará para entrar no painel de controle do WordPress e criar / alterar o seu site.

02 – Instalar WordPress

– Em “Select theme” vc pode escolher um tema para instalar junto com o WordPress. Caso não escolha nenhum, o tema padrão será instalado. Após escolher o tema clique em Select.

02 – Instalar WordPress

– Por fim clique em “Instalar”

02 – Instalar WordPress

– Aguarde até a instalação se completar

02 – Instalar WordPress

– Por fim aparecerá uma tela de confirmação de instalação e os links de acesso. O “Endereço de Administração” é o link que vc deve acessar para fazer login no painel de administração utilizando o nome de usuário e senha que escolheu nos passos anteriores.

02 – Instalar WordPress
Instalar um Tema2020-09-09T19:35:29-03:00

Vamos começar pelo básico: tema ou template é um modelo de site para ser editado dentro do painel de controle do WordPress.
Isso significa que você pode alterar cores, disposição dos itens e outras configurações facilmente.
O que pode ser editado depende do tema que você baixar e, eventualmente, pode ser necessário alterar alguma coisa via código fonte.
Existem temas grátis e temas premium (pagos). Naturalmente, os pagos costumam oferecer mais opções de edição.
Quando você instala o WordPress, ele já vem com um tema padrão, mas que pode ser alterado seguindo os passos abaixo:

– Caso esteja construindo um novo site (do zero) poderá instalar e testar diferentes temas/templates gratuitos ou pagos. Clique em Aparência > Temas. Em seguida clique em Adicionar Novo

03 – Instalar um Tema

– O WordPress disponibiliza diversos temas gratuitos. Após escolher o tema que irá utilizar clique em Instalar. Caso tenha comprado um template premium clique em Enviar Tema e faça upload dos arquivos do template para instalá-lo.

03 – Instalar um Tema

Repare que, depois de instalar o tema e clicar em ATIVAR, você pode clicar na opção PERSONALIZAR e na opção INFORMAÇÕES DO TEMA e ajustá-lo conforme a sua necessidade.

Não iremos detalhar estas opções pois elas dependem muito do tema que você utilizar, mas nossa sugestão, especialmente se estiver fazendo o site do zero é: coloque a mão na massa e explore todas as opções sem medo!

Instalar Plugins2020-09-09T19:35:19-03:00

Plugin nada mais é que uma extensão que é instalada no WordPress, que adiciona ou melhora as funcionalidades do seu site.

Pra deixar mais claro, com um plugin você pode adicionar um slideshow na página inicial do site, pode incluir uma galeria de fotos mais moderna, um menu diferenciado, um formulário de contato, melhorar o SEO, integrar ao Google ou ao Facebook, criar um portfólio ou uma loja virtual, dentre milhares de outras funcionalidades.

Como o WordPress é um sistema colaborativo, existem muitos plugins por aí, tanto grátis quanto pagos. Alguns não são compatíveis entre si e para descobrir isso, só testando….

De qualquer forma, é um jeito infinitamente mais simples de realizar alterações no código fonte do Worpress, sem precisar programar.

Feitas as devidas apresentações, vamos à parte prática da instalação dos plugins:

– Clique em Plugins > Adicionar Novo. No campo “Pesquisar Plugins” digite o nome do plugin que deseja pesquisar. Ao encontrar o plugin desejado clique em Instalar Agora. Caso tenha feito o download do plugin a partir de outro local clique em “Enviar Plugin” para fazer o upload do mesmo (no formato .zip) e em seguida clique em instalar.

04 – Instalar Plugins

– Após instalar o plugin clique em Ativar para finalizar a instalação. Pode-se visualizar todos os plugins instalados clicando em Plugins > Plugins Instalados.

04 – Instalar Plugins
Configurações Gerais2020-09-09T19:35:09-03:00

Hoje nosso foco são as configurações gerais do seu site.

Caso tenha criado o seu site conosco, esta parte já estará totalmente configurada. Outro detalhe: se você instalar alguns plugins ou temas, eles poderão “sobrepor” a sua configuração a estas configurações gerais…

– Para definir as configurações gerais do WordPress clique em Configurações > Geral. Em seguida defina o título do site, a descrição e o endereço de email principal

05 – Configurações Gerais

– Defina também o Idioma do Site, o Fuso Horário e o Formato de Data

05 – Configurações Gerais

– Defina ainda o Formato de Hora que deseja utilizar no site e clique em Salvar Alterações para finalizar

05 – Configurações Gerais

Além das Configurações Gerais que listamos neste post, você pode ainda alterar outras, bastando para isso clicar no link correspondente:

  • Escrita: permite configurar os formatos padrão para postagens do seu blog.
  • Leitura: escolha qual será a página inicial do seu site e qual será a página de artigos (blog) e como eles serão mostrados. É possível ainda bloquear o acesso dos mecanismos de busca ao seu site.
  • Discussão: configurações de permissão para quem posta comentários no seu site / blog.
  • Mídia: os tamanhos padrão de miniaturas, médio e grande para suas imagens e como serão organizados (por data ou não).
  • Links permanentes: escolha como serão os links para as suas páginas. Para uma melhor indexação por mecanismos de busca, sugerimos não utilizar a padrão e númerica. Veja o exemplo de como aparece o link para esse post que você está lendo: https://www.xamativo.com/tutoriais-wordpress/05-configuracoes-gerais/ : isso indica ao Google, por exemplo, que trata-se de um tutorial de Worpress, especificamente suas configurações gerais.

Conforme comentado acima, de acordo com os plugins instalados, podem surgir outras opções dentro da guia Configurações, mas em geral são auto explicativas.

Se mesmo assim você ficou em dúvida, entre em contato conosco pelo nosso suporte.

Criar Usuários2020-09-09T19:34:59-03:00

Um usuário do WordPress significa alguém que terá acesso total ao site, ou apenas a edição de algumas partes, ou apenas para comentário, ou ainda para fazer login em áreas restritas.

Por padrão o WordPress possui as seguintes possibilidades para usuários:

  • Administrador: possui acesso completo à edição do site.
  • Editor: pode incluir / alterar / excluir posts ou páginas do site, independente de quem os criou.
  • Autor: pode incluir / alterar / excluir posts ou páginas que ele mesmo criou.
  • Colaborador (ou contribuidor): pode escrever posts / páginas, mas não tem poder de publicá-los no site.
  • Assinante: alguém que pode fazer comentários, gerir o seu próprio perfil e fazer login em áreas exclusivas do site (de acordo com o que o administrador configurou).

Caso sejam necessárias outras configurações específicas para os usuários, podem ser instalados plugins próprios para tal. Depois das devidas apresentações, para criar um usuário:

– Clique em Usuários > Adicionar Novo. Defina o nome de usuário para acesso, o email que deseja utilizar no cadastro, o nome para exibição. Clique em Mostrar Senha para visualizar a senha que será gerada automaticamente.

06 – Criar Usuários

– Clique em Função para escolher qual será a função do usuário. Lembrando que a função “Administrador” tem acesso a todas as funções do admin do site. Para as outras funções algumas funcionalidades são bloqueadas. Para finalizar o cadastro clique em “Adicionar novo usuário”

06 – Criar Usuários
Criar Páginas2020-09-09T19:34:48-03:00

Depois das configurações iniciais do WordPress, passamos a parte mais prática: a criação de páginas e posts para o seu site.
Página é utilizada para apresentar informações sobre a sua empresa como quem somos, fotos, formulário de contato, localização, termos de uso, etc.

O editor padrão de páginas do WordPress atualmente é o Gutenberg. No entanto, os sites desenvolvidos pela nossa equipe utilizam o plugin WPBakery Page Builder, que facilita ainda mais a criação de páginas e posts.
A ideia do plugin é que você vá montando a página inserindo item por item: espaço em branco, texto, imagens, videos, etc. É possível ainda duplicar os itens e editá-los separadamente.

A seguir a parte básica da criação das páginas:

– Clique em Páginas > Adicionar Nova. Digite o título da página o campo Título. Para editar a página utilizando o plugin “WPBakery Page Builder” clique em Backend Editor e siga as instruções dos próximos tópicos que explicam como inserir elementos (textos, imagens e diversas outras funcionalidades) e construir as páginas utilizando este plugin.

07 – Criar Páginas

– Após finalizar a edição da página clique em Publicar / Atualizar.

07 – Criar Páginas

Para mais detalhes de como adicionar esses elementos na sua página, por favor verifique os tópicos:

  • 12 – Configurar Linhas e Colunas
  • 13 – Blocos de Texto
  • 14 – Como inserir uma imagem com efeito de zoom
  • 15 – Como inserir um vídeo
  • 16 – Criar Galeria de Imagens
  • 17 – Criar Galeria de Vídeos
  • 18 – Criar Abas Horizontais
  • 19 – Criar Abas Verticais
  • 20 – Criar Abas Dobráveis (Espande e Recolhe)

Se preferir um tutorial em vídeo, sugerimos o video do YouTube abaixo, do Script Certo:

Criar Posts2020-09-09T19:34:38-03:00

No tópico anterior aprendemos a criar páginas para o seu site, usando o WordPress e o plugin WPBakery Page Builder.
Hoje explicaremos resumidamente como criar posts, o que é realizado de forma análoga à criação de páginas.
A diferença principal entre os dois é que um post costuma ser listado em ordem cronológica, como artigos de um blog.
Considerando essa particularidade dos posts, é possível criar categorias para organizar o seu blog (como por exemplo: tecnologia, empreendedorismo, finanças, etc).

Para criar um post, siga a receita:

– Clique em Posts > Adicionar Novo. Digite o título do post no campo indicado e o seu conteúdo no bloco de texto.

08 – Criar Posts

– Marque a categoria onde o post deve ser inserido. Caso a categoria ainda não exista clique em Adicionar Nova Categoria e crie então a nova categoria. Clique em Definir imagem destacada para inserir uma imagem de capa para o post. Após finalizar a edição do post clique em Publicar / Atualizar.

08 – Criar Posts
Comentários (Configurar e Moderar)2020-09-09T19:34:27-03:00

Através de comentários nos seus posts, o visitante pode deixar a sua opinião sobre aquele tema ou mesmo fazer alguma pergunta relevante. É uma forma de interagir com seus potenciais clientes, tirando as suas dúvidas, de forma com que fique visível para todos os outros visitantes.

Nossa sugestão é sempre moderar os comentários, para evitar spam ou mesmo pessoas que fazem comentários desconexos do assunto tratado no blog. Segue as instruções básicas sobre o assunto:

– É possível definir se comentários de leitores serão permitidos, ou não, em posts e páginas do site. Para isso clique em Configurações > Discussão. Marque ou desmarque as opções de acordo com a forma como deseja que os comentários sejam exibidos (ou que não sejam permitidos)

09 – Comentários (Configurar e Moderar)

– Caso opte pela permissão de comentários é possível definir também uma forma de moderação para que os comentários postados por leitores não sejam publicados automaticamente no site e sim somente após prévia moderação definida nas configurações abaixo.

09 – Comentários (Configurar e Moderar)

– Para finalizar clique em Salvar Alterações

09 – Comentários (Configurar e Moderar)

– Para moderar comentários publicados clique em Comentários. Se houver algum comentário a ser moderado selecione-o e marque-o para: aprovação, exclusão ou marque como spam, de acordo com o que for mais conveniente.

09 – Comentários (Configurar e Moderar)
Editar Menus2020-09-09T19:34:15-03:00

O menu é parte importante do site, pois vai ajudar o internauta a localizar aquilo que precisa, da forma mais prática possível e com a menor quantidade de cliques possível.

Através do WordPress é possível criar menus e submenus para facilitar o acesso ao conteúdo. Criar menus é bem fácil e intuitivo, como veremos a seguir:

– Para editar os menus do site clique em Aparência > Menus

10 – Editar Menus

– Caso haja mais de um menu criado, deve-se inicialmente selecioná-lo em “Selecionar um menu para editar” e em seguida clicar em “Selecionar”

10 – Editar Menus

– Para adicionar uma página ou post ao menu marque-o para selecionar e em seguida clique em “Adicionar ao Menu”

10 – Editar Menus

– Caso deseje remover algum item do menu clique na seta de sua aba para abrir sua caixa de edição e em seguida clique em Remover.

10 – Editar Menus

– Para alterar a ordem dos itens basta clicar sobre eles e mantendo o botão do mouse pressionado arraste o item para cima ou para baixo até que fique na posição / ordem desejada. Caso queira fazer com que algum item seja submenu de outro clique sobre ele e mantendo o botão do mouse pressionado arraste-o um pouco a direita logo abaixo do item do qual ele deverá ser um submenu. Após finalizar todas as edições no menu clique em “Salvar Menu” para salvar todas as alterações.

10 – Editar Menus
Widgets2020-09-09T19:34:04-03:00

Widgets no WordPress são elementos usados para adicionar conteúdo na lateral ou no rodapé do site, sem precisar utilizar código.
Alguns exemplos de Widgets são: posts mais recentes, posts mais populares, calendário, busca no site, categorias do site, fotos, últimos comentários, etc.

– Para adicionar ou editar widgets clique em Aparência > Widgets

11 – Widgets

– Para adicionar um novo widget nos locais disponíveis, como barras laterais ou colunas do rodapé, clique sobre o widget que deseja adicionar e mantendo o botão do mouse pressionado arraste até o local onde deseja incluí-lo

11 – Widgets

– Caso deseje editar o conteúdo de algum widget já inserido em algum local do site, clique na seta de sua aba para abrí-lo

11 – Widgets

– Com a aba do widget aberta faça as alterações que forem necessárias e em seguida clique em Salvar, caso contrário qualquer alteração feita no widget não será salva e não aparecerá no site.

11 – Widgets
Configurar Linhas e Colunas2020-09-09T19:33:54-03:00

O Plugin “WPBakery Page Builder” permite dividir a página em linhas e colunas possibilitando que posteriormente sejam distribuídos diversos elementos que farão parte da imagem, como: textos, imagens, entre outros.

– Para inserir uma linha clique em “Adicionar Novo Elemento”

12 – Configurar Linhas e Colunas

– Clique no elemento “Linha”

12 – Configurar Linhas e Colunas

– Para adicionar mais linhas clique em “Add Element” e repita o procedimento anterior.

12 – Configurar Linhas e Colunas

Há vários formatos de divisão de colunas pré-definidos disponíveis. (2 colunas, 3 colunas.. etc).
– Clique em “Estruturação Personalizada” e defina o tipo de divisão de colunas que deseja inserir.

12 – Configurar Linhas e Colunas

– E por fim clique em “Atualizar” para salvar as alterações na página.

12 – Configurar Linhas e Colunas

Nos próximos tópicos será explicado como inserir textos, imagens e outros elementos dentro dessas linhas e colunas.

Blocos de Texto2020-09-09T19:33:40-03:00

Continuando sobre como usar o plugin “WPBakery Page Builder” para editar suas páginas no WordPress, apresentamos uma das opções mais usadas: bloco de texto.

Como o próprio nome indica, serve para inserir texto na página, com a formatação que melhor encaixar. É possível configurar estilo do texto, negrito, itálico, alinhamento, inserir link no texto, cor, etc. É uma ferramenta bem intuitiva, assim como um mini Microsoft Word.

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o bloco de texto

13 – Blocos de Texto

– Clique no elemento “Bloco de Texto”

13 – Blocos de Texto

– Digite ou cole o texto no campo indicado. Para formatar e estilizar o texto utilize a barra de ferramentas do bloco de texto. Clique no icone “Alternar barra de Ferramentas” indicado abaixo para abrir mais opções de formatação.

13 – Blocos de Texto

– Após finalizar a inserção e formatação do texto clique em Salvar Mudanças.

13 – Blocos de Texto

– E por fim clique em “Atualizar” para salvar as alterações na página.

13 – Blocos de Texto
Como inserir uma imagem com efeito de zoom2020-09-09T19:33:29-03:00

Já diz o ditado: uma imagem vale mais que mil palavras. Por isso mesmo, é importante contar com as imagens para melhor exemplificar seus produtos, serviços e/ou dar mais vida ao seu site. Vamos descobrir agora como inserir imagens usando o WordPress e o o plugin “WPBakery Page Builder”.

– Clique no ícone + dentro da linha ou coluna onde deseja inserir a imagem

14 – Como inserir uma imagem com efeito de zoom

– Clique no elemento “Imagem Única”

14 – Como inserir uma imagem com efeito de zoom

– Clique no botão “Adicionar Imagem”

14 – Como inserir uma imagem com efeito de zoom

– Clique em “Enviar Arquivos” e em seguida em “Selecionar Arquivos”

14 – Como inserir uma imagem com efeito de zoom

– Após fazer o upload da imagem clique em “Escolher Imagem”

14 – Como inserir uma imagem com efeito de zoom

– No campo “Tamanho da(s) Imagem(ns)” escreva: full para que a imagem seja exibida em suas maiores dimensões

14 – Como inserir uma imagem com efeito de zoom

– No campo “Alinhamento da Imagem” defina qual será o alinhamento da imagem dentro da coluna em que está inserida. Left: Esquerda – Right: Direita – Center: Centralizada

14 – Como inserir uma imagem com efeito de zoom

– Para que a imagem abra ampliada em uma lightbox, no campo “On Click Action” selecione: “Abrir em Box Sobreposto”

14 – Como inserir uma imagem com efeito de zoom

– Caso deseje que a imagem abra um link determinado ao ser clicada, no campo “On Click Action” selecione: “Abrir Link Personalizado” e no campo “Link da Imagem” insira o link completo que a imagem deverá abrir. E no campo “Destino do Link” selecione se o link deverá ser aberto em uma nova janela ou na mesma janela ou aba.

14 – Como inserir uma imagem com efeito de zoom

– Para finalizar clique em “Salvar Mudanças”

14 – Como inserir uma imagem com efeito de zoom

– E por fim clique em “Atualizar” para salvar as alterações na página.

14 – Como inserir uma imagem com efeito de zoom
Como inserir um vídeo2020-09-09T19:33:17-03:00

Outro item imprescindível em um site hoje são os vídeos. A forma mais fácil de inserir vídeos no seu site é primeiro incluindo no YouTube ou Vimeo e depois inserir no site. Nesse tutorial não abordaremos como incluir o vídeo no YouTube e Vimeo, já que nesses sites já há tutoriais de como fazê-lo.

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o vídeo.

15 – Como inserir um vídeo

– Clique no elemento “Player de Vídeo”

15 – Como inserir um vídeo

– No campo “Link (Url) do Vídeo” insira o link do vídeo armazenado no Youtube ou no Vimeo.

15 – Como inserir um vídeo

– Nos campos “Video Width” e “Video Aspect Ration” defina a largura do vídeo e a proporção da tela respectivamente. Ou deixe os valores padrões já definidos previamente pelo plugin.

15 – Como inserir um vídeo

– No campo “Alignment” defina o alinhamento do vídeo dentro da linha ou coluna onde foi inserido.

15 – Como inserir um vídeo

– Para finalizar clique em “Salvar Mudanças”

15 – Como inserir um vídeo

– E por fim clique em “Atualizar” para salvar as alterações na página.

15 – Como inserir um vídeo
Criar Galeria de Imagens2020-09-09T19:33:01-03:00

Depois de aprendermos como inserir apenas uma imagem no seu site, vamos trabalhar agora com galeria de imagens.

– Clique em Galeria de Fotos > Add Galleries Images > Add New

16 – Criar Galeria de Imagens

– Em Gallery Title digite um nome para a galeria e clique em Add Images

16 – Criar Galeria de Imagens

– Clique no botão “Upload Files”

16 – Criar Galeria de Imagens

– Arraste as imagens até a área destacada para fazer o upload das imagens

16 – Criar Galeria de Imagens

– Após fazer o upload das imagens clique nelas mantendo a tecla ctrl pressionada para selecionar todas as imagens que irão compor a galeria em seguida clique em “Add selected images to gallery”

16 – Criar Galeria de Imagens

– Por fim clique em “Publish” para publicar a galeria.

16 – Criar Galeria de Imagens

– Acesse a página onde deseja inserir a galeria e clique no icone + na linha ou coluna onde deseja inserí-la.

16 – Criar Galeria de Imagens

– Clique no elemento “Bloco de Texto”

16 – Criar Galeria de Imagens

– Clique no botão “Add Photo Gallery”

16 – Criar Galeria de Imagens

– No drop down Gallery selecione a galeria que foi criada no passo anterior e clique em “Insert Into Post”

16 – Criar Galeria de Imagens

– Clique em “Salvar Mudanças”

16 – Criar Galeria de Imagens

– E por fim clique em “Atualizar” para salvar as alterações na página.

16 – Criar Galeria de Imagens
Criar Galeria de Vídeos2020-09-09T19:31:56-03:00

Depois de aprender a criar uma galeria de fotos, agora criaremos uma galeria de vídeos:

– Clique em Galeria de Vídeos > Manage Videos e em “Add New”

17 – Criar Galeria de Vídeos

– Marque o tipo de video que irá utilizar “Youtube” ou “DailyMotion” e insira no campo “Video Url” o link do video

17 – Criar Galeria de Vídeos

– Clique em “Click Here to get video information and thumbnail From” para que seja gerada automaticamente uma imagem de capa para o video ou clique em “Click Here to upload custom video thumbnail” para adicionar uma imagem de capa personalizada para o video. No campo “Video Title” digite o título do vídeo. Para finalizar clique em Save Changes.

17 – Criar Galeria de Vídeos

– Clique em “Galeria de Videos” > “Manage Videos” e no campo “To print this video gallery into WordPress Post/Page use below code” copie o shortcode que está no campo indicado.

17 – Criar Galeria de Vídeos

– Na página onde deseja inserir a galeria clique no icone + na linha ou coluna onde deseja inserir a galeria.

17 – Criar Galeria de Vídeos

– Clique no elemento “Bloco de Texto”

17 – Criar Galeria de Vídeos

– Clique na aba “Texto” cole no campo de texto o shortcode copiado no passo anterior e clique em Salvar Mudanças

17 – Criar Galeria de Vídeos

– E por fim clique em “Atualizar” para salvar as alterações na página.

17 – Criar Galeria de Vídeos
Criar Abas Horizontais2020-09-09T19:31:02-03:00

As abas horizontais são uma maneira diferente e ao mesmo tempo organizada de colocar o conteúdo no seu site. Sem precisar recarregar o site todo, o usuário simplesmente clica na aba de sua preferência e vê a descrição do produto ou serviço que ele deseja. Vejamos como utilizar esse artifício em seu site:

– Clique no ícone + dentro da linha ou coluna onde deseja inserir as abas horizontais

18 – Criar Abas Horizontais

– Clique no elemento “Abas Horizontais”

18 – Criar Abas Horizontais

– Clique no botão “Editar Abas Horizontais” na barrinha azul para editar as configurações gerais das abas, estilos e as formas de visualização.

18 – Criar Abas Horizontais

– Clique na barrinha Seção em “Editar Seção”

18 – Criar Abas Horizontais

– No campo título digite o título da aba

18 – Criar Abas Horizontais

– Em seguida clique no ícone + para adicionar o conteúdo da aba.

18 – Criar Abas Horizontais

– Nela podem ser adicionados blocos de textos, imagens, entre outros.

18 – Criar Abas Horizontais

– Para adicionar conteúdo na aba seguinte clique em “Aba 2”

18 – Criar Abas Horizontais

– Clique na barrinha Seção em “Editar Seção”

18 – Criar Abas Horizontais

– Repita os procedimentos anteriores digitando um título para a aba e em seguida adicione um conteúdo para a aba, conforme explicado nos passos anteriores

18 – Criar Abas Horizontais

– Para adicionar mais abas clique no ícone “+” ao lado dos títulos das abas (conforme indicado na primeira seta). Em seguida repita os procedimentos atribuindo um título para a aba e adicionando um conteúdo a ela. Para excluir uma aba inicialmente clique sobre ela para selecioná-la e em seguida clique no ícone “X” na barra Seção. (conforme indicado na seta 2)

18 – Criar Abas Horizontais

– E por fim clique em “Atualizar” para salvar as alterações na página.

18 – Criar Abas Horizontais
Criar Abas Verticais2020-09-09T19:30:43-03:00

Os procedimentos para criar abas verticais são bem similares aos das abas horizontais. A utilidade desse tipo de aba também é bem parecida com a horizontal. Confira como criá-la no WordPress:

– Para iniciar, clique no ícone + dentro da linha ou coluna onde deseja inserir as abas verticais

19 – Criar Abas Verticais

– Clique no elemento “Abas Verticais”

19 – Criar Abas Verticais

– Clique no botão “Editar Abas Verticais” na barrinha azul para editar as configurações gerais das abas, estilos e as formas de visualização.

19 – Criar Abas Verticais

– Clique na barrinha Seção em “Editar Seção”

19 – Criar Abas Verticais

– No campo título digite o título da aba

19 – Criar Abas Verticais

– Em seguida clique no ícone + para adicionar o conteúdo da aba.

19 – Criar Abas Verticais

– Nela podem ser adicionados blocos de textos, imagens, entre outros.

19 – Criar Abas Verticais

– Para adicionar conteúdo na aba seguinte clique em “Seção 2”

19 – Criar Abas Verticais

– Clique na barrinha Seção em “Editar Seção”

19 – Criar Abas Verticais

– Repita os procedimentos anteriores digitando um título para a aba e em seguida adicione um conteúdo para a aba, conforme explicado nos passos anteriores

19 – Criar Abas Verticais

– Para adicionar mais abas clique no ícone “+” abaixo dos títulos das outras abas (conforme indicado na primeira seta). Em seguida repita os procedimentos atribuindo um título para a aba e adicionando um conteúdo a ela. Para excluir uma aba inicialmente clique sobre ela para selecioná-la e em seguida clique no ícone “X” na barra Seção. (conforme indicado na seta 2)

19 – Criar Abas Verticais

– E por fim clique em “Atualizar” para salvar as alterações na página.

19 – Criar Abas Verticais
Criar Abas Dobráveis (Espande e Recolhe)2020-09-09T19:30:30-03:00

As guias dobráveis, também chamadas de acordeon, são um recurso para deixar seu site mais organizado e dinâmico. Elas expandem ou encolhem cada vez que o internauta clica nelas. Vejamos como criá-las:

– Clique no ícone + dentro da linha ou coluna onde deseja inserir as abas dobráveis

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Clique no elemento “Acordeão”

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Clique no botão “Editar Acordeão” na barrinha azul para editar as configurações gerais e estilos das abas

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Defina o estilo, forma, cor, espaçamento e outras configurações de estilo das abas.

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Clique no botão “Editar Seção” para inserir o conteúdo nas abas.

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Digite o título da aba

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Clique no icone + para inserir o conteúdo da aba (bloco de texto, imagem, entre outros)

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Clique na aba “Seção 2” e repita os procedimentos acima inserindo um título e atribuindo um conteúdo.

20 – Criar Abas Dobráveis (Espande e Recolhe)

– Para ir adicionando mais abas clique em “Add Sections” e repta os procedimentos atribuindo conteudo e titulo.

20 – Criar Abas Dobráveis (Espande e Recolhe)

– E por fim clique em “Atualizar” para salvar as alterações na página.

20 – Criar Abas Dobráveis (Espande e Recolhe)
Criar Faq (Perguntas e Respostas)2020-09-09T19:30:20-03:00

Utilizar um FAQ é uma forma de responder rapidamente as dúvidas mais frequentes do seu consumidor e sem ficar consumindo tempo da sua equipe. Veja a seguir como é simples criar um no seu site com WordPress:

– Clique no ícone + dentro da linha ou coluna onde deseja inserir a FAQ

21 - Criar Faq (Perguntas e Respostas)

– Clique no elemento “FAQ”

21 - Criar Faq (Perguntas e Respostas)

– Digite a Pergunta da Faq no campo “Título” e a resposta no campo “Conteúdo do Box” e para finalizar clique em “Salvar Mudanças”

21 - Criar Faq (Perguntas e Respostas)

– Para inserir mais perguntas e respostas clique em “Duplicar Faq” no item já criado.

21 - Criar Faq (Perguntas e Respostas)

– Em seguida clique em “Editar Faq” e repita os procedimentos anteriores para criar a pergunta e a resposta.

21 - Criar Faq (Perguntas e Respostas)

– E por fim clique em “Atualizar” para salvar as alterações na página.

21 - Criar Faq (Perguntas e Respostas)
Inserir Formulários de Contato2020-09-09T19:30:00-03:00

Formulário de contato é uma das formas mais tradicionais e eficientes de um visitante do seu site entrar em contato com você, sem precisar sair da sua página. Além disso, você pode colocar os campos mais importantes que precisam ser preenchidos (para um orçamento por exemplo), agilizando a sua resposta e de quebra evita spam na sua caixa de e-mails, deixando o seu e-mail confidencial e usando o Captcha.

– Para inserir formulários de contato criados com o plugin “Contact Form 7”, clique no ícone + dentro da linha ou coluna onde deseja inserí-lo.

22 - Inserir Formulários de Contato

– Clique no elemento “Formulário de Contato 7”

22 - Inserir Formulários de Contato

– Caso tenha criado vários formulários, selecione no dropdown o formulário que deseja incluir e clique em Salvar Mudanças.

22 - Inserir Formulários de Contato

– E por fim clique em “Atualizar” para salvar as alterações na página.

22 - Inserir Formulários de Contato
Criar Títulos2020-09-09T19:29:49-03:00

O título do site é importante para dar uma boa ideia de qual o assunto tratado nela. Por isso mesmo, deve ter um certo destaque na página, para que seja encontrado e visualizado facilmente. Hoje aprenderemos como criar e formatar títulos de uma página do seu site, mudando tipo de fonte, tamanho da fonte, margens…

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o campo de título

23 - Criar Títulos

– Clique no elemento “Headings”

23 - Criar Títulos

– No campo Title digite o título. No campo Tag defina o formato de tag a ser utilizado para o título (O padrão “default” é H2)

23 - Criar Títulos

– Caso deseje adicionar um subtítulo adicione-o no campo “Sub Heading”

23 - Criar Títulos

– No campo “Alignment” defina o alinhamneto do título e no campo “Separator” defina se deseja adicionar um elemento gráfico separador após o título ou entre o título e o subtítulo.

23 - Criar Títulos

– Na aba “Typography” defina o estilo do título (tamanho da fonte, cor entre outros)

23 - Criar Títulos

– Na aba “Design” defina as margens e espaçamentos do título

23 - Criar Títulos

– Clique em Salvar Mudanças para salvar as alterações

23 - Criar Títulos

– E por fim clique em “Atualizar” para salvar as alterações na página.

23 - Criar Títulos
Criar Títulos com Divisores2020-09-09T19:29:37-03:00

Já aprendemos como criar títulos e formatá-los usando o WordPress. Daremos um passo a mais hoje, explicando como criar um título com ícone e borda. Veja abaixo um exemplo:

24 - Criar Títulos com Divisores

Agora vejamos como criá-lo:
– Clique no ícone + dentro da linha ou coluna onde deseja inserir o título com divisor

24 - Criar Títulos com Divisores

– Clique no elemento “Título com Divisor”

24 - Criar Títulos com Divisores

– Digite o título no campo Título. Em “Add Icon” marque a opção caso deseje que o título seja acompanhado de um ícone. Em “Posição do Título” defina o alinhamento do título. Em “Separator alignment” defina o alinhamento do divisor.

24 - Criar Títulos com Divisores

– Defina a cor do divisor em “Cor do Divisor”, o estilo em “Estilo do Divisor”, a altura da linha em “Border width” e a largura total do divisor em “Largura”

24 - Criar Títulos com Divisores

– Caso marque a opção “Icone” sugira uma nova aba onde será possível definir o ícone que irá acompanhar o título, a sua cor, bem como se ele deverá ter um fundo e o estilo do mesmo.

24 - Criar Títulos com Divisores

– Para finalizar clique em “Salvar Mudanças”

24 - Criar Títulos com Divisores

– E por fim clique em “Atualizar” para salvar as alterações na página.

24 - Criar Títulos com Divisores
Criar Divisores2020-09-09T19:29:26-03:00

Divisores podem se utilizados para separar conteúdos e, assim, melhorar a diagramação do conteúdo das páginas. Veja um exemplo simples:

– Para adicionar um divisor, clique no ícone + dentro da linha ou coluna onde deseja inseri-lo.

25 - Criar Divisores

– Clique no elemento “Headings”

25 - Criar Divisores

– No campo Title digite o título. No campo Tag defina o formato de tag a ser utilizado para o título (O padrão “default” é H2)

25 - Criar Divisores

– Caso deseje adicionar um subtítulo adicione-o no campo “Sub Heading”

25 - Criar Divisores

– No campo “Alignment” defina o alinhamneto do título e no campo “Separator” defina se deseja adicionar um elemento gráfico separador após o título ou entre o título e o subtítulo.

25 - Criar Divisores

– Na aba “Typography” defina o estilo do título (tamanho da fonte, cor entre outros)

25 - Criar Divisores

– Na aba “Design” defina as margens e espaçamentos do título

25 - Criar Divisores

– Clique em Salvar Mudanças para salvar as alterações

25 - Criar Divisores

– E por fim clique em “Atualizar” para salvar as alterações na página.

25 - Criar Divisores
Criar Divisores Especiais2020-09-09T19:29:03-03:00

No tópico anterior aprendemos a criar divisores para melhor organizar o site. Hoje avançaremos um pouco, criando um divisor em zigue-zague, semelhante a este:

26 - Criar Divisores Especiais

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o divisor

26 - Criar Divisores Especiais

– Clique no elemento “ZigZagSeparator”

26 - Criar Divisores Especiais

– Defina a cor em “Cor do Divisor”, o alinhamento em “Alignment”, a largura total em “Largura” e a altura da linha em “Border width”

26 - Criar Divisores Especiais

– Para finalizar clique em “Salvar Mudanças”

26 - Criar Divisores Especiais

– E por fim clique em “Atualizar” para salvar as alterações na página.

26 - Criar Divisores Especiais
Criar Espaçamento2020-09-09T19:28:47-03:00

O espaço entre textos ou imagens é algo muito simples, mas que confere uma estética e organização muito mais interessantes para o site. Para criá-los, basta seguir os passos:

– Clique no ícone + dentro da linha ou coluna onde deseja criar o espaçamento

27 - Criar Espaçamento

– Clique no elemento “Espaço Vazio”

27 - Criar Espaçamento

– No campo “Altura” defina o tamanho do espaçamento e clique em “Salvar Mudanças” para finalizar

27 - Criar Espaçamento

– E por fim clique em “Atualizar” para salvar as alterações na página.

27 - Criar Espaçamento
Inserir Barra de Widgets2020-09-09T19:28:32-03:00

Você já conferiu no item 11 – Widgets o que são e para que servem os Widgets.
Agora aprenda como inseri-los em suas páginas / posts.
Como exemplo, o índice deste tutorial foi inserido utilizando esta função, na lateral esquerda do site.

– Clique no ícone + dentro da linha ou coluna onde deseja inserir a barra de widgets

28 - Inserir Barra de Widgets

– Clique no elemento “Barra Lateral de Widgets”

28 - Inserir Barra de Widgets

– Em “Barra Lateral” defina qual widget deseja exibir e clique em Salvar Mudanças

28 - Inserir Barra de Widgets

– E por fim clique em “Atualizar” para salvar as alterações na página.

28 - Inserir Barra de Widgets
Criar Ícones Customizados2020-09-09T19:28:21-03:00

Os ícones são mais um passo para customizar ainda mais o seu site. Veja alguns exemplos de ícones que utilizamos:

– Para inserir ícones no seu site, clique no ícone + dentro da linha ou coluna onde deseja inserir o ícone customizado

29 - Criar Ícones Customizados

– Clique no elemento “Icone”

29 - Criar Ícones Customizados

– Escolha o ícone a ser utilizado no campo “Ícone”. Defina a cor em “Icon color”. O tipo de fundo em “Background shape”. O tamanho do icone em “Tamanho”. E o seu alinhamento em “Icon alignment”.

29 - Criar Ícones Customizados

– Para finalizar clique em “Salvar Mudanças”

29 - Criar Ícones Customizados

– E por fim clique em “Atualizar” para salvar as alterações na página.

29 - Criar Ícones Customizados
Criar Botões Personalizados2020-09-09T19:28:04-03:00

Através do WP Bakery Page Builder podemos inserir facilmente botões personalizados no site, alterando cor, formato, texto escrito, dentre outros. Veja um exemplo de botão personalizado abaixo:

Botão de Exemplo

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o botão personalizado

Criar Botões Personalizados

– Clique no elemento “Botão”

Criar Botões Personalizados

– No campo “Texto” digite o texto do botão. em “URL (link)” defina o link que ele deverá abrir. Em “Estilo do Divisor” defina o estilo do botão. Em “Shape” defina o formato do botão. A sua cor em “Cor do Divisor”. O tamanho do botão em “Tamanho” e o seu alinhamento em “Alignment”.

Criar Botões Personalizados

– Para finalizar clique em “Salvar Mudanças”

Criar Botões Personalizados

– E por fim clique em “Atualizar” para salvar as alterações na página.

Criar Botões Personalizados
Criar Botões Redes Sociais2020-09-09T19:27:54-03:00

Os botões para as redes sociais ajudam o visitante do seu site a compartilhar o seu conteúdo e indicam de que página ou produto ele gostou.

Para criar os ícones de Redes Sociais:
– Clique no ícone + dentro da linha ou coluna onde deseja inserir os botões.

Criar Botões Redes Sociais

– Selecione o botão que deseja inserir: “Facebook Curtir”, “Botão Twitar”, “Botão Google +” ou “Pinterest”. Caso deseje inserir os 4 botões divida a linha em 4 colunas, conforme explicado no Tópico 13 – sobre linhas e colunas.

Criar Botões Redes Sociais

– Ao inserir cada botão defina suas configurações e em seguida clique em Salvar Mudanças.

Criar Botões Redes Sociais

– Para finalizar, clique em Atualizar.

Criar Botões Redes Sociais
Inserir Mapa do Google Maps2020-09-09T19:27:43-03:00

Inserir um mapa dentro do seu site ajuda muito o internauta a localizar a sua empresa. O Google Maps fornece uma visão das ruas, estabelecimentos próximos, fotos e até uma rota para chegar até sua empresa! Veja como inseri-lo no seu site em WordPress:

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o mapa

Inserir Mapa do Google Maps

– Clique no elemento “Google Maps”

Inserir Mapa do Google Maps

– Acesse o site do Google Maps, pesquise o endereço desejado, em seguida clique em Compartilhar e em Incorporar Mapa e copie o código “iframe” completo.

Inserir Mapa do Google Maps

– No campo “Iframe” cole o código copiado do google maps e clique em Salvar Mudanças.

Inserir Mapa do Google Maps

– E por fim clique em “Atualizar” para salvar as alterações na página.

Inserir Mapa do Google Maps
Inserir Contagem Regressiva2020-09-09T19:27:34-03:00

A contagem regressiva é um instrumento interessante para criar expectativa no visitante do seu site. Pode ser utilizada para contar o tempo que falta para ele ser inaugurado ou mesmo para uma promoção especial. Para criar um sistema de contagem regressiva usando o WordPress, siga os passos abaixo:

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o contador

Inserir Contagem Regressiva

– Clique no elemento “Countdown”

Inserir Contagem Regressiva

– Em “Countdown Timer Style” defina se as legendas devem aparecer ao lado ou abaixo dos números da contagem regressiva. Em seguida clique no calendário em “Target Time For Countdown” e defina a data final da contagem regressiva.

Inserir Contagem Regressiva

– Em “Select Time Units To Display In Countdown Timer” defina quais elementos devem aparecer no contador (Anos, meses, semanas, etc). Em “Timer Digit Border Style” defina se deverá aparecer uma borda em volta de cada número e em “Timer Digit Border Size” defina a espessura da borda. Já em “Timer Digit Border Color” defina a cor da borda. Caso deseja que as bordas sejam arredondadas especifique um valor em pixels no campo “Timer Digit Border Radius”. E em “Timer Digit Background Color” defina uma cor de fundo.

Inserir Contagem Regressiva

– Clique na aba “Strings Translation” e defina a tradução de cada termo (Ano, mês, semana, etc)

Inserir Contagem Regressiva

– Na aba “Typography” defina a formatação textual do contador e clique em Salvar Mudanças para finalizar.

Inserir Contagem Regressiva

– E por fim clique em “Atualizar” para salvar as alterações na página.

Inserir Contagem Regressiva
Criar Caixa de Mensagens2020-09-09T19:27:19-03:00

A caixa de mensagens é uma maneira de chamar atenção do internauta sobre algo importante na sua página, como um aviso, uma condição especial ou uma promoção imperdível. Confira abaixo um exemplo de caixa de mensagens:

Criar Caixa de Mensagens

– Clique no ícone + dentro da linha ou coluna onde deseja inserir a caixa de mensagem

Criar Caixa de Mensagens

– Clique no elemento “Caixa de Mensagem”

Criar Caixa de Mensagens

– Digite o texto da mensagem e defina as configurações visuais da caixa de mensagens. Em seguida clique em Salvar Mudanças.

Criar Caixa de Mensagens

– E por fim clique em “Atualizar” para salvar as alterações na página.

Criar Caixa de Mensagens
Inserir Códigos Avançados2020-09-09T19:27:00-03:00

Finalizando esse tutorial sobre o uso do WordPress com o WP Bakery Page Builder, apresentamos o uso de códigos avançados de forma mais intuitiva (html, scripts, javascript, etc). É uma forma de adicionar funções usando código puro!

– Clique no ícone + dentro da linha ou coluna onde deseja inserir o código.

Inserir Códigos Avançados

– Clique no elemento “Código Html Avançado” ou “Código Js Avançado” dependendo do código que deseja inserir

Inserir Códigos Avançados

– Insira o código no campo indicado e clique em Salvar Mudanças

Inserir Códigos Avançados

– E por fim clique em “Atualizar” para salvar as alterações na página.

Inserir Códigos Avançados

Compartilhe nas Redes Sociais:

Entre em contato conosco agora e torne-se mais um cliente satisfeito!

Preencha os campos abaixo para iniciarmos nossa parceria: