Come creare una finestra pop-up in WordPress senza plugin?

Ottobre 23, 2021

WordPress è una delle migliori piattaforme al mondo, questo è dovuto alle sue funzioni, che consentono ai suoi utenti di modificare ciò che vogliono sui loro siti Web e blog. Ha anche una semplice interfaccia. In modo da acquisire un po' più di conoscenza oggi, imparerai come creare una finestra pop-up in WordPress senza plug-in.

Come creare una finestra pop-up in WordPress senza plugin

Ed è che se sei nuovo in questo mondo di lavoro nelle pagine e nella creazione dei tuoi blog, ti sarà utile per aiutarti a raggiungere tutti i tuoi compiti. Poiché sebbene sia molto facile usare WordPress è necessario prima adattarsi al sistema che utilizza con codici e plugin (dopo averlo gestito bene puoi anche inserire un video mp4 in una voce o pagina , oppure inserire un foglio di calcolo excel , tra tante altre cose).

    Índice

      Crea una finestra pop-up in WordPress senza plugin

      Per coloro che non hanno familiarità con la terminologia, un POP UP è fondamentalmente una risorsa che consente di inserire immagini o chiamate, che attirano l'attenzione del lettore, sia quando si preme un determinato pulsante, sia dopo un certo tempo. Più comunemente, questi appaiono al centro e sotto lo schermo del PC.

      Per creare una finestra pop-up in WordPress senza plugin esistono diverse procedure, alcune più semplici di altre, la prima di queste è con un codice HTML.

      Questo deve essere integrato nel piè di pagina del tuo blog o all'interno del blocco HTML di esso. Mettendolo nel primo gli permetterà di apparire su qualsiasi pagina, d'altra parte se lo metti nel blocco apparirà solo sulla pagina di esso. Il codice è:

      <div id="fondo"> <div id="pop-up"> <button id="cerrar-pop-up"> <span>×</span> </button> //Aquí insertas el código del formulario , de la llamada de azione o de lo que vayas a agregar </div> </div>

      Codice CCS per POP UP da visualizzare al centro

      Per creare una finestra pop-up in WordPress senza plugin, puoi anche utilizzare i codici CCS. Per aggiungerli devi andare sul tuo pannello di controllo e poi nella sezione " Aspetto ", poi su " Personalizza " e infine su "CCS aggiuntivi" , quando sei lì incolla quanto segue:

      #fondo { display: none; posizione: fissa; in alto: 0; in basso: 0; sinistra: 0; destra: 0; colore di sfondo: rgba(0,0,0,0.7); z-index: 1111111;} #pop-up { background-color: white; larghezza: 800 px; posizione: assoluta; in alto: 200 px; sinistra: 50%; margine sinistro:-400 px; imbottitura: 30px; bordo-raggio:10px; } #cerrar-pop-up { posizione: assoluta; in alto: 0; destra: 0; colore di sfondo: trasparente;

      } #cerrar-pop-up span{ display: flex; larghezza: 50px; altezza: 50px; colore di sfondo: grigio; giustifica-contenuto: centro; allinea-contenuto: centro; direzione di flessione: colonna; allineamento del testo: centro; colore bianco; dimensione del carattere: 40px; font-weight: grassetto; raggio di confine: 1000%;

      } @media (larghezza massima: 800 px){ #pop-up { top: 0; sinistra: 0; larghezza: 100%; margine: 0; in basso: 0; overflow-y: scroll; } }

      Leggi  Dove posso acquistare, noleggiare o pagare per Netflix?

      Fatto ciò, pianifica l'evento che vuoi che si verifichi e salva le modifiche. Con questo, verrà creata la tua finestra pop-up POP UP , potendo inserire i messaggi che desideri sul tuo blog.

      CCS nell'angolo in basso a destra

      Se quello che vuoi è mettere da parte il POP in modo che sia meno invasivo per il lettore, dovresti anche andare nella sezione "CSS aggiuntivi" come nella precedente, ma questa volta devi inserire il seguente codice:

      #fondo{ display: nessuno; posizione: fissa; in basso: 50 pixel; a destra: 50 pixel; indice z: 1111111; larghezza: 400 px; altezza: 400px; raggio di confine: 10px; imbottitura: 30px; colore di fondo: bianco; overflow-y: scroll; } cerrar-pop-up { posizione: assoluta; in alto: 0; destra: 0; colore di sfondo: trasparente;

      } #cerrar-pop-up span{ display: flex; larghezza: 50px; altezza: 50px; colore di sfondo: grigio; giustifica-contenuto: centro; allinea-contenuto: centro; direzione di flessione: colonna; allineamento del testo: centro; colore bianco; dimensione del carattere: 40px; font-weight: grassetto; border-radius: 1000% } @media (larghezza massima: 460px){ #fondo { right: 0; larghezza: 70%; } }

      E voilà, con quest'ultimo sai già cosa è necessario per poter creare una finestra pop-up in WordPress senza plugin , devi solo configurare l'evento che vuoi che accada e verrà fuori immediatamente con l'aiuto di questi codici .

      Ora che ti sei familiarizzato un po', puoi passare a cose più difficili come: inserire i video di YouTube in WordPress con il plugin , o aggiungere bordi intorno alle immagini con i CSS , ricorda che il cielo è il limite.

      Lascia un commento

      Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

      Go up

      Utilizziamo i cookie per assicurarti la migliore esperienza sul web. Se continui ad utilizzare questo sito, lo assumeremo Maggiori informazioni