웹사이트에 전후 슬라이더를 추가하는 가장 쉬운 방법

전후 이미지는 매우 광범위한 산업 분야에서 마케팅 목적으로 광범위하게 사용됩니다 . 특정 프로세스가 미치는 영향을 그 프로세스 전후에 누군가 또는 사물이 어떻게 생겼는지 정확하게 보여주는 이미지보다 더 잘 설명할 수 있는 단어는 없습니다. 효과가 가시적인 제품을 중심으로 하지 않는 기업에서도 이 기능을 유머러스하게 활용하는 것은 가능하다.

식당을 운영하고 있다고 가정해 보겠습니다. 궁전에서 식사를 하기 전의 모습과 당신의 별미를 맛본 후 기뻐하는 모습을 보여줄 수 있습니다. 제품/서비스의 이점과 이점을 설명하는 측면에서 슬라이더 제안 전후의 가능성은 무한 합니다. 그것은 모두 당신의 상상에 달려 있습니다.

귀하의 페이지 에 시차 효과를 추가하는 것처럼 귀하의 웹사이트를 현대적으로 보이게 하는 것처럼, 전후 슬라이더는 이미지가 1000개 이상의 단어를 말할 수 있기 때문에 잊기 어렵게 만듭니다.

또한 이 기능을 웹사이트에 완전히 무료로 추가할 수 있습니다. 이 기사에서는 인기 있는 Elementor용 무료 플러그인 Qi Addons를 사용하여 전후 슬라이더를 만드는 방법을 보여줍니다.

다음에 대해 자세히 알아보십시오.

• Elementor용 Qi 애드온으로 전후 슬라이더 추가
• 고급 옵션 탐색

Elementor용 Qi 애드온으로 전후 슬라이더 추가

Elementor용 Qi Addons는 웹사이트 에 다양한 멋진 요소를 손쉽게 추가할 수 있는 직관적인 무료 도구입니다 . 매우 실용적이고 사용하기 쉬운 인터페이스 와 함께 제공되며 초보자와 고급 사용자 모두 사용하기 쉽습니다. Qi의 특히 훌륭한 점은 많은 유용한 기능 외에도 현대적인 우아함을 제공한다는 사실입니다.

Elementor용 QI 애드온을 설치하는 과정은 다른 플러그인 설치와 다르지 않습니다. 그것에 대해 질문이 있는 경우 위에 제공된 링크를 확인하고 댓글 섹션에 글을 쓸 수도 있습니다.

이것은 Elementor 플러그인이므로 새 게시물을 작성할 때 Elementor 편집기로 전환 해야 합니다. 모든 Qi Addons 위젯은 왼쪽 요소 메뉴에 깔끔하게 표시됩니다 . 메뉴를 아래로 스크롤하여 찾기만 하면 됩니다.

이전 및 이후 슬라이더 위젯은 동일한 프레임에 두 개의 이미지를 표시하는 간단하고 효과적인 방법을 제공합니다 . 검색 필드에 위젯 이름을 입력하거나 메뉴에서 위젯을 탐색하여 왼쪽의 사이드바 메뉴에서 찾을 수 있습니다.

Before/After 비교 슬라이더를 추가하려면 Elementor 요소를 원하는 위치에 끌어다 놓습니다. 위젯이 추가되면 모든 설정이 왼쪽에 있고 콘텐츠 및 스타일 탭에는 슬라이더와 관련된 모든 옵션이 있습니다 .

이제 슬라이더에 전후 이미지를 추가 해야 합니다. 먼저 이전 이미지를 추가합니다. 이미지 필드 위로 마우스를 가져가면 이미지 선택 옵션이 표시되거나 필드 중간에 있는 작은 더하기 아이콘을 클릭합니다.

미디어 라이브러리에서 이미지를 선택하거나 필요한 경우 미디어 라이브러리에 이미지를 업로드할 수 있습니다 . 선택한 그림과 미디어 라이브러리에 아직 없는 경우 끌어다 놓기만 하면 선택한 다음 선택합니다.

원하는 이미지를 삽입 한 후 슬라이더 중앙의 원에 표시될 텍스트를 변경하여 전/후 슬라이더를 계속 사용자 정의 할 수 있습니다. 여기에 지침을 작성하거나 더 눈에 띄는 메시지를 작성할 수 있습니다. 이는 귀하와 귀하의 웹사이트 스타일에 달려 있습니다. 텍스트를 세로로 정렬할지 가로로 정렬할지 선택할 수도 있습니다.

슬라이더에서 전후 이미지 사이의 경계선이 나타나는 위치를 조정하려면 필드에 원하는 오프셋 값을 입력할 수 있습니다 . 기본값은 50%이며 이는 기본 테두리가 이미지 중앙에 있음을 의미합니다. 오프셋을 조정하면 슬라이더가 다음과 같이 보일 수 있습니다.

이제 전후 슬라이더를 더 미세 조정할 때입니다. 슬라이더가 원하는 대로 보이도록 사용자 정의할 수 있는 다른 항목을 살펴보겠습니다. 스타일 탭을 클릭하여 더 많은 옵션을 탐색 합니다.

그림 중앙에서 원형 핸들을 이동하려면 슬라이더를 사용 하여 핸들 상단 오프셋 값을 조정하십시오 . 실시간 변경 사항을 즉시 확인할 수 있으므로 가장 적합한 것이 무엇인지 쉽게 결정할 수 있습니다. 당신은 또한 같은 방식으로 원의 크기를 조정할 것이고, 사진의 전/후 버전 사이의 경계를 조정할 것입니다.

또한 Nabdle 텍스트 색상을 클릭하여 원 안에 있는 텍스트의 색상 음영을 만들고 같은 방식으로 텍스트 글꼴을 선택할 수도 있습니다. 마지막으로 같은 방식으로 원 색상을 사용자 지정할 수도 있습니다.

고급 옵션 탐색

고급 탭에는 슬라이더를 더 매력적이고 눈에 띄게 만드는 더 많은 옵션이 있습니다. 이러한 옵션은 이 위젯에만 해당되는 것이 아니라 페이지에서 다른 위젯을 편집하는 데 사용할 수 있는 기본 Elementor 옵션입니다.

가장 흥미로운 몇 가지를 설명하겠습니다. 실시간으로 변경한 모든 사항을 볼 수 있으므로 모든 옵션을 자유롭게 테스트해 보십시오. 그러면 각 옵션이 슬라이더에 어떤 역할을 하는지, 효과가 있는지 즉시 알 수 있습니다.

고급 메뉴를 열면 여백 및 패딩 설정 옵션 이 표시됩니다. 랩톱, 태블릿 또는 모바일과 같은 다양한 장치에서 여백 및 패딩에 대해 다른 값을 설정할 수 있는 각 옵션 옆에 작은 랩톱 아이콘이 표시됩니다.

모션 효과는 특히 흥미롭고 35개 이상의 모션 효과 중에서 선택할 수 있습니다. 다른 장치에 표시할 다른 애니메이션을 설정할 수도 있습니다. 애니메이션 유형을 선택한 후 필요한 경우 지속 시간과 지연을 조정할 수도 있습니다.

이제 변형 탭을 클릭하여 사용할 수 있는 더 많은 효과를 찾아보십시오 . 회전에서 기울이기, 수평 및 수직 뒤집기에 이르기까지 슬라이더 표시를 변경하기 위해 수행할 수 있는 작업이 많이 있습니다.

테두리 탭에는 선택한 색상에 그림자 그림 테두리를 추가하여 측면을 장식할 수 있는 옵션이 있습니다 . 슬라이드 상자 주위에 그림자 효과를 추가하도록 선택하고 그림자 효과 출력을 설정할 수도 있습니다.

마스크 탭의 옵션은 매우 편리합니다. 슬라이더가 원, 꽃, 스케치, 삼각형, 얼룩, 육각형과 같은 다양한 모양으로 표시되도록 여기에서 설정 하거나 사용자 정의 모양을 추가할 수도 있습니다. 선택한 모양의 크기와 위치를 조정할 수도 있습니다.

Responsive 탭 은 선택한 장치에 표시되지 않도록 슬라이더를 선택할 수 있으므로 특히 주의하십시오.

이것은 필요에 따라 슬라이더를 조정한 후 페이지에 표시되는 슬라이더의 모습입니다.

결론적으로

보시다시피 페이지에 전후 슬라이더를 추가하는 것은 로켓 과학이 아닙니다. 이제 상상력을 발휘하여 작업, 제품 또는 서비스가 생성할 수 있는 효과에 대한 인상적인 시각적 표현을 만들 수 있습니다. 질문, 의견 또는 모든 종류의 문의 사항이 있는 경우 언제든지 저희에게 연락하십시오.

이 기사가 도움이 되었기를 바랍니다. 마음에 드셨다면 이 기사도 확인해보세요!

• 연락처 양식을 사용자 정의하는 방법 7 쉬운 방법으로 스타일 지정
• WordPress에서 텍스트를 강조 표시하는 방법 쉬운 방법
• Elementor Process 위젯을 사용하여 단계 흐름을 만드는 방법