Jak zmienić wygląd gadżetu "obserwuj przez e-mail" - część 3 - okno newslettera

14 marca 2017


Na blogu już były dwa wpisy poświęcone gadżetowi "obserwuj przez e-mail". Dziś pokażę Wam jak w prosty sposób, bo za pomocą kodu CSS, zmienić wygląd tego gadżetu tak, aby przypominał okienko newslettera. Dzięki tej instrukcji, będziecie mogli dodać tekst do Waszego gadżetu "obserwuj przez e-mail", który zaprosi Waszych potencjalnych czytelników do subskrypcji.

1. Motyw (kiedyś szablon) - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy kod:

.widget.FollowByEmail {
text-align: center;
padding: 0 !important;
}
.FollowByEmail h2.title{
display: none;
}
.FollowByEmail .widget-content {
background: #fafafa;
padding: 20px;
}
.FollowByEmail .widget-content:before {
content: "Newsletter";
color: #161616;
text-align: center;
font: normal bold 14px 'Playfair Display', serif;
font-size: 20px;
font-style: normal;
}
.FollowByEmail .follow-by-email-inner {
display: block;
overflow: hidden;
}
.FollowByEmail .follow-by-email-inner:before {
content: "TU WPISZ TEKST";
color: #161616;
font-size: 13px;
font-style: italic;
line-height: 1.7;
margin: 10px;
display: block;
opacity: .7;
}
.FollowByEmail .follow-by-email-inner td {
display: block;
width: 100%;
}
.FollowByEmail input.follow-by-email-address {
display: block;
padding: 10px;
width: 100% !important;
font-style: italic;
border: 0 !important;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
margin-right: 0;
padding: 0;
border: 0;
color:#ffffff;
background-color: #000;
font:normal normal 12px Open Sans !important;
text-transform: uppercase;
letter-spacing: 2px;
height: 42px;
z-index: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
font-size:90% !important;
margin: 0 -1% 0px;
width: 100%;
}
.follow-by-email-inner .follow-by-email-submit:hover {
background: #fbe2dd;
color: #4e4d4c;
}

Tło całego okienka 
Marginesy wewnętrzne całego okienka
Tytuł 
Kolor tytułu
Font tytułu
Wielkość fontu
Tekst, który ma się pojawiać nad okienkiem wpisywania maila
Kolor tekstu
Wielkość tekstu
Styl tekstu 
Odstęp między liniami w tekście 
Margines
Marginesy wewnętrzne okna do wpisywania maila 
Kolor tekstu przycisku "subskrybuj" 
Kolor tła przycisku
Font przycisku 
Transformacja tekstu 
Odstęp między literami
Wysokość przycisku 
Kolor tła po najechaniu na przycisk myszką 
Kolor tekstu po najechaniu na przycisk myszką 

Efekt:



2 komentarze:

  1. Na pewno nie jednej osobie przyda się taka instrukcja :)

    OdpowiedzUsuń
  2. Coś dla laików :) A może tak nie do końca laików

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona