Atrakcyjny moduł zapisu do newslettera

Kwestie wiadomości automatycznych mamy już za sobą. Co jednak gdy chcemy, aby moduł newslettera był atrakcyjniejszy dla oka, a nie dysponujemy bardziej rozbudowanym projektem graficznym sklepu? Mamy dla Ciebie dwie propozycje.

Propozycja pierwsza

Pierwszą propozycją wzbogacenia modułu jest zastosowanie stylu CSS, który ukaże moduł jako kolorową belkę szeroką na cały ekran:

Widok na urządzeniach mobilnych:

Wskazany efekt uzyskamy poprzez dodanie poniższego kodu w Panelu administracyjnym sklepu w sekcji: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Własny styl CSS

/* Newsletter propozycja nr 1 */
#box_newsletter{
background-color: #636363;
padding: 15px;
box-shadow: -500px 0 #636363, 500px 0 #636363;
}
#box_newsletter .boxhead{
display: none;
}
#box_newsletter .boxintro{
float: left;
width: 50%;
text-align: right;
padding-right: 15px;
font-size: 12px;
color: #ffffff;
}
#box_newsletter .boxintro strong{
font-size: 18px;
padding-right: 5px;
}
#box_newsletter form{
margin: 0;
}
#box_newsletter form fieldset:nth-child(2){
font-size: 12px;
color: #fff;
width: 48%;
float: right;
}
#box_newsletter .newsletter-input{
width: 66%;
border-radius: 3px 0 0 3px;
border: 0;
}
#box_newsletter .btn{
background-color: #fb5642;
border-color: #fb5642;
}
#box_newsletter .btn img{
display: none;
}
#box_newsletter .btn span{
display: inline-block;
}
/* Styl dla mobile */
@media screen and (max-width: 767px) {
#box_newsletter{
    box-shadow: none;
    padding: 0px;
}    
#box_newsletter .boxintro{
width: 100%;
    text-align: center;
    padding: 5px 0px;     
    }
    #box_newsletter .btn{
    width: 25%;
    }
    #box_newsletter .newsletter-input{
     width: 75%;
    }
    #box_newsletter form{
    padding: 15px;
}
    #box_newsletter form fieldset:nth-child(2){
width: 100%;
    float: right;
    padding: 5px 0px 10px 0px;
    }
}
/* Koniec: Newsletter propozycja nr 1 */

We wskazanym kodzie istnieje bardzo prosty sposób na ustawienie takich kolorów, jakie sobie życzymy. Możemy w nim edytować:

• kolor głównej belki (z podziałem na środek, lewy margines i prawy margines),
• kolor przycisku (z podziałem na wypełnienie i obramowanie),
• kolor tekstu (wstęp i uwagi prawne).

Za kolory odpowiadają poniższe elementy, ukazane na zrzucie ekranu powyższego stylu:

Zaznaczone elementy to wartości przedstawiające kolory w zapisie hex. Najprościej uzyskać je w Google, wpisując w wyszukiwarce frazę hex color (A) i klikając enter.

Jako pierwszy wynik pojawi się paleta kolorów, w którym można manualnie wybrać interesujący nas kolor. Jeżeli posiadasz zapis koloru w formacie RGB czy CMYK, to możesz go wpisać w odpowiednim miejscu. Kolor ukaże się na palecie wraz z wartością hex (B):

Przykładowy widok po zastosowaniu innych kolorów:

Propozycja druga

Drugą propozycją jest belka z napisem na tle szerokiego na cały ekran zdjęcia. Główną atrakcją tego pomysłu jest użycie pliku tła. Przykładowa wizualizacja:

Ten sposób modyfikacji modułu wymaga dodania pliku tła (E) w Plikach graficznych (D) w Wygląd i treści (A) > Wygląd sklepu (B) > Obecny szablon graficzny (C). 

Nazwa i rozszerzenie pliku są ważne, gdyż odniesienie do niego znajduje się w stylu css propozycji! Nazwij więc plik tak, abyś swobodnie i łatwo wprowadzał go do kodu.

Styl CSS odpowiedzialny za wskazany wygląd prezentuje się następująco:

/* Newsletter Propozycja nr 2 */
.bottom-footer.row .container {
    max-width: 100%;
}
#box_newsletter {
background-image: url(../images/user/tlo-propozycja.jpg);
  background-repeat: no-repeat;
    background-position: center;
   background-size: cover;
   margin: 0;
    text-align: center;
}
#box_newsletter .boxhead, #box_newsletter .innerbox {
    max-width: 1180px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
#box_newsletter .boxhead {
display: none;
}
#box_newsletter .innerbox {
padding: 60px 0;
   width: 30%;
 }
#box_newsletter .boxintro {
font-size: 20px;
   margin-bottom: 20px;
   margin-bottom: 20px;
   color: #4a4a4a;
   line-height: 24px;
 
}
#box_newsletter .newsletter-input{
border-radius: 3px 0 0 3px;
   border: 1px solid #c0e3ff;
    border-right: none;
   width: 75%;
}
#box_newsletter form fieldset {
   padding-top: 10px;
   color: #717171;
}
#box_newsletter .btn {
background-color: #4091ff;
border-color: #4091ff;
border-radius: 0 3px 3px 0;
   color: #fff;
   text-transform: uppercase;
   width: 25%;
}
#box_newsletter .btn:hover {
background-color: #fff;
border-color: #4091ff;
border-radius: 0 3px 3px 0;
    color: #4091ff;
}
#box_newsletter .btn span {
    display: inline;
   color: unset;
}
#box_newsletter .btn img {
   display: none;
}
@media screen and (max-width: 1200px) {
.bottom-footer.row .container {
     width: 100%;
}
   #box_newsletter .innerbox {
   width: 50%;
  }
}
@media screen and (max-width: 767px) {
    #box_newsletter .innerbox {
   width: 80%;
  }
   #box_newsletter .newsletter-input {
       width: 70%;
    }
  #box_newsletter .btn {
     width: 30%;
    }
}
/* Koniec: Newsletter Propozycja nr 2*/

Poniżej opis tych fragmentów kodu, które możesz edytować i tym samym wpływać na wygląd modułu. Przyda się tutaj już omawiana tablica kolorów hex.

Proponujemy, aby plik graficzny był poziomym prostokątem o szerokości 1920 pikseli.

Przykład użycia innego zdjęcia:

Zbiorcza uwaga do powyższych propozycji – frazę „Zapisz się” (która występuje zamiast domyślnej ikonki koperty) definiujemy w Ustawienia (A) > Ustawienia regionalne (B) > Języki (C), w edycji języka polskiego. Przejdź do zakładki: Frazy (D), a następnie wpisz frazę (E) i kliknij: FILTRUJ (F). Na liście pojawi się fraza (G), którą możesz na nowo zdefiniować.

Jeżeli prywatnie interesujesz się zagadnieniami HTML/CSS, to możesz moduł newslettera wzbogacić wizualnie na wiele sposobów, tworzyć własne pomysły i propozycje. W przeciwnym wypadku możesz style z tego artykułu po prostu przekopiować, zmieniając tylko kolory z pomocą tabeli hex.

Moduł graficzny w postaci belki to bardzo często spotykany sposób na zachętę do zapisów i dobrze, że od niego zaczęliśmy. Nie jest jednak jedynym.

Bardzo często spotykane są także pojawiające się (“wyskakujące”) okienka z informacją i możliwością zapisu do newslettera, zakrywające dużą część ekranu. Tak zwane pop-upy. Nie da się ich nie zauważyć. Aby je wyłączyć należy albo świadomie zamknąć “iksem”, albo dokonać zapisu. Ich skuteczność w dotarciu do oczu Twoich potencjalnych subskrybentów jest zatem niemal stuprocentowa.