배경.
모든 섹션을 색상, 사진, 그라데이션으로 채울 수 있습니다. 색상과 사진은 Style 패널에서 가져오며, 섹션, 행, 열, 요소에 모두 있습니다. 섹션에는 그라데이션, 고정 및 패럴랙스 사진, YouTube 동영상용 Background effects 패널이 추가됩니다. 예시에서는 도시 사진, 흰색 텍스트, 위의 그라데이션을 사용한 남색 섹션을 만듭니다.
동영상에서는 섹션 뒤에 사진을 추가한 뒤 그라데이션으로 덮습니다.
색상과 사진 추가
- 빈 콘텐츠 영역에서 Add Elements(을)를 클릭하고 Layout 탭에서 Section(을)를 고르세요.
- 섹션을 가리키고 More > Settings(을)를 여세요.
- 다음을 여세요: Style 패널.
- 다음용으로 진한 남색 견본을 고르세요: Background.
- 다음용으로 흰색을 고르세요: Font color.
- 다음에서 Background image 아래 Select Image(을)를 클릭하세요. 미디어 라이브러리에서 검색하고 사진을 선택한 뒤 Insert selected(을)를 클릭하세요.
- 다음을 설정하세요: Background style(을)를 Cover(으)로.
- 다음을 설정하세요: Background position(을)를 Center center(으)로. Save(을)를 클릭하세요.
- 섹션의 +(을)를 클릭하고 Content 탭에서 Text(을)를 고르세요.
- 다음 같은 제목을 입력하세요:
Evening lectures. 아래에 한 줄을 추가하세요. 제목을 Heading 2(으)로 설정하고 에디터 툴바에서 두 줄을 모두 가운데로 맞추세요. - 다음을 여세요: Style 패널. Font color(을)를 흰색으로 설정한 뒤 Save(을)를 클릭하세요.
그라데이션 추가
- 섹션을 가리키고 More > Settings(을)를 다시 여세요.
- 다음을 여세요: Background effects 패널. Background effect(을)를 Gradient(으)로 설정하세요.
- 다음을 고른 뒤 Save(을)를 클릭하세요: Start color와 End color.
- 툴바에서 Save(을)를 클릭하고 뷰 메뉴(눈 아이콘)를 연 뒤 Preview(을)를 고르세요.
표시되는 내용
첫 단계 뒤에는 흰색 제목 뒤의 섹션 전체에 사진이 채워집니다. Cover(은)는 맞지 않는 부분을 자르고, Center center(은)는 사진의 가운데를 보기에 유지합니다. 남색은 사진이 불러와지는 동안이나 사진이 닿지 않는 곳에만 표시됩니다.
그라데이션은 위의 시작 색상에서 아래의 끝 색상으로 섞입니다. 사진 위에 얹힙니다. 불투명한 색상은 사진을 완전히 가리며, 약간 투명한 색상은 사진을 비칩니다.
설정
Style 패널(모든 섹션, 행, 열, 요소)
| 설정 | 기능 | 기본값 |
|---|---|---|
| Background | 색상 선택기나 테마 견본의 채우기 색상 | 없음 |
| Background image | 다음으로 고르는 미디어 라이브러리의 사진: Select Image | 없음 |
| Background style | Cover(은)는 요소를 채우고 자릅니다. Contain(은)는 전체 그림을 보여주며 빈틈이 남을 수 있습니다. No repeat(은)는 자체 크기로 한 번 보여줍니다. Repeat(은)는 바둑판식으로 배치합니다 | Theme defaults |
| Background position | 자를 때 보기 유지되는 그림 부분. 예: Center center, Left top | Theme defaults |
AI 이미지 생성이 설정되면 Background image에도 프롬프트를 사용합니다. 자세한 내용은 AI image generation 문서를 참고하세요.
Background effects 패널(섹션 전용)
| 배경 효과 | 기능 | 추가 설정 |
|---|---|---|
| Simple image (기본값) | 사진이 페이지와 함께 스크롤됩니다 | 없음 |
| Fixed image | 페이지가 위로 스크롤되는 동안 사진은 제자리에 있습니다 | 없음 |
| Parallax image | 사진이 페이지보다 느리게 움직입니다. 예시는 Hero section 문서를 참고하세요. | Parallax speed, Parallax mode (Fixed 또는 Local), Disable on mobile |
| Gradient | 두 색상이 섹션에 걸쳐 섞입니다. 사진이 있으면 위에 얹힙니다 | Start color, End color, Gradient direction (180도는 위에서 아래로), Start position, End position |
| YouTube video | 음소거된 YouTube 동영상이 섹션을 채웁니다. 반복하려면 Loop(을)를 선택하세요 | YouTube video URL, Video options, Start time in seconds, Stop time in seconds |
고정 및 패럴랙스 효과는 Style 패널에서 설정한 사진을 움직입니다. YouTube 동영상에는 사진이 필요 없습니다.
배경이 표시되지 않는 경우
- Background effects 패널이 없습니다. 섹션에만 있습니다. 행, 열, 요소가 아니라 섹션을 가리키고 More > Settings(을)를 여세요.
- 사진이 잘립니다. Cover(은)는 섹션에 맞지 않는 부분을 자릅니다. 주제를 보기에 유지하려면 Background position(을)를 바꾸거나 Contain(을)를 고르세요.
- 그라데이션이 사진을 가립니다. 그라데이션은 위에 얹히며, 불투명한 색상은 사진을 덮습니다. 색상 선택기에서 Start color와 End color의 불투명도를 낮추세요.
- 섹션에 그라데이션이 없습니다. 그라데이션에는 두 색상이 모두 필요합니다. Start color와 End color(을)를 고르세요.
- YouTube 동영상이 재생되지 않습니다. YouTube video URL(이)가 비어 있거나 단일 동영상 링크가 아닙니다.
https://www.youtube.com/watch?v=뒤에 ID가 오는 동영상의 전체 주소를 붙여넣으세요.
다음 단계
- Full-width layouts: 배경과 콘텐츠를 가장자리까지 확장합니다.
- Animation tab: 섹션이 보기에 스크롤될 때 텍스트를 페이드인합니다.
- Hero section: 패럴랙스 사진의 전체 페이지 헤더를 만듭니다.