워드프레스 레이어 슬라이드 모바일에서만 보이게 하는 방법

[공통] 반응형 슬라이드 - 메인상단 이미지 슬라이드 교체방법

카페24쇼핑몰스킨 - 반응형 슬라이드 수정 매뉴얼

​

슬라이드 교체방법은 하바나스가 제작한 모든 스킨의 공통요소로

아래의 매뉴얼 중에 안내된 이미지와 텍스트가 다소 다를수 있습니다.

이미지/텍스트와 링크변경 방식은 모두 대동 소이하오니 공통적으로 참고바랍니다.

​

​

​

​

비쥬얼 슬라이드는 메인페이지 최상단에 위치한 이미지 슬라이드를 말합니다.

PC웹 메인 슬라이드 규격 - 원본 PSD 다운로드

PC웹의 슬라이드 이미지 크기는 가로 2000px 세로1000px 입니다.

첨부파일

2000x1000-slide-sample.psd

파일 다운로드

​

모바일웹 스킨 메인 슬라이드 규격 - 원본 PSD 다운로드

(모바일 쇼핑몰 스킨 디자인을 사용하실때 적용하세요. )

HBS 모바일 스킨 (1028 X 650px)

HBC모바일 스킨용 ( 600 X 680px)

​

​

​

파일위치 : 스킨마다 위치와 html파일명이 다를수 있으니 참고하세요.

<!-- ■ Slider : 상단 슬라이더 영역

============================================= -->

<!--@import(/main/main_01/top_slider.html)-->

​

파일위치 : HBS 스킨의 경우

<!-- ■ 탑 슬라이더 블럭

=========================================== -->

<!--@import(/HBC/html/top_slider.html)-->

​

​

​

그럼 위의 슬라이드 이미지와 텍스트를 변경하는 방법을 알아보겠습니다.

상당히 간단하지만 잘 모르시는 분들도 있을수 있으니 카페24 쇼핑몰솔루션의 첫 입문자를 대상으로 설명하겠습니다.

​

​

1. 카페24 쇼핑몰 관리자로 로그인하기

모든 소스코드 수정은 관리자화면에 접속하셔야 합니다.

아래의 주소로 접속하시면 카페24쇼핑몰 관리자로 로그인 됩니다.

https://eclogin.cafe24.com/Shop/

​

2. 관리자 화면에 접속하셔서 상단 디자인관리 메뉴를 클릭합니다.

디자인관리를 통해 나온 화면에서 수정하시고자 하는 쇼핑몰(한국어/중국어/영어/일본어)의 디자인 수정 버튼을 클릭합니다.

​

3. 디자인수정버튼을 클릭하여 아래와 같은 스마트 디자인 편집창을 오픈합니다.

스마트디자인 편집창의 일반적인 모습 / 구매하신 스킨과 이미지가 다를수 있습니다.

위와 같은 스마트디자인 편집창에서 디자인을 수정/변경하실 수 있습니다.

화면 맨아래에 화면분할 아이콘이 있습니다. HTML이라는 버튼을 클릭하시면 위의 이미지와 같이 html소스코드만 보실 수 있습니다.

​

4. 위와 같이 스마트 디자인 편집창까지 오픈하여 준비하시면 소스교체를 위한 준비가 완료됩니다.^^

​

슬라이드블럭의 위치 찾기

​

블럭식 메인 화면 구성요소

메인화면을 보시면 아래와 같이 섹션별로 바로 갈수 있도록 블럭식으로 구성되어있습니다.

소스코드 블럭의 위치를 위/아래로 변경하시면 레이아웃 구성을 마음대로 변경하실 수 있습니다.

더 자세한 내용은 아래 매뉴얼을 참고하세요.

<div id="wrapper" class="clearfix"> <!-- ■ Header 헤더영역 : 로고/상단메뉴 =========================================== --> <!--@import(/main/main_01/header.html)--> <!-- ■ Slider : 상단 슬라이더 영역 ============================================= --> <!--@import(/main/main_01/top_slider.html)--> <section id="content"> ~~~ 중략 ~~~ </section><!-- #content end --> <!-- ■ Footer : 푸터스타일 ============================================= --> <!--@import(/main/main_01/footer.html)--> </div><!-- #wrapper end -->

위의 소스코드와 같은 구조에서( 스킨마다, 구매시점 마다 위의 구조는 조금씩 다를수 있으니 참고만 하세요)

<!-- ■ Slider : 상단 슬라이더 영역

============================================= -->

해당 블럭에 마우스 오버하시면 [파일열기] 텍스트 버튼이 노출되고 이를 클릭하시면 해당 상세소스코드로 바로 이동됩니다.

​

​

소스코드가 순차적으로 나열되어 있어서 쇼핑몰의 메인페이지 디자인과 비교해서 보시면 직관적으로 이 코드블럭이 어느부분인지 쉽게 이해가 되실것입니다. 처음보시는 분들은 복잡해보일수 있으나 조금만 익숙해지시면 편리함을 느끼실 수 있습니다.

​

​

​

슬라이드 소스코드블럭의 예)

​

위의 소스코드중에 아래의 소스코드 블럭이 메인 상단 비쥬얼 이미지슬라이드를 관리하는 소스코드입니다.

<!-- ■ Slider : 상단 슬라이더 영역

============================================= -->

<!--@import(/main/main_01/top_slider.html)--> [파일열기]

​

​

구매하신 스킨에 따라 해당 소스코드의 html명과 파일의 위치는 다를수 있으나 모두 같은 내용입니다.

[파일열기] 텍스트 버튼을 클릭하여 이미지슬라이드를 변경해보겠습니다.

​

​

​

​

​

​

​

​

(아래의 소스코드는 샘플예제입니다. 구매하신 스킨마다, 구매시점마다 소스코드가 변경될 수 있으니 소스코드가 똑같지 않아도 같은 유형이니 참고하세요)

<!-- ■■■ 1번째 슬라이더 이미지 교체 : 바로 아래 url() 괄호안에 이미지 경로를 변경해주세요 ■■■--> <div class="swiper-slide dark" style="background-image:url('/web/upload/hb/slide/5.jpg');background-size:cover;"> <div class="container clearfix"> <div class="slider-caption slider-caption-center"> <!-- 슬라이드 타이틀 : 필요없으면 삭제하세요 --> <div class="h4 mb-2 text-white d-none d-md-block">반응형 레이아웃</div> <h2 class="bottommargin-sm text-white">화면사이즈에 자동반응형</h2> <!-- 슬라이드 버튼 : 새창을 원치않으면 target="blank"을 삭제하세요 --> <a href="https://goo.gl/gaC8LY" target="blank" class="button button-3d button-rounded button-red">화면사이즈별 레이아웃확인</a> </div> </div> </div>

슬라이드 이미지를 제작하신후에 ftp에 접속하여 이미지를 웹서버에 업로드하세요!

​

위와 같은 소스코드에서 개별 슬라이더 상단소스코드의 이미지 주소 경로만 변경해주시면 첫번째 슬라이드 이미지가 교체됩니다.

여기서, 작성된 이미지 경로와 ftp에 업로드한 이미지경로가 같아야 보여집니다.

style="background-image:url('/web/upload/hb/slide/5.jpg');

​

FTP가 뭔지 모르시는 고객분들이 있을수 있을텐데요..(쇼핑몰운영시 반드시 알아야할 개념입니다.)

카페24쇼핑몰 FTP 이용하기는 아래를 참고하세요!

http://ecsupport.cafe24.com/web/upload/manual/ec/ftp/ftp1010001.html

​

​

​

​

​

​

​

​

​

★[필독] 반응형 슬라이드 이미지 제작방법★

반응형 슬라이드의 이미지는 모바일 뷰사이즈를 기준으로 작업하셔야 합니다.

PC를 기준으로 작업하시면 화면사이즈가 줄어들면서 좌우측에 이미지가 잘려보이는 현상이 발생합니다.

​

​

"PC에서는 제대로 보이는데 모바일에서 슬라이드 이미지가 잘려보입니다." 이런 질문을 종종 하십니다.

이는 반응형 슬라이드의 특징입니다.

반응형 슬라이드의 기본적인 이해와 디자인방법에 대한 이해가 있으면 제작이 보다 편리합니다.

​

​

반응형 슬라이드는 화면사이즈가 줄어들면서 화면의 중심을 기준으로 이미지의 사이즈가 줄어들기 때문에

보통, 삭제되도 무방한 배경이미지와 삭제되면 안되는 핵심이미지를 구분하여 디자인해야 합니다.

최종적으로 주요 핵심 이미지가 PC와 모바일화면에서 모두 보여지려면 모바일화면사이즈를 기준으로 디자인되어야 합니다.

모바일 화면사이즈는 가장 보편적인 560px이내로 설정하고 있기 때문에 핵심이미지가 이 범위안에 위치해야 합니다.

더 작은 모바일 화면까지 대응하시려면 360PX이내의 범위에내 핵심이미지가 위치하는 것이 좋습니다.

나머지 이미지는 삭제되도 무방한 순위로 이미지 요소를 지정해서 작업하시는것이 반응형 슬라이드 이미지의 일반적인 제작방법입니다.

​

화면의 사이즈가 점점줄어들면서 아래의 이미지와 같이 반응형 슬라이드에서는 보여지는 뷰라인이 줄어들게 됩니다.

따라서, PC와 모바일에서 모두 보여지려면 핵심이미지는 모바일 뷰라인에 맞춰서 디자인하셔야 합니다.

​

​

첨부해드린 psd파일을 참고하셔서 이미지의 배치와 배너디자인의 레이아웃을 반응형레이아웃에 부합하도록 제작하셔야 합니다.

첨부파일

slide-guide-슬라이드가이드.psd

파일 다운로드

​

​

슬라이드에 텍스트를 html로 분리하여 사용하지 않고

슬라이드 이미지에 텍스트를 포함하여 제작하실 때 주의점

슬라이드에 표현할 텍스트는 html로 분리하여 작성하셔야 합니다.

이유는 S.E.O(검색엔진최적화)를 위해서이며, 모바일 디바이스와 같이 작은 화면에서도 가독성에서도 뛰어나기 때문에 대부분 텍스트정보를 분리하여 제작할 것을 권고하고 있습니다.

그러나, 텍스트를 이미지화 해야할 경우에는 텍스트를 가운데 오도록 배치해야합니다.

외곽에 텍스트를 배치할 경우에 화면사이즈가 모바일 디바이스의 화면비율에 따라 줄어들수록 외곽은 잘려보이는 현상이 발생하기 때문에

텍스트가 중앙에서 벗어나면 잘려보이는 현상이 발생합니다.

​

​

​

​

​

​

<!-- 슬라이드 타이틀 : 필요없으면 삭제하세요 --> <div class="h4 mb-2 text-white d-none d-md-block">반응형 레이아웃</div> <h2 class="bottommargin-sm text-white">화면사이즈에 자동반응형</h2>

위와 같이 샘플텍스트가 있는곳에 원하는 텍스트로 변경해주시면 됩니다.

*반응형 슬라이드는 텍스트 영역을 별도로 관리/운영 해나갈때 중요텍스트가 잘려나가지 않게 됩니다.

필요없으면 해당 소스코드 줄을 모두 삭제해주세요!

​

쉽게 변경이 가능하실것입니다.

이 영역에 원하시는 글자를 변경하신 후 저장버튼을 클릭하여 변경된 페이지를 변경하신 후에 쇼핑몰 사용자페이지에서 변경된 텍스트를 확인해보세요!

​

​

반응형 슬라이드를 이미지로만 운영할때 주의할 점:

슬라이드 이미지로만 운영하게 될경우에는 반응형 화면 사이즈 비율에 따라 외곽이 잘려나가기 때문에 중요 문구나 중요 이미지는 슬라이드의 가운데 배치하셔야 합니다. 만약 잘려나갔을 경우에는 사용자 화면에서 잘려나간 정도를 확인하시면서 위치나 크기를 임의로 수정해나가셔야 합니다.

​

​

텍스트 색상 변경하기

하바나스 스킨에는 부트스트랩 프레임워크가 장착된 스킨으로 이미 준비된 텍스트 색상 클래스가 있습니다.

아래의 클래스를 스킨에 적용해보세요.

<!-- 아래 클래스는 부트스트랩 예시 클래스입니다. --> <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p>

​

예를 들어 소스코드에서 반응형 레이아웃이라는 텍스트를 빨간색으로 변경하려면 .text-danger 클래스만 추가하시면 됩니다.

<h4 class="text-danger">반응형 레이아웃</h4>

[ TIP ] html안에 class로 추가할때는 .쩜을 빼고 text-danger만 추가하셔야 합니다.

<Style> .text-danger { color:red; } </style>로 css를 정의할때는 .쩜을 추가해야합니다.

클래스로 정의했을때에도 변경이 안되는 경우는 상위 캐스캐이드가 적용이 된 상태이기 때문입니다.

즉, 직접 html에 스타일링이 되어있는 경우,!important; 선언자가 있을경우, 자바 스크립트처리가 된 경우에는 클래스만으로 적용이 안되므로 원천적인 소스를 변경해야 합니다.

​

​

​

​

​

​

​

<a href="#" target="blank" class="button button-3d button-rounded button-red"><i class="icon-off"></i>클릭하세요</a>

위의 소스영역이 버튼을 관리 하는 영역입니다.

"클릭하세요" 로 되어있는 부분의텍스트를 원하시는 버튼단어로 교체하시면 됩니다.

href="" 따옴표 사이에는 버튼을 클릭했을때 이동될 url주소를 넣어주세요.

새창으로 이동되길 원할때는 target="blank"를 추가해줍니다. 같은창에서 이동할때에는 삭제해주세요.

​

텍스트 앞에 있는 <i class="icon-off"></i> 는 폰트어썸 아이콘을 사용하실수 있는 소스코드입니다.

다른 아이콘으로 변경하시고 싶으시면 해당사이트에서 원하시는 아이콘 클래스로 변경만 해주시면 바꾸실 수 있습니다.

​

https://fontawesome.com/icons?d=gallery

​

​

​

이 버튼을 클릭했을때 원하는 페이지로 링크하고자 하실때에는 href="/habanas/gallery2_lightbox.html" 이영역을 교체하시면 됩니다. 외부로 링크를 변경하고 하실경우에는 아래와 같이 변경하시면 됩니다.

예) href="http://www.naver.com" target="_blank"

target="_blank"를 추가해주시면 새창으로 열리게 됩니다.

​

​

만약 불필요한 텍스트와 버튼 영역이 있으시면 해당 영역의 소스코드를 삭제해주셔도 좋습니다.

텍스트를 추가하고 싶으시면 해당 영역을 복사하여 한줄 추가하셔서 교체하시면 됩니다.

​

​

​

​

​

​

​

D. 동영상 슬라이드 교체하기

<!-- ■■■ 2번째 동영상 슬라이더 : 아래에 사용된 유튜브 동영상 아이디를 사용하고자 하는 유튜브 아이디로 변경해주세요! 아래에 사용된 샘플동영상의 아이디는 vr0qNXmkUJ8 입니다. ■■■--> <div id="slider-youbube" class="swiper-slide"> <div class="container clearfix" style="position:absolute;max-width:100%;"> <div class="slider-caption slider-caption-center"> <!-- 슬라이드 타이틀 : 필요없으면 삭제하세요 --> <div class="h5 mb-2 text-white d-none d-md-block">유튜브 동영상 링크만으로 슬라이드를 만들수 있습니다</div> <h2 class="bottommargin-sm text-white">유튜브동영상 탑재가능</h2> <!-- 슬라이드 버튼 : 새창을 원치않으면 target="blank"을 삭제하세요 --> <a href="https://tv.naver.com/cafe24" target="blank" class="button button-3d button-rounded button-white"><i class="icon-off"></i> 강좌식 매뉴얼보기</a> </div> </div> <div class="slide_video_container"> <!-- ■ 유튜브 경로 변경 / 유튜브 매개변수의 활용 매뉴얼 : https://blog.naver.com/design4u74/221351787348 ■ --> <iframe src="https://www.youtube.com/embed/vr0qNXmkUJ8?rel=0&autoplay=1&mute=1&loop=1&playlist=vr0qNXmkUJ8" width="1280" height="720" frameborder="0" allow="autoplay; encrypted-media" class="slide_video"></iframe> </div> <div class="video-overlay" style="background:rgba(0,0,0,0.25);"></div> </div>

위의 샘플코드는 HBC2 스킨의 동영상 샘플코드입니다.

<iframe src="https://www.youtube.com/embed/vr0qNXmkUJ8?rel=0&autoplay=1&mute=1&loop=1&playlist=vr0qNXmkUJ8" width="1280" height="720" frameborder="0" allow="autoplay; encrypted-media" class="slide_video"></iframe>

​

본인의 유튜브 계정에 동영상을 올리시고 업로드된 동영상의 아이디값을 찾아 위의 형식에 맞게 변경하신후에 교체하시면 됩니다.

보다 자세한 내용은 별도의 매뉴얼로 제공되고 있으니 아래의 링크를 참고하세요.

https://blog.naver.com/design4u74/221351787348

[백업필수!] 직접수정을 하다가 오류가 발생하는 경우에 원본으로 복구요청시 비용이 청구됩니다. 반드시 백업을 해두고 작업하시기 바랍니다.[백업방법]

​

감사합니다.

​

​

​

​

​

​

​

​

쇼핑몰을 운영하시려면 카페24솔루션을 선택하세요.

아직 카페24쇼핑몰 스킨을 구매하지 않으셨나요?

15년차 웹디자이너 하바나스와 함께 성공 쇼핑몰을 만들어 보세요.

카페24디자인센터 바로가기