Skip to content

Como criar uma janela pop-up no WordPress sem plug-ins? (Exemplo)

29 de abril de 2021

O WordPress é uma das melhores plataformas do mundo, isso se deve às suas funções, que permitem aos seus usuários editar o que quiserem em seus sites e blogs. Também possui uma interface simples. Para que você tenha um pouco mais de conhecimento sobre isso hoje, você aprenderá a crie uma janela pop-up em WordPress sem plugins.

E é que se você é novo neste mundo de trabalho em páginas e criação de blogs próprios, Você usará uma ajuda para realizar todas as suas tarefas. Embora seja muito fácil de usar o WordPress, é necessário primeiro se adaptar ao sistema que ele usa com códigos e plugins (depois de manipulá-lo bem você pode até inserir um vídeo mp4 em uma entrada ou página, ou inserir uma planilha excel, entre muitas outras coisas).

Crie uma janela pop-up no WordPress sem plug-ins

Para quem não está familiarizado com a terminologia, um POP UP é basicamente um recurso que permite fazer fotos ou ligações, que chamam a atenção do leitor, seja ao apertar um determinado botão ou após um determinado tempo. Mais comumente, eles aparecem no meio e abaixo da tela do PC.

A fim de crie uma janela pop-up no WordPress sem plug-ins, existem vários procedimentos, alguns mais fáceis do que outros, o primeiro deles é com um código HTML.

Isso você deve integrá-lo ou ao pé da sua página de blog ou dentro do bloco HTML dele. Colocá-lo no primeiro permitirá que ele apareça em qualquer página, em vez disso, se você colocá-lo no bloco, ele aparecerá apenas na página dele. O código é:

// Aqui você insere o código do formulário , da frase de chamariz ou o que quer que você adicione

Código CCS para POP UP aparecer no centro

Para criar uma janela pop-up no WordPress sem plug-ins também você pode usar códigos CCS. Para adicioná-los, você deve ir ao painel de controle e depois à seção “Aparência“Então”Personalizar”E finalmente para “CCS Adicional”, quando você estiver lá, cole o seguinte:

#background {display: none; posição: fixa; topo: 0; inferior: 0; esquerda: 0; direita: 0; cor de fundo: rgba (0,0,0,0,7); índice z: 1111111;} # pop-up {cor de fundo: branco; largura: 800px; posição: absoluta; superior: 200px; esquerda: 50%; margem esquerda: -400px; preenchimento: 30px; raio da borda: 10px; } # close-pop-up {posição: absoluto; topo: 0; direita: 0; cor de fundo: transparente;

} # close-pop-up span {display: flex; largura: 50px; altura: 50px; cor de fundo: cinza; justificar-conteúdo: centro; alinhar conteúdo: centro; direção flexível: coluna; alinhamento de texto: centro; cor branca; tamanho da fonte: 40px; intensidade da fonte: Negrito; raio da borda: 1000%;

} @media (largura máxima: 800px) {# pop-up {topo: 0; esquerda: 0; largura: 100%; margem: 0; inferior: 0; overflow-y: scroll; }}

Feito isso, agende o evento que deseja que ocorra e salve as alterações. Com isso eu sei irá criar o seu pop-up POP UP, sendo capaz de colocar as mensagens que você deseja em seu blog.

CCS no canto inferior direito

Se o que você quer é deixar o POP de lado para que seja menos invasivo para o leitor, você também deve ir para a seção “CSS Adicional” como no anterior, mas desta vez você deve colocar o seguinte código:

#background {display: none; posição: fixa; inferior: 50px; direita: 50px; índice z: 1111111; largura: 400px; altura: 400px; raio da borda: 10px; preenchimento: 30px; cor de fundo: branco; overflow-y: scroll; } close-pop-up {posição: absoluto; topo: 0; direita: 0; cor de fundo: transparente;

} # close-pop-up span {display: flex; largura: 50px; altura: 50px; cor de fundo: cinza; justificar-conteúdo: centro; alinhar conteúdo: centro; direção flexível: coluna; alinhamento de texto: centro; cor branca; tamanho da fonte: 40px; intensidade da fonte: Negrito; border-radius: 1000%} @media (max-width: 460px) {#background {right: 0; largura: 70%; }}

ícone original do wordpressE pronto, com este último você já sabe o que é preciso para ser capaz crie uma janela pop-up no WordPress sem plug-insBasta configurar o evento que deseja que aconteça e ele sairá imediatamente com a ajuda desses códigos.

Agora que você se familiarizou um pouco, pode passar para coisas mais difíceis como: inserir vídeos do YouTube no WordPress com plugin, ou adicionar bordas ao redor das imagens com CSS, lembre-se que o céu é o limite.