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