프레임 블럭으로 인트로 디자인하기

홈페이지에서 인트로 디자인은 가장 첫 번째로 보이는 곳으로써 정말 중요한 영역이죠!

프레임 블럭에 동영상 배경을 적용하여 눈길을 끄는 인트로 디자인을 만들어 보겠습니다.

[동영상 인트로 블럭]

 

위와 같이 프레임 블럭으로 동영상 배경이 깔린 인트로 디자인을 만드는 방법을 알려드릴게요!

먼저 배경에 들어갈 동영상이 필요한데요~

유튜브에서 배경에 사용할 동영상을 준비해 주시면 됩니다!

직접 촬영하여 업로드한 동영상의 경우 저작권에 문제 되지 않지만, 다른 사용자의 동영상을 함부로 사용할 경우 문제가 생길 수 있으므로 

저작권 프리 동영상을 준비해 주셔야 합니다.

유튜브 검색창에서 no copyright video 또는 copyright free video로 검색하시면 저작권 무료 동영상을 쉽게 찾으실 수 있습니다~

(제목 또는 영상 설명란에 있는 저작권 문구를 꼭 확인하시고 사용해 주세요!)

 

[유튜부 공유 링크 화면]

 

사용할 동영상을 찾으셨다면 공유 버튼을 누른 뒤 코드를 복사해 줍니다.

https://youtube.be/ 뒤의 코드를 복사해 주세요!

이제 빌더 편집화면으로 이동해 주세요!

 

[닷홈빌더 프레임 블럭 추가 화면]

 

+ 버튼을 누른 뒤 프레임 > 제일 상단의 1단 프레임 블럭을 눌러 추가해 주세요.

(이미 블럭이 있는 경우 제일 상단에 있는 블럭 위의 + 버튼을 눌러주시면 됩니다!)

[닷홈빌더 프레임 블럭 설정 버튼]

 

프레임 블럭이 추가되었어요!

이제 이 프레임 블럭 배경에 동영상을 적용해 줄 거예요.

프레임 블럭 우측 상단의 설정 버튼을 눌러주세요.

[닷홈빌더 프레임 블럭 상세 설정 화면]

 

스타일 탭을 눌러 이동해 주세요.

배경 타입을 동영상으로 선택한 뒤, 주소 입력란에 아까 복사했던 코드를 붙여 넣어 주세요.

하단의 적용하기 버튼을 눌러주세요.

[닷홈빌더 프레임 블럭 배경 적용 화면]

 

동영상 배경이 적용되었어요.

이제 안에 글자와 여백 등을 추가해 줄 차례에요!

프레임 블럭 안의 + 버튼을 눌러 요소 블럭 선택 창을 열어주세요.

요소 블럭 선택 창에서 여백 블럭을 선택하여 추가해 주세요.

 

[닷홈빌더 프레임 블럭에 요소 블럭 추가 화면]

 

요소 블럭이 추가되었어요!

이제 소개 문구를 넣을 수 있도록 텍스트 블럭을 추가해 줄 차례입니다!

여백 블럭 하단의 + 버튼을 눌러주세요

 

[닷홈빌더 텍스트 요소 블럭 추가 화면]

 

텍스트 블럭을 선택해 주세요.

 

[닷홈빌더 텍스트 요소 블럭 수정 화면]

 

텍스트 블럭이 추가되었어요.

이제 소개 문구를 작성해 주세요!

[닷홈빌더 요소 블럭 추가 버튼]

 

하단에도 여백을 추가해 주어야 합니다.

+ 버튼을 눌러 블럭 선택창을 열어주세요.

[닷홈빌더 여백 요소 블럭 추가 화면]

 

여백 블럭을 선택하여 추가합니다.

이번에는 아래 이미지처럼 아이콘 버튼을 누르면 하단의 블럭 위로 스크롤 되는 기능을 넣어보려고 합니다!

 

[스크롤 기능 샘플 화면]

[닷홈빌더 요소 블럭 추가 버튼]

 

여백 블럭 하단의 + 버튼을 눌러주세요.

[닷홈빌더 아이콘 요소 블럭 추가 화면]

 

아이콘 박스를 추가해 주세요.

[닷홈빌더 아이콘 요소 블럭 아이콘 변경 화면]

 

아이콘을 아랫방향 화살표 아이콘으로 변경해 주어야겠죠?

변경하기 버튼을 누른 뒤, 화살표 아이콘을 찾아 선택한 뒤 적용하기를 눌러주세요.

 

[닷홈빌더 요소 블럭 상세 설정 화면]

 

동영상 위에서도 아이콘이 잘 보일 수 있도록 배경을 적용해 주려고 해요!

아이콘 배경을 원형으로 선택한 뒤, 아이콘 색상과 배경 색상을 설정해 주세요~

배경색은 살짝 투명도를 주어야 예쁘답니다!ㅎㅎ

배경에 사용된 동영상이 어두운 경우 아이콘은 밝은 색상을, 동영상이 밝은 경우에는 아이콘은 어두운 색상을 적용해 주어야 잘 보인답니다!

[닷홈빌더 요소 블럭 상세 설정 링크 추가 화면]

 

이번에는 아이콘을 클릭했을 때 화면이 이동할 수 있도록 아이콘에 링크를 추가해 줄 차례입니다.

링크 사용하기에 체크한 뒤, URL에 이동할 블럭ID를 입력해 주세요.

#블럭ID의 형태로 입력해 주시면 됩니다.

만약 메인 페이지가 아닌 다른 페이지에서 사용할 경우에는 아래와 같이 입력해 주세요~

/페이지명/#블럭ID

[닷홈빌더 요소 블럭 상세 설정 정렬방식 설정 화면]

 

아이콘이 가운데로 올 수 있도록 레이아웃에서 정렬을 가운데로 설정해 준 뒤 적용하기를 눌러줍니다.

[변경사항 저장 및 게시 화면]

 

이제 인트로 디자인 편집이 끝났어요! 상단의 저장하기와 게시하기를 눌러 실제 페이지에도 반영될 수 있도록 해주세요~

실제 페이지에서는 이렇게 동작한답니다~

 

[동영상 인트로 적용 화면]