슬라이드 이미지

슬러✅ 1. Smart Slider 3 기준: 슬라이드 이미지 만들기

📌 1단계. 설치 및 활성화

관리자 → 플러그인 > 새로 추가
검색: Smart Slider 3
[설치] 후 [활성화]

📌 2단계. 새 슬라이더 만들기

좌측 메뉴 → Smart Slider 클릭
[New Project] 클릭 → Create a New Project → 이름 입력 (Main Banner 등)
슬라이드 수 설정 → [Create]

📌 3단계. 슬라이드 추가 및 구성

각 슬라이드에 이미지, 텍스트, 버튼, 링크 추가 가능
순서 변경 및 애니메이션 효과 설정도 가능

이미지 업로드 후 마우스 커서 올리면 EDIT 개별 슬라이더 커스텀 가능

버튼 / 글씨 문단 이동을 드래그로 희망하실 경우 버튼/텍스트 클릭 -> STYLE -> POSITION -> Absolute 변경

✅ 대표 구성 예:

[슬라이드1] 이미지 + 텍스트 "신규 플랜 오픈!" + 버튼 "확인하기"
[슬라이드2] 이미지 + 텍스트 "서비스 연장 20% 할인!" + 버튼 "지금 보기"

📌 4단계. 슬라이더를 페이지에 삽입

슬라이더 저장 후, 프로젝트메인에서 숏코드(Shortcode) 복사
```
[smartslider3 slider="2"]
```
페이지 편집 → 본문에 붙여넣기
저장/발행

1열 생성 -> 단축코드 블록 선택 -> 복사한 숏코드 입력 -> 저장

✅ 결과 예시

메인 페이지에 슬라이드 배너가 자동으로 넘겨지는 구조로 표시됨 텍스트와 버튼, 링크도 각 이미지마다 설정 가능 반응형 자동 지원

📌 마무리 팁

기능

설명

자동 넘김 시간 설정

3초 / 5초 / 수동 등 가능

화살표, 점(dot) 표시

디자인에서 켜고 끌 수 있음

링크 연결

각 슬라이드마다 URL 지정 가능

모바일 대응

반응형 자동 적용됨

2. 스마트 슬라이드 세부 기능

슬라이드 자동 전환

스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Autoplay -> 활성화

슬라이드 크기 조정

스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Size -> Slider Size 조정

슬라이드 썸네일 추가

스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Thumbnails 활성화

슬라이드 화면 전환 버튼 추가

스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Arrow 활성화

※ 샘플 슬라이드 제작 방법

예시) 슬라이드 속 하단에 썸네일을 추가한 슬라이드 제작 예시 입니다.

스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Thumbnails

Position - Bottome Center
Align Thumbnails - Center

※ Bar -> STYLE 버튼 클릭 - Background Color FFFFFF00 (썸네일 공간 배경 투명 지정) - Opacity - 100% - Padding - 3px

※ Thumbnail -> STYLE 버튼 클릭 - Background Color - 00000000 - Opacity - 40% - Padding - 10px

저장 후 확인

Previous버튼 생성 Next문의하기 생성

Last updated 1 day ago