WordPress Początkujący: Dostosowanie na średnim poziomie

Aby wyjść poza proste podstawy w moim ostatnim blogu dla początkujących WordPress, w ciągu ostatnich kilku tygodni pracowałem nad odtworzeniem jednej z naszych stron demonstracyjnych ProteusThemes. Demo motywu Auto, aby być konkretnym. Tak jak poprzednio, moi koledzy ustawili mi zadania krok po kroku, aby postawić mnie na dobrej drodze. To są najważniejsze lekcje, jakich do tej pory się nauczyłem.

Pudełka z ikonami

Widżety Icon Box to bardzo przydatny element wizualnego języka . Może się to wydawać oczywiste, ale umieszczenie numeru telefonu Twojej firmy obok ikony telefonu to prosty, ale skuteczny sposób na poprawę komfortu korzystania z witryny .

Moim zadaniem było dodanie pól ikon do nagłówka strony głównej. Aby to zrobić, w swoim panelu musisz przejść do Wygląd -> Widgety , a następnie w ' Theme Sidebars ' wybrać ' Header '.

Po zlokalizowaniu ' Header ' skieruj swoją uwagę na lewą stronę ekranu, gdzie zobaczysz listę ' Available Widgets '. ProteusThemes: IconBox to widget, którego szukasz.

Teraz masz dwie opcje . Możesz przeciągnąć i upuścić widżet po prawej stronie ekranu i umieścić go w nagłówku lub po kliknięciu widżetu zobaczysz rozwijane menu z odpowiednimi lokalizacjami, możesz po prostu wybrać z tego „ Nagłówek ”. listę i kliknij niebieski przycisk „ Dodaj widżet ”:

Zobaczysz teraz, że w widżecie jest wiele ikon do wyboru, na potrzeby tego ćwiczenia wybrałem telefon. Wszystko, co musisz zrobić, to nadać ramce z ikonami tytuł i zdecydować, jakie informacje chcesz umieścić obok niej.

Pod wszystkimi ikonami w menu widżetów zobaczysz opcję „ podświetl ten widżet ”. Zaznacz to pole, jeśli informacje w polu z ikonami są szczególnie ważne i chcesz, aby bardziej się wyróżniało.

Suwak pierwszej strony

Odtworzenie Auto Demo wymagało dodania suwaka jako funkcji na stronie głównej. Aby tak się stało, wybierz Strony -> Wszystkie strony -> Strona główna ; po przejściu do edytora strony głównej należy znaleźć menu rozwijane „ Atrybuty strony ” po prawej stronie ekranu. Znajdź to i zmień ' Szablon ' na ' Strona tytułowa z suwakiem '.

Po zmianie na „ Strona główna z suwakiem”, u dołu ekranu pojawi się nowa meta zatytułowana „ Suwak strony głównej ”, kliknij tutaj, aby dodać swoje obrazy i tekst do suwaka:

Skróty

Odtworzenie suwaka strony głównej ładnie wprowadza nas w shortcodes . Czemu? Ponieważ w Auto Demo, które odtwarzam, w suwaku znajdują się przyciski .

W tym miejscu należy podkreślić, że naprawdę musisz zainstalować zalecane wtyczki . Błąd, który popełniłem, polegał na wstawieniu shortcode do „tekstu slajdu” bez aktywacji wtyczki ProteusThemes Shortcodes . Jeśli nie masz aktywowanej wtyczki, sam kod pojawi się w suwaku, a nie przycisk, który próbujesz utworzyć.

W dokumentacji wszystkich naszych motywów znajduje się sekcja „Krótkie kody”, która zapewnia wiele dostępnych opcji stylu i funkcjonalności przycisku, który można wstawić. Wszystko, co musisz zrobić, to skopiować i wkleić ten kod do sekcji „tekst slajdu” suwaka. Po prostu edytuj tekst przycisku w kodzie do własnych potrzeb i gotowe.

Możesz oczywiście używać skrótów w innych miejscach niż tylko suwak. Na przykład, jeśli napisałeś artykuł o marketingu treści, aby spróbować coś sprzedać, użyj skrótów, aby stworzyć skuteczny przycisk CTA na dole swojego bloga.

Kreator Stron

Zapoznanie się z wtyczką SiteOrigin's Page Builder było absolutnie kluczowe w odtworzeniu Auto Demo. Pierwszym zadaniem, do którego musiałem go użyć, było utworzenie tego IconBox z sekcją Popover pod nagłówkiem strony głównej:

Aby to zrobić, przejdź do strony, którą chcesz edytować, w moim przypadku do strony głównej. Następnie musisz zlokalizować menu kreatora stron , wygląda to tak:

Stąd wybierz opcję „ Dodaj wiersz ”. Zobaczysz wtedy opcje odnoszące się do kolumn w tym wierszu. Możesz wybrać , ile kolumn chcesz, ich proporcje i czy chcesz je w kolejności od lewej do prawej lub odwrotnie. Dla mojego IconBox Popover wybrałem 3 kolumny o równym rozmiarze.

Teraz, gdy masz gotowe kolumny, możesz zacząć dodawać do nich funkcje , dodając widżety. Zrób to, klikając kolumnę, do której chcesz dodać, po wybraniu kolumny kliknij przycisk „ Dodaj widżet ” z menu powyżej.

W zależności od wybranego widżetu możesz dodać do kolumny dodatkowe funkcje. Na przykład w moim oknie popover IconBox „ Czasy otwarcia ” konieczne było dodanie widżetu ProteusThemes Opening Time w oknie popover IconBox, aby po kliknięciu kolumny w oknie popover były wyświetlane odpowiednie informacje.

Jednym z problemów, który miałem po utworzeniu tego wiersza popoverów IconBox, było to, że wiersz nie był tego samego koloru co Auto Demo, ani nie rozciągał się na całą szerokość mojej strony. Takie problemy można łatwo rozwiązać. Najpierw najedź kursorem na małą ikonę klucza nad wierszem, a następnie wybierz „ Edytuj wiersz ”. Aby zmienić kolor, następnym krokiem jest wybranie opcji „ Projekt ” z menu „ Style wierszy ”, w tym miejscu możesz zmienić kolor i inne opcje projektowania.

Aby zmienić rozmiar wiersza, najpierw wybierz „ Układ ” z menu „ Style wierszy ”. To da ci możliwość dodania dopełnienia do rzędu. Następnie, jeśli chcesz, aby wiersz rozciągał się na całą szerokość strony, wybierz menu rozwijane „ Układ wiersza ” i wybierz opcję „ Pełna szerokość ”.

Użyłem Kreatora Stron w dokładnie ten sam sposób, aby utworzyć te polecane kolumny stron :

Aby to zrobić, zamiast dodawać do kolumny widżet Iconbox z widżetem Popover, wybrałem widżet ProteusThemes: Polecana strona . Powinieneś dobrze bawić się z umieszczaniem różnych widżetów w kolumnach, aby naprawdę zorientować się, jak użyteczny będzie dla Ciebie kreator stron.

To na razie wszystko. Zajrzyj do mojego poprzedniego postu, aby uzyskać kilka podstawowych wskazówek. Kliknij poniżej, aby zapisać się do naszego newslettera i otrzymywać tego rodzaju treści, a także wiele innych bezpośrednio do Twojej skrzynki odbiorczej…

ZAPISZ SIĘ TERAZ