Strona usług..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę z listą oferowanych usług. Ma nagłówek, trzy usługi z ikonami, jedną usługę w detalach obok zdjęcia, logo klientów i wezwanie do działania. Użyj jej, gdy sprzedajesz kilka usług. Stronę o jednej ofercie zbuduj zamiast tego według marketingowej strony docelowej.

Film buduje stronę usług agencji cyfrowej.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma zdjęcie do usługi w detalach i cztery logo klientów.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.
  • Na DXPR CMS ukryj tytuł strony motywu na tej stronie: w jej formularzu edycji otwórz DXPR Theme Settings i zaznacz Page Title w DXPR Hide Regions. Title elementu Jumbotron jest wtedy jedynym nagłówkiem Heading 1 strony, jak wyjaśnia projektowanie stron przyjaznych SEO.
  • Nowe elementy lądują na górze sekcji albo kolumny. Dodawaj elementy kolumny w odwrotnej kolejności albo przeciągnij je potem na miejsce.

Krok 1: dodaj nagłówek

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout. Najedź na nią, otwórz More > Settings, wybierz granatowy Background w panelu Style i kliknij Save.
  2. Kliknij + na sekcji i wybierz Jumbotron z karty Content.
  3. Ustaw Title na „Our services”, Lead na jedną linijkę o tym, co oferujesz, a Type na Primary, a potem kliknij Save.

Krok 2: dodaj przegląd usług

  1. Najedź na sekcję i kliknij Add Section Below. Nadaj nowej sekcji klasę Align text center.
  2. Kliknij + na sekcji i wybierz Row. Kliknij jej ikonę siatki (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Kliknij + w pierwszej kolumnie i wybierz Text. Wpisz „Design” jako Heading 3, dodaj jedną linijkę i kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Icon; ląduje nad tekstem. Wybierz zestaw Font Awesome Free Solid, wyszukaj palette i kliknij ikonę. Ustaw Size na Very Large (3x), otwórz Icon utilities, ustaw Style na Circle i kliknij Save.
  5. Powtórz dla „Development” z code i „Marketing” z bullhorn.

Krok 3: dodaj jedną usługę w detalach

  1. Dodaj trzecią sekcję opcją Add Section Below, potem Row; powstaje z dwiema równymi kolumnami.
  2. Kliknij + w lewej kolumnie i wybierz Image. Kliknij Select Image, zaznacz zdjęcie i kliknij Insert selected. Wpisz Alt attribute w panelu SEO i kliknij Save.
  3. Kliknij + w prawej kolumnie i wybierz Button. Ustaw Title na „Get a quote”, Link na /contact, a Type na Primary, a potem kliknij Save.
  4. Kliknij + w prawej kolumnie jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Design” jako Heading 2, dodaj opis i to, co zawiera, a potem kliknij Save.

Krok 4: dodaj logo klientów

  1. Dodaj czwartą sekcję i otwórz jej More > Settings. Wybierz Align text center w HTML classes i jasnoszary Background w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Marquee. Usuń trzy przykładowe obrazy krzyżykiem × na każdym. Kliknij Select Image, wyszukaj swoje logo, zaznacz cztery z nich i kliknij Insert selected. Włącz Gray scale i kliknij Save.
  3. Kliknij + na sekcji jeszcze raz i wybierz Text; ląduje nad pasem. Wpisz „Trusted by leading brands” jako Heading 2 i kliknij Save.

Krok 5: dodaj wezwanie do działania

  1. Dodaj piątą sekcję i otwórz jej More > Settings. Wybierz Align text center w HTML classes, potem fioletowy Background i biały Font color w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Schedule a consultation”, Link na /contact, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Ready to get started?” jako Heading 2 i dodaj jedną linijkę. Ustaw Font color na biały i kliknij Save.

Krok 6: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka) i wybierz Preview.

Idź dalej

Niepokazane w filmie:

  • Jedna sekcja detali na usługę: powtórz krok 3 dla Development i Marketing. Włącz Mirror row w ustawieniach co drugiego wiersza, aby zdjęcia naprzemiennie zmieniały strony na tabletach i komputerach.
  • Linki skoku: ustaw HTML ID każdej sekcji detali (design, development, marketing). Dodaj Button pod każdym tekstem przeglądu z Link #design i tak dalej.
  • Opinie: dodaj Block quote na klienta nad logo.

Efekt

Granatowy pas otwiera stronę, z „Our services” dużą białą czcionką nad jednolinijkowym podsumowaniem. Za nim trzy wyśrodkowane usługi, każda z ikoną w okręgu nad nazwą i linijką. Usługa Design dostaje własny pas ze zdjęciem, opisem i Get a quote. Szare logo klientów przewijają się na jasnym pasie, a fioletowy pas zamyka stronę.

Jeśli nie widzisz strony jak na filmie

  • Pas wciąż pokazuje przykładowe logo. Trzy przykładowe obrazy zostają, dopóki ich nie usuniesz. Otwórz ustawienia pasa, kliknij × na każdym przykładowym obrazie i zapisz.
  • Logo są kolorowe. Gray scale jest wyłączone. Otwórz ustawienia pasa, włącz je i kliknij Save.
  • Ikony nie mają okręgu. Style stoi w panelu Icon utilities, nie w General. Otwórz ustawienia ikony, otwórz Icon utilities i ustaw Style na Circle.
  • Twoje zmiany zniknęły po przeładowaniu. Stronę opuszczono przed kliknięciem Save na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz Zmiany nie zapisują się.

Co dalej?