Exibir feed do Instagram no site da Elementor [passo a passo]

Deseja criar um feed Elementor do Instagram para o seu site WordPress?

Neste guia passo a passo, você aprenderá como adicionar um feed do Instagram ao Elementor usando um plug-in gratuito e não técnico chamado Spotlight .

Não é necessário nenhum conhecimento técnico ou dinheiro - basta seguir nosso tutorial e você estará pronto para usar em pouco tempo.

Guia passo a passo: exibir o feed do Instagram no site da Elementor

Pronto para começar? Aqui está o seu guia passo a passo sobre como exibir um feed Elementor do Instagram.

Etapa 1: instale e ative o plug-in de feed do Instagram

Para começar, você deve instalar e ativar o plug-in de feed Spotlight do Instagram.

Novamente, o Spotlight é gratuito e 100% compatível com Elementor.

O plug-in Spotlight gratuito está listado no WordPress.org, portanto, você pode instalá-lo seguindo estas instruções:

1. Abra seu painel do WordPress.
2. Vá para Plugins → Adicionar Novo .
3. Pesquise por “Spotlight”.
4. Clique no botão Instalar agora .
5. Quando o processo de instalação terminar, clique no botão Ativar para ativar o plug-in Spotlight.

Etapa 2: crie um token de acesso ao Instagram

Em seguida, você precisa criar um token de acesso do Instagram, que é o que permite que seu site WordPress se conecte ao Instagram.

Não se preocupe - embora isso pareça um pouco técnico, você só precisa clicar em alguns botões e levará talvez 30 segundos no total!

Se você estiver usando sua própria conta pessoal, o Spotlight também permite conectar sua conta diretamente ( nesse caso, você tem a opção de pular para a próxima etapa ). No entanto, usaremos o método do token de acesso do Instagram porque ele funcionará para qualquer configuração, incluindo a conexão da conta do seu cliente (se você estiver criando um site de cliente).

Para criar seu token de acesso do Instagram, acesse esta página.

Ou, se você estiver criando um site de cliente, peça ao seu cliente para ir a esta página e seguir as mesmas instruções.

Em seguida, clique no botão Gere seu token de acesso relevante, dependendo se você deseja conectar uma conta pessoal do Instagram ou uma conta comercial.

Isso abrirá uma tela pop-up do Instagram que pergunta se você deseja conceder permissão ao Spotlight para acessar sua conta.

Clique no botão Permitir no pop-up:

Depois de clicar em Permitir , você deverá ver seu token de acesso do Instagram na página original:

Copie este token de acesso para um local seguro porque você precisará dele em um segundo.

Ou, se você estiver trabalhando com um desenvolvedor que está construindo seu site, precisará compartilhar esse token de acesso com seu desenvolvedor para que ele possa continuar configurando o plug-in .

Passo 3: Conecte sua conta do Instagram ao seu site Elementor

Agora, você pode adicionar este token de acesso do Instagram em seu painel do WordPress para conectar seu site Elementor ao Instagram:

1. Volte para o painel do WordPress.
2. Navegue até Instagram Feeds → Configurações .
3. Cole o token de acesso do Instagram na caixa de token de acesso do Instagram/Facebook .
4. Clique no botão Conectar .

Se você estiver trabalhando exclusivamente com sua própria conta do Instagram, também poderá se conectar diretamente clicando nos botões Conectar sua conta pessoal ou Conectar sua conta comercial .

Após clicar em Conectar , você deverá ver uma mensagem de sucesso:

Se estiver conectando uma conta pessoal, você também verá uma opção para adicionar uma foto personalizada e um texto biográfico. Você pode clicar em Sim para fazer isso agora. Ou você sempre pode adicioná-lo mais tarde depois de configurar seu feed Elementor do Instagram.

Falando de…

Etapa 4: configure seu feed do Instagram

Agora que você conectou sua conta do Instagram, está pronto para configurar seu primeiro feed Elementor do Instagram.

Para fazer isso, vá para Instagram Feeds → Feeds no painel do WordPress.

Escolha o tipo de alimentação

Primeiro, você escolherá o tipo de conteúdo que deseja exibir.

Com a versão gratuita do Spotlight, você pode exibir um feed de suas próprias postagens no Instagram. No entanto, o Spotlight Pro adiciona mais opções, como um feed baseado em hashtags ou postagens que marcaram sua conta.

Se quiser experimentar o Spotlight Pro, você pode acessar uma avaliação gratuita de 14 dias do Spotlight Pro para ver como funciona (não é necessário cartão de crédito) - basta clicar no botão de avaliação gratuita de 14 dias no canto superior direito.

Para o nosso tutorial Elementor Instagram Feed, vamos apenas usar a opção My Instagram posts .

Em seguida, clique em Próximo passo para avançar.

Escolha um Modelo

Em seguida, você pode escolher um dos modelos do Spotlight, que permite controlar o layout e o design do feed Elementor do Instagram.

A versão gratuita oferece seis modelos diferentes, enquanto o Spotlight Pro adiciona outros oito modelos.

Para este exemplo, escolheremos o modelo de feed Clássico gratuito, mas você é totalmente livre para escolher outro, se preferir.

Depois de fazer sua escolha, clique no botão Próxima etapa para avançar.

Escolha sua conta do Instagram

Na próxima etapa, você será solicitado a Conectar e personalizar . Mas como você já conectou sua conta do Instagram, não precisa fazer mais nada aqui.

Para avançar, clique no botão Conectar e personalizar .

Personalize seu feed do Elementor no Instagram

Agora, você estará na ferramenta de personalização do Spotlight, que permite personalizar ainda mais o modelo escolhido.

Para começar, escolha a conta que você conectou na etapa anterior no cabeçalho Mostrar postagens dessas contas .

Isso atualizará a visualização ao vivo do seu feed para usar as postagens reais da sua conta do Instagram.

Em seguida, você pode ir para a guia Design para personalizar seu modelo de feed Elementor do Instagram.

Aqui estão algumas das escolhas que você pode fazer aqui com a versão gratuita do plugin:

• Escolha quantas postagens exibir e em quantas colunas.
• Ajuste a ordem de alimentação. Por padrão, ele exibirá as postagens mais recentes primeiro, mas você pode alterar isso se desejar.
• Escolha como abrir postagens quando os usuários clicarem nelas.
• Ajuste o tamanho e o espaçamento do seu feed.
• Personalize o cabeçalho do feed que aparece acima dos itens do feed.
• Configure o estilo e o texto do botão Seguir no Instagram .
• Configure o estilo e o texto do botão Carregar mais postagens .
• Adicione seu próprio CSS personalizado se quiser ainda mais controle.

Com o Spotlight Pro, você terá ainda mais controle sobre detalhes como legendas, curtidas e comentários.

Os usuários do Spotlight Pro também têm acesso a outras guias para filtrar e moderar o conteúdo do feed ou configurar promoções de feed.

Quando estiver satisfeito com a aparência do seu feed, clique no botão Salvar no canto superior direito.

Então, vamos ver como incorporar seu feed do Instagram no Elementor.

Etapa 5: incorpore seu feed do Instagram no Elementor

O Spotlight oferece duas maneiras de incorporar seu feed Elementor do Instagram:

• Spotlight (grátis) – você pode adicionar seu feed ao Elementor usando o widget Spotlight WordPress regular. Embora você possa adicionar esse widget diretamente da interface do Elementor, não poderá personalizar suas configurações de feed do Elementor.
• Spotlight Pro – você obtém um widget Spotlight Instagram Feed Elementor dedicado que permite não apenas incorporar seu feed, mas também configurar ainda mais seu design e estilo diretamente da interface Elementor.

Veremos as duas opções…

De qualquer forma, você pode começar abrindo o editor Elementor para o conteúdo ao qual deseja adicionar seu feed Elementor do Instagram.

Destaque (gratuito)

Se você estiver usando a versão gratuita do Spotlight, role para baixo até a seção WordPress na barra lateral do Elementor e expanda a lista de opções.

Em seguida, arraste o Spotlight Instagram Feed Widget para o design Elementor onde deseja exibir seu feed.

Depois de adicionar o widget, você verá duas opções na barra lateral:

1. Adicione um título (ou deixe em branco).
2. Escolha o feed do Instagram que você acabou de criar na etapa anterior.

Em seguida, clique em Aplicar .

Você também pode usar a guia Avançado para ajustar detalhes como espaçamento e margens.

Você pode não ver uma visualização ao vivo do seu feed no editor Elementor.

No entanto, se você abrir uma visualização ao vivo ou a versão ao vivo da página, deverá ver seu feed Elementor do Instagram.

Spotlight Pro

Se você estiver usando o Spotlight Pro, obterá um widget Spotlight Instagram Feed Elementor dedicado.

Este widget não apenas permite que você veja uma visualização ao vivo no editor Elementor, mas também permite que você personalize (e crie) feeds do Instagram diretamente da interface Elementor.

Novamente - se você quiser testar isso, pode obter uma avaliação gratuita de 14 dias do Spotlight Pro - sem necessidade de cartão de crédito.

Você pode procurar o widget pelo nome ou encontrá-lo na seção Geral dos widgets do Elementor.

Ao adicionar o widget, você deve ver instantaneamente uma prévia do feed Elementor do Instagram.

Se necessário, você pode clicar no botão Editar para editar as configurações do seu feed diretamente do Elementor. Ou você pode até criar um novo feed se quiser exibir vários feeds.

Etapa 6: exiba seu feed do Instagram em um pop-up

Este último passo é opcional…

Mas se você deseja exibir seu feed do Instagram em um pop-up no Elementor, você tem algumas opções.

Em primeiro lugar, o Spotlight inclui um recurso integrado para exibir postagens individuais em um pop-up quando os visitantes clicam nelas. Isso está disponível na versão gratuita e paga.

Aqui está um exemplo de como fica:

Para habilitar ou ajustar essa configuração, defina as postagens abertas na configuração como Caixa pop-up em Opções de feed :

Os usuários do Spotlight Pro podem configurar ainda mais o pop-up usando as configurações do Popup Lightbox .

Se você deseja exibir todo o seu feed do Instagram em um pop-up, você tem algumas opções:

1. Se você tiver o Elementor Pro, poderá adicionar o widget Spotlight Instagram Feed a um pop-up criado com o Elementor Popup Builder. Basta seguir os mesmos passos da etapa anterior ao adicionar o widget ao seu design pop-up.
2. Você pode usar qualquer plug-in de pop-up do WordPress, como o Popup Maker. Para exibir seu feed no pop-up, você pode usar o shortcode do Spotlight.

Conclusão

Isso encerra nosso guia sobre como exibir um feed Elementor do Instagram usando o plug-in Spotlight gratuito.

Você pode seguir tudo neste guia e criar seu feed Elementor no Instagram sem gastar dinheiro.

Se você quiser ainda mais funcionalidade, como um widget de feed Elementor Instagram dedicado que você pode usar em vez do widget Spotlight WordPress regular, você pode atualizar para o Spotlight Pro.

O Spotlight Pro oferece uma avaliação gratuita de 14 dias sem necessidade de cartão de crédito, para que você sempre possa testar os recursos premium antes de se comprometer com qualquer coisa.