동영상 썸네일 이미지 배경과 섹션 배경색을 똑같은 색으로 지정해, 다음 그림과 같이 동영상이 섹션 배경과 일체화된 디자인으로 꾸밀 수 있습니다.
본 튜토리얼을 진행하려면 동영상 썸네일 이미지가 필요합니다. 이미지 제작 시 주의해야 할 점은 다음과 같습니다.
원활한 튜토리얼 진행을 위해 아래 샘플 이미지(350KB, ZIP파일)를 내려받아 사용하실 수 있습니
참고: 본 샘플 이미지의 저작권은 (주)아임웹에 있습니다.
새로운 메뉴를 추가합니다. 기존 메뉴가 있는 경우 해당 메뉴로 이동합니다.
배경 위에 동영상 위젯을 추가하고, 동영상을 연결합니다.
동영상 설정 창이 나오면 이미지 업로드 버튼을 클릭해, 내 PC에서 동영상 썸네일 이미지를 올려줍니다.
동영상 주소 항목에 유튜브 또는 비메오 동영상 URL(주소)를 입력합니다.
재생설정 항목에서 라이트 박스 옵션을 선택합니다.
옵션 항목에서 제목 감추기, 플레이어 컨트롤 감추기 옵션을 각각 선택합니다.
동영상 위젯이 삽입된 섹션의 배경색을, 동영상 위젯 썸네일 이미지의 배경색과 같은 색상으로 지정하는 과정입니다.
동영상 위젯이 올라간 섹션에 마우스 포인터를 올립니다.
참고: 동영상 위젯에 마우스 포인터를 올리면 안 됩니다. 위젯이 없는 곳에 마우스 포인터를 올려주세요.
마우스 오른쪽 버튼을 클릭하면 나타나는 컨텍스트 메뉴에서 섹션 설정 을 클릭합니다.
배경 항목의 배경색 옵션에 동영상 썸네일 이미지에 사용된 배경색과 같은 색상 값을 입력합니다.
섹션 그리드란 쉽게 말해 위젯과 위젯 사이의 간격을 의미합니다. 만약 아래와 같이 이미지 일부가 잘린 동영상 썸네일 이미지를 사용하는 경우 섹션 그리드를 제거하면, 여백 없이 섹션에 딱 붙여 배치할 수 있습니다.
간격 항목에서 기본 그리드 간격을 선택 해제합니다.
동영상 썸네일 이미지 위, 아래로 여백이 제거 되었는지 확인합니다.