# 프레임 블럭으로 인트로 디자인하기
홈페이지에서 인트로 디자인은 가장 첫 번째로 보이는 곳으로써 정말 중요한 영역이죠!
프레임 블럭에 동영상 배경을 적용하여 눈길을 끄는 인트로 디자인을 만들어 보겠습니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro01.gif)
\[동영상 인트로 블럭\]
위와 같이 프레임 블럭으로 동영상 배경이 깔린 인트로 디자인을 만드는 방법을 알려드릴게요!
먼저 배경에 들어갈 동영상이 필요한데요~
유튜브에서 배경에 사용할 동영상을 준비해 주시면 됩니다!
직접 촬영하여 업로드한 동영상의 경우 저작권에 문제 되지 않지만, 다른 사용자의 동영상을 함부로 사용할 경우 문제가 생길 수 있으므로
저작권 프리 동영상을 준비해 주셔야 합니다.
유튜브 검색창에서 no copyright video 또는 copyright free video로 검색하시면 저작권 무료 동영상을 쉽게 찾으실 수 있습니다~
(제목 또는 영상 설명란에 있는 저작권 문구를 꼭 확인하시고 사용해 주세요!)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro02.jpg)
\[유튜부 공유 링크 화면\]
사용할 동영상을 찾으셨다면 공유 버튼을 누른 뒤 코드를 복사해 줍니다.
[https://youtube.be/](https://youtube.be/) 뒤의 코드를 복사해 주세요!
이제 빌더 편집화면으로 이동해 주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro03.jpg)
\[닷홈빌더 프레임 블럭 추가 화면\]
\+ 버튼을 누른 뒤 프레임 > 제일 상단의 1단 프레임 블럭을 눌러 추가해 주세요.
(이미 블럭이 있는 경우 제일 상단에 있는 블럭 위의 + 버튼을 눌러주시면 됩니다!)
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro04.jpg)
\[닷홈빌더 프레임 블럭 설정 버튼\]
프레임 블럭이 추가되었어요!
이제 이 프레임 블럭 배경에 동영상을 적용해 줄 거예요.
프레임 블럭 우측 상단의 설정 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro05.jpg)
\[닷홈빌더 프레임 블럭 상세 설정 화면\]
스타일 탭을 눌러 이동해 주세요.
배경 타입을 동영상으로 선택한 뒤, 주소 입력란에 아까 복사했던 코드를 붙여 넣어 주세요.
하단의 적용하기 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro06.jpg)
\[닷홈빌더 프레임 블럭 배경 적용 화면\]
동영상 배경이 적용되었어요.
이제 안에 글자와 여백 등을 추가해 줄 차례에요!
프레임 블럭 안의 + 버튼을 눌러 요소 블럭 선택 창을 열어주세요.
요소 블럭 선택 창에서 여백 블럭을 선택하여 추가해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro07.jpg)
\[닷홈빌더 프레임 블럭에 요소 블럭 추가 화면\]
요소 블럭이 추가되었어요!
이제 소개 문구를 넣을 수 있도록 텍스트 블럭을 추가해 줄 차례입니다!
여백 블럭 하단의 + 버튼을 눌러주세요
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro08.jpg)
\[닷홈빌더 텍스트 요소 블럭 추가 화면\]
텍스트 블럭을 선택해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro09.jpg)
\[닷홈빌더 텍스트 요소 블럭 수정 화면\]
텍스트 블럭이 추가되었어요.
이제 소개 문구를 작성해 주세요!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro10.jpg)
\[닷홈빌더 요소 블럭 추가 버튼\]
하단에도 여백을 추가해 주어야 합니다.
\+ 버튼을 눌러 블럭 선택창을 열어주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro11.jpg)
\[닷홈빌더 여백 요소 블럭 추가 화면\]
여백 블럭을 선택하여 추가합니다.
이번에는 아래 이미지처럼 아이콘 버튼을 누르면 하단의 블럭 위로 스크롤 되는 기능을 넣어보려고 합니다!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro12.gif)
\[스크롤 기능 샘플 화면\]
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro13.jpg)
\[닷홈빌더 요소 블럭 추가 버튼\]
여백 블럭 하단의 + 버튼을 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro14.jpg)
\[닷홈빌더 아이콘 요소 블럭 추가 화면\]
아이콘 박스를 추가해 주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro15.jpg)
\[닷홈빌더 아이콘 요소 블럭 아이콘 변경 화면\]
아이콘을 아랫방향 화살표 아이콘으로 변경해 주어야겠죠?
변경하기 버튼을 누른 뒤, 화살표 아이콘을 찾아 선택한 뒤 적용하기를 눌러주세요.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro16.jpg)
\[닷홈빌더 요소 블럭 상세 설정 화면\]
동영상 위에서도 아이콘이 잘 보일 수 있도록 배경을 적용해 주려고 해요!
아이콘 배경을 원형으로 선택한 뒤, 아이콘 색상과 배경 색상을 설정해 주세요~
배경색은 살짝 투명도를 주어야 예쁘답니다!ㅎㅎ
배경에 사용된 동영상이 어두운 경우 아이콘은 밝은 색상을, 동영상이 밝은 경우에는 아이콘은 어두운 색상을 적용해 주어야 잘 보인답니다!
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro17.jpg)
\[닷홈빌더 요소 블럭 상세 설정 링크 추가 화면\]
이번에는 아이콘을 클릭했을 때 화면이 이동할 수 있도록 아이콘에 링크를 추가해 줄 차례입니다.
링크 사용하기에 체크한 뒤, URL에 이동할 블럭ID를 입력해 주세요.
\#블럭ID의 형태로 입력해 주시면 됩니다.
만약 메인 페이지가 아닌 다른 페이지에서 사용할 경우에는 아래와 같이 입력해 주세요~
/페이지명/#블럭ID
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro18.jpg)
\[닷홈빌더 요소 블럭 상세 설정 정렬방식 설정 화면\]
아이콘이 가운데로 올 수 있도록 레이아웃에서 정렬을 가운데로 설정해 준 뒤 적용하기를 눌러줍니다.
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro19.jpg)
\[변경사항 저장 및 게시 화면\]
이제 인트로 디자인 편집이 끝났어요! 상단의 저장하기와 게시하기를 눌러 실제 페이지에도 반영될 수 있도록 해주세요~
실제 페이지에서는 이렇게 동작한답니다~
[](https://docs.dothome.co.kr/uploads/images/gallery/2025-11/intro20.gif)
\[동영상 인트로 적용 화면\]