에 영웅 섹션을 생성하시겠습니까? Divi 기존의 반응형 대신 유동적인 것은 무엇입니까?
영웅 섹션 사이트 웹 유체 설계에 가장 적합한 후보 중 하나입니다. 다양한 중단점에 맞춰 조정되는 기존의 반응형 디자인과 달리 유동적인 디자인은 브라우저 뷰포트에 매끄럽게 적응하고 모든 장치에서 디자인을 일관되게 유지합니다. 결국, 영웅 섹션은 사용자가 웹사이트에서 가장 먼저 보게 되는 것입니다. 사이트 웹.
이 튜토리얼에서는 전체 유동적인 영웅 섹션을 만드는 방법을 보여 드리겠습니다. Divi. 이 유동적인 디자인을 만드는 핵심은 사용된 각 모듈에 유동적인 루트 글꼴 크기를 추가한 다음 길이 단위를 통합하는 것입니다. em (누가 루트 본문 글꼴 크기에 상대적 ) 모듈 설정에서.
시작하자!
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
유동적인 디자인이 브라우저 창의 너비에 어떻게 부드럽게 적용되는지 확인하십시오.
Divi Builder로 새 페이지 만들기
시작하려면 다음을 수행해야 합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi 건축업자
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 디자인을 시작할 빈 캔버스가 생깁니다. Divi.
Divi에서 Fluid Hero 섹션을 디자인하는 방법
섹션 설정
시작하려면 섹션에 대한 기존 디자인 설정을 업데이트하겠습니다. 섹션 설정을 열고 다음을 업데이트하십시오.
- 그라데이션 중지:
- 30%: #ff2000
- 30%: #121212
- 기울기 방향: 45deg
탭 아래 디자인, 패딩 업데이트:
- 패딩: 0px 상단, 0px 하단
라인 생성
그런 다음 섹션에 XNUMX열 행을 추가합니다.
라인 설정
라인 설정을 열고 탭에서 다음을 업데이트하십시오. 디자인 :
- 거터 폭: 1
- 폭: 100%
- 최대 너비: 1px
- 최소 높이: 100vh(데스크톱), 없음(태블릿 및 휴대폰)
- 패딩: 0px(상단 및 하단)
테두리가 있는 흐르는 머리글 텍스트 만들기
섹션과 라인이 완성되었으므로 흐르는 헤더 텍스트를 Hero 섹션에 추가할 수 있습니다. 또한 창의적인 디자인 요소를 위해 텍스트 모듈에 유동적인 테두리를 추가합니다.
텍스트 모듈 추가
제목 텍스트와 테두리를 만들려면 열에 새 텍스트 모듈을 추가합니다.
텍스트 설정
탭 아래 내용, 업데이트하세요 내용 다음 HTML 코드를 사용하여 본문을 작성하세요.
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
디자인 요소를 유동적으로 만들려면 먼저 CSS Clamp() 함수를 사용하여 유동적인 루트 글꼴 크기를 모듈에 추가해야 합니다.
탭 아래 Advnaced, 다음 CSS 스니펫을 붙여넣습니다.
font-size: clamp(32px, 4.1vw, 70px);
탭 아래 디자인, 다음 헤더 텍스트 디자인 설정을 업데이트합니다.
- 제목 텍스트:
- 유형: H1
- 글꼴: 몬세라트
- 글꼴 두께: 무거움
- 색상: #ffffff
- 크기: 1em
- 문자 간격: 0,1em
- 줄 높이: 1,2em
또한 다음과 같이 모드 패딩을 업데이트합니다.
- 패딩: 첫 번째(위, 아래, 왼쪽 및 오른쪽)
유동적인 테두리 디자인을 만들려면 다음을 업데이트하세요.
- 테두리 너비: 1em
- 테두리 색상: #ffffff
- 하단 테두리 색상: 투명
- 왼쪽 테두리 색상: 투명
악센트 테두리 만들기
악센트 테두리를 만들기 위해 기존 텍스트 모듈을 복제할 수 있습니다.
삭제 내용 기존 본체의 설계 매개변수를 다음과 같이 업데이트합니다.
- 최대 너비: 6,5cm
- 높이: 3,25m
- 테두리 너비: 0,5em
- 테두리 색상: #ff2000
악센트 테두리의 위치를 지정하려면 제목 텍스트(1em) 모듈의 테두리 너비와 동일한 오프셋으로 절대 위치를 추가합니다.
탭 아래 Advnaced, 다음 위치 옵션을 업데이트합니다.
- 위치: 절대
- 위치: 오른쪽 상단
- 수직 오프셋: 1em
- 수평 오프셋: 1em
자막 텍스트 만들기
제목 텍스트 아래에 흐르는 자막 텍스트를 추가합니다. 이 텍스트가 더 작기 때문에 더 작은 유동 루트 글꼴 크기를 추가합니다.
새 텍스트 모듈 추가
캡션 텍스트를 만들려면 기존 헤더 텍스트 모듈 아래에 새 텍스트 모듈을 추가합니다.
다음과 같이 일부 채우기 텍스트 문장을 추가할 수 있습니다.
- 내용: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sitmet, consectetur adipiscing elit.
유동 루트 글꼴 크기 추가
다음으로 작은 텍스트에 더 잘 맞는 새로운 유동 글꼴 크기를 추가해야 합니다. 고급 탭에서 다음 CSS 스니펫을 기본 요소 아래에 붙여넣습니다.
font-size: clamp(14px, 1.4vw, 24px);
텍스트 디자인 설정
탭 아래 디자인, 다음을 업데이트합니다.
- 텍스트 :
- 글꼴 두께: 반 굵게
- 색상: #ffffff
- 크기: 1em
- 높이: 1,6m
그런 다음 다음과 같이 크기와 간격을 업데이트합니다.
- 최대 너비: 19cm
- 여백: 2em(하단), 자동(왼쪽), 5em(오른쪽)
유체 버튼 만들기
유동 버튼을 만들려면 자막 텍스트 모듈 아래에 새 버튼 모듈을 추가합니다.
그런 다음 버튼 텍스트를 "7일 무료 평가판"으로 업데이트합니다.
유동 루트 글꼴 크기 추가
다음으로 버튼에 적합한 새로운 유동 글꼴 크기를 추가해야 합니다.
탭 아래 Advnaced, 기본 요소 아래에 다음 CSS 스니펫을 붙여넣습니다.
font-size: clamp(20px, 2.35vw, 40px);
버튼 디자인 설정
탭 아래 디자인, 다음을 업데이트합니다.
- 버튼 정렬: 오른쪽
- 버튼에 사용자 정의 크기 사용: 예
- 버튼 텍스트 색상: #ff2000
- 그라데이션 중지:
- 색상 1 25%: 투명
- 색상 2 25%: #ffffff
- 기울기 방향: 45도
- 버튼 :
- 테두리 너비: 0픽셀
- 테두리 반경: 0픽셀
- 글꼴: 몬세라트
- 글꼴 두께: 두꺼운
- 스타일: 기울임꼴
- 버튼 아이콘 표시 : 예
- 아이콘: 오른쪽의 삼각형 모양 화살표(스크린샷 참조)
- 아이콘 배치: 오른쪽
- 여백: 8em(오른쪽)
- 패딩: 0,2em(상단 및 하단), 1,5em(왼쪽), 1em(오른쪽)
영웅 섹션에 대한 이미지 만들기
모든 내용 Hero 섹션의 페이지 크기를 올바른 크기로 조정하면 왼쪽에 Hero 섹션 이미지를 추가할 준비가 되었습니다. 이렇게 하려면 먼저 버튼 아래에 이미지 모듈을 추가하세요.
이미지 설정을 열고 이미지를 업로드합니다.
이미지 디자인 설정
탭 아래 디자인, 다음 설정을 업데이트합니다.
- 이미지 정렬: 왼쪽(데스크탑 및 태블릿), 중앙(전화)
- 최대 너비: 48%(데스크톱 및 태블릿), 70%(전화)
- 패딩: 4%(왼쪽)
마지막으로 다음과 같이 vmin 길이 단위를 사용하여 오프셋을 사용하여 이미지에 절대 위치를 지정합니다.
- 위치: 절대(데스크톱 및 태블릿), 상대(전화)
- 위치: 왼쪽 상단(데스크톱 및 태블릿)
- 수직 오프셋: 30vmin(데스크톱 및 태블릿), 0px(전화)
최종 결과
다음은 라이브 페이지의 최종 결과입니다.
이것이 유동적인 디자인이 브라우저 창의 너비에 부드럽게 적응하는 방법입니다.
지금 DIVI를 다운로드하세요!!!
결론
Hero 섹션에 유동적인 디자인을 추가하면 특정 지점에서 디자인을 업데이트하거나 미디어 쿼리를 사용하지 않고도 모든 브라우저 크기에서 접힌 부분의 상단이 아름답게 일관성을 유지하도록 하는 편리한 방법이 될 수 있습니다.
이 기술이 향후 프로젝트에 유용한 또 다른 디자인 기술을 추가할 수 있기를 바랍니다.
또한 이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
