Divi 5 마스터 코스
Part 1: What To Prepare Before Building Your Divi 5 Website
이 시리즈에서는 다음과 같은 내용을 다룹니다(각 편이 게시될 때마다 링크를 추가할 예정입니다):
- Divi 5 웹사이트를 제작하기 전에 준비해야 할 사항 (현재 위치)
- Divi 5 인터페이스의 모든 측면 살펴보기
- 디자인 변수를 활용한 Divi 5 글로벌 디자인 시스템 구축
- 더 빠르고 일관성 있는 웹 디자인을 위한 Divi 5 프리셋 활용법
- Divi 5 홈페이지를 처음부터 만들기
- Divi 5에서 사용자 정의 헤더 및 내비게이션 만들기
- Divi 5에서 맞춤형 푸터 만들기
- Divi 5 테마 빌더를 사용하여 글로벌 웹사이트 템플릿 만들기
- Divi 5 웹사이트의 핵심 내부 페이지 구축하기
- Divi 5에서 Flexbox 마스터하기
- Divi 5에서 CSS 그리드 마스터하기
- Divi 5 웹사이트를 완벽한 반응형으로 만들기
- 대화형 오프캔버스 요소 만들기 (팝업 등)
- Divi 5 루프 빌더 마스터하기
- Divi 5 파워 유저 워크플로
- Divi 5 웹사이트 검토, 다듬기 및 출시
2부: Divi 5 인터페이스의 모든 측면 살펴보기
준비가 끝났으니, 이제 Divi 5 비주얼 빌더를 사용해 볼 차례입니다. Divi 5는 이제 베타 단계를 완전히 벗어나 정식 출시되었으며, 완전히 새롭게 단장된 현대적이고 고성능의 인터페이스를 제공합니다.
3부: 디자인 변수를 활용한 Divi 5 글로벌 디자인 시스템 구축
디자인 변수는 Divi 5 디자인 시스템의 모듈, 프리셋, 템플릿 및 기타 구성 요소에서 참조할 수 있는, 이름이 지정된 재사용 가능한 값입니다. 개별 모듈 내에 일회성 값을 저장하는 대신, 중요한 값을 한 번 정의하여 사이트 전체에서 재사용할 수 있습니다. Divi 5에서는 색상, 글꼴, 숫자, 이미지, 텍스트 문자열 및 링크가 이에 포함됩니다.
4부: 더 빠르고 일관성 있는 웹 디자인을 위한 Divi 5 프리셋 활용법
이제 4부에서는 Divi 5 프리셋을 사용하여 이러한 변수들을 재사용 가능한 디자인 시스템으로 전환해 보겠습니다. 여기서 여러분은 옵션 그룹 프리셋과 요소 프리셋을 만드는 방법, 프리셋 관리자에서 이를 정리하는 방법, 그리고 더 큰 유연성을 위해 중첩 및 스택 프리셋을 사용하는 방법을 배우게 될 것입니다.
5부: Divi 5 홈페이지를 처음부터 만들기
이번 섹션에서는 해당 라이브러리를 활용해 코워킹 스페이스 웹사이트의 홈페이지를 섹션별로 단계적으로 구축해 보겠습니다. 홈페이지는 첫 화면의 헤로 섹션부터 마지막의 FAQ 섹션까지 총 7개의 섹션으로 구성되어 있습니다. 각 섹션은 고유한 구조와 콘텐츠 우선순위, 시각적 역할을 가지고 있습니다. 디자인 작업이 이미 완료되었기 때문에, 이번 구축 과정의 대부분은 반복적인 스타일링 작업보다는 구성 요소들을 조립하는 데 중점을 둘 것입니다.
6부: Divi 5에서 사용자 지정 헤더 및 내비게이션 만들기
이제 6부에서는 Divi 5의 테마 빌더를 사용하여 맞춤형 헤더와 내비게이션을 만들어 모든 페이지의 상단 부분을 구성해 보겠습니다. Flexbox 설정, 프리셋, 변수 및 인터랙션 기능을 활용하여 공지 바, 로고, 메인 내비게이션 메뉴, 소셜 미디어 링크, 그리고 행동 유도(CTA) 버튼이 포함된 반응형 헤더를 제작할 것입니다.
7부: Divi 5에서 사용자 지정 푸터 만들기
이 글을 다 읽을 때쯤이면, 여러분의 코워킹 사이트 상단에는 세 가지 스타일로 구성된 열이 있는 글로벌 푸터가 적용될 것입니다. 이 열들은 브랜드 블록, 주소 및 소셜 미디어 블록, 그리고 포인트 색상 배경을 배경으로 한 연락처 CTA로 이루어져 있습니다. 그 아래에는 현재 연도를 동적으로 불러와 자동으로 업데이트되는 한 줄짜리 저작권 행을 추가하게 됩니다. 이 튜토리얼은 푸터 스타일이 거의 전적으로 3부 의 디자인 변수와 4부.의 요소 프리셋을 사용하여 적용되기 때문에 빠르게 진행할 수 있습니다.
8부: Divi 5의 테마 빌더를 사용하여 글로벌 웹사이트 템플릿 만들기
이제 8부에서는 테마 빌더 를 사용하여 코워킹 웹사이트의 나머지 부분도 하나의 통일된 브랜드처럼 보이도록 만들 것입니다. 템플릿 기반 페이지를 하나하나 수동으로 디자인하는 대신, 게시물, 아카이브, 검색 결과 및 오류 페이지에 자동으로 적용되는 재사용 가능한 레이아웃을 만들 것입니다.
9부: Divi 5 웹사이트의 핵심 내부 페이지 구축하기
5부에서는 코워킹 스페이스 웹사이트의 홈페이지를 제작했습니다. 그 후, 6부 와 7부에서는 테마 빌더를 사용하여 전역 헤더와 푸터를 추가했습니다. 8부에서는 게시물, 아카이브, 검색 결과 및 404 페이지용 글로벌 템플릿을 만들었습니다.
이제 사이트의 핵심 내부 페이지를 제작할 준비가 되었습니다. 이 코워킹 웹사이트의 경우, ‘연락처’ 페이지와 ‘이벤트’ 페이지를 만드는 것을 의미합니다.
10부: Divi 5에서 Flexbox 활용하기
Divi 5에서는 Flexbox 제어 기능을 비주얼 빌더에 직접 통합하여, 별도의 CSS를 작성하지 않고도 간격, 정렬, 줄 바꿈 및 요소 배치를 관리할 수 있습니다. 이 글에서는 Divi 5에서 Flexbox가 어떻게 작동하는지, 주요 레이아웃 설정들의 기능은 무엇인지, 그리고 이러한 설정을 활용해 간단한 반응형 레이아웃을 구축하는 방법을 알아보겠습니다.