Wordpress - Popup Maker Eklentisi

 

Wordpress - Popup Maker Eklentisi (AB Çerez Uyarısı)

"Popup Maker" web sitenizde popup oluşturmak, e-posta aboneliği vb açılır pencere işlemleri için kullanabileceğiniz bir eklentidir. Ben genelde "Çerezleri Kullanıyoruz" uyarısı için kullanıyorum. Fakat Covid uyarısı, e-ticaret duyuruları vb. farklı açılır pencere ihtiyaçlarınız için kullanabilirsiniz. Şimdi aşağıdaki gibi AB çerez uyarısı popup uyarısının nasıl eklenebileceğini anlatmaya çalışayım.

1. "Popup Maker" ismi ile aratarak eklentiyi kurun. Üreticisi "Popup Maker".

2. Popup Maker menüsünden Create Popup seçeneği ile yeni bir popup penceresi oluşturun.

3. Üstteki popup başlık kutularının her ikisine de "Çerezleri Kullanıyoruz" gibi bir başlık yazın.

4. Alttaki metin alanına ise "Web sitemizi kullanarak çerezlere izin vermektesiniz." gibi bir içerik girebilirsiniz. Çerezler kısmına çerez politikası veya gizlilik politikası gibi ilgili sayfaya link verebilirsiniz.

5. Popup settings bölümünde Triggers ayarlarındaki "Add New Trigger" butonuna tıklayın. "Time Delay / Auto Open" seçeneğini seçip alttaki cookie ile alakalı kutudan "On Popup Close" seçin. Add butonuna tıklayın, ikinci ekranda triggerin ne zaman tetikleneceğini seçin. 500ms olarak kalabilir. Böylece Çerez Popup Uyarısı site yüklendikten 500ms sonra açılacak ve ziyaretçi popup penceresini kapatınca 1 ay süreyle tekrar görünmeyecektir.

6. Popup settings bölümünde Display ayarlarından; Appearance sekmesinden "Light Box" seçeneğini, Size sekmesinden "Micro - 20%" seçeneğini ve Max-width değerini 60%, Position sekmesinden "Bottom Left" 10px 10px ve "Fixed Position" seçeneğini, Advanced sekmesinden "Disable Overlay" ve "Stackable" seçeneklerini seçerek ilerleyebilirsiniz.

7. Popup settings bölümünde Close ayarlarındaki close text kutusuna "✕" bu karakteri kopyala/yapıştır yapabilirsiniz. Bu normal X karakterinden farklıdır ve kapat butonuna daha iyi durmaktadır.

8. Yayınla butonuna tıklayarak popup'ı aktif edebilirsiniz.

9. Aşağıdaki css kodlarını ekleyerek kutu, link ve kapat butonu gibi popup unsurlarının görünümü üzerinde değişiklikler yapabilirsiniz.

/*cerez popup maker()*/
.pum-theme-lightbox .pum-container {
    border: 3px solid #000 !important;
}
.pum-theme-lightbox .pum-container a {
    color: #000;
    font-weight: 300;
}
.pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
    font-size: 13px !important;
    font-weight: 900 !important;
}
/*cerez popup maker*/

10. Aşağıdaki gibi tek satırlık farklı bir görüntü elde etmek için önce Popup settings / Display / Size sekmesine gelin ve "Auto" seçeneğini belirleyin. Daha sonra aşağıdaki css kodlarını ekleyin.

/*cerez popup maker()*/
.pum-theme-lightbox .pum-container {
    border: 0 !important;
    box-shadow: 0px 0px 10px 0px rgba(2, 2, 2, .3) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    padding: 12px 17px !important;
}
.pum-theme-lightbox .pum-content * {
    color: #fff;
    font-weight: 200;
}
.pum-theme-lightbox .pum-container a {
    font-weight: 300;
}
.pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0px 0px 6px 1px rgba(2, 2, 2, .3) !important;
    border: 2px solid rgba(0, 0, 0, 0.9) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #000 !important;
}
.pum-title {
    display: none;
}
@media (max-width: 767px) {
    .pum-theme-lightbox .pum-container {
        width: 56%;
        right: 18px;
        left: auto !important;
        padding: 8px 12px !important;
    }
    .pum-theme-lightbox .pum-content * {
        font-size: 15.2px;
    }
}
/*cerez popup maker*/