Jak stworzyć tablicę wyników gry z pakietem układu Divi's Soccer Club?

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom. W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy Ci, jak stworzyć fajną tablicę wyników gry za pomocą pakietu Divi's Soccer Club Layout Pack. Stworzymy tę najnowszą tablicę wyników gry, korzystając tylko z wbudowanych opcji Divi, więc przejdźmy do tego!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik końcowy na różnych rozmiarach ekranu.

Prześlij pakiet układu pakietu układu klubu piłkarskiego

Aby utworzyć ten samouczek, użyjemy strony docelowej pakietu układu klubu piłkarskiego, więc śmiało dodaj nową stronę z tym układem.

Dodaj nową sekcję

Następnie dodaj nową sekcję tutaj:

Kolor tła

Otwórz ustawienia sekcji i dodaj kolor tła.

• Kolor tła: #f4f4f4

Rozstaw

Pobaw się również wartościami odstępów.

• Górna wyściółka: 55px
• Dolna wyściółka: 140px

Klonuj rząd i umieść w sekcji

Zlokalizuj wiersz i utwórz klon

Aby zaoszczędzić czas, sklonujemy wiersz tytułowy w następnej sekcji.

Miejsce w nowej sekcji

Zmień tekst

Zmień kopię modułu tekstowego w wierszu, aby pasowała do nowej sekcji.

Dodaj wiersz nr 2

Struktura kolumny

Tuż pod poprzednim wierszem dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Kolor tła

Otwórz ustawienia wiersza i zmień kolor tła.

• Kolor tła: #ffffff

Kolor tła kolumny 1

Dodaj również kolor tła kolumny 1.

• Kolor tła kolumny 1: #fcfcfc

Kolumna 3 Kolor tła

Powtórz ten sam krok dla kolumny 3.

• Kolumna 3 Kolor tła: #fcfcfc

Rozmiary

Zmień również ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokość kolumny: tak

Rozstaw

Następnie usuń wszystkie domyślne dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Granica

Aby dopasować pakiet układu, dodaj górną i dolną krawędź do wiersza.

• Szerokość dolnego obramowania: 8px
• Kolor dolnej krawędzi: #00aaff

Cień Pudełka

Na koniec dodaj subtelny cień pudełka, aby nadać stronie głębię.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -20px
• Kolor cienia: rgba(0,0,0,0.56)

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Zacznij od modułu tekstowego w kolumnie 1 i dodaj trochę treści.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: # E8E8E8

Ustawienia tekstu

Kontynuuj, bawiąc się ustawieniami tekstu.

• Czcionka tekstu: Squada One
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #333333
• Rozmiar tekstu: 20px
• Orientacja tekstu: Środek

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 10px
• Prawe wypełnienie: 10px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Dodaj nowy moduł tekstowy tuż pod poprzednim modułem tekstowym w kolumnie 1. Gdy to zrobisz, dodaj zawartość do pola zawartości.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Czcionka tekstu: Otwórz Sans
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #333333
• Rozmiar tekstu: 18px
• Orientacja tekstu: Środek

Rozstaw

Pobaw się również wartościami odstępów.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Dodaj moduł obrazu do kolumny 1

Prześlij logo klubu

Ostatnim modułem potrzebnym w kolumnie 1 jest Moduł Obrazów zawierający logo klubu jednej z rywalizujących drużyn.

Rozmiary

Po przesłaniu obrazu logo klubu przejdź do ustawień rozmiaru i wprowadź zmiany.

• Szerokość: 45% (komputer stacjonarny), 16% (tablet), 28% (telefon)
• Wyrównanie modułu: Środek

Rozstaw

Kontynuuj, dodając niestandardowe wartości marginesów w ustawieniach odstępów.

• Górny margines: 20px
• Margines dolny: 50px

Klonuj moduły i umieść duplikaty w kolumnie 3

Gdy skończysz ze wszystkimi trzema modułami w kolumnie 1, możesz je sklonować i umieścić duplikaty w trzeciej kolumnie.

Zmień zawartość

Oczywiście będziesz musiał zmienić zawartość każdego sklonowanego modułu.

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość

W drugiej kolumnie umieścimy datę i wynik końcowy. Zacznij od dodania modułu tekstowego z datą.

Kolor tła

Dodaj kolor tła pasujący do pakietu układów w następnej kolejności.

• Kolor tła: #00aaff

Ustawienia tekstu

Zmień również ustawienia tekstu.

• Czcionka tekstu: Squada One
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #FFFFFF
• Rozmiar tekstu: 42px
• Orientacja tekstu: Środek

Rozstaw

Następnie przejdź do ustawień odstępów i zwiększ dopełnienie modułu.

• Górna wyściółka: 30px
• Dolna wyściółka: 30px

Widoczność

Na koniec wyłącz moduł na telefonie i tablecie.

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Drugi moduł tekstowy w kolumnie 2 musi zawierać wynik gry.

Ustawienia tekstu

Po dodaniu treści zmień ustawienia tekstu.

• Czcionka tekstu: Squada One
• Kolor tekstu: #333333
• Rozmiar tekstu: 150px
• Wysokość linii tekstu: 1em
• Orientacja tekstu: Środek

Rozstaw

Kontynuuj, modyfikując wartości odstępów.

• Margines górny: 40px (komputer), 20px (tablet i telefon)
• Margines dolny: 20px (tablet i telefon)
• Lewa wyściółka: 10px
• Prawe wypełnienie: 10px

Widoczność

Ukryj ten moduł również na telefonie i tablecie. W następnej części stworzymy alternatywę dla mniejszych rozmiarów ekranu.

Sklonuj oba moduły i umieść je w kolumnie 1

Sklonuj oba moduły, które znajdziesz w kolumnie 2 i umieść duplikaty w pierwszej kolumnie nad innymi modułami.

Zmień widoczność

Używamy obu tych modułów, aby uzyskać lepsze wyniki na tablecie i telefonie. Aby upewnić się, że te moduły są wyświetlane tylko na mniejszych ekranach, wyłącz je na komputerze.

Dodaj wiersz nr 3

Struktura kolumny

W następnym wierszu przedstawimy różne cele na komputerze. Użyj następującej struktury kolumn:

Kolor tła

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #FFFFFF

Kolor tła kolumny 2

Zmień również kolor tła kolumny 2.

• Kolor tła kolumny 2: #f7f7f7

Rozmiary

Usuń wszystkie odstępy między kolumnami w następnych ustawieniach rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 0
• Wyrównaj wysokość kolumny: tak

Rozstaw

Dodaj również niestandardowe wartości odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Dolna wyściółka kolumny 1: 100px
• Kolumna 1 prawa dopełnienie: 10px
• Kolumna 3 po lewej stronie: 10px

Granica

Następnie dodaj subtelną dolną granicę do rzędu.

• Szerokość dolnego obramowania: 8px
• Kolor dolnej krawędzi: #00aaff

Cień Pudełka

Aby nadać stronie głębię, dodaj cień pola wiersza.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -20px
• Kolor cienia: rgba(0,0,0,0.56)

Widoczność

Jak wspomnieliśmy wcześniej, używamy tego wiersza do wyświetlania celów tylko na komputerze, więc śmiało wyłącz ten wiersz na telefonie i tablecie. Później w poście stworzymy alternatywę dla tabletu i telefonu.

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Dodaj nowy moduł tekstowy do pierwszej kolumny zawierającej szczegóły pierwszego celu.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Czcionka tekstu: Squada One
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #333333
• Rozmiar tekstu: 27px
• Orientacja tekstu: w prawo

Rozstaw

Pobaw się również wartościami odstępów.

• Górny margines: 100px
• Dolna wyściółka: 20px

Granica

Kontynuuj, dodając subtelną dolną granicę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

Klonuj moduł tekstowy dwa razy

Zmień odstępy duplikatów

Sklonuj moduł tekstowy, który właśnie utworzyłeś, dwukrotnie i zmień wartości odstępów obu duplikatów.

• Górny margines: 200px
• Dolna wyściółka: 20px

Klonuj moduł tekstowy nr 1 i umieść duplikat w kolumnie 3

Zmień ustawienia tekstu

Ponownie sklonuj pierwszy moduł tekstowy w kolumnie 1 i umieść duplikat w kolumnie 3. Kontynuuj zmianę orientacji tekstu.

• Orientacja tekstu: w lewo

Zmień odstępy

Należy również zwiększyć górną marżę.

• Górny margines: 200px

Klonuj moduł tekstowy w kolumnie 3

Możesz teraz ponownie sklonować ten moduł tekstowy.

Dodaj wiersz #4

Struktura kolumny

Czas dodać ostatni rząd! Wybierz następującą strukturę kolumn:

Kolor tła

Zmień kolor tła wiersza.

• Kolor tła: #FFFFFF

Rozmiary

Następnie usuń całą przestrzeń między kolumnami.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Dodaj trochę dodatkowej wyściółki górnej i dolnej.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px

Granica

Będziemy potrzebować również subtelnego dolnego obramowania dla tego wiersza.

• Szerokość dolnego obramowania: 8px
• Kolor dolnej krawędzi: #00aaff

Cień Pudełka

Następnie dodaj cień do wiersza.

• Pozycja pionowa cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -20px
• Kolor cienia: rgba(0,0,0,0.56)

Widoczność

Na koniec ukryj wiersz na pulpicie.

Dodaj moduł tekstowy nr 1

Dodaj zawartość

Dodaj nowy moduł tekstowy do kolumny wiersza i dodaj szczegóły celu.

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Czcionka tekstu: Squada One
• Styl czcionki tekstu: wielkie litery
• Rozmiar tekstu: 27px
• Orientacja tekstu: w prawo

Rozstaw

Następnie użyj niestandardowych wartości odstępów.

• Prawy margines: 150px
• Dolna wyściółka: 20px

Granica

Dodajemy również subtelną dolną ramkę.

• Szerokość dolnego obramowania: 1px
• Kolor dolnej krawędzi: #333333

Klonuj moduł tekstowy

Zmień ustawienia tekstu

Sklonuj utworzony moduł tekstowy i zmień orientację tekstu duplikatu.

• Orientacja tekstu: w lewo

Rozstaw

Zmodyfikuj również wartości odstępów.

• Górny margines: 200px
• Lewy margines: 150px

Klonuj oba moduły tekstowe tyle razy, ile potrzeba

Możesz teraz klonować te moduły tyle razy, ile chcesz, aby pokazać różne cele.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć tablicę wyników gry za pomocą pakietu układu Divi's Soccer Club. To świetny sposób, aby dodać więcej zachęt do swojej witryny i nawiązać kontakt z odbiorcami. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!