Revolution Sliders 가이드

모션슬라이더란? 메인 및 서브페이지에 움직임이 있는 이미지영역을 말합니다.

revolution slider는 메인 슬라이드 영역에 문구 및 이미지가 동적인 효과를 연출하면서 중간중간에 삽입되어있습니다. 홈페이지가 더욱 생동감을 주어 표현됩니다. 슬라이드를 사용할때에 가장 중요한것이 기업을 대표하는 이미지와 홍보문구가 중요합니다. 이미지를 넣을때는 저작권에 문제가 없는 이미지로 사용하여야 합니다.

  • “Create new slider”를 클릭하여 새 레볼루션슬라이더를 생성합니다.

실제로 적용하기 이전에 960*434 사이즈의 이미지 3~4장과 대표 이미지에 해당 하는 문구들을 준비해야 합니다.

  • Slider title부분에 메인 타이틀을 지정합니다.
  • Slider title 부분도 메인타이틀과 동일하게 입력합니다.
  • Slider layout”은 어떤식으로 슬라이드가 보여질지 나타납니다. “Custom”을 선택하면 홈페이지를 이용하는 장치의 디스플레이의 해상도와 크기에 따라서 이미지의 크기가 변경이 됩니다.
  • Gride Setting 값은 메인 이미지의 값으로써 원하는 이미지의 가로*세로 값을 지정합니다. 기본적으로 나타나는 값은 데모사이트에서 제공하는 이미지 사이트입니다.
  • General Settings에서 Delay는 이미지 슬라이드의 전체시간을 조정하는 부분이므로 일반적으로 3500~5000으로 지정합니다.
  • 이미지 슬라이드 하단 부분에 그림자 효과를 줄 수 있습니다. Appearance를 클릭하여 Shadow type에서 원하는 그림자 형태를 설정하여주고, 하단의 Create slider버튼을 클릭하여 저장합니다.
  • 메인슬라이드에 이미지 슬라이드를 생성하여 배경이미지 텍스트를 넣기 위해 파랑색버튼인 “Edit Slides”를 클릭합니다.
  • “New Slide”를 클릭하면 이미지를 선택하는 새로운 창이 뜹니다.
  • 새로 삽입할 이미지를 선택시에 “파일을 선택하세요”버튼을 클릭하여 PC에 있는 이미지를 불러들이는데 먼저 지정했던 가로*세로 사이즈의 맞는 이미지를 불러옵니다.선택된 이미지는 insert키를 이용하여 삽입합니다.
  • 만든 슬라이드는 첫번째 탭에 있습니다.슬라이드를 추가 할 시에는 옆에 “Add Slide”를 클릭합니다.
  • 두번째로 슬라이드의 제목을 입력햐줍니다.
  • “Add Layer”버튼을 클릭하면 텍스트를 삽입 할 수 있습니다.
  • “Text/Html”로 이동하여 이미지 위에 나타낼 텍스트를 입력합니다.이미지에 텍스트가 나타나고 왼쪽부분에 동그라미를 움직이면 위치를 설정 할 수 있습니다.
  • “style”은 원하는 텍스트의 스타일을 선택 할 수 있습니다.
  • 설정이 끝난 후에는 “Layer Animation”버튼을 클릭합니다.
  • “Layer Animation” 옵셥 창에서 시간과 애니메이션을 설정해서 시각적 효과가 잘 나타낼 수 있도록 합니다. 드롭버튼을 누르면 더 많은 “Animation”들이 있습니다.
  • “speed”는 텍스트가 나타나는 시간입니다.
  • 마지막으로 첫번째 레이어가 나타나는 타이밍을 설정합니다. Layer의 시작 타이밍을 지정하고 똑같은 방법으로 텍스트들을 순차적으로 만듭니다.