디앤
가이드

빠른 메뉴

페이지 섹션 배경에 유튜브(YouTube) 또는 비메오(Vimeo) 동영상을 추가할 수 있습니다.

섹션 배경은 요소가 아닌 배경으로 처리되어, 사용자가 원하는 크기 및 비율로 정확하게 표시하기 어렵습니다. 동영상은 특정 요소(제품, 글자 등)를 중심으로 하는 영상은 피하고, 배경으로 사용할 영상을 사용하실 것을 권장합니다.

동영상 추가방법

  1. 디자인 모드에 접속합니다. 
  2. 위젯이 없는 섹션 배경에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 보조 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 사진  아이콘에 마우스 포인터를 올립니다.
  5. 동영상을 클릭합니다.

  6. YouTube 또는 Vimeo 동영상 링크(URL)를 입력하고 확인을 클릭합니다.

  7. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  9. 작동여부를 확인합니다.
  10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.


주의사항

유튜브에 동영상 등록 시 공개설정을 일부 공개( 또는 미등록)로 설정해 주세요. 비공개로 설정하신 경우 동영상이 재생되지 않습니다. 일부 공개로 선택하신 경우 유튜브에서 검색되지 않으며, 동영상 링크가 있는 사람만 볼 수 있습니다.

남들이 퍼갈 수 없고, 특정 사이트에서만 재생되도록 하려면 Vimeo를 사용하실 것을 추천합니다.

페이지 섹션 배경에 색상, 이미지, 동영상을 추가할 수 있습니다. 이 도움말에서는 이미지를 추가하는 방법에 관해 설명합니다.

섹션 배경 이미지는 구조 상 요소(텍스트, 버튼, 이미지)가 아닌 배경으로 처리됩니다. 섹션 배경 이미지는 브라우저 크기에 따라 자동으로 늘어나거나 줄어들며, 이에 따라 일부가 잘려 보일 수 있습니다.

추가방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 위젯이 없는 섹션 배경에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 보조 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 사진  아이콘에 마우스 포인터를 올립니다.
  5. 이미지 찾기 또는 무료 이미지를 클릭합니다.

    • 이미지 찾기: 내 PC에서 직접 이미지를 업로드합니다. 적절한 이미지 해상도
    • 무료 이미지: 제공하는 무료 이미지를 사용합니다.
  6. 섹션 배경에 배경 이미지가 추가됩니다.

배경 이미지 속성

  • 배경 이미지 추가 시 기본적으로 채우기 속성이 적용됩니다. 어떤 크기의 이미지를 올려도 섹션에 꽉 찬 형태로 추가됩니다.
  • 배경은 반복, 가로반복, 세로반복과 같은 옵션을 통해 패턴 이미지를 적용할 수도 있습니다. 


섹션 설정 창을 열어 섹션에 배경(색상, 이미지, 동영상)을 추가하거나 위젯 간의 간격 조절, 여백 조절, 사이드 나누기, 각종 효과를 줄 수 있습니다.


섹션 설정 열기

  1. 디자인 모드에 접속합니다. 
  2. 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
    주의: 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.

  3. 보조 메뉴가 나오면 섹션 설정을 클릭합니다.

  4. 다음 항목별 옵션을 확인하고 수정합니다.


섹션 설정항목

  1. 배경 이미지/동영상 설정방법: 섹션의 상단 회색 부분에 마우스 커서를 올리면 이미지 찾기 버튼으로 이미지를 업로드하거나 YouTube영상을 배경으로 설정할 수 있습니다.
  2. 배경 이미지: 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다.
  3. 배경 배경색: 배경색을 지정합니다. 업로드 된 이미지가 있는 경우 이미지 위에 겹쳐 보이기 때문에 이미지와 함께 사용하려면 투명도를 조정하세요.
  4. 배경 텍스트: 섹션에 표시되는 기본 텍스트 색상을 설정합니다. 이 값을 비워두면 공통 디자인 설정 의 텍스트 색상을 따릅니다.
  5. 흑백 이미지: 업로드된 배경 이미지를 흑백으로 처리합니다.
  6. 배경 이미지 고정: 스크롤을 하더라도 배경이 고정된 위치에 표시됩니다.
  7. 마우스 포인터 움직임: 마우스 포인터의 움직임에 따라 배경 이미지가 움직입니다.
  8. 간격-상하여백, 좌우여백: 섹션의 안쪽 여백을 설정합니다.
  9. 그리드 간격: 기본 그리드 간격 옵션을 해제하고 그리드 상하 및 좌우 간격을 조정하여 공통 디자인 설정의 그리드 간격을 따르지 않고 해당 섹션에만 위젯간 간격을 조정할 수 있습니다.
  10. 가로 100% 확장: 섹션의 본문영역을 브라우저 크기만큼 확장합니다.
  11. 사이드: 좌측이나 우측에 사이드 메뉴를 삽입하려면 분할된 모양의 아이콘을 선택합니다. 사이드 영역의 폭과 사이드 영역과 본문 영역간의 간격을 조정할 수 있습니다.


섹션이란?

페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다. 여기서 섹션(Section)이란 페이지 내 구획 또는 단락을 의미합니다. 다음 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가, 그외 기타 다양한 효과를 추가하여 특별한 디자인도 가능합니다.

적절하게 섹션을 나누면 방문자들이 페이지 콘텐츠를 보기에도 수월하며 향후 모바일 디자인시에도 도움이 되기에 적극 활용해보실 것을 추천드립니다.


섹션 추가하기

섹션을 추가하는 방법에는 2가지가 있습니다.


1. 비주얼 섹션 또는 미리 구성된 섹션 템플릿 추가하기

콘텐츠, 상품 소개, 구성원, 연락처 등 자주 사용되는 레이아웃으로 미리 구성된 섹션 템플릿을 추가할 수 있습니다. 자세한 추가 방법은 다음 도움말을 참조하세요.



2. 빈 섹션 추가하기

위젯이 하나도 없는 빈 섹션을 추가할 수 있습니다. 빈 섹션 추가 방법은 다음 도움말을 참조하세요.



섹션 복사하기, 섹션 붙여넣기

섹션도 복제가 가능합니다. 메뉴별로 반복적으로 사용하는 디자인이 있는 경우 섹션 복제 기능을 활용해보세요.


섹션 이동하기

하나의 페이지에 여러 개 섹션이  있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다.


섹션 삭제하기

섹션은 언제든 삭제할 수 있습니다. 삭제 방법은 다음 도움말을 참조해주세요.

감성적인 느낌이 있는 디앤퍼슨스의 디자인
웹사이트, 쇼핑몰 디자인 맞춤제작 그리고 템플릿
COPYRIGHT © 2007-2024. DNPERSONs ALL RIGHTS RESERVED.