• 가이드

타이머 버튼 만들기

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

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

구현방법

  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://imweb.me
    • 버튼명: 버튼에 표시될 버튼 이름을 입력합니다.
    • 시간: 1000당 1초라고 생각하시면 되겠습니다. 3초 후 버튼이 나오게 하려면 3000을 입력합니다.
  8. 저장 버튼을 클릭해 코드 입력을 완료합니다.
  9. 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
  10. 지정한 시간이 지나면 버튼이 표시되는지 확인합니다.

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

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.