Dzisiaj będzie trochę o projektach, dostępnych w szablonach Elegant Themes. Czy używacie tej opcji? Wiesz do czego ona służy i jak z niej korzystać? Projekty dostępne w prawym panelu WordPressa są połączeniem wpisów i stron, które na szablonach ET możemy tworzyć. Nie każdy z tej opcji będzie korzystał, to wszystko zależy od tego, jaki jest profil Twojej działalności i czy zajdzie konieczność ich wykorzystania. Projekty na pewno sprawdzą się u fotografów. To świetny sposób na pokazanie swojej twórczości w bardzo uporządkowany i klarowny sposób. Każdy projekt możemy przypisać do konkretnej kategorii (takiej, którą sami tworzymy – to dokładnie taka sama funkcjonalność jak w przypadku wpisów). Następnie z tych kategorii, utworzonych w sekcji projektów, możemy stworzyć portfolio. Portfolio natomiast tworzymy za pomocą pluginu The Divi Builder – tam mamy do wyboru standardowe portfolio lub filtrowane portfolio (w Sekcji standardowej) oraz portfolio pełnej szerokości (w Sekcji pełnej szerokości). Poniżej zobaczysz jak może wyglądać każda z tych opcji.

Sekcja standardowa, moduł: Filtrowane portfolio, opcja: Siatka:

Sekcja standardowa, moduł: Portfolio, opcja: Siatka:

Sekcja standardowa, moduł: Filtrowane portfolio, opcja: Pełna szerokość:

Sekcja standardowa, moduł: Portfolio, opcja: Pełna szerokość:

Sekcja pełnej szerokości, moduł: Portfolio, opcja: Karuzela:

Sekcja pełnej szerokości, moduł: Portfolio, opcja: Siatka:

Projekt pełnej szerokości

Wiesz już do czego służą projekty i jak można je wykorzystać, więc pora teraz na stworzenie projektu w pełnej szerokości w szablonie Extra. Jak zapewne zauważyłeś w opcjach projektu nie ma takiej funkcji,  która pozwalałaby nam na pełną szerokość (fullwidth). Możesz oczywiście zaznaczyć, aby projekt nie posiadał sidebaru, a w ustawieniach modułu zaznaczyć, żeby wymusił on pełną szerokość danej sekcji, ale mimo wszystko nie będzie on w pełnej szerokości. Pełną szerokość rozumiemy tutaj jako brak marginesów od lewej i prawej strony naszego monitora. Da się to jednak obejść i wymusić pełną szerokość poprzez użycie CSS w panelu szablonu. Jak to zrobić? Mamy tutaj dwie możliwości.

 

W panelu bocznym WordPressa wybierasz Extra, a następnie Theme Option (lub Opcje szablonu jeżeli korzystasz z polskiego tłumaczenia). W zakładce General (ogólne) schodzisz na sam dół strony i w okienku Custom CSS (niestandardowy CSS) wklejasz ten kod:

.single-project #main-content .container {
width: 100%;
max-width: 100%;
}

Zapisujesz zmiany i przechodzisz do sekcji Projekty.

 

Extra settings projectPamiętaj, że ta opcja wygląda dobrze w sytuacji, kiedy nie korzystasz z Sidebaru w obrębie konkretnego projektu. Musisz też wiedzieć, że wklejenie wskazanego powyżej kodu w panelu opcji szablonów powoduje, że ten kod CSS będzie działał dla wszystkich projektów. Jeżeli masz potrzebę, aby tylko jeden projekt był w pełnej szerokości, a inne projekty chcesz dodawać w standardowych konfiguracjach to możesz kod CSS wskazany powyżej zastosować tylko dla jednego projektu, albo tylko dla jednej sekcji w danym projekcie.

 

Żeby tylko jeden, konkretny projekt był w pełnej szerokości, zamiast wklejać kod CSS w ustawieniach szablonu Extra, wklejamy go w ustawieniach strony konkretnego projektu. Zaczynamy więc od dodania projektu (czyli boczny panel WordPressa – Projekty – dodaj nowy), klikamy w przycisk Użyj generatora Divi, a następnie w trzy poziome kreski na pasku:

ustawienia trony projektu

ustawienia strony projektuPo wykonaniu tych czynności otworzy nam się okienko i w pozycji Niestandardowe CSS wklejamy ten sam kod CSS co powżej:

.single-project #main-content .container {
width: 100%;
max-width: 100%;
}

Zapisujemy zmiany i gotowe. Pełną szerokość uzyska dzięki temu tylko ten jeden, konkretny projekt.