독립 근로자 — 420 | 웹사이트 구축 | 랜딩 페이지: 그리드 기반 히어로 섹션

이를 감안할 때 머리글 이제 category가 생겼습니다. 맞춤 설정해 보겠습니다.

1. 활용하고 싶은 새 글꼴을 선택하세요. 디자인 패널 > 텍스트 > 폰트
2. 글꼴을 선택하세요. 두께 드롭다운에서

수정하다 머리글 색조:

1. 활성화 색상 선택기 도구 그늘 패널
2. 위에 마우스를 올리면 배경화면 이미지 초기에 섹션 단위 그리고 다음에서 색상을 선택하세요. 그림
3. 필요에 따라 색상을 이동하여 색조를 조정합니다. 색상 그리고 반투명 슬라이더

데이터 블록에 더 많은 데이터를 추가해 보겠습니다. 추가 부분:

1. 열기 구성요소 패널 포함 그리고 부분 기본 타이틀 콘텐츠에 섹션 단위
2. 아래에 배치하세요. 머리글 당신은 이전에 포함 

추가하다 버튼 데이터 블록에:

1. 드래그 탭 ~로부터 구성요소 패널 포함 기본 타이틀 콘텐츠에 섹션 단위
2. 아래에 배치하세요. 영역 너 방금 첨부했어 
3. 두 번 클릭 탭 문구를 조정하고 이름을 바꿉니다(예: "대화하자").  
4. category를 탭 (예: '버튼') 

레이아웃 균일성을 유지하려면 탭의 색조를 수정하세요.

1. 선택하세요 탭
2. 기본 색조 샘플을 누르십시오. 디자인 패널 > 배경> 색상
3. 당신이 사용한 색상으로 전환하십시오. 머리글

현재 추가한 콘텐츠를 위한 공간을 마련해 보겠습니다. 

추가 공간 하단 끝까지 머리글:

1. 을 치다 머리글
2. 터놓다 디자인 패널 > 분리 
3. 베이스 설정 공간 20px로

이미 "Button"의 category를 부착한 것을 고려하여 복사/붙여넣기할 수 있습니다. 탭 2의 합을 생성하는 요소 버튼:

1. 초기 평가 탭
2. 복사/붙여넣기 탭
3. 다음을 두 번 클릭하십시오. 탭의 문구를 변경하고 변경합니다(예: "우리 프로젝트 보기")

메모: 구성 요소를 수정하는 경우 탭 수업, 그것은 둘 다에 영향을 미칠 것입니다 버튼 비슷한 category(예: "버튼")가 있기 때문에 즉시 사용할 수 있습니다. 

예를 들어, 공간 하나의 오른쪽에 탭, 공간 둘 다에서 증가가 발생합니다. 버튼: 

1. 다음 중 하나를 선택하세요. 버튼
2. 터놓다 디자인 패널 > 분리 
3. 권리를 설정하다 공간 10px로

겹치는 레이아웃 디자인

겹치는 레이아웃은 그리드 구성 요소가 서로 겹칩니다. 이 그림에서는 데이터 블록이 배경화면 이미지. 

기본 타이틀 콘텐츠를 선택하세요. 섹션 단위. 

그 이후로 놓기 으로 구성됩니다 자동, 이는 획득 가능한 첫 번째 셀을 획득합니다. 그리드 — 오른쪽 상단 셀. 

오른쪽 하단 셀에 배치하겠습니다. 그리드: 

1. 터놓다 디자인 패널 > 그리드 하위 > 놓기
2. 기본 타이틀 콘텐츠의 배치 설정 섹션 단위 에게 수동
3. 드래그 섹션 단위 오른쪽 하단 셀에

기본 타이틀에 대해 동일한 과정을 반복해 보겠습니다. 그림:

1. 기본 제목을 선택 그림
2. 터놓다 디자인 패널 > 그리드 하위 > 놓기
3. 의 배치를 설정합니다. 그림 에게 수동
4. 오른쪽 하단 핸들을 드래그합니다. 그림 둘 다에 걸쳐 그리드 전체를 포괄하는 열과 행 그리드 

데이터를 통해 볼 수 있도록 하려면 그림, 변경하다 섹션 단위 배경색: 

1. 기본 제목 콘텐츠를 선택하세요. 섹션 단위
2. 터놓다 디자인 패널 > 배경 > 색상
3. 샘플을 선택하고 색상(예: 흰색)을 선택하세요.

행과 열의 크기나 수량을 조정하세요. 그리드: 

1. 기본 제목 세그먼트 평가 섹션 단위 (주요 요소)
2. 누르다 입력하다 또는 조정을 클릭하세요. 그리드 상징 

현재 세그먼트 높이가 다음으로 설정되어 있습니다. 자동. 이것을 정확한 크기로 변경해 보겠습니다. 

1. 다음과 같은 막대를 클릭하세요. 자동 정상 옆에 그리드 행 크기 조정 메뉴를 표시합니다. 

2. 맨 위 행을 1 FR(분수 단위)로 지정
3. 두 번째 행에 대해서도 이 과정을 반복합니다. 

각 행에 1 FR을 할당하면 각각 유연한 FR을 사용하여 뷰포트 높이의 50%를 차지하게 됩니다. 

위의 지침을 반복하여 행 높이를 수정합니다. 맨 위 행을 1FR로 유지하고 맨 아래 행을 자동으로 전환하면 맨 위 행은 사용 가능한 공간을 모두 활용하고 맨 아래 행의 높이는 내부 콘텐츠에 따라 자동으로 조정됩니다. 

딸깍 하는 소리 완료 편집을 완료하려면 그리드. 

다음으로 콘텐츠를 강화하여 모양을 개선해 보겠습니다.

조정하다 제목 여백:

1. 선택 표제
2. 입장 스타일 패널 > 간격
3. 상단을 탭하세요. 여유 0px로 수정하세요.
4. 하단을 탭하세요. 여유 20px로 수정하세요

조정 단락 여백: 

1. 선택 절
2. 입장 스타일 패널 > 간격
3. 기본 하단 조정 여유 30px로 

콘텐츠 블록 내의 요소 간격을 관리할 수도 있습니다. 표제, 절, 그리고 버튼:

1. 홈 히어로 콘텐츠를 선택하세요. Div 블록
2. 입장 스타일 패널 > 간격
3. 패딩(요소 내의 공간)을 조정합니다.
4. 누르다 옮기다, 내부로 드래그합니다. 심 4면을 모두 30px로 변경하는 컨트롤

본문(모든 페이지) 태그 수정

수정 본문(모든 페이지) 태그 사이트를 준비하고 시간을 절약해 드립니다. 예를 들어, 폰트 와 더불어 본문(모든 페이지) 태그 선택하면 기본값에 영향을 줍니다. 폰트 프로젝트 전체의 요소에 대해. 

그만큼 몸 요소는 모든 페이지의 최상위 요소 역할을 합니다. 개정하려면 본문(모든 페이지) 태그:

1. 실행 항해자 그리고 몸
2. 다음을 클릭하세요. 선택자 필드를 선택하고 본문(모든 페이지)꼬리표 드롭다운에서

조정할 시간 폰트 에 대한 본문(모든 페이지) 태그:

1. 다음을 클릭하세요. 선택자 필드를 선택하고 본문(모든 페이지)꼬리표 드롭다운에서 
2. 입장 타이포그래피 > 폰트 글꼴을 선택하세요(예: "Source Sans Pro)
3. 수정하다 글꼴 크기 15px로
4. 변경 폰트 선 키 1.4와 하이픈(-)을 입력하여 단위 없는 측정값 1.4로 변환

단위 없는 라인 높이를 사용하는 것은 폰트의 라인 높이 폰트 크기. 단위 없는 라인 높이에 대해 자세히 알아보세요. 

이전에 설정한 재정의가 없는 텍스트 요소는 본문(모든 페이지) 태그. 

이제 당신은 매력적인 영웅 섹션을 갖추고 있습니다. 당신은 영웅입니다!