워드프레스 추천슬라이더 사용 완벽가이드 – Depicter Slider

Depicter 슬라이더란?

Depicter 슬라이더는 상대적으로 최근에 만들어진 슬라이더 입니다. 2022년 중반에 처음 출시가 되었고 지속적인 업데이트를 거쳐서 현재까지 높은 평점을 유지하고 있습니다. 무료버전에 대한 사용자 후기도 4.8 점으로 아주 높은 편에 속합니다. 지속적인 업데이트를 계속하고 있어서 슬라이더 자체도 신뢰할 수 있을 만한 플러그인으로 확인이 됩니다. 무엇보다 이천십사년부터 슬라이더를 지속적으로 만들어오던 업체입니다. 많은 사용자들에게 익숙한 마스터슬라이더 라는 플러그인을 같은 개발업체에서 배포를 했고요 슬라이더 제작 전문기업이다 보니 저도 믿고 설치를 했습니다.

본격적으로 슬라이더를 보면서 이용 가이드를 안내해 드리도록 하겠습니다.

슬라이더 공식 홈페이지

슬라이더 다운로드

워드프레스 플러그인 설치가이드

슬라이더 가이드

플러그인이 설치되어 있다면 왼쪽 관리자 메뉴에서 Depicter 슬라이더 메뉴를 확인할 수 있습니다. 플러그인 초기화면에서는 플러그인 생성을 비롯하여 기존에 생성되어 있는 슬라이더를 확인할 수 있습니다.

초기화면에서는 다음과 같은 기능을 수행할 수가 있습니다.

1. 새로운 슬라이더 생성 : 기능별 슬라이더를 신규로 생성할 수 있습니다. 일반슬라이더, 포스트슬러이더, 팝업, 알림, 히어로섹션 등 원하는 목적에 맞게 생성하면 되겠습니다.
2. Depicter 계정이 있다면 연동할 수 있으며 기본적인 슬라이더 이용가이드 및 오류보고를 진행할 수 있습니다.
3. 슬라이더 관리 : x 만들어진 슬라이더를 관리할 수 있습니다 슬라이더에 삭제, 복제, 내보내기, 이름 바꾸기 등 기존의 슬라이드 관리에 필요한 메뉴가 표시됩니다.
4. 슬라이더 임포트 : 다른 곳에서 생산된 슬라이더를 인포트 메뉴를 통해서 가지고 올 수 있습니다.

슬라이더의 첫 화면은 구성이 잘 되어 있어서 신규 슬라이더 생성 기존 슬라이더 관리 와 같은 작업들을 편하게 진행할 수 있습니다. 신규 슬라이드 생산부터 진행을 하도록 하겠습니다.

슬라이더 만들기

Depicter 슬라이더는 워드프레스의 필수적인 기능에 대한 슬라이딩 기능을 함께 제공하고 있습니다. 포스트글 에 대한 슬라이더 그리고 일반 이미지 슬라이더 유튜브 슬라이더 우커머스 슬라이더까지 워드프레스를 활용하여 만들 수 있는 슬라이더는 대부분 제공하고 있습니다.

템플릿을 이용하여 만들기

다양한 템플릿을 쉽게 추가할 수 있습니다. 다음과 같은 순서에 따라서 진행을 하면 되겠습니다.

1. 템플릿에서 슬러이더 분류를 선택합니다.
2. 제공되는 분류별 템플릿 중에서 마음에 드는 템플릿에 대해 “미리보기”와 함께 Import버튼을 이용해 데모페이지와 동일한 슬라이더를 추가합니다.
3. 전체보기 메뉴를 통해서 페이지 해당분류의 슬라이더를 모두 확인합니다.

빈 슬라이더로 만들기

템플릿을 이용하지 않고 빈 페이지에서 슬라이더를 작업하고 싶다면 다음에 방식으로 진행을 하시면 되겠습니다.

Create Blank Slider 버튼을 이용해 빈 슬라이더를 추가합니다.

1. 슬라이더에 이름을 입력합니다.
2. 슬라이더에 너비와 높이를 설정합니다. 너비와 높이외 레이아웃을 설정 할 수도 있습니다. 일반적으로 사용되는 슬라이더 외 전체화면, 박스형 등 전체 3가지 형태를 선택 할 수 있습니다.
3. Create Slider 버튼을 눌러 슬라이더를 생성합니다.

이곳에서 설정한 옵션들은 추후 슬라이더 옵션에서 값을 변경해 줄 수 있습니다. 따라서 슬라이드 레이아웃과 같은 잘 이해되지 않는 부분들은 우선 슬라이더를 생성하시고 향후에 변경을 진행하시면 되겠습니다.

슬라이더 화면구성

전체구성

슬라이더는 다음과 같은 화면 구성으로 되어 있습니다.

1. 슬라이더 / 옵션
   1. 슬라이더 : 생성된 슬라이더에 대한 각 페이지별 옵션을 제공합니다.
   2. 옵션 : 슬라이더 전체에 적용되는 옵션을 설정합니다.
2. Publish / Preview
   1. Publish : 만들어진 슬라이더를 저장하고 발행하게 됩니다. 이 버튼을 통해서 쇼트코드를 확인할 수 있습니다.
   2. Preview : 슬라이더에 미리 보기를 할 수 있습니다.
3. 요소메뉴 : 슬라이더에 추가할 수 있는 다양한 요소들을 표시합니다. 이미지, 텍스트, 동영상, 버튼 등과 같이 슬라이더에 표시될 수 있는 다양한 요소들이 분류가 되어서 버튼 형식으로 표시됩니다.
4. 요소메뉴 상세탭 : 각 요소 메뉴에서 제공되는 상세한 탭입니다. 이미지의 경우 무료로 제공되는 이미지, 내가 업로드하는 이미지, 업로드된 이미지 등과 같이 탭으로 구분이 되어서 제공이 됩니다.
5. 요소 상세 파일 : 상세탭에서 선택된 내용들을 표시합니다. 이미지의 경우 무료 이미지를 선택하면 무료 이미지가 표시가 되고 나의 이미지를 선택하면 내가 업로드한 이미지들이 표시됩니다. 실제로 파일이나 자료들이 표시되는 영역입니다.
6. 반응형 버튼 : 슬라이더를 모바일 디바이스의 종류별로 화면 확인을 할 수 있습니다.
7. 실제 슬라이더가 표시되는 영역이며 이 화면과 동일하게 페이지에서 표시되게 됩니다.
8. 요소 속성 탭 : 슬라이더 영역에 여섯들이 삽입이 되었을 때 해당 요소를 설정할 수 있는 속성값들이 표시됩니다. 예를 들어 텍스트가 삽입이 되었다면 텍스트의 색상, 크기, 굵기 등과 같은 정보들을 이곳에서 설정해 줄 수 있습니다.
9. 스타일 영역 : 속성탭에서 선택된 값들이 이곳에 표시됩니다.
10. 슬라이더페이지 : 현재 표시되는 슬라이더에 번호를 나타내며 슬라이더를 추가하거나 기존의 슬라이더를 삭제할 수 있습니다.

슬라이더 요소

사진

갤러리의 이미지를 삽입하는 경우 다음의 단계로 진행하시면 되겠습니다. 이미지는 플러그인 내에서 무료 이미지를 제공하고 있습니다.

1. 식탁 퍼터 쓰기능을 이용하면 라이선스 무료 이미지가 제공이 되고 간단한 검색을 통해서 이미지를 삽입할 수가 있겠습니다. 이미지를 선택하게 되면 자동으로 슬라이드 영역의 이미지가 추가가 됩니다.
2. 이미 업로드가 된 이미지를 이용하기 원하는 경우는 마이 포토스 탭을 선택하면 됩니다. 사용자가 직접 업로드한 이미지가 이곳에 표시되며 선택하게 되면 이미지가 슬라이드 영역으로 추가되게 됩니다.
3. 새로운 이미지를 업로드할 경우에는 업로드 버튼을 클릭합니다. 미디어 라이브러리에 추가할 수 있는 세창이 뜨게 되며 이 창을 통해서 신규 이미지를 추가하면 되겠습니다.

각 요소별 설정화면

1. 이미지 요소 설정탭입니다. 이미지를 선택하여 삽입하거나 신규 이미지를 업로드하는 경우는 이 탭에서 설정을 진행해 주시면 되겠습니다. 무료로 제공되는 많은 이미지들이 있으니 검색 기능을 통해서 원하는 이미지를 찾아서 삽입할 수도 있겠습니다.
2. 텍스트 요소를 삽입합니다. 제목 텍스트나 내용 텍스트를 삽입할 수 있고 디자인이 추가된 텍스트 박스를 선택하여 슬라이더에 표시할 수도 있습니다.
3. 비디오 요소를 삽입합니다. 유튜브와 비메어에서 제공되는 동영상을 이곳 탭을 이용해서 슬라이드에 삽입할 수 있습니다. 추가로 무료로 제공되는 동영상들도 이곳을 통해서 삽입할 수 있는데 셔터 비디오스라고 하는 탭을 이용해서 원하는 동영상을 검색하여 삽입할 수도 있겠습니다.
4. 다양한 도형들을 설정할 수 있습니다 . 동그라미 네모 별표 같은 다양한 모양들을 슬라이더에 삽입하고 색상을 지정하거나 그림자를 줘서 디자인적인 요소로 꾸며볼 수 있겠습니다.
5. 버튼을 추가할 수 있습니다 기본적으로 제공되는 여섯 가지 스타일의 버튼을 확인할 수 있으며 원하는 스타일의 버튼을 클릭하여 슬라이더에 추가할 수가 있겠습니다.
6. 슬라이드에 제공되는 내비게이션 스타일을 정할 수 있습니다. 다음 슬라이드의 이동이나 이전 슬라이더로의 이동은 이 내비게이션 버튼을 통해서 진행할 수가 있겠습니다. 화살표의 스타일이나 크기 그리고 점선의 모양 같은 세부 디자인까지 이곳을 통해서 선택할 수가 있겠습니다.

각 요소별 속성

슬라이더에 추가된 각각의 요소에 대한 속성을 지정할 수 있습니다.

1. 요소의 위치, 정렬, 투명도 와 같은 기본적인 속성들을 지정할 수가 있겠습니다.
2. 요소에 이름 링크와 같은 옵션들을 지정할 수가 있겠습니다.
3. 마우스로 호버 했을 때 스타일을 변경해 줄 수 있습니다. 크기 배경색상 애니메이션과 같은 세부적인 설정들을 진행할 수 있겠습니다.
4. 사용자의 액션에 따른 추가적인 설정을 진행해줄 수 있습니다.

요소 별 세부메뉴

슬라이드에 추가된 요소를 마우스로 오른쪽 클릭해 보시면 다음과 같은 메뉴를 확인할 수 있습니다. 해당 여서를 복사를 하거나 붙여넣기를 할 수도 있고 삭제를 하거나 기본적인 편집을 진행할 수 있습니다. 이미지의 경우 해당 이미지를 배경 이미지로 지정해줄 수도 있습니다.

세부메뉴는 요소의 종류에 따라서 달라집니다.

슬라이더 옵션

슬라이더에 이름이나 네비게이션 슬라이더 전환 효과와 같은 다양한 옵션들을 이곳에서 설정할 수 있습니다.

1. 옵션탭은 다양한 설정을 정해줄 수 있습니다.
2. General : 테마에 일반 설정입니다. 테마에 이름과 너비, 높이, 반응 및 반응형 기계의 숨김 여부를 선택할 수 있습니다. 모바일이나 태블릿에서 슬라이드를 숨기고 싶은 경우에는 이곳 설정 탭에서 세팅을 진행해 주시면 되겠습니다. 태블릿의 높이 너비 그리고 모바일에서의 높이와 너비도 설정을 해줄 수가 있습니다.
3. Navigation : 네비게이션 탭은 슬라이더 에 이동 내비게이션 버튼들을 설정할 수 있습니다. 워터슬라이드쇼 기능을 이용해서 일정 간격으로 자동으로 넘어가게 할 수도 있습니다. 슬라이드 아래쪽에 표시되는 좌우 내비게이션 버튼의 표시 여부도 선택할 수 있습니다. 키보드를 이용한 슬라이더 변경 혹은 마지막 슬라이더에서 첫 슬라이더로 자동으로 이동되는 기능 등 슬라이더가 이동되는 설정들을 이곳 탭에서 지정해 줄 수가 있습니다.
4. Slide Transition : 슬라이더와 슬라이더 사이에 어떤 방식으로 전환을 할지에 대한 설정을 하게 됩니다. 전환 효과 그리고 방향 간격 등을 설정해줄 수 있습니다.
5. Loading options : 슬라이더가 화면에 표시될 때 로딩 효과를 줄 수가 있습니다. 이미지나 동영상과 같이 읽어 들이는 데 시간이 소요되는 요소들은 로딩 효과를 통해서 어느 정도 보완을 할 수가 있습니다.
6. Advanced : CSS 설정을 해줄 수 있습니다.
7. Callbacks : DOM 이벤트별로 스크립트를 추가할 수 있습니다.

저장/미리보기/쇼트코드

슬라이드 설정이 완료되었다면 퍼블리시 버튼을 통해서 저장을 해줄 수가 있습니다. 슬라이더에 변경된 내용이 있다면 해당 버튼이 자동으로 활성화됩니다.

1. 저장버튼
2. 지금 저장하기
3. 쇼트코드
4. 미리보기

슬라이더 삭제/복사/내보내기/가져오기

슬라이더에 삭제나 복사 가져오기나 내보내기 같은 경우 슬라이더 첫 화면에서 관리하게 됩니다.

1. 슬라이더 메뉴
   1. 슬라이더 삭제
   2. 슬라이더 복제
   3. 슬라이더 내보내기 : 다른 홈페이지에서 슬라이더를 사용할 때 내보내기와 가족이 기능을 이용하게 됩니다. 선택한 슬라이더를 내보내기 기능을 이용해서 파일 형태로 컴퓨터에 저장할 수 있습니다.
   4. 이름바꾸기
2. 가져오기 : 다른 홈페이지에서 사용되는 슬라이더를 가져오기 기능을 이용해서 활용할 수 있습니다. 가져오기 버튼을 누르고 슬라이더 파일을 선택하게 되면 해당 슬라이더를 가져오게 됩니다.

슬라이더 활용

이번 글을 통해서 슬라이더에 활용방법을 상세하게 확인해 보았습니다. 워드프레스의 적절한 슬라이더를 찾고 있는 사용자라면 Depicter 슬라이더를 고려해 보시기 바랍니다. 가장 모던하고 최신 슬라이더 프로그램입니다. 사용자 UI와 SEO측면에서 좋은 모습을 보여주고 있기 때문에 최근 많은 사용자들이 애용하고 있습니다.

홈페이지에 슬라이더를 추가하고자 할 때 아래 글을 읽어보시면 도움이 됩니다.

워드프레스 슬라이더 추천가이드

슬라이더에 함께 사용할 만한 이미지나 비디오는 다음의 링크를 확인해보시기 바랍니다.

라이선스 걱정없는 무료이미지/동영상