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

메인 섹션

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

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

‍

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

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

네비게이션 바, 푸터

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

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

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

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

‍

아래에 바닥글 붙여넣기

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

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

‍

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

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

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

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

‍

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

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

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

‍

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

요약하다

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

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

‍

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

‍

‍

추가 정보는 무료 이메일 뉴스레터를 통해 안내해 드리겠습니다.

WEBFLOW 전문가로 비즈니스를 하고 있는 쿠리타 본인이 실제로 사용해본 경험이 있으며, 편리하다고 느꼈던 웹플로 사용 방법, 사업 계획, 경험, 프로세스 등에 대한 정보를 전파하고 있습니다.필요하지 않은 경우 1초 만에 빠르게 해독할 수 있습니다.다음으로 1천만 건의 매출을 목표로 하고 있습니다.