처리중 입니다
안녕하세요 엑스링크 입니다.
이번 시간에는 블록별 스타일 꾸미기를 준비 해봤습니다.
우선 저희 엑스링크는 블록을 먼저 추가하고 해당 블록내에 링크를 추가하는 방식입니다.
설명하기 쉽게 "상품링크" 블록으로 진행해보겠습니다.
우선 "프로필링크꾸미기" > "블록추가" > "상품링크"를 차례대로 클릭합니다.
위 이미지는 블록을 3개가 추가된 모습입니다.
그리고 각 블록을 클릭하여 "쿠팡상품검색" 또는 "상품 링크 추가" 를 통해 상품등 등록하시면 됩니다.
전 쿠팡상품검색을 눌러서 상품을 추가했습니다~~
1. 블록의 순서변경
블록의 순서를 변경할 블록관리 메뉴에서 이동을 원하는 블록을 마우스로 꾹 누르고 원하는 위치로 옮기면 됩니다.
모바일에서는 제목앞에 점6개 아이콘을 누른상태에서 위치를 이동하면 됩니다.
원하는 위치로 이동하셨다면 "순서저장"을 클릭하면 위치가 저장되면서 미리보기 화면도 변경되는 것을 볼수 있습니다.
2. 블록디자인 변경 - 제목 및 서브타이틀 설명입력
블록관리 메뉴를 클릭하고 블록리스트에서 디자인 버튼을 클릭하거나 해당 블록을 클릭하고 블록의 상품목록에서
상단 블록디자인 메뉴를 클릭합니다.
위 이미지는 블록디자인을 클릭했을때 표시되는 블록설정 화면 입니다.
상단에 메인 타이틀이 있고 (필수) 라고 되어 있습니다.
블록을 구분하기 위해 사용되는 제목으로 표시를 했다 숨겼다가 가능합니다.
(필수) 단어 옆에 껏다켯다 가능한 버튼이 있는데 눌러보면 제목이 미리보기화면에서 보였다 안보였다 하는걸
보실수 있습니다.
그리고 서브타이틀이나 내용은 입력되면 바로 표시가 됩니다.
위 이미지는 메인타이틀을 켜고 서브타이틀과 내용을 각각 입력해본 샘플입니다.
3. 블록디자인 변경 - 간격조정 과 표시 갯수
화면을 조금만 내려보시면 레이아웃 설정 이 보입니다.
블록 간격을 조정하여 블록과 블록사이의 간격을 조정할수 있습니다.
지금 미리보기 화면은 기본 간격 10px입니다.
간격을 마우스로 드래그 하여 블록과 블록간의 간격을 넓힐수 있습니다.
간격을 조정하면 미리보기 화면도 조정된 가격으로 바로 보실수 있습니다.
간격조정을 완료했다면 꼭 저장부턴을 눌러 변경된 사항을 저장해주셔야 실제 프로필사이트에 적용이 됩니다.
**PC : 블록간격 : PC용 레이아웃에 적용되는 설정입니다. **
이제 블록간격을 원하는 만큼 늘리거나 줄일수 있습니다.
간격 조정 바로 위에 있는 게시글 행 설정은 한줄에 몇개씩 보여줄 것인가를 설정하는 기능입니다.
모바일은 기본 1로 되어있습니다. 이걸 2나 3으로 변경해보겠습니다
각각 2 일때 와 3일때 표시되는것을 확인할수 있습니다.
한번씩 클릭해보시면 아~ 하고 금방 알수 있으실꺼예요~~
4. 블록디자인 변경 - 게시물 디자인 설정을 한번 진행해보겠습니다.
위와 같이 일반 리스트일때는 한줄에 2개만 보여도 글자가 잘 안보이는 것을 확인할수 있습니다.
그래서 한줄에 2개 이상 나열 하려면 디자인설정 > 형식 설정 항목을
이미지나 버튼으로 변경하시면 됩니다.
위 이미지는 각각 버튼 형식과 이미지 형식의 미리보기 화면 입니다.
상품링크는 이미지가 가장 잘 어울립니다.
이미지 형식을 누른후 아래 형식 레이아웃 설정에서 이미지 비율을 선택하시면되고
이미지가 표시되는 영역에 비율을 선택하셨드면 아래에 기타설정에 이미지를 비율만큼 꽉채울것인지 기본으로 둘것인지
선택하면 됩니다.
그리고 바로 아래에는 배경색 / 폰트색을 각각 블록별로 변경할 수 있습니다.
이렇게 하면 각 블록별로 다양한 형태로 프로필링크를 구성할수 있습니다~~
그리고 마지막으로 설정을 완료했는데 블록이 많아서 걱정이시면
제일 아래에 해당 설정을 전체블록에 적용에 체크하고 저장을 클릭하시면
전체 블록에 동일한 레이아웃이 저장됩니다~~