페이지 접속 후 특정 시간이 지나면 숨어 있던 버튼이 나타나도록 제작할 수 있습니다. 이와 같은 타이머 버튼은 종종 마케팅에 활용되며, 방문자가 필수 콘텐츠를 보도록 유도하는데 사용될 수 있습니다.

이 버튼을 만들려면 코드를 사용해야 합니다. 아래 설명과 샘플 코드를 사용해 타이머 버튼을 제작해 보세요.

구현방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해, 버튼을 삽입할 메뉴로 이동하거나 새로운 메뉴를 생성합니다. 메뉴 추가하기
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 추가합니다.
4. 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

6. 코드 입력 칸에 아래의 코드를 복사하여 붙여넣습니다.

    <style> .hiddenBlock { display: none; }
   </style>
   <p class="hiddenBlock" style="text-align: 정렬;"> <a style="font-weight: 텍스트 두께; font-size: 텍스트 크기;" class="btn btn-primary btn-lg" href="링크 주소">버튼명</a> </p>
   <script type="text/javascript">$(document).ready(function(){setTimeout(function(){$('.hiddenBlock').show()},시간)});</script>

7. 아래 그림과 설명을 참조하여 코드를 수정합니다.

   

   • 정렬: 버튼을 정렬시킬 수 있습니다. left, center, right 3가지 중 하나를 입력합니다.
   • 텍스트 두께: 버튼 텍스트의 두께를 정할 수 있습니다. normal로 바꾸면 기본으로 돌아갑니다.
   • 텍스트 크기: 버튼 텍스트의 두께를 지정합니다. bold 라고 입력하면 두껍게 작성되며, normal로 입력하면 기본으로 돌아갑니다.
   • 링크 주소: 버튼을 클릭하면 이동할 주소(URL)를 입력합니다. 예) https://wemento.kr
   • 버튼명: 버튼에 표시될 버튼 이름을 입력합니다.
   • 시간: 1000당 1초라고 생각하시면 되겠습니다. 3초 후 버튼이 나오게 하려면 3000을 입력합니다.
8. 저장 버튼을 클릭해 코드 입력을 완료합니다.
9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

10. 지정한 시간이 지나면 버튼이 표시되는지 확인합니다.

    

11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

상품 상세페이지에서 이미지 간격 없애기 (코드, 초급)

상품 상세설명에 삽입한 이미지의 구분을 위해 약간의 간격을 두게끔 설정되어 있습니다.

하지만 연관된 이미지를 연속으로 배치하는 경우, 이 간격이 문제가 될 수 있습니다. 

이 도움말에서는 간단한 CSS 스타일 속성을 사용해 상품 상세설명에 삽입한 이미지간의 간격을 없애는 방법을 설명합니다.

적용방법

1단계: 상품 상세페이지에 코드 추가하기

2단계: 상세설명 이미지 삽입하고 CSS 추가하기

3단계: 이미지 간격 설정여부 확인하기

게시물에 구글 지도 임베드 하는 방법

Google 지도의 공유 기능을 활용해 내 사이트 게시물에 지도를 삽입 할 수 있습니다.

적용방법

1. Google 지도에 접속합니다.
2. 장소명 또는 주소를 입력해 검색합니다.
3. 공유 버튼을 클릭합니다.
   
4. 상단 지도 퍼가기 탭 메뉴를 클릭하고, HTML 복사를 클릭해 임베드 코드를 복사합니다.
5. 내 아임웹 사이트의 게시판이 삽입된 메뉴에 접속합니다.
6. 글쓰기 버튼을 클릭합니다.
7. 텍스트 편집도구 오른쪽 끝의 코드 보기 </> 아이콘을 클릭합니다.
8. 위 5번에서 복사한 임베드 코드를 붙여넣기(Ctrl + V) 합니다.
9. 코드 보기 </> 아이콘을 다시 클릭합니다.
10. 지도가 정상적으로 표시 되는지 확인합니다.
11. 오른쪽 상단의 작성 버튼을 클릭합니다.
12. 게시물에 구글 지도가 표시됩니다.

섹션 배경 이미지 고정하기

섹션에 배경 이미지를 삽입하고 "배경 이미지 고정" 효과를 적용하면 마우스 휠을 스크롤 하더라도 배경 이미지가  해당 섹션에 고정되어 표시됩니다. 방문자의 눈길을 사로잡는 시각적 효과를 간편하게 적용할 수 있어, 비주얼 중심의 웹 페이지 디자인에 효과적입니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 아이콘  ≡ 을 클릭하고, 배경 이미지 고정 효과를 적용할 메뉴를 클릭해 이동합니다.
3. 배경 이미지 고정 효과를 적용하기 위한 새로운 빈 섹션을 추가합니다. 
4. 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
6. 이미지 업로드 영역에 마우스 포인터를 올리면, 이미지 업로드 옵션이 표시됩니다. 이미지 찾기를 클릭해 내 PC에서 이미지를 선택해 올려줍니다.
   

   참고: 배경에 올릴 이미지는 섹션 배경 전체를 꽉 채우기 때문에 충분히 큰 해상도(가로 1920픽셀, JPG)의 이미지를 사용해 주세요. 별도 준비한 이미지가 없는 경우, 무료 이미지를 사용할 수도 있습니다. 단, 동영상은 배경 이미지 고정 옵션이 동작하지 않습니다.

   
   
7. 섹션 배경 효과로 배경 이미지 고정을 선택합니다.
8. 섹션 설정 창 바깥 영역 아무 곳을 클릭해 설정을 종료합니다.
9. 마우스 휠 스크롤을 움직여 배경 이미지 고정 효과가 적용되었는지 확인합니다.

유튜브와 비메오 동영상이 재생되지 않아요. (동영상 공개설정)

YouTube(유튜브) 또는 Vimeo(비메오)에 올린 동영상을 내 사이트에 삽입했는데 재생되지 않는다면 그 원인은 일반적으로 동영상 공개상태가 비공개로 설정되어 있기 때문입니다.

이 도움말에서는 YouTube와 Vimeo에 올린 동영상이 내 사이트에서 재생되도록 공개상태를 변경하는 방법을 설명합니다.

YouTube 공개 상태 설정방법

1단계: 공개 상태 변경하기

(확인 사항) 2단계: 퍼가기 옵션 설정하기

Vimeo 공개 상태 설정방법

공개 상태 변경하기

(선택 사항) 특정 도메인에서만 재생되도록 설정하기

관련 도움말

• 유튜브 동영상 주소 가져오기
• 비메오 동영상 주소 가져오기

게시판 게시물에 네이버 동영상 삽입하기

게시판 게시물에 네이버 동영상을 삽입할 수 있습니다. 네이버 동영상을 삽입하려면 동영상 주소(URL)가 포함된 소스 코드가 필요합니다.

이 도움말에서는 네이버 동영상 소스 코드를 복사하는 방법과 게시물에 삽입하는 방법을 설명합니다.

삽입방법

1단계: 네이버 동영상 주소 가져오기

1. 네이버 동영상에 마우스 포인터를 올리고, 동영상 오른쪽 상단의 공유하기 아이콘을 클릭합니다.
   참고: 네이버TV 동영상의 경우 동영상 화면 아래 공유 메뉴가 별도로 존재합니다.
2. 동영상 왼쪽 상단의 소스 코드를 클릭합니다.
3. 게시물에 출력할 동영상 크기를 선택하고, 복사 버튼을 클릭합니다.
4. 네이버 동영상 주소가 포함된 HTML 소스 코드가 복사 완료됩니다.

2단계: 게시물에 삽입하기

1. 게시판이 추가된 내 사이트 메뉴로 이동합니다.
2. 글쓰기 버튼을 클릭합니다.
3. 텍스트 도구에서 파일첨부 오른쪽의, 더보기 아이콘을 클릭한 다음 동영상 삽입 아이콘을 클릭합니다.

   
   

4. 임베디드 코드 아이콘을 클릭하고, 복사한 동영상 소스 코드를 키보드 단축키(CTRL+V) 사용해 붙여넣습니다.
5. 삽입을 클릭합니다.
6. 동영상이 정상적으로 표시된다면 작성 버튼을 클릭해 게시물을 올립니다.

비메오 동영상 주소 가져오기 (Vimeo)

Vimeo(비메오)에 올린 동영상을 내 사이트에 삽입할 수 있습니다. 동영상을 삽입하기 위해서는 Vimeo 동영상 주소(URL)가 필요하며, 이 도움말에서는 Vimeo에 올린 동영상의 주소를 가져오는 방법을 안내합니다.

동영상 주소 가져오기

1. Vimeo에 접속 후 로그인합니다.
2. 왼쪽 메뉴에서 동영상을 클릭합니다.

3. 주소를 가져오려는 동영상 제목 아래 링크 아이콘을 클릭합니다.

   

4. 동영상 링크 복사를 클릭하여 동영상 주소를 복사합니다.

   

5. Vimeo 동영상 주소 복사가 완료되었습니다. 이제 복사한 주소를 동영상 위젯, 섹션 배경, 게시물 등에 붙여넣어 동영상을 삽입할 수 있습니다.
    (단축키: CTRL + V)
   

유튜브 동영상 주소 가져오기 (YouTube, 쇼츠)

YouTube(유튜브)에 올린 동영상(Shorts 포함)을 내 사이트에 삽입할 수 있습니다. YouTube 동영상을 삽입하기 위해선 YouTube 동영상 주소(URL)가 필요합니다.

YouTube 동영상 주소 가져오기

YouTube 동영상 주소는 ‘YouTube 스튜디오’에서 복사하거나 ‘동영상’에서 바로 가져올 수 있습니다. 아래 목록에서 선호하는 방법을 선택해 동영상 주소를 복사해 보세요.

Shorts 동영상 주소 가져오기

YouTube Shorts(쇼츠)는 YouTube 동영상 종류의 하나로, Shorts 동영상 URL 주소도 위와 같은 방법으로 복사해 가져올 수 있습니다.

게시판 게시물에 유튜브, 비메오 동영상 삽입하기

게시판 게시물에 YouTube(유튜브), Vimeo(비메오) 동영상을 삽입할 수 있습니다. YouTube 및 Vimeo 동영상 주소(URL)을 가져오는 방법은 이 도움말 하단의 설명을 참고해 주세요.

첨부방법

1. 내 사이트의 게시판이 있는 메뉴로 이동합니다.
2. 글쓰기 버튼을 클릭합니다.
3. 텍스트 도구에서 파일첨부 아이콘 오른쪽의 더보기 아이콘을 클릭한 다음 동영상 삽입 아이콘을 클릭합니다.
4. 동영상 URL 입력 칸에, 동영상 주소를 입력합니다. (동영상 주소 형식은 사용하시는 동영상 플랫폼마다 다릅니다.)
5. 삽입을 클릭하면 동영상 삽입이 완료됩니다.

관련 도움말

• YouTube(유튜브) 동영상 주소 가져오기
• Vimeo(비메오) 동영상 주소 가져오기

메뉴 복제하기

메뉴(페이지)를 복제할 수 있습니다. 단, 복제 시 일부 DB요소 위젯은 복제가 불가능하거나, 복제가 되어도 연동 설정은 별도로 해줘야 할 수 있습니다.

복제방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 복제하려는 메뉴에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 메뉴 복제를 클릭합니다.

   
   

5. 메뉴 복제가 완료됩니다.