15개 이상의 우수한 WordPress 슬라이더 예제(쇼케이스)

WordPress 슬라이더에 대한 영감을 찾고 계십니까? 슬라이더를 사용하면 웹 사이트 소유자가 가장 중요한 콘텐츠를 매력적인 대화형 슬라이드쇼로 선보일 수 있으므로 사용자는 하이라이트를 보고 즉시 조치를 취할 수 있습니다. 그렇게 많은 사이트가 할 수 있는 모든 기능을 갖춘 슬라이더를 사용하는 것은 놀라운 일이 아닙니다!

• 콘텐츠를 효율적이고 스타일 있게 전달
• 작은 공간에 많은 정보를 담다
• 웹사이트에 상호작용 추가
• 방문자를 프로모션 및 중요 페이지로 안내

이 기사에서는 15개 이상의 우수한 WordPress 슬라이더 예제를 보여줍니다. 또한 웹사이트를 위한 멋진 슬라이더를 빠르게 만드는 방법도 보여줍니다.

슬라이더 영감 쇼케이스

다음은 영감을 주는 슬라이더의 가장 좋은 예입니다. 이 슬라이더를 선택하는 데 사용한 기준은 1) 창의성과 2) 사용성이었습니다. 일부 디자인에는 두 가지가 모두 있고 일부는 한 가지 측면만 있습니다.

CNBC 프라임

CNBC의 슬라이더는 읽기 쉽고 사용하기 쉽습니다. 그들은 쇼 제목에 두꺼운 글꼴을 사용하므로 읽기 쉽습니다. 텍스트를 색칠하면 배경에서도 눈에 띄게 됩니다.

CBS

CBS의 슬라이더는 읽기 쉽고 사용하기 쉽도록 큰 글꼴과 많은 공백이 있는 매력적인 이미지를 사용합니다. 큰 총알은 클릭할 때 어떤 일이 일어날지 매우 명확하게 합니다.

유니버설 올랜도

Universal의 슬라이더에는 한 가지 단순한 목적이 있습니다. CTA가 매력적인 제안을 하지만 사진이 모든 것을 말해줍니다.

사빌의 비둘기 코트

Saville's는 비둘기 코트의 품질과 장인 정신을 강조하는 사진과 함께 우아한 세리프 글꼴을 사용합니다. 그들은 또한 비둘기에 대한 광범위한 지식을 설명하므로 깃털 달린 친구를 위해 절대적으로 최고의 집을 구입하고 있다고 확신할 수 있습니다.

목련 베이커리

Magnolia Bakery는 이미지 전용 슬라이더의 좋은 예입니다. 맛있는 패스트리를 먹었을 때 누가 수다를 떠야 할까요? 이 세 개의 미니 슬라이더는 이 웹페이지에서 보기만 해도 맛있어 보입니다.

불타는 협곡

Flaming Gorge는 유타에서 인기 있는 명소입니다. 갤러리의 헤드라인이 모든 것을 말해줍니다. Flaming Gorge 리조트에서 거칠게 하지 않고도 광대한 전망을 즐길 수 있습니다.

헤드웨이 테마

Headway 테마는 슬라이더를 창의적으로 사용합니다. 일반적인 페이지 상단 슬라이더 대신 슬라이더를 더 아래쪽에 놓고 테마를 사용하는 웹 사이트를 표시하는 데 사용합니다. 영리한!

스미스소니언 프리어 새클러 갤러리

Smithsonian Freer Sackler는 간단한 탐색 슬라이더를 사용하여 웹사이트의 주요 페이지로 안내합니다. 슬라이더의 단순하고 깔끔한 외관은 이미지를 연상케 하는 공백으로 둘러싸여 있어 미술관에 적합합니다.

외로운 행성

Lonely Planet의 슬라이더는 회전하는 전체 화면 이미지와 눈길을 사로잡는 애니메이션으로 화려해집니다. 이 슬라이더는 보기에 화려할 뿐만 아니라 원하는 곳으로 쉽게 이동할 수 있습니다.

이스트베이

Converse의 슬라이더는 제품에 모든 초점을 맞춰야 합니다. 이 슬라이더의 세부 사항과 질감은 너무 명확하여 거의 손을 뻗어 천을 만질 수 있습니다.

쉬츠

Sheetz의 슬라이더는 밝고 재미있는 색상과 마우스를 가져가면 슬라이드되는 대화형 앞으로 버튼을 사용합니다. 이와 같은 슬라이더는 그냥 가지고 노는 것입니다.

엑스박스

Xbox의 슬라이더는 깔끔한 제품 이미지, 적은 수의 단어, 많은 공백으로 단순함을 추구합니다. 이것은 확실히 더 적은 것이 더 많은 경우입니다.

팀홀튼

Tim Hortons의 슬라이더는 직장에서 훌륭한 음식 사진의 전형적인 예입니다. 군침이 도는 혜택을 받고, 멋진 거래와 함께 하세요. BOOM! 저항하기 매우 어려운 슬라이더가 있습니다.

소니 크래클

Crackle 스틱은 회전하는 슬라이더에 주의를 끄는 단순한 흰색과 주황색 구성표입니다. 각 슬라이드의 작은 광고 문구는 튜브를 켜고 TV 프로그램을 보고 싶은 충동을 불러일으킵니다.

스미스소니언 인스티튜트

Smithsonian의 슬라이더는 크고 눈에 띄는 화살표를 사용하므로 놓친 이전 슬라이드로 돌아갈 수 있습니다. 이것은 각 슬라이드에서 읽을 텍스트가 상당히 많기 때문에 이 경우에 중요합니다.

지붕 창문

루브르 박물관의 슬라이더는 당신이 기대하는 바로 그 것입니다: 역사적이며 우아합니다. 이는 충분한 여백, 세리프 글꼴, 단순하지만 극적인 이미지의 검은색 페이드 덕분입니다. 이 슬라이더의 또 다른 장점은 오른쪽 하단 모서리에 있는 재생/일시 중지 버튼입니다.

나만의 WordPress 슬라이더를 만드는 방법

이제 " 이 슬라이더는 훌륭하지만 내 웹 사이트용 슬라이더를 어떻게 만들 수 있습니까?"

음, 고맙게도 WordPress용 Soliloquy 플러그인 덕분에 실제로 매우 간단합니다.

먼저 Soliloquy Slider 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress에 플러그인을 설치하는 방법에 대한 단계별 가이드를 참조하세요.

다음으로 첫 번째 슬라이더를 만들 차례입니다. 독백 » 새로 추가 로 이동하여 슬라이더를 추가합니다. 이미지를 업로드해야 하는 경우 컴퓨터에서 파일을 선택할 수 있습니다. 웹사이트에 이미 이미지를 업로드했다면 다른 소스에서 파일을 선택하십시오.

계속 아래로 스크롤합니다. 슬라이더에 대해 선택한 이미지가 표시됩니다. 여기에서 연필 아이콘을 클릭하여 이미지를 편집하거나 빨간색 X를 클릭하여 슬라이더에서 이미지를 제거할 수 있습니다.

왼쪽의 구성 탭을 선택하여 슬라이더에 대한 기타 세부 정보를 구성할 수도 있습니다. 이미지 크기, 슬라이더 테마, 슬라이드 전환 속도를 설정할 수 있습니다. 텍스트 캡션 위치도 여기에서 변경할 수 있습니다. 이 설정을 검토하십시오.

설정이 만족스러우면 모바일 탭을 살펴보십시오. 이렇게 하면 모바일 장치에서 웹사이트가 어떻게 보이는지 테스트하고 필요에 따라 모바일 해상도 설정을 조정할 수 있습니다.

(또한 슬라이더를 가져오거나 내보내려면 기타 탭을 참조하십시오.)

페이지 또는 게시물에 슬라이더 추가

슬라이더 만들기가 완료되었습니다! 이제 원하는 게시물이나 페이지에 추가할 차례입니다. 게시물 또는 페이지를 편집하고 슬라이더 추가 버튼을 클릭한 다음 슬라이더를 선택합니다. 변경 사항을 저장하려면 게시물/페이지를 게시하거나 업데이트해야 합니다.

이제 슬라이더가 웹사이트에 표시됩니다.

그게 다야! 이제 나만의 WordPress 슬라이더가 생겼습니다. 이 기사가 15개 이상의 우수한 WordPress 슬라이더 예제에 영감을 주고 첫 번째 슬라이더를 만드는 데 도움이 되었기를 바랍니다.

슬라이더를 디자인할 때 사용할 수 있는 모든 고급 기능을 확인하고 싶을 수도 있습니다. 슬라이더를 사용자 정의할 수 있는 가능성은 거의 무한하므로 지금 바로 Soliquy를 시작하십시오! 다음은 독백 슬라이더로 할 수 있는 작업의 몇 가지 예입니다.

• WordPress에서 전체 너비 이미지 슬라이더 만들기
• WordPress에서 슬라이더 시간 변경
• WordPress에서 반응형 비디오 슬라이더 만들기

이 기사가 마음에 들면 Facebook과 Twitter에서 우리를 팔로우하여 무료 WordPress 자습서를 더 많이 받으세요.