Skip to content

Jak utworzyć wyskakujące okienko w WordPress bez wtyczek? (Przykład)

14 de luty de 2021

WordPress to jedna z najlepszych platform na świecie, wynika to z jego funkcji, które pozwalają użytkownikom edytować wszystko, co chcą na swoich stronach internetowych i blogach. Posiada również prosty interfejs. Aby uzyskać trochę więcej wiedzy na ten temat, nauczysz się dzisiaj utwórz wyskakujące okienko w WordPress bez wtyczek.

I to jest to, że jeśli jesteś nowy w świecie pracy na stronach i tworzenie własnych blogów, Pomoc przyda się w realizacji wszystkich zadań. Ponieważ chociaż WordPress jest bardzo łatwy w obsłudze, konieczne jest najpierw dostosowanie się do używanego przez niego systemu za pomocą kodów i wtyczek (po dobrej obsłudze można nawet wstawić wideo mp4 we wpisie lub na stronie lub wstawić arkusz kalkulacyjny Excela, wśród wielu innych rzeczy).

Utwórz wyskakujące okienko w WordPress bez wtyczek

Dla tych, którzy nie są zaznajomieni z terminologią, POP UP jest w zasadzie zasobem, który umożliwia umieszczanie zdjęć lub połączeń, które przyciągają uwagę czytelnika, albo po naciśnięciu określonego przycisku, albo po pewnym czasie. Najczęściej pojawiają się one na środku i poniżej ekranu komputera.

Dla utwórz wyskakujące okienko w WordPress bez wtyczek, istnieje kilka procedur, niektóre łatwiejsze niż inne, pierwsza z nich dotyczy kodu HTML.

To musisz zintegrować lub u stóp Twoja strona bloga lub w jego bloku HTML. Umieszczenie go w pierwszym pozwoli na pojawienie się na dowolnej stronie, zamiast tego, jeśli umieścisz go w bloku, pojawi się tylko na jego stronie. Kod to:

// Tutaj wstawiasz kod formularza , z wezwania do działania lub czegokolwiek, co zamierzasz dodać

Kod CCS, aby w środku pojawił się POP UP

Aby utworzyć wyskakujące okienko w WordPressie bez wtyczek możesz używać kodów CCS. Aby je dodać, musisz przejść do panelu sterowania, a następnie do sekcji „Wygląd„Następnie”Nadać cechy osobiste”I wreszcie „Dodatkowe CCS”, kiedy tam jesteś, wklej:

#background {display: none; pozycja: stała; góra: 0; dół: 0; po lewej: 0; po prawej: 0; kolor tła: rgba (0,0,0,0,7); z-index: 1111111;} # pop-up {kolor tła: biały; szerokość: 800px; pozycja: bezwzględna; top: 200px; po lewej: 50%; margin-left: -400px; wypełnienie: 30px; border-radius: 10px; } # close-pop-up {pozycja: bezwzględna; góra: 0; po prawej: 0; background-color: przezroczysty;

} # close-pop-up span {display: flex; szerokość: 50px; wysokość: 50px; kolor tła: szary; justify-content: center; align-content: center; flex-direction: kolumna; wyrównywanie tekstu: do środka; kolor biały; rozmiar czcionki: 40px; font-weight: pogrubienie; border-radius: 1000%;

} @media (max-width: 800px) {# pop-up {top: 0; po lewej: 0; szerokość: 100%; margines: 0; dół: 0; overflow-y: scroll; }}

Po wykonaniu tej czynności zaplanuj wydarzenie, które chcesz, i zapisz zmiany. Dzięki temu wiem utworzy wyskakujące okienko POP UP, możliwość umieszczania wiadomości, które chcesz na swoim blogu.

CCS w prawym dolnym rogu

Jeśli chcesz odłożyć POP na bok, aby był mniej inwazyjny dla czytelnika, powinieneś również przejść do sekcji „Dodatkowy CSS” jak w poprzednim, ale tym razem musisz umieścić następujący kod:

#background {display: none; pozycja: stała; dół: 50px; po prawej: 50 pikseli; indeks z: 1111111; szerokość: 400px; wysokość: 400px; border-radius: 10px; wypełnienie: 30px; kolor tła: biały; overflow-y: scroll; } close-pop-up {pozycja: bezwzględna; góra: 0; po prawej: 0; background-color: przezroczysty;

} # zakres zbliżeń {display: flex; szerokość: 50px; wysokość: 50px; kolor tła: szary; justify-content: center; align-content: center; flex-direction: kolumna; wyrównywanie tekstu: do środka; kolor biały; rozmiar czcionki: 40px; font-weight: pogrubienie; border-radius: 1000%} @media (max-width: 460px) {#background {right: 0; szerokość: 70%; }}

oryginalna ikona wordpressI voila, z tym drugim wiesz już, czego potrzeba, aby móc utwórz wyskakujące okienko w WordPress bez wtyczekWystarczy skonfigurować zdarzenie, które ma się wydarzyć, a za pomocą tych kodów zostanie ono natychmiast uruchomione.

Teraz, gdy już trochę się zaznajomiłeś, możesz przejść do trudniejszych rzeczy, takich jak: wstawianie filmów z YouTube do WordPress za pomocą wtyczki lub dodawanie obramowań wokół obrazów za pomocą CSS, pamiętaj, że niebo jest granicą.

dołącz do naszego kanału telegram