안녕하세요 이번 포스팅은 워드프레스 ‘Divi 테마 튜토리얼 2편’에 이어 모듈을 적극적으로 사용하여 웹사이트를 제작할려고 합니다.
Divi 테마란 무엇인가?
워드프레스에서 ‘코딩없이’ 웹사이트 제작을 도와주는 아주 강력한 도구입니다.
Divi 테마의 장점
- 코딩 없이 웹사이트를 만들 수 있습니다.
- 미리 만들어진 수 많은 웹사이트를 제공합니다.
- 다양한 디자인 요소들을 코딩 없이 만들 수 있습니다.
준비사항
이 포스팅은 위의 단계가 모두 완료되었다는 가정 하에 진행하겠습니다. 아직 위의 단계들이 진행되지 않으신 분들은 위 준비사항을 클릭하여서 진행하고 와주시면 됩니다.
섹션 추가하기
섹션을 추가하여 홈페이지를 대표하는 이미지나 광고, 안내사항등을 만들 수 있다.
섹션 끼워넣기 클릭>일반 클릭>자신이 원하는 칼럼 선택
행동개시 모듈 클릭
텍스트 : 자신이 원하는 제목과 글,버튼 텍스트를 수정할 수 있다.
링크 :버튼 과 모듈 전체에 링크를 걸어 둘 수 있다.
<링크 대상>
–같은 윈도우 안에서 : 새 창이 뜨지 않고 현재 창이 링크 URL 주소로 바뀐다.
–같은 탭 안에서 : 걸어둔 URL을 새 창으로 띄워준다.
안내문 모듈 : 사진,제목,글을 적을 수 있는 모듈이다.
안내 모듈도 행동개시 모듈과 마찬가지로 링크를 걸 수 있다.
이미지 모듈 추가
모든 모듈은 마우스로 끌어서 자신이 옮기고자 하는 칼럼으로 옮길 수 있다.
복사도 가능하다
붓 모양을 클릭하면 바로 디자인 툴로 이동한다.
색 조도 변경 방법
이미지/아이콘 너비 : 크기 조절
이미지/아이콘 정렬 : 좌, 중, 우 위치 이동
image/icon 둥근 사각형 : 사각 배경 모서리를 둥글게 만들 수 있다(최대 원까지 변형)
텍스트 모듈 추가
이전에 만들었던 버튼 모듈위에 마우스를 올린다(클릭x)> 복사
복사한 버튼 모듈을 클릭 후 드래그 하여 간편하게 버튼 모듈을 생성
모듈 라이브러리에 추가 : 저장한 모듈을 라이브러리에 저장 후 간편하게 불러서 사용할 수 있다
라이브러리에서 모듈 불러오기
복사 기능 응용 1
복사 기능 응용 2
복사 클릭
배경 색 넣기
설정클릭> 배경>색 선택 후 색 명암 조절
간격 조절
디자인>간격
텍스트 모듈 추가
빨간 표시(열 옮기기) 클릭 후 드래그
라이브러리에서 텍스트 모듈 불러오기
드래그해서 가져왔던 텍스트 모듈 삭제>라이브러리에서 추가
텍스트 정렬
배경추가
이미지 디자인 응용
내가 넣고 싶은 이미지들을 차례로 넣는다.
행 설정>디자인>크기 조정>사용자정의 간격 1 로 변경
최대너비를 모두 최대로 키운다
위 아래 여백 없애기
행 설정> 내부여백 모두 ‘0’ 으로 설정
절 설정> 내부여백 모두 ‘0’ 으로 설정
간단하게 섹션 만들기
빨간 표시 모듈 라이브러리에 저장
섹션추가>왼쪽은 이미지 모듈>오른쪽은 라이브러리에 저장한 모듈 불러오기
토글 모듈
디자인>아이콘에서 모듈이 ‘닫혔을 때’와 ‘열렸을 때’ 아이콘을 각각 설정 할 수 있다.
토글 모듈 테두리 없애는 법
디자인>테두리>테두리 너비 ‘0’으로 설정
디바이더 모듈
분리기호 양식 : 선 종류를 고를 수 있다.
크기 조정을 통해 길이를 조절 할 수 있다.
디자인>애니메이션>이미지에 시각적 효과를 넣을 수 있다.
디자인>변환>사진 크기 위치 자유롭게 변경
