요소 추가 기능은 컨텐츠 디자인을 위해 필요한 기능입니다. 지금부터 요소 추가 기능의 전체적인 이용 방법을 설명하겠습니다.
요소 생성하기 #
1. 텍스트, 버튼, 이미지 등 대부분의 디자인은 요소 추가 탭에서 가져옵니다.
2. 좌측 상단의 요소 추가 탭을 클릭합니다. 스크롤을 내려 다양한 요소를 확인할 수 있습니다.
3. 모든 요소는 드래그를 통해 배치합니다.
열과 행 기능 #
1. 열과 행 기능은 다른 요소를 추가하고 조절하는데 도움이 되는 요소입니다. 먼저 열 기능을 드래그해 원하는 곳에 위치시킵니다.
2. 열의 각 항목마다 원하는 요소를 추가합니다.
3. 요소 간의 비율을 조정하고, 열 우측의 세부 설정 화살표를 클릭해 상세한 디자인이 가능합니다.
4. 행도 같은 방식으로 원하는 위치에 끌어 생성합니다.
5. 행의 차이점은 열을 한 번 더 감싸는 틀입니다. 열이 단순히 여러 요소를 함께 배치한다면, 행은 배치된 요소들을 한번 더 큰 틀로 묶어주기 때문에 블록 간의 이동과 수정에 이점이 있습니다. 이런 점을 이용해 디자인을 더욱 더 창의적으로 할 수 있습니다.
요소 세부 설정 – 세부 설정 방법 및 배경 이미지 삽입 #
1. 요소들의 화살표 또는 요소 자체를 클릭하면 세부 설정을 수정할 수 있습니다.
2. 이것은 배경을 설정할 수 있는 기능입니다. 배경 이미지, 영상, 지도를 삽입하거나 필터를 통해 명도, 채도 등을 수정할 수 있습니다.
3. 박스에 표시된 버튼은 방문자가 요소 위에 커서를 올릴 시 작동하는 트리거 기능입니다.
요소 세부 설정 – 배경 테두리 그림자 설정 #
1. 세부 설정 두번째 아이콘 클릭 후, 오버레이 항목에선 배경의 색과 그라데이션을 설정할 수 있습니다.
2. 테두리 항목에선 테두리의 색과 모양을 설정할 수 있습니다.
3. 테두리 항목 우측 하단에서 테두리의 사이즈를 조절할 수 있습니다.
4. Shadow 항목에선 요소의 그림자를 설정할 수 있습니다.
요소 세부 설정 – 링크 연결 등 요소 클릭 시 트리거 설정 #
1. 세번째 아이콘을 클릭한 후, URL 항목에서 연결하고 싶은 링크를 삽입해 클릭 시 입력한 링크로 연결되게 설정할 수 있습니다.
2. 페이지와 블록 항목에선 클릭 시 연결될 다른 페이지와 사이트 내의 블록을 설정할 수 있습니다.
3. 팝업 항목에선 클릭 시 표시될 팝업 페이지를 설정할 수 있습니다.
4. 파일 항목에선 클릭 시 표시될 이미지를 설정할 수 있습니다.
요소 세부 설정 – 새 열 추가, 이동 및 삭제 #
1. 네번째 아이콘을 클릭하면 새 열을 추가할 수 있습니다.
2. 다섯 번째 화살표 아이콘을 클릭해 선택된 열을 오른쪽, 왼쪽으로 이동 시킬 수 있습니다.
3. 또는 열의 우측 상단 아이콘을 드래그해 원하는 위치로 이동시킬 수 있습니다. (열이 아닌 다른 요소도 드래그 방식을 통해 이동 가능합니다.)
요소 세부 설정 – 열 넓이 및 패딩 마진 스타일링 #
1. 여섯 번째 톱니바퀴 아이콘을 클릭 후, 넓이 항목을 통한 넓이 조절이 가능합니다. (우측의 숫자를 클릭 후 입력을 통한 조절도 가능합니다.)
2. 콘텐츠 항목에서 열 내부의 요소의 위치를 조정할 수 있습니다.
3. 높이 항목을 클릭 후, 사용자 정의를 클릭해 원하는 대로 높이를 조정할 수 있습니다.
4. 스타일링 항목을 클릭 후, 패딩 및 마진 등 디자인 요소를 조절할 수 있습니다.
5. 박스 안의 항목은 패딩과 마진 기능이 열 전체를 한번에 조절할지 각각의 면마다 다르게 조정할지 변경하는 항목입니다.
6. 패딩과 마진, 모서리의 크기 조정을 픽셀로 설정할지 %로 설정할지 선택하는 항목입니다. 클릭 후 뜨는 두 가지 옵션 중 선택합니다.
7. 패딩은 열 내부의 컨텐츠 간격을 조절합니다. (우측의 숫자를 클릭 후 입력을 통한 조절도 가능합니다.)
8. 마진은 열의 외형 크기를 조절합니다. (우측의 숫자를 클릭 후 입력을 통한 조절도 가능합니다.)
9. 모서리는 열의 모서리의 둥근 정도를 조절할 수 있습니다. (우측의 숫자를 클릭 후 입력을 통한 조절도 가능합니다.)
요소 세부 설정 – 이펙트(효과) 스타일링 #
1. 이펙트 항목을 클릭해 선택한 열에 여러 효과를 삽입할 수 있습니다.
2. Entrance는 즉각적으로 나타나는 효과입니다.
3. 마우스 오버는 선택된 항목 위로 마우스 커서가 위치할 경우 효과가 나타납니다.
4. Scroll은 스크롤 시 효과가 나타납니다.
5. 원하는 이펙트를 선택 후 이펙트가 지속될 시간, 이펙트가 나올 때까지 지연될 시간을 설정할 수 있습니다.
6. Direction 항목을 통해 이펙트의 방향을 조절할 수 있습니다.
7. Infinite Animation 항목을 클릭해 효과가 지속적으로 유지되게 설정할 수 있습니다.
8. Replay Animation 항목을 클릭해 효과가 어떻게 보일지 모니터링 할 수 있습니다.
요소 세부 설정 – 요소 복제하기 #
1. 일곱번째 아이콘을 클릭해 선택한 요소를 복제할 수 있습니다.
요소 세부 설정 – 요소 삭제하기 #
1. 여덟번째 휴지통 아이콘을 클릭해 요소를 삭제 할 수 있습니다.
우측 하단의 업데이트를 클릭해 변경 사항을 저장하는 걸 잊지마세요!
이것으로 요소 생성 및 열과 행 기능에 대한 설명은 끝입니다. 더 궁금한 점이 있다면 언제든지 q&a 게시판이나 문의를 이용해주세요. 감사합니다!
