카테고리
디자인 모드
홈페이지, 쇼핑몰 사이트의 디자인 수정 기능
디자인 알아보기
클릭엔에서 생성하신 사이트의 디자인은 디자인 모드로 접속해 간편하게 수정할 수 있어요.
텍스트 블록
텍스트 블록이란? 사이트에서 텍스트 노출이 필요할 때 사용할 수 있는 블록이에요. 블록에 설정된 영역에 텍스트를 수정하거나 배경 이미지를 삽입할 수 있어요. 텍스트를 클릭하면 원하는 내용을 입력, 수정할 수 있고, 텍스트 편집기를 통해 폰트, 사이즈, 색상, 링크 등을 설정할 수 있어요. 애니메이션 블록에 애니메이션 효과 및 동작 방향, 동작 시간, 대기 시간 설정을 수정할 수 있어요. 버튼 설정 일부 텍스트 블록 중 버튼이 있는 블록에서는 버튼 기능을 사용할 수 있어요. 참고사항 ⚙️ 버튼을 통해 각 버튼의 제목, 모양, 링크, 색상 등을 수정할 수 있어요.
이미지 블록
이미지 블록이란? 사이트에서 별다른 설명 없이 이미지만 노출할 때 사용할 수 있는 블록이에요. 권장 사이즈에 맞춰 이미지를 변경하고 링크를 설정할 수 있어요. 사진 🏞️ 아이콘을 클릭해 이미지를 변경하거나 링크 🔗 버튼을 통해 이미지에 링크를 추가할 수 있어요. 이미지 설정 만약 모바일에서 이미지가 잘려 보인다면 블록설정 ✏️ > 이미지 설정 메뉴에서 모바일 노출 설정을 변경해 보세요. 이미지 블록을 추가하신 후 이미지 위에 마우스를 가져가면 권장 사이즈를 확인할 수 있어요.
소개 블록
소개 블록이란? 이미지와 텍스트가 결합된 형태의 블록이에요. 대표 이미지와 함께 소개글 작성이 필요할때 유용하게 사용할 수 있어요. 사진 🏞️ 아이콘을 클릭해 이미지를 변경하거나 링크 🔗 버튼을 통해 이미지에 링크를 추가할 수 있어요. 애니메이션 블록에 애니메이션 효과 및 동작 방향, 동작 시간, 대기 시간 설정을 수정할 수 있어요. 버튼 설정 일부 텍스트 블록에는 버튼이 추가되어있으며, 버튼이 있는 블록에서는 버튼을 추가하거나 수정할 수 있어요.
목록 블록
목록 블록이란? 이미지와 텍스트가 결합된 형태의 콘텐츠를 노출할 수 있는 블록이에요. 제공하는 서비스 분류를 보여주거나 간단한 설명을 기재하는 용도로 활용할 수 있어요. 사진 🏞️ 아이콘을 클릭해 이미지를 변경하거나 링크 🔗 버튼을 통해 이미지에 링크를 추가할 수 있어요. +ADD 버튼으로 목록을 추가하거나 휴지통 🗑️ 버튼을 통해 목록을 삭제할 수 있어요. 애니메이션 블록에 애니메이션 효과 및 동작 방향, 동작 시간, 대기 시간 설정을 수정할 수 있어요.
슬라이드 배너
슬라이드 배너 블록이란? 여러장의 이미지를 등록하고 일정 시간 간격으로 넘어가도록 보여줄 수 있는 블록이에요. 자동으로 화면이 전환되어 사용자의 시선을 끌고 프로모션 등을 효율적으로 배치할 수 있어요. 이미지 변경 방법 블록설정 ✏️ > 슬라이드 콘텐츠 메뉴를 통해 슬라이드 배너에 사용할 이미지의 권장 사이즈를 확인하고 이미지를 변경할 수 있어요. 참고사항 - 모바일 화면에서 슬라이드 배너의 좌/우가 잘려보인다면 모바일 노출 설정 메뉴를 통해 모바일 화면에 노출되는 비율을 변경해 보세요. - 이미지를 변경했다면 하단 적용 버튼을 클릭해 변경된 내용을 블록에 적용해보세요.
동영상 블록
동영상 블록이란? 유튜브 동영상을 사이트로 불러와 사이트에 간편히 삽입할 수 있는 블록이에요. 소개 영상 등을 삽입해 사용자들의 시선을 사로잡을 수 있어요. 동영상 설정 방법 블록을 삽입한 후 블록설정 ✏️ > 동영상 설정 > 유튜브 영상의 URL 입력 > 적용 버튼을 클릭해주시면 사이트에 동영상을 삽입할 수 있어요. 참고사항 - 유튜브 동영상 외 타사이트의 동영상 URL 및 동영상 파일의 직접 업로드는 지원되지 않아요. - 동영상 자동재생을 이용하기 위해서는 음소거 설정을 함께 사용해 주셔야해요.
지도 블록
지도 블록이란? 사이트에 지도를 삽입할 수 있는 블록으로 위치 안내, 찾아오시는 길 등의 메뉴에서 활용할 수 있어요. 지도 설정 방법 구글 지도에서 주소를 검색한 후 공유 > 지도 퍼가기 HTML 소스를 복사해 주세요. 클릭엔 디자인 모드 > 지도블록의 설정 ✏️ > 지도 설정 메뉴에 복사한 내용을 붙여넣고 적용 버튼을 클릭해 주세요. 참고사항 네이버 지도, 카카오 지도를 사용하기 위해서는 API 연동이 필요해요. 자세한 설정방법은 아래 메뉴얼을 참고해 주세요.
코드 블록
코드 블록이란? 소스 코드를 직접 입력할 수 있는 블록으로 HTML 과 CSS 를 활용해 원하는 블록을 생성할 수 있는 블록이에요. 기존에 정해진 디자인 블록 외에 사용자가 직접 코드를 삽입해 보다 자유롭게 디자인을 확장할 수 있어요. 사용 방법 코드 블록을 추가하고 소스코드 수정 버튼을 통해 소스 코드를 입력해 주세요. 참고사항 코드 블록에서는 HTML 과 CSS 만 삽입할 수 있어요. Java Script는 클릭엔 기본 기능 및 디자인과의 충돌이 발생할 수 있어 사용할 수 없어요. - HTML : 웹 페이지의 뼈대와 구조를 만드는 언어 - CSS : 구조 위에 디자인과 레이아웃 등의 스타일을 입히는 언어 AI 활용 TIP. 코드 블록은 AI 를 활용해 원하는 디자인 블록을 생성할 수 있어요. 추가 수정을 최소화하고 결과물의 품질을 높이기 위해 아래 내용을 참고하여 디자인 코드를 생성해 주세요. ✅ 구체적인 요청사항 전달하기 요청사항이 구체적일 수록 보다 정확하고 향상된 품질의 결