Divi 테마란 무엇인가?
워드프레스에서 ‘코딩없이’ 웹사이트 제작을 도와주는 아주 강력한 도구입니다.
Divi 테마의 장점
- 코딩 없이 웹사이트를 만들 수 있습니다.
- 미리 만들어진 수 많은 웹사이트를 제공합니다.
- 다양한 디자인 요소들을 코딩 없이 만들 수 있습니다.
준비사항
이 포스팅은 위의 단계가 모두 완료되었다는 가정 하에 진행하겠습니다. 아직 위의 단계들이 진행되지 않으신 분들은 위 준비사항을 클릭하여서 진행하고 와주시면 됩니다.
Visual Builder 활성화 클릭
처음부터 빌드 클릭
홈페이지 디자인을 보다 쉽게 하기 위해 영역을 설정한다고 생각하면 쉽습니다. 일단 이번 포스팅을 따라해보고 나서 본인이 원하는 디자인으로 제작해 보시는 것을 추천드립니다.
2번째 칼럼 클릭
텍스트 모듈 생성
검색창에 텍스트 검색 후 클릭
예시 글과 설정할 수 있는 창이 나옵니다.
본문에 있는 예시 글 지우기 -> 아무거나 글 적어보기
텍스트 모듈 디자인 하는 방법
디자인 클릭 -> 텍스트 클릭
디자인 -> 텍스트 영역은 본인이 원하는 폰트(글꼴),폰트크기 색상등 본인이 원하는 디자인을 할 수 있습니다.
텍스트 폰트 색 -> 빨간색
텍스트 폰트 색 : 내가 적은 글을 여러 텍스트 폰트로 변경할 수 있습니다.
텍스트 소프트 라이트 : 텍스트의 굵기를 변하게 할 수 있습니다.
텍스트 스타일 복사 : 텍스트에 간단한 효과를 줄 수 있습니다.
텍스트 폰트 색 : 텍스트에 색을 입힐 수 있다. 맨 왼쪽 아이콘을 누르면 더 디테일하게 색을 고를 수 있습니다.
아이콘 모듈 생성
자신이 만든 텍스트 모듈위에 마우스 커서를 올려둡니다 -> ‘+ 버튼'(새로운 모듈 추가하기)을 클릭 ->‘Icon모듈’ 을 클릭
아이콘 모듈 디자인 하는 방법
본인이 원하는 아이콘 선택 -> 디자인 -> 아이콘 -> ‘아이콘 색상’과 ‘아이콘 크기’ 를 변경(빨간색/62px)
맞춤 -> 아이콘정렬 위치 선택
‘아이콘 모듈’ 위에 마우스 커서를 올려둡니다(클릭x)>’텍스트 모듈’ 클릭
아무거나 적기>paragraph클릭>Heading 1 클릭
Heading1~6은 제목을 설
디자인>서브헤딩 텍스트>H1 자신이 원하는 대로 텍스트를 디자인 해준다.
주의 :텍스트 컨텐츠에서 Heading1로 설정 했기 때문에 디자인>텍스트에서 디자인 or 서브헤딩에서 H2,H3등에서 디자인하면 아무런 효과가 없다.
텍스트 모듈 예시용 글 그대로 사용
버튼 모듈 생성
버 검색> 클릭
버튼에 표시하고 싶은 문구 적기
버튼 모듈 디자인 하는 방법
버튼 모듈의 디자인 툴을 이용해 자신이 원하는 모양으로 변경해 봅시다.
간단 설명
버 Border Width : 버튼 테두리 크기 조절
버 Border Color : 버튼 테두리 색
버 경 간 반경 : 버튼 모서리 라운드 조절
버 폰트 : 버튼 텍스트 폰트
버 의 아이콘 : 버튼 위에 마우스를 올렸을 때 나타나는 아이콘을 정할 수 있다.
배경 디자인
파란색 창에서 설정 버튼 클릭
배경 그래디언트 클릭
1,2번 각각 클릭해서 자신이 원하는 색을 설정한다
<uigradients.com>에서 자신이 원하는 색 조합의 번호를 입력하여 색을 설정한다
그라디언트 종류>자신이 원하는 색 패턴 설정
배경 동영상 선택
비디오 사용 형식은 2가지로 파일 업로드,URL 삽입이다(URL 삽입은 오류가 자주 발생하니 파일 업로드를 추천한다)
파일선택 클릭
video.net 또는 구글에 무료 비디오 다운 사이트 이용하여 영상을 다운 받은 뒤 업로드 한다
배경 패턴 선택>배경 패턴 추가 클릭>자신이 원하는 패턴,색상등을 선택하여 디자인한다.
배경 마스크 선택>배경 마스크 추가 클릭>자신이 원하는 마스크와색상등을 선택하여 디자인한다.
배경 이미지 선택>배경 이미지: 클릭
파일 선택 클릭>자신이 원하는 이미지를 업로드 한다.
표시한 부분을 사용해 사진을 본인이 원하는 크기와 위치를 조절 할 수 있다.
왼쪽 여백이 너무 넓어보여서 전체 모듈을 늘려 여백을 줄여보자
<최대 너비>를 사용해 전체 모듈을 늘릴 수 있다.
CSS 코드로 커스텀 하기
배경 모듈에서 설정 클릭
고급>사용자 맞춤CSS 클릭>주요소에 코드를 더 디테일한 디자인을 할 수 있다.
모션 효과
버튼 모듈 하단에 이미지 모듈을 생성
이미지 클릭>자신이 원하는 이미지 업로드
디자인>크기 조정에서 본인이 원하는 크기,위치를 설정
고급>스크롤 효과 설정> 페이지 스크롤 시 본인이 설정한 효과가 나타난다.
상하,좌우,페이드인아웃,확장 축소,회전 등이 있다.
이번 포스팅은 이걸로 마치고 3편에 이어서 진행 하겠습니다.