웹플로우로 문의 양식을 만드는 방법 [9Dsys/웹플로우 유니버시티]

메인 섹션

바로 만들게요... 그 전에 중단점으로 설정했는지 확인합시다.

새로 만들 때마다 확인하는 것이 좋습니다.“도중에 태블릿 크기로 만들어졌다는 걸 깨닫고 다시 만들었어요.”그런 일이 가끔 일어납니다.중단점을 사용하여 만들었는지 확인했으면 이제 시작할 차례입니다.

‍

먼저 평소와 같이 섹션과 컨테이너를 만든 다음 각 요소를 넣습니다.

• 섹션 및 컨테이너 삽입
• H1 헤더 삽입
  ・클래스의 경우 HERO 제목을 복사하여 “큰 제목”으로 설정합니다.
  ・글꼴 크기: 48픽셀 높이 1- (하이픈)
  ・텍스트 색상 변경(제게 맡기세요)
  ・여백 하단: 60픽셀
• 심볼 연락처 양식 삽입

네비게이션 바, 푸터

이 둘을 넣기만 해도 완성도가 한꺼번에 높아진 느낌이 들지 않나요?조금만 올라갈게요.나이가 들었어요.

• 기호에 저장된 네비게이션 바 및 바닥글 삽입
  

솔직히 연락처 페이지가 여기에 완성되었습니다.말씀하셔도 무방하지만 너무 짧기 때문에 바닥글과 내비게이션 바에 약간만자주 볼 수 있는 작은 공예품할 것 같아요.

바닥글부터 시작하겠습니다.

‍

아래에 바닥글 붙여넣기

중단점보다 큰 크기로 표시하면 발을 땅에 대지 않고도 바닥글이 떠다니게 됩니다.이를 개선하기 위해 다음과 같은 설정을 할 예정입니다.
※작업은 중단점에서 수행됩니다.

• 바디 선택
• 핑크 태그 세트 (올 바디)
• 플렉스 박스를 설정하고 수직으로 정렬합니다.

‍

다음으로 바닥글을 수정하겠습니다.

• 기호를 두 번 클릭하고 바닥글 섹션을 선택합니다.
• 마진 탑: 자동

자동에서 설정하면 여백이 자동으로 확장 및 축소되며, 바닥글은 모든 크기의 하단에 배치할 수 있습니다.홈페이지용 CMS를 만드는 부분에서 아래에 “더보기”를 넣는 것과 같은 방법입니다.유용한 기능이니 꼭 기억해 두세요.

제가 이 강좌에서 참조하는 공식 Webflow 비디오는 바닥글에 이 설정을 하고 끝났지만, 이제 이 블로그의 내비게이션 바에 대해 간단한 트릭을 해볼까 합니다.

‍

항상 상단에 내비게이션 바를 표시합니다.

• 내비게이션 바 선택
• 사진과 같이 설정합니다.
  

이것이 탐색 막대를 맨 위에 고정하고 표시하는 데 필요한 전부입니다.디자인이 이해하기 쉬워서 바로 사용할 수 있습니다.

‍

Navi Bar에는 다양한 작은 세부 정보를 사용하는 다른 사이트도 있습니다.이 설정을 다른 글에서 다시 소개하고 싶습니다.

요약하다

이번에는 짧은 에피소드였죠?문의는 중요한 기능이므로 원본을 조금 더 수정해 보는 것도 좋을 것 같습니다.

내비게이션 바와 다양한 네비게이션 바에 대한 특집을 별도의 글에서 해볼 생각도 있지만, 가끔씩 빠르게 끝내고 몸을 단련하는 날로 만들어 볼 생각입니다.

‍

그럼 오늘도 수고하셨습니다.다음은 “리캡차 소개”입니다.불필요하다고 생각하시는 분들도 계실 수 있지만 일단 대중화되면 꼭 필요한 것이므로 미리 방법을 알아두면 지장이 없습니다.그럼 다음에 또 힘내자.

‍

‍