Niektórzy pewnie trudnią się nad wykonaniem nagłówka, ja wam dzisiaj pokaże jak wykonać banalny przykład nagłówka. To jest bardzo proste !
1. Wchodzimy na we♥it , wybieramy 4 podobające się nam obrazki i zapisujemy je na pulpicie.
2. Następnie wchodzimy na pixrl express i klikamy ostatnie kółeczko Collage.
3. Klikamy na "Layout" i wybieramy kolaż z 4 obrazków.
4. Dodajemy zdjęcia z we heart it, możemy ustawiać ich wysokość, okrągłość itp.
5.Wchodzimy w paint'a i wklejamy nasz nagłówek (tylko nie otwieraj nagłówka za pomocą painta!) i zmieniamy jego położenie, w ten sposób będziemy mieli miejsce na tekst. Zapisujemy to.
6. I znowu wchodzimy na pixrl'a i otwieramy to co zapisaliśmy w paincie. Dodajemy tekst.
Jeżeli chcemy przyozdobić nasz nagłówek, możemy dodać jakieś kropki czy serduszka.
I oto cały nagłówek. Proste ? proste :)
Ok, mamy już nagłówek. Ale teraz co z nim zrobić ? Gdzie go umieścić ? Wiele osób nie wie jak umieścić go "nad postami", to ja wam pokażę.
1. Wchodzimy w układ.
2. Do gadżetów dodajemy obraz, czyli nasz nagłówek. W tytuł wpisujemy to --> <!> (nagłówek musi być w formacie .png, inaczej białe tło zmieni się na szare).
3. Gdy już mamy dodany obraz w gadżetach, przenosimy go teraz nad "posty w blogu".
4. Jeżeli nagłówek będzie za duży lub za mały, zmniejszamy go aby dopasować, lub odwrotnie.
Ok, wszystko pięknie, ładnie, myślę że mi się udało, a tu ba dum TSSS !
Pojawia się nam przerwa, i nie wiadomo co z nią zrobić. W takim razie:
1. Przechodzimy do "szablon" i klikamy w edytuj kod HTML.
2. Za pomocą klawiszy ctrl i F pojawi się nam małe okienko, i wpisujemy w nie: .main-inner, enterem szukamy takiego czegoś:
padding: 0 $(widget.padding.side) 15px;
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
margin: 20px -16px;
Wy liczby "margin: 20px 16px;" możecie mieć inne, np. o dwa mniejsze.
3. I te liczby zmieniamy na 0, lub na 3, czyli:
.main-inner .widget {
padding: 0 $(widget.padding.side) 15px;
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
Tylko nie wpisujcie w okienko całego kodu bo wam nie wyszuka !