요소 참조.

DXPR Builder 배우기참조요소와 CSS

DXPR Builder는 22개의 콘텐츠 요소와 6개의 레이아웃 요소를 제공합니다. 이 페이지에는 각 요소의 머신 이름과 설정 모달의 필드가 나와 있습니다. 레이아웃 부분에는 각 행 안의 Column도 함께 나와 있습니다. 빌더가 요소로 제공하는 Drupal 블록과 뷰는 다루지 않습니다.

이 페이지 읽는 법

각 요소의 첫 번째 표에는 해당 요소의 General 아코디언에 있는 필드가 나와 있습니다. 다른 아코디언의 필드는 해당 아코디언 이름의 별도 표에 있습니다. Label은 모달에 표시되는 필드 라벨로, 인터페이스 미국식 철자를 따릅니다. Parameter는 요소 정의의 param_name입니다. Options는 value (Label) 형식으로 표시됩니다.

다음 두 General 필드는 모든 요소에 나타나므로 표에 반복하지 않습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
HTML ID hash text empty; the field shows the generated ID as a placeholder A letter first, then letters, numbers, hyphens and underscores 요소의 사용자 정의 ID입니다.
HTML classes el_class multi-select empty; new sections get py-5 Bootstrap 5 utility classes and the classes that enabled themes declare; Edit as text accepts any class 요소의 추가 CSS 클래스입니다.

모든 요소에는 Style과 Hover style 아코디언도 있으며, Style tab 페이지에 설명되어 있습니다. Column과 Tabs, Collapse panel, Carousel 안의 패널을 제외한 모든 요소에는 Animation 아코디언도 있으며, Animation tab 페이지에 설명되어 있습니다.

Control 열은 모달에 표시되는 이름을 나타냅니다. 각 컨트롤은 요소 정의의 매개변수 type에서 나옵니다.

컨트롤 코드 type
text textfield
number numericfield
link link
radio dropdown with fewer than 7 options
select dropdown with 7 or more options
toggle checkbox with one option
checkboxes checkbox with several options
slider dxb_slider
colour colorpicker
icon, image, images, video, datetime The type of the same name
ckeditor textarea
ace html
social social_links

켜진 토글은 Allowed values 셀의 값을 저장하고, 꺼진 토글은 no나 빈 값을 저장합니다. 체크박스는 체크된 값을 쉼표로 구분한 목록으로 저장합니다. empty로 표시된 옵션은 빈 문자열로 저장됩니다. 모달에서 해당 라디오 버튼의 키는 dxpr-default입니다.

Image와 images 필드에는 이미지 스타일 선택도 있습니다. 사이트에 optimize 스타일이 있으면 그것이 먼저 나오고, 다음은 Original image (No resizing)와 다른 이미지 스타일입니다. 다른 필드의 값이 일치할 때만 표시되는 필드도 있습니다. Description 열에 해당 종속성이 나와 있습니다.

콘텐츠 요소

Text

CKEditor로 편집하는 리치 텍스트입니다. 머신 이름: az_text.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Text content ckeditor Placeholder heading and paragraph HTML 텍스트 콘텐츠입니다.

Image

링크 하나로 감쌀 수 있는 단일 이미지입니다. 머신 이름: az_image.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Image image image empty Image from the media browser 표시할 이미지입니다.
Image width width text 100% CSS length, for example 100px or 50% 숫자만 입력하면 픽셀로 계산합니다.
Image height height text empty CSS length, for example 100px 숫자만 입력하면 픽셀로 계산합니다.
Image link link link empty URL or internal path 이미지를 링크로 감쌉니다.
Image link target link_target radio _self (Same window) _self (Same window), _blank (New window) 링크가 열리는 위치입니다. link가 설정되면 표시됩니다.

다음은 SEO 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Alt attribute alt text empty Any text 이미지의 대체 텍스트입니다.
Title attribute title text empty Any text 이미지의 title 속성입니다.

여러 이미지의 Bootstrap 슬라이드쇼입니다. 머신 이름: az_images_carousel.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Images images images empty Images from the media browser 이미지당 한 슬라이드입니다.
Interval interval slider 5000 0 to 10000, step 1 슬라이드 간격을 밀리초 단위로 지정합니다. 0이면 슬라이드가 자동으로 넘어가지 않습니다.
Hide hide checkboxes none ticked pagination_control (Hide pagination control), prev_next_buttons (Hide prev/next buttons) 인디케이터, 화살표 또는 둘 다 숨깁니다.

다음은 SEO 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Alt attribute alt text empty Any text 이미지의 대체 텍스트입니다.
Title attribute title text empty Any text 이미지의 title 속성입니다.

Video

YouTube나 Vimeo 동영상을 삽입합니다. 머신 이름: az_video.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Video link link text empty YouTube or Vimeo URL 삽입할 동영상입니다.
Video width width text 100% CSS length, for example 100px or 50% 숫자만 입력하면 픽셀로 계산합니다.
Image image image empty Image from the media browser 커버 이미지입니다. 방문자가 클릭하면 플레이어가 로드됩니다.
Themed play button play toggle off yes when on 동영상 위에 테마 재생 버튼을 표시합니다.

Local video

직접 호스팅하는 동영상 파일을 HTML5 플레이어로 재생합니다. 머신 이름: az_video_local.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Video video video empty MP4, WEBM, OGG or OGV file, up to the site's upload size limit 동영상 파일입니다.
Start playing automatically autoplay toggle off autoplay when on 페이지 로드 시 재생을 시작합니다. 자동 재생은 항상 동영상을 음소거합니다.
Muted muted toggle off muted when on 동영상을 음소거합니다. autoplay가 꺼져 있을 때 표시됩니다.
Controls controls toggle off controls when on 플레이어 컨트롤을 표시합니다.
Loop loop toggle off loop when on 동영상이 끝나면 다시 시작합니다.
Video width width text 100% CSS length, for example 100px or 50% 플레이어 너비입니다.
Image image image empty Image from the media browser 재생 전에 표시되는 포스터 이미지입니다.

HTML

코드 에디터로 편집하는 원시 HTML입니다. 머신 이름: az_html.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Raw HTML content ace Placeholder message "Click the edit button to change this HTML" HTML HTML 콘텐츠입니다.

Jumbotron

제목과 리드 텍스트가 있는 큰 배너입니다. 안에 다른 요소를 드롭할 수 있습니다. 머신 이름: az_jumbotron.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Title title text empty Any text 배너 제목입니다.
Lead lead text empty Any text 제목 아래에 표시되는 부제 텍스트입니다.
Type type select bg-light (Light) bg-light (Light), text-white bg-primary (Primary), text-white bg-secondary (Secondary), text-white bg-success (Success), text-white bg-info (Info), text-white bg-warning (Warning), text-white bg-danger (Danger), text-white bg-dark (Dark), none (Default) 배경 및 텍스트 색상 클래스입니다.
Padding padding radio p-5 (Large) p-5 (Large), p-4 (Medium), p-3 (Small) 안쪽 여백 크기입니다.

Button

URL로 연결되는 Bootstrap 버튼입니다. 머신 이름: az_button.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Title title text Click to add text Any text 버튼의 텍스트입니다.
Link link link empty URL or internal path 버튼 링크입니다.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) 링크가 열리는 위치입니다. link가 설정되면 표시됩니다.
Type type select primary (Primary) primary, secondary, success, info, warning, danger, link, light, dark; each label is the value with a capital letter Bootstrap 버튼 스타일입니다.
Block button block toggle off btn-block when on 전체 너비 버튼입니다.
Outline style outlined toggle off outline when on 렌더링 결과는 btn-*가 아닌 btn-outline-*입니다.
Size size radio empty (Normal) empty (Normal), btn-lg (Large), btn-sm (Small) 버튼 크기입니다.

안쪽 요소들을 하나의 링크로 감싸는 컨테이너입니다. 머신 이름: az_link.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Link link link empty URL or internal path 콘텐츠 링크입니다.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) 링크가 열리는 위치입니다. link가 설정되면 표시됩니다.

다음은 SEO 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Title attribute title text empty Any text 링크의 title 속성입니다.
Tell search engines not to follow nofollow toggle off nofollow when on 링크에 rel="nofollow"를 추가합니다.

Alert

Bootstrap 알림 메시지입니다. 머신 이름: az_alert.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Message content ckeditor Placeholder text HTML 메시지입니다.
Type type radio alert-success (Success) alert-success (Success), alert-info (Info), alert-warning (Warning), alert-danger (Danger) 알림 색상입니다.

Card

선택적인 헤더와 제목이 있는 Bootstrap 카드 컨테이너입니다. 머신 이름: az_card.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Header header text empty Any text 카드 헤더 텍스트입니다.
Title title text empty Any text 카드 제목입니다.
Type type select empty (Default) empty (Default), text-white bg-primary (Primary), text-white bg-secondary (Secondary), text-white bg-success (Success), text-white bg-info (Info), text-white bg-warning (Warning), text-white bg-danger (Danger), text-white bg-dark (Dark), bg-light (Light) 카드 색상 클래스입니다.

Panel

제목 표시줄이 있는 패널 컨테이너입니다. 머신 이름: az_panel.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Title title text empty Any text 패널 제목입니다.
Type type select panel-dxpr (DXPR) panel-dxpr (DXPR), panel-default (Default), panel-primary (Primary), panel-success (Success), panel-info (Info), panel-warning (Warning), panel-danger (Danger) 패널 스타일입니다.

Block quote

선택적인 출처 표시가 있는 인용문입니다. 머신 이름: az_blockquote.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Text content ckeditor Placeholder text HTML 인용 텍스트입니다.
Cite cite text empty Any text 인용문 아래에 표시되는 출처입니다.
Reverse reverse toggle off blockquote-reverse when on 인용문을 줄 끝쪽으로 정렬합니다(text-end).

프로필 페이지로 연결되는 소셜 네트워크 아이콘을 한 줄 또는 한 열로 표시합니다. 머신 이름: st_social.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Social links st_social_links social Facebook and YouTube rows One row per icon: a brand and the profile URL 아이콘과 해당 링크입니다.
Layout st_type radio inline (Inline) inline (Inline), stacked (Stacked) 아이콘 레이아웃입니다.
Style st_style radio empty (None) empty (None), rounded (Rounded), circle (Circle), square (Square) 아이콘 배경 모양입니다.
Size st_size radio lg (Large) lg (Large), empty (Small), 2x, 3x, 4x, 5x; the last four labels match their values 아이콘 크기입니다.
CSS3 hover effects st_css3_hover_effects radio empty (None) empty (None), disc (Disc), pulse (Pulse) 호버 효과입니다. 효과를 지정하면 아이콘이 원형이 됩니다.

다음은 Icon colors 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Color st_theme_color radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) 아이콘 색상의 출처입니다.
Color st_color colour none Any colour 사용자 정의 아이콘 색상입니다. st_theme_color이 custom일 때 표시됩니다.
Background color st_theme_bgcolor radio custom (Custom) brand (Brand color), custom (Custom), inherit (Inherit) 아이콘 배경 색상의 출처입니다.
Background color st_bgcolor colour none Any colour 사용자 정의 배경 색상입니다. st_theme_bgcolor이 custom일 때 표시됩니다.

Number counter

시작 값에서 끝 값까지 세는 숫자입니다. 머신 이름: az_counter.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Start start number 0 Number 세기를 시작하는 숫자입니다.
End end number 100 Number 세어 올라가는 목표 숫자입니다.
Font size fontsize slider 30 0 to 200, step 1 숫자의 글꼴 크기로, 픽셀 단위입니다.
Speed speed slider 2000 0 to 10000, step 1 세기가 끝나는 데 걸리는 시간을 밀리초 단위로 지정합니다.
Thousands separator seperator radio empty (None) empty (None), , (Comma), . (Dot), a space (Space) 끝 숫자의 천 단위를 구분합니다. 코드는 매개변수를 이렇게 표기합니다.
Prefix prefix text empty Any text 숫자 앞의 문자입니다(예: $).
Suffix postfix text empty Any text 숫자 뒤의 문자입니다(예: %).

Circle counter

선택적인 텍스트, 정보 줄, 중앙 아이콘이 있는 원형 진행 표시기입니다. 머신 이름: az_circle_counter.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Foreground color fgcolor colour #333333 Any colour 진행 호의 색상입니다.
Background color bgcolor colour #999999 Any colour 호 뒤쪽 트랙의 색상입니다.
Fill color fill colour none Any colour 원 안쪽의 채우기 색상입니다.
Percent percent slider 50 0 to 100, step 1 진행 값입니다.
Dimension dimension slider 250 100 to 500, step 1 원의 지름으로, 픽셀 단위입니다.
Foreground width width slider 10 1 to 100, step 1 호의 선 두께입니다.
Animation animation toggle on yes when on 호에 애니메이션을 적용합니다.
Animation duration duration slider 1500 0 to 5000, step 1 밀리초 단위입니다. animation이 켜져 있을 때 표시됩니다.
Animation delay delay slider 0 0 to 5000, step 1 밀리초 단위입니다. animation이 켜져 있을 때 표시됩니다.
Animation in-viewport in_viewport toggle on yes when on 요소가 화면에 스크롤되어 들어오면 애니메이션을 시작합니다. animation이 켜져 있을 때 표시됩니다.

다음은 Circle content 아코디언의 필드입니다. Show progress 뒤의 모든 필드는 해당 항목이 꺼져 있을 때만 표시됩니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Show progress show_progress toggle off yes when on 직접 입력한 텍스트와 아이콘 대신 백분율을 표시합니다.
Text text text empty Any text 중앙 텍스트입니다.
Font size fontsize slider 16 0 to 100, step 1 중앙 텍스트 크기로, 픽셀 단위입니다.
Text color text_color colour none Any colour 중앙 텍스트 색상입니다.
Info info text empty Any text 보조 정보 줄입니다.
Info font size info_fontsize slider 14 0 to 100, step 1 정보 줄 크기로, 픽셀 단위입니다.
Info color info_color colour none Any colour 정보 줄 색상입니다.
Icon icon icon empty Icon from the sets your builder profile allows 중앙 아이콘입니다.
Icon size icon_size slider 16 0 to 100, step 1 아이콘 글꼴 크기로, 픽셀 단위입니다.
Icon color icon_color colour none Any colour 아이콘 색상입니다.

Progress bar

라벨이 있는 가로 Bootstrap 진행 표시줄입니다. 머신 이름: az_progress_bar.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Label label text Click to add text Any text 막대 안의 텍스트입니다.
Progress width slider 50 0 to 100, step 1 백분율로 표시되는 진행률입니다.
Bar height height slider 45 0 to 100, step 1 막대 높이로, 픽셀 단위입니다.
Back color bgcolor colour #e9ecef Any colour 막대 뒤쪽 트랙 색상입니다.
Front color fcolor colour #284ed9 Any colour 막대 색상입니다.
Grow animation grow_animation toggle off yes when on 막대를 0에서 해당 값까지 자라나는 애니메이션으로 표시합니다.
Stripes options checkboxes none ticked progress-bar-striped (Add striped pattern to bar), progress-bar-animated (Animate stripes (requires striped pattern)) 줄무늬 패턴과 움직이는 줄무늬입니다.

Countdown timer

날짜, 하루 중 시각 또는 반복 간격의 종료까지 카운트다운합니다. 머신 이름: az_countdown.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Countdown style countdown_style radio plain (Plain) plain (Plain), style1 (Grid), style6 (3D flip), style9 (Disc), style10 (Airport style), style12 (Transparent) 시각적 스타일입니다.
Date / Time Limitations counter_scope radio date (Specify date only) date (Specify date only), date_time (Specify date and time), repeating (Specify time only (repeating every day)), resetting (Resetting counter (set interval up to 24 hours)) 타이머가 카운트다운하는 대상입니다.
Date date datetime empty Date in d.m.Y format 목표 날짜입니다. counter_scope이 date일 때 표시됩니다.
Date / Time date_time datetime empty Date in d.m.Y format plus hour (H) 목표 날짜와 시각입니다. counter_scope이 date_time일 때 표시됩니다.
Time time datetime empty Hour (H) 매일의 목표 시각입니다. counter_scope이 repeating일 때 표시됩니다.
Reset in hours reset_hours slider 0 0 to 24, step 1 간격의 시간입니다. counter_scope이 resetting일 때 표시됩니다.
Reset in minutes reset_minutes slider 0 0 to 60, step 1 간격의 분입니다. counter_scope이 resetting일 때 표시됩니다.
Reset in seconds reset_seconds slider 0 0 to 60, step 1 간격의 초입니다. counter_scope이 resetting일 때 표시됩니다.
Page referrer referrer link empty URL or internal path 카운트다운이 끝나면 열리는 페이지입니다. counter_scope이 repeating 또는 resetting일 때 표시됩니다.
Automatic restart restart toggle off yes when on 간격이 끝나면 다시 시작합니다. counter_scope이 resetting일 때 표시됩니다.
Display options display checkboxes all five ticked years (Show remaining years), days (Show remaining days), hours (Show remaining hours), minutes (Show remaining minutes), seconds (Show remaining seconds) 표시할 단위입니다.

Marquee

멈추지 않고 스크롤되는 가로 이미지 스트립입니다. 머신 이름: az_marquee.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Images images images Three copies of the DXPR logo Images from the media browser 스트립의 이미지입니다.
Speed speed slider 3 1 to 5, step 1 스크롤 속도로, 1이 가장 느리고 5가 가장 빠릅니다.
Height height slider 50 10 to 200, step 1 이미지 높이로, 픽셀 단위입니다.
Image layout image_layout radio fh (Fixed height images) fh (Fixed height images), fw (Fixed width images) 이미지가 높이와 너비 중 무엇을 공유하는지 지정합니다.
Image width width slider 400 50 to 500, step 1 이미지 너비로, 픽셀 단위입니다. image_layout이 fw일 때 표시됩니다.
Gray scale grayscale toggle off apply when on 이미지를 흑백으로 표시합니다.
Fade edges fade_edges toggle off apply when on 스트립의 양쪽 가장자리를 흐리게 합니다.

다음은 SEO 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Alt attribute alt text empty Any text 이미지의 대체 텍스트입니다.
Title attribute title text empty Any text 이미지의 title 속성입니다.

Map

주소의 삽입된 Google 지도입니다. 머신 이름: az_map.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Address address text empty Street address 표시할 위치입니다.
Map width width text 100% CSS length, for example 100px or 50% 숫자만 입력하면 픽셀로 계산합니다.
Map height height text 400px CSS length, for example 100px 숫자만 입력하면 픽셀로 계산합니다.

Icon

선택적으로 연결되는 단일 아이콘입니다. 머신 이름: az_icon. 모듈은 14개의 아이콘 세트를 포함합니다. 테마와 모듈이 세트를 추가할 수 있으며, 빌더 프로필에서 사용자가 볼 수 있는 세트를 제한할 수 있습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Icon icon icon bi bi-heart Icon from the sets your builder profile allows 아이콘입니다.
Size size radio fa-lg (Large) normal (Normal), fa-lg (Large), fa-2x (Extra Large (2x)), fa-3x (Very Large (3x)), fa-4x (Huge (4x)), fa-5x (Gigantic (5x)) 아이콘 크기입니다.
Link link link empty URL or internal path 아이콘 링크입니다.
Link target link_target radio _self (Same window) _self (Same window), _blank (New window) 링크가 열리는 위치입니다. link가 설정되면 표시됩니다.

다음은 Icon utilities 아코디언의 필드입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Style st_style radio empty (None) empty (None), stbe-util-icon-rounded (Rounded), stbe-util-icon-circle (Circle), stbe-util-icon-square (Square) 배경 모양입니다.
Icon animation animation radio empty (No) empty (No), fa-spin (Spin), fa-pulse (Pulse) 아이콘 애니메이션입니다.
Icon orientation orientation radio empty (Normal) empty (Normal), fa-rotate-90 (Rotate 90), fa-rotate-180 (Rotate 180), fa-rotate-270 (Rotate 270), fa-flip-horizontal (Flip horizontal), fa-flip-vertical (Flip vertical) 회전 또는 뒤집기입니다.

Divider

가로 구분선입니다. 머신 이름: az_separator.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Color bgcolor colour none Any colour 선 색상입니다.
Thickness thickness radio auto (Theme default) auto (Theme default), custom (Custom thickness) 테마 두께를 재정의할지 지정합니다.
Thickness custom_thickness slider 3 0 to 20, step 1 선 두께로, 픽셀 단위입니다. thickness가 custom일 때 표시됩니다.
Length width radio auto (Theme default) auto (Theme default), custom (Custom width) 테마 길이를 재정의할지 지정합니다.
Width custom_width slider 100 0 to 500, step 10 선 길이로, 픽셀 단위입니다. 0이면 전체 너비로 렌더링됩니다. width가 custom일 때 표시됩니다.
Align align radio left (Left) left (Left), center (Center), right (Right) 가로 정렬입니다. width가 custom일 때 표시됩니다.

레이아웃 요소

Section

로우를 담는 최상위 컨테이너로, 전체 너비, 전체 높이, 배경 효과 옵션이 있습니다. 머신 이름: az_section. 새 섹션에는 클래스 py-5가 HTML classes에 들어 있습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Full width fluid toggle off yes when on 전체 너비 컨테이너(container-fluid)를 사용합니다.
100% height fullheight toggle off yes when on 섹션이 뷰포트 높이를 채웁니다.
Vertical centering vertical_centering toggle off yes when on 콘텐츠를 세로 중앙에 배치합니다.

다음은 Background effects 아코디언의 필드입니다. Background effect를 제외한 모두는 해당 값에 종속되며, Description 열에 나와 있습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Background effect effect radio empty (Simple image) empty (Simple image), fixed (Fixed image), parallax (Parallax image), gradient (Gradient), youtube (YouTube video) 배경 효과입니다.
Parallax speed parallax_speed slider 0 0 to 100, step 1 패럴랙스 스크롤 속도입니다. effect가 parallax일 때 표시됩니다.
Parallax mode parallax_mode radio fixed (Fixed) fixed (Fixed), scroll (Local) 이미지의 배경 고정 방식입니다. effect가 parallax일 때 표시됩니다.
Disable on mobile parallax_mobile_disable toggle off yes when on 너비가 481px 미만인 화면에서 패럴랙스를 끕니다. effect가 parallax일 때 표시됩니다.
Start color gradient_start_color colour none Any colour 그러데이션 시작 색상입니다. effect가 gradient일 때 표시됩니다.
End color gradient_end_color colour none Any colour 그러데이션 끝 색상입니다. effect가 gradient일 때 표시됩니다.
Gradient direction gradient_direction slider 180 1 to 360, step 1 그러데이션 각도로, 도 단위입니다. effect가 gradient일 때 표시됩니다.
Start position gradient_start slider 0 0 to 100, step 1 시작 색상의 위치로, 퍼센트 단위입니다. effect가 gradient일 때 표시됩니다.
End position gradient_end slider 100 0 to 100, step 1 끝 색상의 위치로, 퍼센트 단위입니다. effect가 gradient일 때 표시됩니다.
Video options video_options checkboxes none ticked disMobile (Disable on mobile devices), loop (Loop), audio (Unmute (Not reliable when auto-playing due to recent browser policy updates)), noCrop (Disable cropping out player), resizeSection (Resize section to match video), showControls (Show controls) YouTube 배경 옵션입니다. effect가 youtube일 때 표시됩니다.
YouTube video URL video_youtube text empty YouTube URL YouTube 배경 동영상입니다. effect가 youtube일 때 표시됩니다.
Start time in seconds video_start text 0 Seconds 동영상의 시작 시간입니다. effect가 youtube일 때 표시됩니다.
Stop time in seconds video_stop text 0 Seconds 동영상의 종료 시간입니다. effect가 youtube일 때 표시됩니다.

Row

컬럼을 담는 Bootstrap 그리드 로우입니다. 새 로우는 절반 너비 컬럼 두 개로 시작합니다. 머신 이름: az_row.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Equal-height columns equal toggle off yes when on 모든 컬럼의 높이를 동일하게 합니다.
Mirror row reverse_horizontal toggle off yes when on 너비 768px 이상의 화면에서 컬럼 순서를 뒤집습니다.

Column

로우 안의 컬럼입니다. 로우가 컬럼을 만들므로 Column은 요소 선택기에 없습니다. 머신 이름: az_column.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Vertical centering vertical_centering toggle off yes when on 컬럼 콘텐츠를 세로 중앙에 배치합니다.

Tabs

전환 가능한 탭 패널의 컨테이너입니다. 각 탭은 Add tab 컨트롤로 추가합니다. 머신 이름: az_tabs.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Tab direction az_dirrection radio empty (Default) empty (Default), tabs-left (Left), tabs-right (Right) 탭 표시줄의 위치입니다. 코드는 매개변수를 이렇게 표기합니다.
Style tab_style radio empty (Default) empty (Default), modern (Modern), accordion (Accordion) 탭 스타일입니다.
Mobile friendly responsive toggle on yes when on 작은 화면에서 탭을 접을 수 있는 형태로 표시합니다.

각 탭(az_tab)에는 자체 설정이 있습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Tab title title text Title Any text 탭의 라벨입니다.
Tab description subtitle ckeditor empty HTML 활성 탭에 표시되는 짧은 부제(선택 사항)입니다.

Collapse panel

접을 수 있는 패널들의 컨테이너입니다. 각 패널은 Add toggle 컨트롤로 추가합니다. 머신 이름: az_accordion.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Collapse collapsed toggle off yes when on 모든 패널이 닫힌 상태로 시작합니다. 꺼져 있으면 첫 번째 패널이 열린 상태로 시작합니다.
Expand icon expandicon radio empty (None) empty (None), az-accordion--icon-plusminus (+), az-accordion--icon-arrow (﹀) 각 패널 제목 옆의 아이콘입니다.

각 패널(az_toggle)에는 자체 설정이 있습니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Toggle title title text Title Any text 패널 제목입니다.

슬라이드의 컨테이너입니다. 각 슬라이드는 다른 요소를 담고 Add slide 컨트롤로 추가합니다. 슬라이드(az_slide)에는 자체 필드가 없습니다. 머신 이름: az_carousel.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Frames per slide items slider 1 1 to 10, step 1 나란히 표시되는 슬라이드 수입니다. 좁은 화면에서는 더 적게 표시됩니다.
Disable auto-play autoplay toggle off yes when on 슬라이드가 자동으로 넘어가지 않게 합니다.
Auto-play interval interval slider 5000 1000 to 20000, step 100 슬라이드 간격을 밀리초 단위로 지정합니다.
Stop on hover stoponhover toggle off yes when on 캐러셀 위에 포인터가 있는 동안 자동 재생을 일시 정지합니다.

다음은 Dots 아코디언의 필드입니다. Dots navigation 뒤의 모든 필드는 해당 항목이 켜져 있을 때만 표시됩니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Dots navigation pagination toggle on yes when on 슬라이드마다 도트 하나를 표시합니다.
Dots orientation pagination_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) 도트 위치입니다.
Dot shape pagination_shape radio bar (Bar) bar (Bar), circle (Circle), square (Square), triangle (Triangle) 도트 모양입니다.
Active dot transformation pagination_transform radio empty (None) empty (None), growTaller (Grow taller), growWider (Grow wider), scaleUp (Scale up) 활성 도트의 효과입니다.
Dot color pagination_color colour none Any colour 도트 색상입니다.
Active dot color pagination_active_color colour none Any colour 활성 도트 색상입니다.

다음은 Next/Previous 아코디언의 필드입니다. Next/Previous 뒤의 모든 필드는 해당 항목이 켜져 있을 때만 표시됩니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Next/Previous navigation toggle off yes when on 다음/이전 화살표를 표시합니다.
Orientation navigation_orientation radio outside (Outside slider) outside (Outside slider), inside (Inside slider) 화살표 위치입니다.
Dot shape navigation_shape radio empty (No background) empty (No background), circle (Circle), square (Square), bar (Bar) 화살표 배경 모양입니다. 모달에서도 Dot shape으로 표시됩니다.
Icon color navigation_icon_color colour none Any colour 화살표 아이콘 색상입니다.
Icon hover color navigation_icon_hover_color colour none Any colour 화살표 아이콘 호버 색상입니다.
Background color navigation_background_color colour none Any colour 화살표 배경 색상입니다.
Background hover color navigation_background_hover_color colour none Any colour 화살표 배경 호버 색상입니다.
Outside navigation position navigation_position select adjacent (Adjacent) adjacent (Adjacent), topCenter (Top center), topLeft (Top left), topRight (Top right), bottomCenter (Bottom center), bottomLeft (Bottom left), bottomRight (Bottom right) 슬라이더 바깥쪽 화살표의 위치입니다.

Positioned layers

자식 요소를 자유롭게 드래그하고 크기를 조절하는 캔버스입니다. Positioned layers 요소는 다른 Positioned layers 요소 안에 중첩할 수 없습니다. 머신 이름: az_layers. 각 자식은 위치를 숨겨진 매개변수에 저장합니다. pos_left, pos_top, pos_width, pos_height, pos_zindex입니다.

라벨 매개변수 컨트롤 기본값 허용 값 설명
Width width text 100% CSS length, for example 100px or 50% 캔버스 너비입니다. 숫자만 입력하면 픽셀로 계산합니다.
Height height slider 500 0 to 10000, step 1 캔버스 높이로, 픽셀 단위입니다.
Responsive responsive toggle off yes when on 사용 가능한 너비에 따라 캔버스 높이와 글꼴 크기를 조절합니다.

다음 단계