> For the complete documentation index, see [llms.txt](https://s-organization-887.gitbook.io/hostyle-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://s-organization-887.gitbook.io/hostyle-web/wordpress-2/undefined-2.md).

# 슬라이드 이미지

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

### 📌 1단계. 설치 및 활성화

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

<figure><img src="/files/aXX1P8TlCNKMYCnvSYME" alt=""><figcaption></figcaption></figure>

***

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

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

<figure><img src="/files/nH7pmCWMQ4mTYR2p3NNO" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/Mvyl1qLtjVjNVexWAT4H" alt="" width="375"><figcaption></figcaption></figure>

***

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

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

<figure><img src="/files/S85aW6Szu6DmbR7VDdOv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

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

<figure><img src="/files/xU89tSK8yrU8J8YdeJX4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/X2NMICJjO9RV1O3X0ar3" alt="" width="307"><figcaption></figcaption></figure>

#### ✅ 대표 구성 예:

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

<figure><img src="/files/DPPfxAY5pYqQJUAD95hu" alt=""><figcaption></figcaption></figure>

***

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

1. 슬라이더 저장 후, 프로젝트메인에서 **숏코드(Shortcode) 복사**

   ```
   [smartslider3 slider="2"]
   ```
2. 페이지 편집 → 본문에 붙여넣기
3. 저장/발행

<figure><img src="/files/MCQt4gApfdDSEMudLLaC" alt=""><figcaption><p>Shortcode 복사</p></figcaption></figure>

<figure><img src="/files/uDgKN3XPAhReq1bnlbAl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

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

***

### ✅ 결과 예시

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

<figure><img src="/files/oLQyckD2MCv3aEdjC9Nn" alt=""><figcaption></figcaption></figure>

***

### 📌 마무리 팁

| 기능             | 설명                 |
| -------------- | ------------------ |
| 자동 넘김 시간 설정    | 3초 / 5초 / 수동 등 가능  |
| 화살표, 점(dot) 표시 | 디자인에서 켜고 끌 수 있음    |
| 링크 연결          | 각 슬라이드마다 URL 지정 가능 |
| 모바일 대응         | 반응형 자동 적용됨         |

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

<details>

<summary>슬라이드 자동  전환</summary>

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

<figure><img src="/files/8uru0tWs1brseM2OHUmF" alt=""><figcaption><p>전환 시간 및 세부 옵션 설정</p></figcaption></figure>

</details>

<details>

<summary> 슬라이드 크기 조정</summary>

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

<figure><img src="/files/hDIy57tayOdVky3aIAbA" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary> 슬라이드 썸네일 추가</summary>

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

<figure><img src="/files/kHBiD2P4fRcmjWI8DFME" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary> 슬라이드 화면 전환 버튼 추가</summary>

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

<figure><img src="/files/qS9urOtj619tCjNEa21G" alt=""><figcaption></figcaption></figure>

</details>

### ※ 샘플 슬라이드 제작 방법

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

<figure><img src="/files/hmq318vYcyNOgE5G45VT" alt=""><figcaption></figcaption></figure>

1. 스마트슬라이더3 -> 프로젝트 설정 -> 화면중간 Controls -> Thumbnails&#x20;

* Position - Bottome Center&#x20;
* Align Thumbnails - Center

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

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

2. 저장 후 확인