커스텀 블록 목록

done
done

헬로우판다의 모든 디자인 블록은 직접 제작되었습니다.

DESIGN

🐼

디자인 패턴

HELLOPANDA 에서만 사용할 수 있는 디자인 패턴 입니다. 디자인을 손쉽게 변경하고 관리하세요. 💦

NEW

FUCNTION

splitscreen_landscape

슬라이더 블록

다양한 슬라이더를 만들 수 있는 블록입니다. swiperjs 기반으로 제작되었으며 패턴을 함께 제공합니다.

NEW

toggle_on

온오프 블록

특정 URL 조건에서 컨텐츠를 활성화 할 수 있는 있습니다. 네비게이션, 서브 메뉴에 특히 유용합니다.

CODE

ad

광고 블록

광고 영역을 표현할 영역입니다. 광고에 삽입할 코드를 입력하고 편리하게 관리할 수 있습니다.

CODE

location_on

지도 블록

지도 영역을 표현할 영역입니다. 지도에 삽입할 코드를 입력하고 편리하게 관리할 수 있습니다.

DESIGN

emoticon

아이콘 블록

구글 메테리얼 아이콘을 손쉽게 설정할 수 있는 블록 입니다. 아이콘의 코드는 https://fonts.google.com/icons 이 주소를 참고하세요.

DESIGN

progress_activity

프로그래스 바 블록

프로그래스바 디자인을 쉽게 설정할 수 있는 블록 입니다. 다양한 프로그래스 타입을 지원하며, 각 영역을 상세하게 설정 할 수 있습니다.

DESIGN

play_circle

유튜브 배경 블록

유튜브 영상을 배경으로 설정할 수 있는 블록 입니다. 화면 채우기, 비율 등 다양한 설정을 할 수 있습니다.

FUCNTION

calendar_view_day

컨텐츠 토글 블록

마우스 액션으로 오버레이 컨텐츠를 표현할 수 있는 토글 컨텐츠 블록 입니다. 대메뉴, 툴팁, 셀렉트 박스 등 다양하게 활용이 가능합니다.

FUCNTION

tab_duplicate

팝업 블록

팝업을 설정할 수 있는 블록입니다. 팝업의 위치, 닫아두는 기간, 열리는 애니메이션 등 다양한 설정이 가능합니다.

EFFECT

custom_typography

타이핑 모션 블록

텍스트를 타이핑 애니메이션으로 표현하는 블록 입니다. 텍스트, 딜레이, 반복 등 상세한 설정이 가능합니다.

EFFECT

money

카운트 다운 블록

카운드 다운, 카운트 업 효과를 만들 수 있는 블록 입니다. 속도, 단위, 스크롤 시 활성화 등 설정이 가능합니다.

FUCNTION

data_table

아코디언 블록

아코디언 메뉴를 설정할 수 있는 블록입니다. 헤더, 컨텐츠, 불릿 등 다양하고 상세한 설정이 가능합니다.

FUCNTION

repartition

탭 메뉴 블록

탭 디자인를 설정할 수 있는 블록입니다. 헤더, 컨텐츠, 불릿 등 다양하고 상세한 설정이 가능합니다.

EFFECT

format_strikethrough

마스크 블록

텍스트를 마스크 형태로 표현할 수 있는 디자인 블록입니다. 딜레이, 속도, 타이밍, 트렌지션 방향 등을 설정할 수 있습니다.

EFFECT

text_rotation_none

마퀴 태그 블록

무한히 흘러가는 텍스트를 만들 수 있는 블록입니다. 속도, 방향, 스타일 등 간단한 설정이 가능합니다.

FUCNTION

scrollable_header

스티키 블록

스티키 요소를 위한 블록 입니다. 이 블록을 사용하면 웹사이트에 스티키 요소를 쉽게 설정할 수 있습니다. 스크립트로 동작하므로 과도하게 사용은 지양하시길 바랍니다.

BLOG

share

공유하기 블록

API 없이 간단히 소셜 플랫폼에 공유할 수 있는 기능을 제공하는 블록입니다. 요즘은 큰 의미 없지만 필요할 경우 사용하세요.

DESIGN

touchpad_mouse

버튼 확장 블록

버튼 내부를 컨텐츠로 구성할 수 있는 블록입니다. 이 블록은 워드프래스 단점을 크게 개선합니다.

FUCNTION

DESIGN

difference

오버레이 블록

오버레이 디자인을 설정할 수 있는 블록입니다. 패널, 검색, 중요한 컨텐츠를 레이어로 표현하는것에 유용한 블록입니다.

FUCNTION

DESIGN

eye_tracking

온오프 블록

접속한 페이지의 특정 조건에 따라 다른 컨텐츠를 보여줄 수 있는 블록 입니다. 네비게이션 등에서 활용될 수 있습니다.

EFFECT

FUCNTION

DESIGN

mouse

스크롤 이동 블록

화면을 원하는 위치로 이동시키고 애니메이션을 지정하며 섬세한 높이까지 지정할 수 있는 블록 입니다.

FUCNTION

DESIGN

touchpad_mouse

스크롤 활성 블록

특정 블록이 화면이 보일 때 활성화 할 수 있는 다이나믹 버튼 블록 입니다. 페이지 이동 없이 긴 컨텐츠를 보여줄 때 용이합니다.

EFFECT

FUCNTION

DESIGN

swipe_up

스크롤 토글 블록

스크롤을 했을 때 보이거나 숨겨지는 메뉴를 만드는 역할을 합니다. 상단 혹은 하단에 고정된 메뉴에 유용합니다.