Divi의 Soccer Club 레이아웃 팩으로 게임 스코어보드를 만드는 방법
게시 됨: 2018-10-24매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다. 이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 Soccer Club Layout Pack을 사용하여 멋진 게임 스코어보드를 만드는 방법을 보여드리겠습니다. 우리는 Divi의 내장 옵션만을 사용하여 이 최신 게임 스코어보드를 만들 것이므로 시작하겠습니다!
시사
튜토리얼을 시작하기 전에 다양한 화면 크기의 최종 결과를 간단히 살펴보겠습니다.
Soccer Club 레이아웃 팩의 레이아웃 팩 업로드
이 튜토리얼을 만들기 위해 Soccer Club Layout Pack의 랜딩 페이지를 사용할 것이므로 이 레이아웃을 사용하여 새 페이지를 추가하세요.
새 섹션 추가
그런 다음 여기에 새 섹션을 추가합니다.
배경색
섹션 설정을 열고 다음에 배경색을 추가하십시오.
- 배경색: #f4f4f4
간격
간격 값도 가지고 놀아보세요.
- 상단 패딩: 55px
- 하단 패딩: 140px
행 복제 및 섹션에 배치
행 찾기 및 클론 생성
시간을 절약하기 위해 다음 섹션에서 제목 행을 복제하겠습니다.
새 섹션에 배치
텍스트 변경
새 섹션과 일치하도록 행의 텍스트 모듈 사본을 변경하십시오.
행 #2 추가
열 구조
이전 행 바로 아래에 다음 열 구조를 사용하여 새 행을 추가합니다.
배경색
행 설정을 열고 배경색을 변경합니다.
- 배경색: #ffffff
열 1 배경색
열 1 배경색도 추가하십시오.
- 열 1 배경색: #fcfcfc
3열 배경색
열 3에 대해 동일한 단계를 반복합니다.
- 열 3 배경색: #fcfcfc
사이징
크기 설정도 변경하십시오.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 열 높이 균등화: 예
간격
다음으로 모든 기본 패딩을 제거합니다.
- 상단 패딩: 0px
- 하단 패딩: 0px
국경
레이아웃 팩과 일치시키려면 행에 위쪽 및 아래쪽 테두리를 추가합니다.
- 하단 테두리 너비: 8px
- 하단 테두리 색상: #00aaff
박스 섀도우
마지막으로 미묘한 상자 그림자를 추가하여 페이지에 깊이를 만듭니다.
- 상자 그림자 수직 위치: 20px
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -20px
- 그림자 색상: rgba(0,0,0,0.56)
열 1에 텍스트 모듈 #1 추가
콘텐츠 추가
모듈 추가를 시작할 시간입니다! 열 1의 텍스트 모듈로 시작하고 일부 콘텐츠를 추가합니다.
배경색
다음으로 배경색을 변경합니다.
- 배경색: #E8E8E8
텍스트 설정
텍스트 설정을 가지고 놀면서 계속하십시오.
- 텍스트 글꼴: Squada One
- 텍스트 글꼴 스타일: 대문자
- 텍스트 색상: #333333
- 텍스트 크기: 20px
- 텍스트 방향: 중앙
간격
그런 다음 몇 가지 사용자 지정 간격 값을 추가합니다.
- 상단 패딩: 10px
- 하단 패딩: 10px
- 왼쪽 패딩: 10px
- 오른쪽 패딩: 10px
열 1에 텍스트 모듈 #2 추가
콘텐츠 추가
열 1의 이전 텍스트 모듈 바로 아래에 새 텍스트 모듈을 추가합니다. 그렇게 하면 콘텐츠 상자에 콘텐츠를 추가합니다.
텍스트 설정
다음으로 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Open Sans
- 텍스트 글꼴 두께: 굵게
- 텍스트 색상: #333333
- 텍스트 크기: 18px
- 텍스트 방향: 중앙
간격
간격 값도 가지고 놀아보세요.
- 상단 패딩: 20px
- 하단 패딩: 20px
열 1에 이미지 모듈 추가
클럽 로고 업로드
열 1에 필요한 마지막 모듈은 경쟁하는 팀 중 하나의 클럽 로고가 포함된 이미지 모듈입니다.
사이징
클럽 로고 이미지를 업로드했으면 크기 설정으로 이동하여 일부 변경을 수행합니다.
- 너비: 45%(데스크탑), 16%(태블릿), 28%(휴대폰)
- 모듈 정렬: 중앙
간격
간격 설정에서 사용자 정의 여백 값을 추가하여 계속하십시오.
- 상단 여백: 20px
- 하단 여백: 50px
모듈 복제 및 3열에 중복 배치
1열에 있는 세 가지 모듈을 모두 완료했으면 이를 복제하고 세 번째 열에 복제본을 배치할 수 있습니다.
콘텐츠 변경
물론 복제된 모든 모듈의 내용을 변경해야 합니다.
열 2에 텍스트 모듈 #1 추가
콘텐츠 추가
두 번째 열에는 날짜와 종료 점수가 표시됩니다. 날짜가 있는 텍스트 모듈을 추가하여 시작하십시오.
배경색
다음에 레이아웃 팩과 일치하는 배경색을 추가합니다.
- 배경색: #00aaff
텍스트 설정
텍스트 설정도 변경하십시오.
- 텍스트 글꼴: Squada One
- 텍스트 글꼴 스타일: 대문자
- 텍스트 색상: #FFFFFF
- 텍스트 크기: 42px
- 텍스트 방향: 중앙
간격
그런 다음 간격 설정으로 이동하여 모듈에 패딩을 더 추가합니다.
- 상단 패딩: 30px
- 하단 패딩: 30px
시계
마지막으로 휴대전화와 태블릿에서 모듈을 비활성화합니다.
열 2에 텍스트 모듈 #2 추가
콘텐츠 추가
2열의 두 번째 텍스트 모듈에는 게임 점수가 포함되어야 합니다.
텍스트 설정
콘텐츠를 추가한 후 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Squada One
- 텍스트 색상: #333333
- 텍스트 크기: 150px
- 텍스트 줄 높이: 1em
- 텍스트 방향: 중앙
간격
간격 값을 수정하여 계속합니다.
- 상단 여백: 40px(데스크톱), 20px(태블릿 및 휴대폰)
- 하단 여백: 20px(태블릿 및 휴대폰)
- 왼쪽 패딩: 10px
- 오른쪽 패딩: 10px
시계
휴대전화와 태블릿에서도 이 모듈을 숨깁니다. 다음 부분에서는 더 작은 화면 크기를 위한 대안을 만들 것입니다.
두 모듈을 모두 복제하고 열 1에 배치
2열에서 찾을 수 있는 두 모듈을 모두 복제하고 다른 모듈 위의 첫 번째 열에 복제물을 배치합니다.
가시성 변경
태블릿과 휴대전화에서 더 나은 결과를 얻기 위해 이 두 모듈을 모두 사용하고 있습니다. 이러한 모듈이 더 작은 화면 크기에만 표시되도록 하려면 데스크탑에서 비활성화하십시오.
행 #3 추가
열 구조
다음 행에서는 데스크탑에 다양한 목표를 표시할 것입니다. 다음 열 구조를 사용합니다.
배경색
아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 변경하십시오.
- 배경색: #FFFFFF
2열 배경색
열 2 배경색도 변경하십시오.
- 2열 배경색: #f7f7f7
사이징
다음으로 크기 조정 설정에서 열 사이의 모든 공백을 제거합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 0
- 열 높이 균등화: 예
간격
사용자 정의 간격 값도 추가하십시오.
- 상단 패딩: 0px
- 하단 패딩: 0px
- 열 1 하단 패딩: 100px
- 열 1 오른쪽 패딩: 10px
- 열 3 왼쪽 패딩: 10px
국경
그런 다음 행에 미묘한 아래쪽 테두리를 추가합니다.
- 하단 테두리 너비: 8px
- 하단 테두리 색상: #00aaff
박스 섀도우
페이지에 깊이를 추가하려면 행 상자 그림자를 추가하십시오.
- 상자 그림자 수직 위치: 20px
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -20px
- 그림자 색상: rgba(0,0,0,0.56)
시계
앞서 언급했듯이 이 행은 데스크톱에서만 목표를 표시하는 데 사용하므로 휴대전화와 태블릿에서는 이 행을 비활성화하세요. 포스트의 뒷부분에서 우리는 태블릿과 휴대폰 대안을 만들 것입니다.
열 1에 텍스트 모듈 #1 추가
콘텐츠 추가
첫 번째 목표 세부 정보가 포함된 첫 번째 열에 새 텍스트 모듈을 추가합니다.
텍스트 설정
다음으로 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Squada One
- 텍스트 글꼴 스타일: 대문자
- 텍스트 색상: #333333
- 텍스트 크기: 27px
- 텍스트 방향: 오른쪽
간격
간격 값도 가지고 놀아보세요.
- 상단 여백: 100px
- 하단 패딩: 20px
국경
미묘한 아래쪽 테두리를 추가하여 계속합니다.
- 하단 테두리 너비: 1px
- 하단 테두리 색상: #333333
텍스트 모듈을 두 번 복제
중복 간격 변경
방금 만든 텍스트 모듈을 두 번 복제하고 두 복제본의 간격 값을 변경합니다.
- 상단 여백: 200px
- 하단 패딩: 20px
텍스트 모듈 #1 복제 및 3열에 중복 배치
텍스트 설정 변경
열 1의 첫 번째 텍스트 모듈을 다시 한 번 복제하고 열 3에 복제본을 배치합니다. 계속해서 텍스트 방향을 변경합니다.
- 텍스트 방향: 왼쪽
간격 변경
상단 마진도 증가해야 합니다.
- 상단 여백: 200px
열 3의 복제 텍스트 모듈
이제 이 텍스트 모듈을 다시 한 번 복제할 수 있습니다.
행 #4 추가
열 구조
마지막 행을 추가할 시간입니다! 다음 열 구조를 선택합니다.
배경색
행의 배경색을 변경합니다.
- 배경색: #FFFFFF
사이징
다음 열 사이의 모든 공백을 제거하십시오.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
간격
약간의 추가 상단 및 하단 패딩을 추가하십시오.
- 상단 패딩: 100px
- 하단 패딩: 100px
국경
이 행에도 미묘한 아래쪽 테두리가 필요합니다.
- 하단 테두리 너비: 8px
- 하단 테두리 색상: #00aaff
박스 섀도우
다음으로 행에 상자 그림자를 추가합니다.
- 상자 그림자 수직 위치: 20px
- 상자 그림자 흐림 강도: 80px
- 상자 그림자 확산 강도: -20px
- 그림자 색상: rgba(0,0,0,0.56)
시계
마지막으로 바탕 화면에서 행을 숨깁니다.
텍스트 모듈 #1 추가
콘텐츠 추가
행의 열에 새 텍스트 모듈을 추가하고 목표 세부사항을 추가하십시오.
텍스트 설정
다음으로 텍스트 설정을 변경합니다.
- 텍스트 글꼴: Squada One
- 텍스트 글꼴 스타일: 대문자
- 텍스트 크기: 27px
- 텍스트 방향: 오른쪽
간격
다음에 사용자 정의 간격 값을 사용하십시오.
- 오른쪽 여백: 150px
- 하단 패딩: 20px
국경
미묘한 아래쪽 테두리도 추가하고 있습니다.
- 하단 테두리 너비: 1px
- 하단 테두리 색상: #333333
복제 텍스트 모듈
텍스트 설정 변경
생성한 텍스트 모듈을 복제하고 복제본의 텍스트 방향을 변경합니다.
- 텍스트 방향: 왼쪽
간격
간격 값도 수정합니다.
- 상단 여백: 200px
- 왼쪽 여백: 150px
두 텍스트 모듈을 필요한 만큼 복제
이제 모든 다른 목표를 표시하고 싶은 만큼 이 모듈을 복제할 수 있습니다.
시사
이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.
마지막 생각들
이 게시물에서는 Divi의 Soccer Club Layout Pack을 사용하여 게임 스코어보드를 만드는 방법을 보여 드렸습니다. 이는 웹사이트에 더 많은 인센티브를 추가하고 청중과 소통할 수 있는 좋은 방법입니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!