BC TOWN™ 커버에디터로 첫 화면에 이미지 베너 배치하기

BC TOWN™의 커버에디터를 이용해 홈페이지 첫 화면에 이미지배너를 삽입하고 링크를 걸도록 하겠습니다.

 

1. 베너 이미지 준비

make BCT 데모사이트의 테마 BCT0009의 첫 화면에 가로로 세개의 이미지베너를 삽입하겠습니다.

BCT0009 테마의 가로 3단으로 나누어진 상자의 가로 크기는 339px입니다. 하지만 반응형을 감안하면 모바일 화면에서 보여지는 가로크기는 550px정도가 됩니다.

339*100px 사이즈의 베너를 만들려고 했으나, 모바일에서도 잘 보이도록 하기위해 같은 비율의 큰 이미지 500*148px의 이미지로 만들었습니다.

zpost_05img01

 

 

2. 커버에디터에 이미지 삽입하기

[관리자] > [BCT Covers]에서 현재 만들어져 있는 커버세트의 편집 화면에 접속합니다.

‘Containers’에서 ‘3단’ 상자를 삽입합니다.

zpost_05img02

 

만들어진 ‘3단 상자’에 [이미지] 위젯을 드레그하여 끌어다 놓습니다.

‘이미지’ 위젯의 [이미지를 선택하세요]를 클릭하면 ‘미디어 라이브러리’가 열립니다.

zpost_05img03

 

새로운 이미지를 업로드하거나 기존에 업로드 해 놓은 이미지를 세팅할 수 있습니다.

zpost_05img04

 

이미지 베너의 링크를 거는 등의 옵션을 설정하고 저장합니다. (옵션은 그대로 두어도 됩니다.)

다른 두 개의 이미지도 같은 방법으로 세팅하고 저장합니다.

zpost_05img05

 

 

홈페이지에 나가보면 가로로 세 개의 베너 이미지가 배치된 걸 확인할 수 있습니다.

데모사이트 : http://makebct.cafe24.com

zpost_05img06

 

Leave a Reply

Your email address will not be published. Required fields are marked *

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함1. Start with the system updatesudo apt update...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
WSL2/Ubuntu 22.04 LTS에서 Jupyter notebook 실행하기
WSL2 Ubuntu에서 Jupyter notebook(Jupyter Lab) 설치는 다음과 같습니다.$ pip install jupyter $ pip install jupyterlab단,...
카카오톡 섬네일 이미지와 문구 수정 방법
워드프레스 웹사이트 구축 후 도메인 연결하고 지인에게 카카오톡으로 링크 보낼 때 다음과 같이 섬네일 이미지와 문구가 원하지 않아 이를 수정하고 싶은 경우가 있습니다.수정...