스크래치에서 Wix 웹 사이트-헤더 메뉴
이 자습서에서는 빈 템플릿으로 시작한 Wix 웹 사이트에서 계속 작업합니다. 헤더 섹션에 메인 메뉴를 추가하겠습니다.

첫 번째 작업은 헤더에 색 배경을 추가하는 것입니다.

  1. 머리글을 선택하고 머리글 디자인 변경 단추를 클릭하십시오.

    이때 머리글은 색상 없음으로 설정됩니다. 그것을 흰색으로 바꾸자.

  2. 색상 없음 바로 아래의 헤더 디자인을 클릭하십시오.

  3. 창의 맨 아래에있는 디자인 사용자 정의 단추를 클릭하십시오.

  4. 배경 및 중앙 배경에 대해 채우기 색상 및 불투명도 설정을 100 % 흰색으로 설정하십시오.

  5. 테두리 설정의 경우 위쪽 테두리 및 아래쪽 테두리 너비를 0으로 설정하십시오.

  6. 모서리 반경을 0으로 설정하고 그림자 사용을 끕니다.

이제 최상위 메뉴를 추가 할 수 있습니다.

  1. 왼쪽 메뉴에서 플러스 아이콘을 클릭하고 목록에서 메뉴를 선택하십시오.

  2. 가로 메뉴 중 하나를 클릭하여 페이지에 추가하십시오.

    한 페이지-홈 링크가있는 페이지에 새 메뉴가 표시됩니다.

  3. 메뉴를 클릭하고 헤더 섹션으로 끕니다. 당신이 텍스트를 볼 때 헤더에 첨부메뉴에서 손을 떼십시오.

    우리는 페이지의 메뉴를 가운데에 위치 시키므로 메뉴 상자를 980px 너비로 확장 할 것입니다.

  4. 메뉴 상자를 선택한 상태에서 상자 끝을 끌어 980 영역을 채 웁니다. 왼쪽 및 오른쪽 지침을 지침으로 사용하십시오.

    메뉴는 기본적으로 가운데로 설정되어 있어야합니다. 홈 링크가 상자 중앙에 있기 때문에 이것을 볼 수 있습니다. 이제 메뉴를 사용자 정의 할 수 있습니다.

  5. 메뉴가 선택된 상태에서 디자인 아이콘 (페인트 브러시)을 클릭하여 수평 메뉴 디자인 창을 엽니 다. 창의 맨 아래에있는 디자인 사용자 정의 단추를 클릭하십시오.

    채우기 색상 및 불투명도를 클릭하면 메뉴 배경이 이미 100 % 흰색으로 설정되어있는 것을 볼 수 있습니다. 이 설정을 유지하고 텍스트로 넘어 갑시다.

    이전 자습서에서는 기본 텍스트 테마의 글꼴을 Futura Light로 설정했습니다. 메뉴도 똑같이 해봅시다.

  6. T 아이콘을 클릭하여 텍스트 설정 섹션을여십시오.

  7. 글꼴 섹션의 오른쪽에있는 화살표를 클릭하고 목록에서 Futura Light를 선택하십시오.

    일반 메뉴 텍스트의 기본 색상 설정을 유지합시다. 그러나 호버 및 클릭 메뉴 텍스트 색상을 금색으로 변경합니다.

  8. 창에서 호버 링크를 클릭하십시오. 색상 상자를 클릭하여 색상 선택기를 엽니 다. 색상 추가 링크를 클릭하고 색상 설정을 # bc9b5d로 변경 한 다음 추가 버튼을 클릭하십시오. 색상 피커를 닫습니다.

  9. 클릭 설정에 대해 이전 단계를 반복하십시오. 그러나 이번에는 내 색 영역에서 금색을 선택할 수 있습니다.

    마지막으로 페이지 링크의 기본 텍스트를 HOME에서 웹 사이트 이름으로 변경하려고합니다.

  10. 메뉴가 선택된 상태에서 팝업 메뉴에서 메뉴 관리 버튼을 클릭하십시오.

  11. 페이지 메뉴에서 HOME 페이지를 찾아 오른쪽의 링크를 클릭하십시오. 목록에서 이름 바꾸기를 선택하십시오. 새 링크 제목을 추가하고 완료를 클릭하십시오.

    다음 작업은 메뉴의 높이보다 약간 더 크게 헤더 섹션의 크기를 조정하는 것입니다.

  12. 메뉴를 선택하고 머리글 영역의 상단으로 끕니다.

  13. 늘이기 핸들을 보려면 머리글의 빈 영역을 클릭하십시오. 핸들을 위로 끕니다.

Wix.com, Inc.의 승인하에 사용 된 스크린 샷

비디오 지침: HTML5 - 06 (볼륨조절 재업) 리스트 태그, 종류, 특징, 서브메뉴 구현하기 (월 2024).