워드프레스 엘리멘터 슬라이드 위젯 (+버튼 두 개 표시)

워드프레스 정보를 제공하는 블로그 Avada 2022. 9. 8. 00:12 • 댓글:

워드프레스에는 무료 및 유료 슬라이더 플러그인이 있습니다. 무료 플러그인으로는 Smart Slider 3, MetaSlider 등이 많이 사용되고 있습니다. 유료 플러그인으로는 유명한 Slider Revolution이 있습니다. 엘리멘터 페이지 빌더의 경우 Elementor Pro에서 Slides 위젯을 제공합니다. 엘리멘터 페이지 빌더의 슬라이드 위젯을 사용하여 외부 플러그인을 설치하지 않고 슬라이더를 만들 수 있습니다.

워드프레스 엘리멘터 슬라이드 위젯

엘리멘터 페이지 빌더에서 슬라이드를 만들려는 경우 참고해보세요.

1. 먼저 섹션을 만들고 섹션 편집에서 내용 너비전체 너비(Full-width)로 지정하도록 합니다.

워드프레스 엘리멘터 슬라이드 위젯 - 섹션 추가

2. 엘리멘츠에서 Slide로 검색하여 Slides 위젯을 원하는 섹션으로 드래그합니다.

워드프레스 엘리멘터 슬라이드 위젯 드래그하기

3. 그러면 슬라이드가 추가됩니다. 이제 슬라이드 제목과 설명, 버튼 문구 및 링크를 지정하고 배경 이미지를 설정할 수 있습니다.

워드프레스 엘리멘터 슬라이드 위젯

Background 탭에서 배경색을 지정하거나 배경 이미지를 지정할 수 있습니다.

배경 이미지를 지정하면 오른쪽의 편집 화면에 선택한 배경 이미지가 표시됩니다.

워드프레스 엘리멘터 슬라이드 위젯

Content 탭에서 슬라이드 제목과 내용, 버튼 문구 및 버튼 링크를 지정할 수 있습니다.

추가적인 콘텐츠를 추가하고 싶거나 버튼을 여러 개 표시하고 싶은 경우 아래의 "슬라이드에 추가적인 콘텐츠 입력하기" 부분을 참고하시기 바랍니다.

4. 슬라이드 옵션에서는 내비게이션 유형, 자동 재생 등의 옵션을 지정할 수 있습니다.

내비게이션은 기본적으로 화살표와 점이 표시됩니다. Navigation 옆의 드롭다운을 클릭하여 Arrows and Dots, Arrows, Dots, None 중에서 선택할 수 있습니다.

Transition (전환) 옵션에 대하여 SlideFade를 선택할 수 있습니다.

기본적으로 Slide가 선택되어 있습니다. 일반적인 슬라이드인 경우 Slide를 그대로 두면 됩니다. Fade를 선택하면 슬라이드가 좌우로 이동하지 않고 슬라이드가 어두워졌다가 밝아지면서 다음 슬라이드가 표시됩니다.

5. 스타일 탭의 Slides 섹션에서는 슬라이드 콘텐츠 너비, 안쪽 여백, 수평 위치(가로 위치), 수직 위치(세로 위치), 텍스트 정렬, 텍스트 그림자 등의 스타일을 지정할 수 있습니다.

Title, Description, Button 등의 섹션에서 슬라이드 제목, 설명, 버튼의 스타일을 세부적으로 지정할 수 있습니다.

슬라이드에 추가적인 콘텐츠 입력하기 (예: 버튼 두 개 표시)

슬라이드에는 기본적으로 슬라이드 제목과 설명, 그리고 버튼 1개가 표시됩니다. 만약 버튼을 2개 혹은 3개를 표시하고 싶거나, 혹은 콘텐츠 부분을 다르게 만들고 싶은 경우에는 테마 빌더(Theme Buidler)에서 템플릿을 만들어서 숏코드로 콘텐츠에 입력할 수 있습니다.

기본적으로 "엘리멘터 템플릿을 원하는 곳에 추가하는 방법 (예: 탭에 토글/아코디언 표시)"에서 설명하는 방법으로 템플릿을 만들어서 숏코드를 입력하면 됩니다.

워드프레스 알림판 » 템플릿 » 저장된 템플릿에서 템플릿의 숏코드(Shorcode)를 복사하도록 합니다.

마치며

이상으로 엘리멘터에서 제공하는 슬라이드 위젯에 대해 살펴보았습니다. Elementor Pro에서 제공하는 테마 빌더를 사용하여 템플릿을 만들어 활용하면 슬라이드 콘텐츠를 원하는 대로 변경할 수 있습니다.

엘리멘터 프로를 사용하는 경우 슬라이더 레볼루션과 같은 외부 플러그인을 사용하지 말고 대신 엘리멘터에 탑재된 슬라이드 기능을 이용해 보시기 바랍니다. 특히 레볼루션 슬라이더 플러그인은 사이트 속도에 부정적인 영향을 미칠 수 있습니다.

참고

https://avada.tistory.com/2736

 

워드프레스 Divi 테마용 주얼리 디자이너, 홈 리모델링, 호스텔 레이아웃 팩 무료 다운로드

인기 워드프레스 Divi 테마로 유명한 Elegant Themes에서는 매주 무료 레이아웃 팩을 추가하고 있습니다. 최근에는 주얼리 디자이너, 홈 리모델링, 호스텔, 가족 소품, 부동산 중개인, 스트리머, 쇼콜

avada.tistory.com

https://avada.tistory.com/2739

 

엘리멘터에서 페이지를 템플릿으로 저장하는 방법

워드프레스 엘리멘터 페이지 빌더에서는 페이지를 템플릿으로 저장하여 활용할 수 있습니다. 또한, 섹션도 템플릿으로 저장하는 것이 가능합니다. 엘리멘터에서 페이지를 템플릿으로 저장하

avada.tistory.com

https://avada.tistory.com/2727

 

워드프레스 Astra, OceanWP, GeneratePress 테마 헤딩 스타일 예시

워드프레스에서 기본 에디터인 블록 에디터(구텐베르크)를 사용하여 글을 작성할 때 소제목(헤딩)을 활용하면 독자들이 읽기에 편하기 때문에 SEO에도 유리하게 작용할 수 있습니다. 헤딩 태그

avada.tistory.com