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일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
자동화설비 구조 및 데이터PC 역할
자동화설비에 사용되는 하드웨어는 다음과같습니다.PLC : PLC는 자동화 설비의 제어를 담당하는 핵심 장치로, 프로그래밍을 통해 다양한 장비와 프로세스를 제어할 수 있습니다....
자동화설비 데이터PC 환경 설정
파이썬 3.11.0환경변수 설정파이참 커뮤니티 에디션 다운로드프로젝트 필수 라이브러리 다운로드QT5 환경 변수 추가PostgreSQL...
BCT AI Chatbot 정식 버전 출시에 앞서
워드프레스 기반의 인공지능 대화형 AI챗봇 개발을 진행하면서 여러 시행착오를 해 왔는데, 다양한 피드백을 거쳐 현재 정리된 (BCT AI Chatbot 정식 버전 출시에 앞서) 해결해야...