Divi로 Virtual Summit 방문 페이지를 만드는 방법
게시 됨: 2020-07-02가상 이벤트 홍보에는 다양한 홍보 전략이 포함됩니다. 초대 랜딩 페이지를 만드는 것도 그 중 하나입니다. 가상 정상 회담의 랜딩 페이지를 만드는 것은 청중을 궁금해하게 만드는 완벽한 방법입니다. 섹션의 올바른 조합으로 등록된 참석자를 초대하고, 알리고, 수집할 수 있습니다. 오늘은 5개의 섹션으로 구성된 가상 정상 회담 방문 페이지를 만드는 방법을 보여 드리겠습니다. 디자인에는 이중톤 이미지와 스크롤 섹션 구분선이 포함됩니다. 단계별 자습서를 건너뛰고 싶다면 다운로드 가능한 JSON 파일도 포함되어 있습니다. 폴더에서 PNG와 AI의 머리글 및 바닥글 그래픽도 찾을 수 있습니다.
가자!
시사
다양한 화면 크기에서 랜딩 페이지 디자인을 살펴보겠습니다.
데스크탑
태블릿
이동하는
무료로 Virtual Summit 방문 페이지 다운로드
무료 가상 정상 회담 방문 페이지 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
Virtual Summit 방문 페이지 섹션
방문 페이지가 제대로 작동하려면 특정 섹션 집합이 필요합니다. 시청자의 시선을 사로잡는 것 외에도 방문 페이지도 전환되어야 합니다. 예를 들어 가상 정상 회담 랜딩 페이지에는 관련 정보와 클릭 유도문안이 포함되어야 합니다. 시청자가 행동하고 가입할 영감을 느끼려면 모든 섹션이 하나에서 다른 섹션으로 원활하게 흘러야 합니다.
Virtual Summit 방문 페이지에는 다음 섹션이 포함되어 있습니다.
헤더
헤더 섹션에는 정상 회담의 제목 및 행사 날짜와 같은 중요한 정보가 포함됩니다. 이것은 가장 중요한 정보이므로 맨 위에 있습니다. 클릭 유도문안과 페이지의 나머지 부분으로의 쉬운 탐색 없이는 헤더가 완성되지 않습니다.
우리의 디자인에는 발표자와 일정 섹션으로 이동하는 앵커 링크가 있는 두 개의 버튼이 포함되어 있습니다. 가장 중요한 것은 등록 섹션에 대한 링크가 있는 버튼을 포함했다는 것입니다. 페이지 전체에서 모든 "등록" 버튼은 디자인의 시각적 통일성을 위해 동일하게 보입니다.
정보
두 번째 섹션은 시청자가 가상 정상 회담 참석을 고려하도록 유도하는 정보 섹션입니다. 디자인에 4개의 광고 문구와 동영상으로 쉽게 변경할 수 있는 이미지를 추가했습니다. 안내문에는 정상 회담에 참석해야 하는 4가지 이유가 나열되어 있으며 이미지(또는 비디오)는 결정을 뒷받침하는 시각적 자료입니다.
스피커
다음 섹션에서는 6인 모듈 세트를 찾을 수 있습니다. 이번 정상회의에 참석할 연사들을 소개하는 곳입니다. 각 모듈에는 다음 요소가 포함됩니다.
- 영상
- 이름
- 위치
- 설명
- 소셜 미디어 링크
각 스피커에 대한 모든 관련 정보를 입력해야 합니다. 또한 본문 텍스트에 동일한 양의 선을 사용하여 디자인이 선명하게 보이도록 하십시오. 보시다시피 디자인에 흥미로운 모양과 느낌을 주기 위해 모든 스피커의 사진에 이중톤 색상 효과를 사용했습니다. Photoshop에서 이 효과를 얻는 방법에 대한 단계별 자습서가 아래에 있습니다.
스피커가 6개 이상인 경우 행을 복제하거나 열이 더 많거나 적은 행으로 모듈을 복제하면 됩니다.
일정
다음은 일정 섹션입니다. 이 영역에서 우리는 정상회담 일정을 우아하게 공유하고 구조적인지 확인했습니다. 텍스트 디자인의 스타일을 유지하려면 제목 수준이 아닌 콘텐츠를 변경해야 합니다. 디자인이 깔끔하게 유지되도록 콘텐츠의 길이를 거의 동일하게 유지하세요.
행은 제목 이미지와 광고 문구 그룹을 사용하여 날짜별로 구성됩니다. 마지막 열 하단에는 청중이 등록할 수 있는 클릭 유도문안 버튼이 있습니다.
등록하다
마지막으로 등록 섹션입니다. 긴박감을 더하기 위해 카운트다운 타이머를 포함했습니다. 연락처 양식은 각 초대 대상자가 자동으로 등록되도록 RSVP 목록에 직접 연결되어야 합니다.
가상 정상 회담 방문 페이지 디자인 전반에 걸쳐 최적화된 리드 생성을 위해 이 섹션으로 이동하는 세 개의 버튼을 찾을 수 있습니다.
Photoshop으로 이중톤 그라디언트 맵 만들기
Adobe Photoshop에서 이미지 열기
디자인에서 이중톤 이미지를 모방하려면 아래 단계를 따르세요. 먼저 Photoshop에서 이미지를 엽니다.
조정 열기 및 그라디언트 맵 선택
조정 도구 모음을 열고 그라디언트 맵을 클릭합니다. 속성 탭에서 그라데이션 바를 더블 클릭하여 설정 팝업을 엽니다.
그라디언트 색상 조정
그라디언트 설정에서 각 색상을 두 번 클릭하여 설정을 사용자 지정합니다.
디자인 효과를 얻으려면 다음과 같이 그라디언트를 조정하십시오.
- 그라디언트 유형: 솔리드
- 부드러움: 100%
- 불투명도 중지 #1: 100%
- 컬러 스톱 #2
- 다크 퍼플 #202060
- 위치: 19%
- 중간점:
- 불투명도 중간점: 85%
- 색상 중간점: 50%
- 불투명도 중지 #2: 55%
- 컬러 스톱 #
- 바이올렛 #f895f8
- 위치: 100%
사용자 정의 그라디언트 맵으로 저장
그라디언트의 이름을 추가하고 새로 만들기를 클릭하여 저장합니다. 그런 다음 그라디언트 라이브러리에 저장됩니다. 웹용 이미지를 700px 높이로 저장합니다. 필요한 만큼 이미지로 이 과정을 반복합니다. 그라디언트 맵을 적용한 후 저장된 그라디언트를 선택합니다.
1. 헤더 섹션 만들기
새 섹션 추가
배경
가상 정상 회담 랜딩 페이지를 다시 만들어 봅시다. 새 페이지를 만들고 Divi Builder로 엽니다. 행을 추가하기 전에 배경 이미지와 그라디언트를 새 섹션에 추가하십시오. 위의 다운로드 가능한 폴더에서 배경 그래픽을 찾을 수 있습니다.
- 배경 그라데이션
- 색상 1: #1f4068
- 색상 2: #202040
- 배경 이미지: 헤더 그래픽
사이징
다음으로 최소 높이를 조정합니다.
- 최소 높이: 1050px
간격
간격도.
- 상단 및 하단 패딩
- 테이블 및 전화: 90px
시계
마지막으로 고급 탭에서 가시성 설정을 조정합니다.
- 수평 및 수직 오버플로: 숨김
새 행 추가
열 구조
세 개의 열이 있는 행을 추가합니다. 1/2, 1/4, 1/4 열 구조를 선택합니다.
사이징
다음과 같이 행의 크기를 조정합니다.
- 폭: 90%
- 최대 너비: 1800px
- 정렬: 중앙
간격
\상단 여백도 추가하십시오.
- 상단 여백: 200px
2열, 3열 설정
간격
열 2와 3의 설정을 조정합니다. 먼저 간격
- 상단 여백: 30px
시계
그런 다음 전화에서 열을 숨깁니다.
- 비활성화: 전화
열 1에 첫 번째 텍스트 모듈 추가
텍스트
열 1에 첫 번째 텍스트 모듈을 추가합니다. 제목을 H1 콘텐츠로 삽입합니다.
- 본문: H1 내용
제목 텍스트
디자인 탭에서 다음 제목 텍스트의 스타일을 지정합니다.
- 표제 수준: H1
- 글꼴: 알라타
- 무게: 굵게
- 정렬: 중앙
- 색상: 미색 #eaeaea
- 크기
- 데스크탑: 85px
- 태블릿: 70px
- 전화: 44px
- 문자 간격: 2px
- 줄 높이: 1.1em
- 텍스트 그림자: 첫 번째 옵션
- 그림자 색상: rgba(o,0,0,0.26)
열 1에 두 번째 텍스트 모듈 추가
텍스트
두 번째 텍스트 모듈을 추가합니다. 날짜를 H2 내용으로 삽입합니다.
- 본문: H2 콘텐츠, 2020년 7월 15일+16일
제목 텍스트
다음으로 제목 텍스트의 스타일을 지정합니다.
- 표제 수준: H2
- 글꼴: 알라타
- 무게: 레귤러
- 정렬: 중앙
- 색상: 후크시아 #b030b0
- 크기
- 데스크탑 및 태블릿: 60px
- 전화번호: 45픽셀
- 줄 높이: 1.3em
간격
약간의 간격도 추가하십시오.
- 하단 패딩: 20px
열 1에 버튼 모듈 추가
텍스트
클릭 유도문안을 위한 버튼 모듈을 추가합니다.
- 버튼: 등록
링크
앵커 링크를 추가합니다.
- 링크 URL: #등록
조정
디자인 탭으로 이동하여 정렬을 설정합니다.
- 버튼 정렬: 중앙
버튼 사용자 정의 스타일
버튼에도 스타일을 적용하십시오.
- 텍스트 크기
- 데스크탑: 30px
- 태블릿: 25픽셀
- 전화: 20px
- 텍스트 색상: 흰색 #ffffff
- 배경: 보라색 #602080
- 테두리 반경: 35px
- 문자 간격: 1px
- 글꼴: 알라타
간격
마지막으로 간격을 조정합니다.
- 상단 여백
- 태블릿 및 휴대전화: 15px
- 상단 패딩: 2px
2열에 버튼 모듈 추가
텍스트
2열로 이동하여 버튼 모듈을 추가합니다. 원하는 사본을 추가하십시오.
- 버튼: 스피커
링크
다음으로 앵커 링크를 추가합니다.
- 링크 URL: #Speakers
조정
디자인 탭에서 정렬을 설정합니다.
- 버튼 정렬
- 데스크탑: 오른쪽
- 태블릿 및 휴대전화: 중앙
버튼 사용자 정의 스타일
사용자 정의 버튼 스타일도 조정하십시오.
- 텍스트 크기: 24px
- 텍스트 색상: 흰색 #ffffff
- 배경: 투명
- 문자 간격: 1px
- 버튼 글꼴: Alata
- 테두리 반경: 0px
박스 섀도우
마지막으로 상자 그림자를 추가합니다.
- 박스 섀도우: 네 번째 옵션
- 수평 위치: 0px
- 수직 위치: 5픽셀
- 섀도우 컬러: 푸크시아: #b030b0
3열에 버튼 모듈 복제
복제 버튼
2열의 버튼을 복제하고 3열에 복제 모듈을 배치합니다.
버튼 모듈 조정
텍스트
복제된 버튼의 텍스트를 변경합니다.
- 버튼: 일정
링크
앵커 링크도 변경하십시오.
- 링크 URL: #스케줄
조정
정렬도 변경하는 것을 잊지 마십시오.
- 버튼 정렬
- 데스크탑 왼쪽
새 행 추가
열 구조
두 개의 동일한 열이 있는 새 행을 추가합니다.
사이징
먼저 거터 너비를 조정합니다.
- 사용자 지정 거터 너비: 2
간격
다음에 간격을 추가합니다.
- 상단 여백
- 전화: -35px
시계
그런 다음 행의 가시성을 조정합니다.
- 비활성화: 태블릿 및 데스크탑
클론 버튼 모듈 및 열 1에 중복 배치
복제 버튼
이전 행의 2열에 있는 버튼 모듈을 복제하고 새 행의 1열에 복제 모듈을 배치합니다.
버튼 모듈 조정
버튼 사용자 정의 스타일
새 버튼의 텍스트를 조정합니다.
- 텍스트 크기: 20px
박스 섀도우
상자 그림자도 수정합니다.
- 수직 위치: 4px
2열에 복제된 버튼 모듈 추가
복제 버튼
이전 행의 3열에서 버튼 모듈을 복제합니다. 이 행의 2열에 붙여넣습니다.
버튼 모듈 조정
텍스트
복제된 버튼의 텍스트 내용을 조정합니다.
- 텍스트: 일정
2. 정보 섹션 만들기
새 섹션 추가
배경
정보 섹션을 만들려면 먼저 새 섹션을 추가하고 배경 스타일을 지정하세요.
- 배경 그라데이션
- 색상 1: #202040
- 색상 2: #202060
간격
패딩도 추가하십시오.
- 상단 패딩: 170px
- 하단 패딩: 5px
시계
마지막으로 고급 탭에서 가시성 설정을 조정합니다.
- 수평 및 수직 오버플로: 숨김
새 행 추가
열 구조
하나의 열이 있는 새 행을 추가합니다. 이것을 제목 행이라고 부를 것입니다.
사이징
다음으로 크기를 설정합니다.
- 폭: 80%
- 최대 너비: 1800px
텍스트 모듈 추가
텍스트
텍스트 모듈을 추가합니다.
- 본문: H2 콘텐츠 – 디지털 마케팅 가상 회의에 참석해야 하는 이유는 무엇입니까?
제목 텍스트
디자인 탭에서 제목 텍스트의 스타일을 지정합니다.
- 표제 수준: H2
- 글꼴: 알라타
- 텍스트 색상: 흰색 #ffffff
- 크기
- 데스크탑: 55px
- 태블릿: 45px
- 전화: 40px
- 문자 간격: 2px
- 줄 높이: 1.1em
디바이더 모듈 추가
선
이제 구분선 모듈을 추가하고 디자인 탭에서 선의 스타일을 지정합니다.
- 선 색상: 자홍색 #b030b0
사이징
다음으로 크기를 조정합니다.
- 디바이더 무게: 50px
- 최대 높이: 50px
스크롤 효과
고급 탭에서 가로 스크롤 효과를 추가합니다.
- 수평 모션 활성화
- 데스크탑
- 시작 오프셋: -6
- 중간 오프셋: 50% / 0
- 끝 오프셋: 6
- 태블릿 및 전화
- 스테이팅 오프셋: -4
- 중간 오프셋: 50% /0
- 끝 오프셋: 4
새 행 추가
열 구조
이제 세 개의 열이 있는 새 행을 추가합니다. 1/2, 1/4, 1/4 열 구조를 선택합니다.
사이징
모듈을 추가하기 전에 행 크기를 조정하십시오.
- 폭: 80%
- 최대 너비: 1800px
열 1 설정
간격
또한 첫 번째 열의 간격을 조정합니다.
- 상단 패딩: 20px
열 1에 이미지 모듈 추가
영상
이제 열 1에 이미지 모듈을 추가합니다. 이중톤 효과가 있는 이미지 중 하나를 사용합니다.
- 이미지: 이중톤 효과가 있는 사진
국경
테두리도 조정합니다.
- 둥근 모서리: 15px
열 2에 Blurb 모듈 추가
텍스트
2열로 이동하여 블러브 모듈을 추가합니다. 내용을 삽입합니다.
- 제목: 새로운 연결 만들기
- 본문: 설명 콘텐츠
영상
다운로드 가능한 폴더에서 찾을 수 있는 1번 이미지를 업로드합니다.
- 이미지: #1의 PNG
이미지 및 아이콘
다음 이미지의 위치를 조정합니다.
- 배치: 상단
- 정렬: 왼쪽
제목 텍스트
제목 텍스트도 스타일을 지정합니다.
- 표제 수준: H4
- 글꼴: 알라타
- 색상: 흰색 #ffffff
- 크기: 23px
본문
본문 텍스트의 스타일을 지정하는 것을 잊지 마십시오.
- 글꼴: Open Sans
- 색상: 흰색 #ffffff
- 크기: 14px
- 문자 간격: 1px
맞춤 CSS
마지막으로 고급 탭의 광고 문구 제목에 맞춤 CSS를 사용하여 추가 패딩을 추가합니다.
- 광고 제목: padding-bottom: 15px;
padding-bottom: 15px;
Blurb 모듈 복제 및 2열에 복제 배치
클론 블러브
2열에 첫 번째 광고 문구를 복제합니다.
콘텐츠
콘텐츠를 업데이트합니다.
- 제목: 새 제목
- 본문: 새 설명 텍스트
영상
그런 다음 숫자 이미지를 변경합니다. 다운로드 가능한 폴더에서 새 파일을 찾을 수 있습니다.
- 이미지: #2의 PNG
3열 삭제 및 2열 복제
클론 컬럼
행 설정에서 세 번째 열을 삭제하고 두 번째 열을 복제합니다. 열 구조를 1/2, 1/4, 1/4로 되돌려야 합니다.
3열에서 Blurb 1 조정
콘텐츠
복제된 광고문안의 텍스트 내용을 업데이트합니다.
- 제목: 새 제목
- 본문: 새 설명 텍스트
영상
숫자 이미지도 변경합니다.
- 이미지: #3의 PNG
3열에서 Blurb 2 조정
콘텐츠
이 광고문안의 내용도 수정하십시오. 먼저 텍스트.
- 제목: 새 제목
- 본문: 새 설명 텍스트
영상
그런 다음 숫자 이미지를 변경합니다.
- 이미지: #4의 PNG
3. 스피커 섹션 만들기
새 섹션 추가
배경
스피커 섹션으로 이동합니다. 새 섹션을 추가하고 배경 스타일을 지정합니다.
- 배경 그라데이션
- 색상 1: #202060
- 색상 2: #162447
시계
고급 탭에서 가시성 설정을 조정합니다.
- 수평 및 수직 오버플로: 숨김
제목 행 복제 및 새 섹션에 중복 배치
중복 행
위 섹션에서 제목 행을 복제하고 복제된 섹션에 복제를 배치합니다. 이것을 제목 행 2라고 부를 것입니다.
텍스트 모듈 조정
텍스트
그런 다음 디자인 탭에서 H3 텍스트 설정의 스타일을 지정합니다. 복제된 텍스트 모듈에서도 CSS ID를 조정합니다. 다음으로 디바이더 모듈의 선 색상을 변경합니다. 이제 5개의 동일한 크기의 모듈이 있는 새 행을 추가합니다. 다음과 같이 행의 크기를 조정합니다. 약간의 간격도 추가하십시오. 열 1에 1인칭 모듈을 추가합니다. 색상 효과가 적용된 화자의 이미지를 업로드합니다. 550 x 770픽셀의 이미지 크기를 권장합니다. 다음 이미지에 둥근 모서리를 추가합니다. 그런 다음 제목 텍스트의 스타일을 지정합니다. 본문에도 스타일을 지정합니다. 위치 텍스트를 잊지 마십시오. 마지막으로 추가 패딩을 위해 사용자 정의 CSS를 추가합니다. 행 설정에서 열 2-5를 삭제합니다. 열 1을 네 번 복제합니다. 복제된 모든 모듈의 콘텐츠를 업데이트합니다. 먼저 텍스트. 그럼 이미지. 이제 일정 섹션을 생성하겠습니다. 다음과 같이 새 섹션을 추가하고 배경 스타일을 지정합니다. 고급 탭에서 가시성 설정을 조정합니다. 위 섹션에서 제목 행을 복제하여 이 섹션에 붙여넣습니다. 제목 내용을 변경합니다. 복제된 텍스트 모듈에서 CSS ID를 변경합니다. 디바이더의 색상도 변경합니다. 이제 동일한 크기의 열 3개가 있는 새 행을 추가합니다. 행의 크기를 조정합니다. 약간의 간격도 추가하십시오. 첫 번째 열에 텍스트 모듈을 추가합니다. 내용을 삽입합니다. 디자인 탭으로 이동하여 제목 텍스트의 스타일을 지정합니다. 다음에 약간의 간격을 추가하십시오. 이제 선택한 콘텐츠가 포함된 행동 유도 모듈을 추가합니다. 이미지 배경도 추가하십시오. 디자인 탭에서 제목 텍스트의 스타일을 지정합니다. 다음으로 본문 텍스트의 스타일을 지정합니다. 약간의 간격도 추가하십시오. 그런 다음 테두리 스타일을 지정합니다. 마지막으로 추가 스타일링을 위해 사용자 정의 CSS를 추가합니다. 2열로 이동하여 텍스트 모듈을 추가합니다. 다음 콘텐츠 구조를 따르세요. 디자인 탭에서 텍스트의 스타일을 지정합니다. 그런 다음 모든 제목 수준의 스타일을 지정합니다. 테두리에도 스타일을 지정하십시오. 첫 번째 텍스트 모듈을 두 번 복제합니다. 복제된 텍스트 모듈의 내용을 변경합니다. 열에서 마지막 모듈의 테두리를 제거합니다. 행 설정에서 열 3을 삭제합니다. 열 2를 복제합니다. 복제된 열에서 세 번째 텍스트 모듈을 지웁니다. 각각의 새 텍스트 모듈에서 컨텐츠를 업데이트하십시오. 헤더 섹션의 "등록" 버튼을 복사하여 3열의 마지막 텍스트 모듈 아래에 붙여넣습니다. 버튼의 정렬을 왼쪽으로 변경합니다. 텍스트 크기를 약간 조정합니다. 일정 섹션의 첫 번째 행을 복제합니다. 복제된 텍스트 모듈의 내용을 변경합니다. 클릭 유도문안 모듈의 내용을 조정합니다. 배경 이미지도 변경하십시오. 텍스트 모듈의 내용도 조정하십시오. 마지막 섹션은 등록 전용입니다. 새 섹션을 추가하고 다음과 같이 배경 스타일을 지정합니다. 위의 다운로드 폴더에서 바닥글 그래픽을 찾을 수 있습니다. 섹션의 간격도 조정하십시오. 그리고 고급 탭에서 가시성 설정을 변경합니다. 이제 하나의 열이 있는 새 행을 추가합니다. 섹션의 앵커 링크 역할을 하는 보이지 않는 구분선을 추가합니다. 모든 "등록" 버튼에 연결되는 CSS ID를 삽입합니다. 두 개의 동일한 열이 있는 두 번째 행을 추가합니다. 행의 크기 설정을 조정합니다. 첫 번째 열에 카운트다운 타이머 모듈을 추가합니다. 이벤트 내용과 날짜를 추가합니다. 다음에 배경 스타일을 지정합니다. 디자인 탭에서 제목 텍스트의 스타일을 지정합니다. 숫자 텍스트에도 스타일을 지정하십시오. 또한 레이블 텍스트. 그런 다음 행의 크기를 조정합니다. 패딩도 추가하십시오. 마지막으로 테두리 스타일을 지정합니다. 열 2에 새 문의 양식 모듈을 추가합니다. 메시지 필드를 제거합니다. 각 필드에 대한 설정을 입력합니다. 디자인 탭의 레이아웃에서 "전각으로 만들기"를 클릭합니다. 두 번째 필드에 대해서도 동일한 작업을 수행합니다. 일반 문의 양식 설정으로 돌아가서 일부 콘텐츠를 추가합니다. 그런 다음 다음과 같이 필드의 스타일을 지정합니다. 제목 텍스트에도 스타일을 지정합니다. 버튼 사용자 정의 스타일도 조정하십시오. 경계 반경을 조정하는 것을 잊지 마십시오. 마지막으로 추가 패딩을 위해 사용자 정의 CSS를 추가합니다. 우리는 끝났어! 다양한 화면 크기에서 랜딩 페이지 디자인을 다시 살펴보겠습니다. 네가 해냈어! 가상 정상 회담 방문 페이지는 어떻게 보입니까? 이 디자인을 자신의 가상 정상 회담이나 웹 디자인 클라이언트에 사용하십시오. 탐색은 적절한 양의 정보로 변환에 최적화되어 있습니다. 약간의 시각적 효과를 위해 스크롤 섹션 구분선도 추가했습니다. 의견에 어떻게 생각하는지 알려주십시오. 레이아웃을 다운로드했습니까 아니면 단계를 따랐습니까?
제목 텍스트
맞춤 CSS
디바이더 조정
선
새 행 추가
열 구조
사이징
간격
열 1에 사람 모듈 추가
텍스트
영상
영상
제목 텍스트
본문
위치 텍스트
맞춤 CSS
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
중복 열 1
클론 컬럼
새 사람 모듈에 대한 콘텐츠 조정
텍스트
영상
4. 일정 섹션 만들기
새 섹션 추가
배경
시계
클론 제목 행 2
중복 행
텍스트 모듈 조정
텍스트
맞춤 CSS
디바이더 조정
선
새 행 추가
열 구조
사이징
간격
열 1에 텍스트 모듈 추가
텍스트
제목 텍스트
간격
1열에 클릭 유도문안 추가
텍스트
배경
제목 텍스트
본문
간격
국경
맞춤 CSS
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
열 2에 텍스트 모듈 추가
텍스트
텍스트
제목 텍스트
국경
텍스트 모듈 2회 복제
복제 텍스트 모듈
새 텍스트 모듈 조정
텍스트
세 번째 텍스트 모듈의 테두리 제거
국경
3열 삭제 및 2열 복제
복제 열
텍스트 모듈 제거 및 조정
텍스트 모듈 삭제
콘텐츠 조정
버튼 모듈 복제 및 3열에 복제 배치
복제 버튼
버튼 모듈 조정
조정
버튼 사용자 정의 스타일
일정 섹션의 첫 번째 행 복제
복제 행
열 1의 텍스트 모듈 조정
텍스트
클릭 유도문안 모듈 조정
텍스트
배경
텍스트 모듈 조정
텍스트
5. 레지스터 섹션 생성
새 섹션 추가
배경
간격
시계
새 행 추가
열 구조
디바이더 모듈 추가
시계
CSS ID
새 행 추가
열 구조
사이징
열 1에 카운트다운 타이머 모듈 추가
텍스트
배경
제목 텍스트
숫자 텍스트
레이블 텍스트
사이징
간격
국경
열 2에 문의 양식 모듈 추가
집단
필드 레이아웃
텍스트
필드
제목 텍스트
버튼 사용자 정의 스타일
국경
맞춤 CSS
padding-bottom: 30px;
시사
데스크탑
태블릿
이동하는
그게 랩이야