엔폴드 테마 아코디언 슬라이더 커스텀

워드프레스 엔폴드 테마에는 Avia Layout Builder라는 자체 페이지 빌더가 사용됩니다. 다른 페이지 빌더와 마찬가지로 다양한 요소 (엘리먼트)가 제공되므로 편리하게 페이지 작업이 가능합니다. 이 레이아웃 빌더에는 Easy Slider, 풀스크린 슬라이더, 아코디언 슬라이더 등 몇 가지 슬라이더 요소가 포함되어 있습니다. 엔폴드 테마의 아코디언 슬라이더에서 이미지 캡션 제목과 함께 캡션 텍스트를 추가하는 경우 부자연스럽게 캡션 문구가 표시될 수 있습니다. 그런 경우 CSS를 통해 조정할 수 있습니다.

엔폴드 테마 아코디언 슬라이더

Enfold 테마에서는 이지 슬라이더를 비롯한 몇 가지 슬라이더 요소가 제공됩니다.

다음 비메오 영상에서 Accordion Slider를 사용하는 기본적인 방법을 확인해볼 수 있습니다.

엔폴드 테마 아코디언 슬라이더 - 이미지 캡션 텍스트 사용 시 커스텀

이미지 항목에 캡션 제목과 함께 캡션 텍스트를 추가하는 경우 다소 부자연스럽게 슬라이드가 작동할 수 있습니다.

이미지 캡션 타이틀 바로 아래에 캡션 텍스트가 표시됩니다. 이것을 다음 그림과 같이 캡션 타이틀과 캡션 텍스트를 분리시키면 더 보기 좋을 수 있습니다.

다음과 같은 CSS 코드를 추가하면 위와 비슷한 레이아웃으로 아코디언 슬라이더가 작동하게 됩니다.

/* 엔폴드 테마 아코디언 슬라이더 캡션 텍스트 위치 조정하기 */
/* Move caption text to the right in Enfold's Accordion Slider */
#top .aviaccordion-title {
    font-size: 35px !important;
    font-weight: 600 !important;
}

#top .aviaccordion-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#top .aviaccordion-excerpt p {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
	margin-left: 270px;
    min-width: 300px;
    background-color: #36a8c7c7;
    line-height: 1.8em;
    font-size: 1.1em;
    padding: 10px;
}

#top .aviaccordion:hover .aviaccordion-excerpt p {
	visibility: visible;
	  opacity: 1;
  transition: opacity 2s linear;
      position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
	margin-left: 270px;
    min-width: 300px;
    background-color: #36a8c7c7;
    line-height: 1.8em;
    font-size: 1.1em;
    padding: 10px;
}

위의 CSS를 참고하여 텍스트 크기, 텍스트 상자 크기 및 위치와 색상 등을 마음에 들도록 조정할 수 있을 것입니다. 위의 코드를 적용하기 전과 적용하기 후의 작동을 다음 영상에서 확인할 수 있습니다.