O iframe é principalmente uma parte da mesma estrutura HTML que executa um site. Ele permite que você adicione ou incorpore conteúdo de outros sites em seu site.
Por vários motivos, talvez você precise criar um widget iframe em sua página da Web. Isso inclui imagens, vídeos, outra página da Web, etc.
Em geral, a ideia é acelerar o carregamento do item de destino a partir de uma fonte externa e reduzir a carga em seu site.
Quanto à forma de incorporá-lo, você tem duas maneiras de criar um widget iframe no Elementor:
- Usar shortcode bruto
- Use um plug-in Elelemntor Iframe
Neste blog, mostraremos exatamente como você pode criar um widget iframe no Elementor.
Método 1: Criar widget iframe Elementor com código curto
Como parte de um software de código aberto WordPress, o Elementor tem muitas integrações. Uma delas é o Shortcode. Até mesmo para operações como um iframe, há códigos curtos disponíveis.
Para simplificar, você pode abrir qualquer página usando o editor Gutenberg do WordPress ou o editor Elementor, inserir códigos de acesso e convocar um iframe. Fácil como uma torta!
Basta colocar um bloco de editor HTML em sua página e adicionar o código acima. Isso simplesmente convocará o conteúdo/site desejado em uma caixa com 400px de altura.
A criação de um widget iframe tem alguns atributos que você pode usar para personalizar a aparência do conteúdo.
- Src - Link da fonte. (https://) pode ser necessário para evitar o bloqueio do protocolo de segurança do site.
- Largura/Altura - Valores de pixel que definem a área de tamanho do conteúdo.
- Alinhar - Define o alinhamento do iframe dentro da página.
- Borda da moldura - Adiciona borda ao redor do iframe se o valor for maior/igual a 1. Não mostra borda se o valor for 0.
- Rolagem - Permitir a opção de rolagem de conteúdo no iframe definindo "yes", "no" e "auto".
Com exceção do código HTML, o iframe também oferece suporte a atributos CSS. Portanto, você pode adicionar mais recursos a ele.
Um aspecto que você precisa lembrar é que nem todo site é compatível com iframe. Isso significa que seu site pode recusar um iframe de site ou vice-versa.
Método 2: Criar widget iframe no Elementor com plug-ins
Se estiver procurando um widget iFrame para criar iframe, a melhor opção será Elementor addon-Element pack. Esse plug-in vem com widget para iframe Elementor.
O Widget de iframe do Element Pack permite incorporar qualquer site externo, Google Maps, estatísticas de criptografia ou aplicativo diretamente no design do Elementor. Siga estas etapas simples para configurá-lo.
Etapa 1: Inserir o widget Iframe no Elementor
- Abra sua página em Elementor Editor.
- Na barra de pesquisa do widget, digite "Iframe".
- Selecione o widget com o botão Logotipo Element Pack Pro.
- Arraste e solte-o na seção da página.
- Por padrão, você verá um espaço reservado até adicionar um URL.
Etapa 2: Adicionar um URL e configurar o layout do iframe
- Ir para Conteúdo → Layout.
- No URL da fonte de conteúdo cole o link que você deseja incorporar.
- Exemplo:
- Link do Google Maps → Exibe a localização.
- URL de estatísticas de criptografia → Mostra dados criptográficos em tempo real.
- URL do site → Exibe o site completo.
- Exemplo:
- Ajuste as opções de layout:
- Altura automática → Ajusta automaticamente a altura do iframe.
- Altura do iframe → Definir uma altura fixa personalizada.
- Largura do contêiner do iframe → Ajuste a largura do contêiner.
- Proporção responsiva → Manter as proporções de largura × altura.
- Alinhamento → Posicione o iframe (esquerda, centro, direita).
Observação: Se o O Iframe Widget está tomando conta de toda a tela no ElementorSe o problema estiver relacionado à altura/largura ou às configurações de proporção responsiva, o problema geralmente está nas configurações de altura/largura. Para corrigir isso, desative Altura automática e definir um Altura do iframe (por exemplo, 400-600px) e ajuste a Largura do contêiner do iframe em vez de deixá-lo em 100%. Verifique também se Proporção responsiva estiver ativado, pois ele pode forçar o iframe a se esticar. Portanto, desative-o ou defina uma proporção adequada, como 16:9.
4. Configurar Configurações de Lazyload e Configurações adicionais para obter melhor desempenho e opções de tela cheia/barra de rolagem. Além disso, é necessário ativar Carga preguiçosa ao usar vários iframes para um carregamento mais rápido.
Etapa 3: Exibir o iframe em modelos de dispositivos
- Ir para Conteúdo → Dispositivos Iframe.
- Ativar Mostrar dispositivo Iframe.
- Escolha entre quadros de dispositivos pré-construídos: Chrome, Firefox, Safari, Edge, Tablet, Celular ou Personalizado.
- Se você selecionar Personalizadovocê pode definir um Largura × Altura, aplique um Entalhe, adicionar Botõesou ajustar o Moldura.
Etapa 4: Personalizar e estilizar o iframe
- Ir para Estilo → Dispositivo.
- Personalize a aparência do iframe:
- Cor da moldura (Cor1) → Ajuste a cor da moldura externa.
- Cor do entalhe (Cor2) → Alterar a cor do estilo do entalhe.
- Estilo do botão → Personalizar as cores, a largura e os deslocamentos dos botões.
- Aplique bordas arredondadas ou ajuste a espessura da moldura para obter uma aparência polida.
Etapa 5: Visualizar e publicar
- Use o Elementor's Modo responsivo para verificar a aparência do iframe nos dispositivos.
- Ajuste fino da altura, largura ou carga preguiçosa para desempenho.
- Quando tudo estiver perfeito, clique em Atualizar / Publicar.
Dica: Alguns sites bloqueiam a incorporação de iframes. Nesse caso, use o código de incorporação oficial ou o link de compartilhamento.
Você pode adicionar vários tipos de conteúdo, seja vídeo, áudio, texto, imagem, sites, usando esse widget.
Assista a este vídeo para saber como usar o widget iframe corretamente no Elementor.
Observe que o widget iframe do Element Pack oferece um recurso Lazyload integrado. Portanto, você estará melhorando o desempenho do seu site usando essa ferramenta. Veja isso Página de demonstração do pacote de elementos por exemplo.
Conclusão
O IFrame, que é uma função amplamente utilizada, foi transformado em um widget para torná-lo mais dinâmico e fácil de usar.
Os sites com políticas de segurança rígidas podem não permitir que um iframe incorpore conteúdo. Mas o número de sites compatíveis é maior. Portanto, essa é uma solução rápida para adicionar conteúdo em várias camadas ao seu site. Espero que você tenha aprendido o método para criar o widget iframe hoje.
Obrigado por ficar acordado!
