makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

META SLIDER로 홈페이지 첫 화면에 이미지 슬라이더 만들기

META SLIDER 플러그인을 이용하여 첫 화면에 이미지 슬라이더를 배치해 보겠습니다.

BC TOWN™ 테마에서는 이미지 슬라이더를 웹브라우저의 가로폭에 꽉 차게 하거나 홈페이지 가로폭에 맞도록 배치할 수 있습니다.

 

 

1. META SLIDER에 이미지 등록하기

[워드프레스 관리자] > [Meta Slider]에 접속합니다.

 

아직 아무것도 설정하지 않아 비어있는 상태로 보여집니다.

’Create your firsr slideshow’라는 문구의 왼쪽의 [+] 버튼을 클릭하여 새로운 슬라이드를 생성합니다.

zpost_01img01

 

 

가로사이즈가 1920px인 이미지를 미리 만들어 두었습니다.

슬라이드의 이름을 이미지의 가로사이즈 1920px를 뜻하는 ’1920’으로 지정했습니다.

zpost_01img02

 

미리 준비해 놓은 세 개의 이미지를 등록합니다.

zpost_01img03

 

슬라이드에 쓰일 이미지 사이즈는 일반적으로 많이 쓰이는 24~27인치 모니터의 해상도 1920*1080px을 기준으로 웹브라우저를 전체화면으로 띄울 경우 슬라이드 이미지가 가로에 꽉 차게 보여지고 상하 길이가 어울리도록 배치하기 위해 1920*650px 사이즈의 이미지로 만들었습니다. 절대적인 사이즈가 아니기 때문에 여러분이 원하는 다른 사이즈로 이미지를 제작하셔도 무방합니다.

 

 

슬라이더가 제대로 출력되도록 다음 그림과 같이 슬라이드 설정을 하고 [저장] 합니다.

zpost_01img04

Settings

  • Width 이미지의 가로 크기
  • height 이미지의 세로 크기
  • Effect 슬라이드 이미지가 넘겨질 때 액션
  • Theme 슬라이더의 디자인
  • Arrows 이미지를 좌/우로 넘길 수 있는 버튼 출력 여부
  • Navigation 슬라이더 하단의 네비게이션 출력 여부

 

Advanced Setting

  • Stretch 슬라이더를 좌/우로 꽉차게 출력시킬지 여부
  • Center align 슬라이더를 가운데 정렬할지의 여부
  • Auto play 슬라이더가 자동으로 넘어가게 할지 여부
  • Image Crop 이미지 crop 방식 설정
  • Carousel mode 슬라이드가 회전하며 보여지게 한다는데 확인되지 않습니다.
  • Random 이미지 순서를 랜덤으로 출력
  • Hover Pause 슬라이드에 마우스 커서가 올려졌을때 슬라이드 액션멈춤
  • Reverse 이미지가 넘어가는 방향을 반대로 설정
  • Slide delay 이미지가 머무르는 시간 설정
  • Animation speed 이미지가 넘어가는 속도
  • Slide derection 이미지가 넘어가는 방향 설정 (가로/세로)
  • Easing 이미지가 넘어가는 효과 설정
  • Previous text / Next text 좌/우 버튼 글자 설정
  • CSS classes 스타일 지정
  • Print CSS Meta slide 기본 스타일로 출력
  • Print JS Meta slide 기본 JS로 출력

 

 

 

2. 홈페이지 가로폭에 맞추어 슬라이더 배치하기

[관리자] > [BCT Covers]에 접속하여 커버에 슬라이드를 배치하겠습니다.

 

’Containers’에서 1단 상자를 체크하고 [Add to cover]를 클릭하여 배치합니다.

zpost_01img05

 

 

1단 상자에 ’Shortcode Widet’을 끌어다 놓습니다.

슬라이드를 출력하기 위해 위의 1에서 설정한 Meta Slide의 숏코드를 적고 저장합니다.

zpost_01img06

 

 

 

홈페이지 첫 화면에 홈페이지 폭에 맞추어 슬라이더가 배치되었습니다.

zpost_01img07

 

 

 

3. 웹브라우저 가로폭에 꽉차게 슬라이더 배치하기

첫 화면에 슬라이드를 배치하지만 화면에 꽉차게 보이도록하기 위해 Cover Editor에 배치하지 않고, 위젯에 배치하도록 하겠습니다.

[관리자] > [외모] > [위젯] 설정에 접속합니다.

’Front Page Showcase’라는 상자가 보입니다. ’Front Page Showcase’는 BC TOWN™ 테마에서 첫 화면에 가로폭 제한없이 출력되도록 하기 위해 만들어진 기능입니다.

왼쪽의 위젯 목록에서 [Meta Slider] 위젯을 선택하여 ’Front Page showcase’에 배치합니다.

배치된 ’Meta Slider’ 위젯의 ’Select Slider’에서 만들어놓은 ’1920’이라는 슬라이더를 선택하고 저장합니다.

zpost_01img09

 

홈페이지 첫 화면에 좌우로 꽉 찬 슬라이더가 배치되었습니다.

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

zpost_01img10

 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함 1. Start with the system update sudo apt update...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
Ubuntu 20.04에 MySQL 5.7 설치
비씨티원 인공지능 서비스 플랫폼 BAP(Bctone AI service Platform)의 설치 환경은 공식적으로 Ubuntu 18.04와 MySQL 버전 5.7 입니다. 최근 Ubuntu...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다. 1. apt update 사용자...