본문 바로가기
Frameworks/Wordpress

[워드프레스] Ascend테마 이미지 슬라이더 메인화면 꾸미기

by Nov19 2018. 12. 13.
반응형


[워드프레스] Ascend테마 이미지 슬라이더 메인화면 꾸미기


외모 > Theme Options 로 들어가 Home Page header 섹션으로 들어간다.

choose home page header settings를 Basic Slider로 설정한다.

Transparent header on home page?로 설정하면 헤더 

즉 메뉴부분과 겹치겠느냐는 질문이다. 디폴트 값은 False로 겹치지 않는다.

Basic slider Type에 여러가지 옵션이 있는데 그냥 이미지를 슬라이딩 시키기 위해

images in carousel을 선택했다.

그 밑에 Basic slider images가 나오면 슬라이딩 시킬 이미지를 추가하면 된다.



Upload 버튼으로 미디어 라이브러리에서 이미지를 하나 불러오고 

그 밑에 타이틀과 설명을 적는다. 

타이틀과 설명은 슬라이딩 되는 이미지 위에 표시할 수도 없앨 수도 있다.

밑에 slide link에 URL을 넣으면 이미지를 클릭했을 때 해당 URL로 이동할 수 있다.



다음과 같이 슬라이딩 할 이미지들을 추가 해주고

슬라이딩 될 이미지의 최대 높이값을 지정해 준다.

그 밑에 위에서 지정한 사진 각각의 타이틀이 보여지게 할것인지 안보이게 할것이 

스위치 형태의 버튼이 있다. 보여지게 하고 싶다면 On으로 두면 된다.



Auto play는 자동으로 슬라이딩 시킬 것인지 묻는 것이다.

slider Pause time은 이미지가 슬라이딩이 끝나고 다음 이미지가 슬라이딩 되기 전까지의

대기시간이다. 밀리초 단위로 1000이 1초가 된다.

slider transition time은 얼마나 이미지에서 다음이미지가 보이는 슬라이딩이 되는 시간이다.

아래와 같이 600이면 이미지가 슬라이딩되서 다음이미지가 나오는 시간이 0.6초이다.

숫자가 낮을수록 슬라이딩 속도나 대기시간이 짧아진다.



원래 이렇게 타이틀과 태그라인으로 되어 있던 메인 홈페이지 헤더 부분이



다음과 같이 바뀌고 자동으로 슬라이딩을 진행한다.

이미지 양쪽에 버튼이 있어 수동으로도 넘길 수 있다.




Show title설정 부분을 on으로 하면 아래와 같이 이미지의 타이틀이 출력된다.






반응형

댓글