웹사이트에 대한 효과적인 가격 섹션을 디자인하는 것은 잠재 고객이 구매 결정을 내리고 전반적인 마케팅 전략을 세우도록 안내하는 데 필수적입니다.
웹사이트에서 이 섹션을 사용하여 제공되는 모든 서비스의 가격을 표시하고 클릭 유도 문구 버튼을 사용하여 고객을 결제 페이지로 리디렉션할 수 있습니다.
이 기사에는
가격 섹션 추가
- 페이지에 섹션을 추가할 수 있습니다. 이미 존재하는 페이지에 섹션을 추가하거나 새 페이지 만들기 귀하의 웹사이트 내에서.
- 귀하의 페이지에서은 클릭 파란색 + 아이콘 새 섹션을 추가하려면
- 이제 섹션 카테고리 왼쪽에
- 다음으로 스크롤하십시오. 가격 (1) 섹션을 클릭하고 클릭하세요. 다양한 메뉴를 선택할 수 있는 화면이 나타납니다. 레이아웃 (2) 로고 섹션.
- 섹션 레이아웃을 선택하고 클릭하여 페이지에 추가하십시오.
가격 섹션 관리
섹션을 추가한 후:
- 온 클릭 가격 편집 (1) 버튼을 열려면 가격 섹션 설정.
목록 항목 추가 및 편집
목록 항목 추가
- 온 클릭 아이템 추가 (1) 버튼을 눌러 목록에 새 항목을 추가합니다.
- 복제 or . (2) 목록 항목.
- 편집 섹션 제목 (3) 섹션의.
목록 항목 편집
편집할 목록 항목을 클릭합니다. 특정 목록 항목의 편집 옵션이 열립니다.
여기에서 다음을 수행 할 수 있습니다.
- 1차 및 XNUMX차 이미지 업로드/제거 (XNUMX)
당신은 XNUMX 차 이미지 함께 기본 이미지 각 목록 항목에 대해. 사용자가 항목 위에 마우스를 올리면 보조 이미지가 표시되어 기본 이미지를 대체합니다. 또한 다음을 설정할 수 있습니다. 이미지 강조 색상, 이미지에 호버하면 표시됩니다. - 추가 할 Title (2), 자막 (3), 및 설명 (4) 목록 항목의.
- 선택한 레이아웃에 따라 특정 목록 항목에서 자막 및 설명 옵션을 찾지 못할 수 있습니다.
설명을 추가하기 전에 확인하십시오. 이 문서를 참조하십시오.
5. 클릭 시 액션 – 제목 및 이미지
개별 항목의 클릭 동작을 사용자 정의할 수 있습니다. 가격 섹션. 사용 가능한 옵션은 다음과 같습니다.
- 링크로 이동
이 옵션을 선택하면 다음이 열립니다. 링크 빌더, 이 항목에 하이퍼링크를 추가할 수 있습니다. 이 링크는 사용자를 웹사이트 내의 다른 페이지나 외부 URL로 안내할 수 있습니다. 더 많이 알아라. about 링크 빌더. - 라이트박스에서 열기
이 옵션은 항목을 확대하여 표시합니다. 라이트 박스 클릭하면 보기가 나타납니다. 이 모드에서는 부제 기술설명 해당 항목과 관련된 내용은 그리드 보기에는 나타나지 않지만 라이트박스 모드에서는 표시됩니다. - 조치 없음
이 옵션을 선택하면 항목을 클릭할 수 없게 됩니다. 선택하면 항목을 클릭해도 아무런 동작이 트리거되지 않습니다.
6. 새 창에서 링크 열기: 다음에서 열리도록 링크 설정 새 탭이나 같은 탭에서. 이것은 다음과 같은 경우에만 표시됩니다. 링크로 이동 옵션이 선택되었습니다 클릭 시 동작 메뉴를 선택합니다.
7. 버튼 및 링크: 모든 유형 추가 (링크) 목록 항목에. 버튼/이미지 링크/소셜 아이콘/텍스트 링크를 추가할 수 있습니다. 상세보기.
8. 카드 스타일 오버라이드
섹션에서 글로벌 카드 스타일 설정을 재정의할 수 있습니다. 스타일 설정 가격 섹션에서 각 항목의 카드를 개별적으로 맞춤 설정할 수 있습니다. 이렇게 하면 목록 항목마다 고유한 스타일을 적용하여 더욱 효과적으로 맞춤 설정할 수 있습니다.
상세보기 동적 섹션의 카드 옵션에 대한 정보입니다.
9. 모양 스타일 재정의
가격 섹션에서 재정의 옵션을 사용하면 각 이미지에 개별적으로 다른 모양을 지정하여 모든 항목의 시각적 스타일을 더욱 효과적으로 제어할 수 있습니다. 상세보기 셰이프 마스크에 대하여.
10. 저장: 사용자 지정을 한 후 변경 사항을 저장합니다.
시퀀싱 목록 항목
목록 항목의 순서를 다음과 같이 쉽게 변경할 수 있습니다. 드래그 앤 드롭 그들.
실제 가격 항목 목록 순서 지정을 참조하세요.
가격 섹션 요소 관리
가격 섹션에는 다음이 포함됩니다. 요소 탭 섹션 내의 다양한 요소의 가시성을 쉽게 관리할 수 있게 해줍니다. 간단한 토글 스위치를 사용하면 요소 자체를 삭제하거나 수정하지 않고도 특정 요소를 활성화하거나 비활성화할 수 있습니다.
- 온 클릭 가격 편집 (1) 버튼.
- 선택 요소 (2) 탭.
- 변경 사항을 적용한 후에는 찜하기 (3) 버튼.
섹션 옵션
- 헤드라인 표시: 가격 섹션의 헤드라인 표시 여부를 설정합니다.
- 단추 표시: 버튼이 섹션 수준에 표시되는지 여부를 제어합니다.
아이템 옵션
- 이미지 표시: 이미지의 표시 여부를 전환합니다.
- 제목 표시: 제목 표시 여부를 제어합니다.
- 자막 표시: 자막을 활성화하거나 비활성화합니다.
- 설명 표시: 항목 설명의 가시성을 관리합니다.
- 단추 표시: 개별 항목에 대한 버튼을 표시할지 여부를 결정합니다.
레이아웃 관리
- 온 클릭 가격 편집 버튼을 눌러 섹션 편집 패널을 엽니다.
- 선택 레이아웃 탭.
- 여기에서는 페이지에 섹션을 추가한 후에도 섹션의 레이아웃을 쉽게 변경할 수 있습니다.
레이아웃을 변경하면 상단에 섹션 관련 레이아웃이 표시됩니다.
이 외에도 다음 아래의 다른 섹션에서 레이아웃을 선택할 수 있는 옵션도 있습니다. 더 많은 레이아웃 표제.
스타일 가격 섹션
다양한 스타일 옵션을 사용하여 가격 섹션의 여러 부분을 맞춤 설정할 수 있습니다. 스타일 옵션으로 이동하려면 가격 편집 (1) 버튼.
- 사이드바에서 스타일 (2) 탭.
섹션에 대한 여러 스타일 옵션이 있습니다.
옵션을 표시
- 로 선택 항목 표시 in 행과 열 or 회전 목마
- 당신이 선택한 경우 행과 열 옵션을 선택하면 목록 항목이 행과 열로 정렬됩니다. 이 경우 행과 열의 수를 지정해야 합니다.
- 당신이 선택한 경우 회전 목마 옵션을 선택하면 목록 항목이 슬라이드쇼로 표시됩니다. 더 많이 알아라..
- 설정 열 수 섹션에 대한 열은 1개에서 10개까지 선택할 수 있습니다.
- 지정 열 사이의 공간 목록 항목 중.
- 지정 행 사이의 공백 목록 항목 중.
1단계에서 회전판 옵션을 선택한 경우 다음과 같은 추가 옵션이 표시됩니다.
- 부드러운 스크롤 활성화: 회전형 리스트 내에서 항목을 지속적으로 스크롤하여 원활하고 시각적으로 매력적인 경험을 제공합니다.
- 자동 슬라이드: 사용자 상호 작용 없이 슬라이드를 자동으로 회전합니다.
- 자동 재생 진행률 표시: 자동재생이 활성화되어 있는 동안 진행률 표시기를 표시하여 가시성을 높입니다.
- 자동 재생 지연: 자동 재생이 활성화되어 있을 때 각 슬라이드 전환 사이의 시간 간격을 설정합니다.
- 캐러셀 루프: 슬라이드를 연속적으로 반복할 수 있으므로 마지막 슬라이드 이후에 회전형 슬라이드가 원활하게 다시 시작됩니다.
- 캐러셀 컨트롤: 선택 탐색 컨트롤. 컨트롤 없음, 화살표 - 하단 중앙/오른쪽 상단/오른쪽 하단, 셰브론, 점 및 수평 스크롤 중에서 선택할 수 있습니다.
- 페이드 에지: 회전목마의 가장자리에 미묘한 페이딩 효과를 적용합니다. 뷰에 들어오거나 나갈 때 이미지를 부드럽게 혼합하여 사용자 경험을 향상시킵니다.
모바일 디스플레이
- 수를 설정 그리드 기둥 모바일 장치용. 최대 3개 열까지 설정할 수 있습니다.
- 정의 간격 그리드 사이(픽셀 단위).
조정
- 정렬 이미지를 수평으로 섹션에 있습니다. 왼쪽, 오른쪽 또는 가운데 정렬을 설정할 수 있습니다.
- 정렬 텍스트를 수평으로 섹션에 있습니다. 왼쪽, 오른쪽 또는 가운데 정렬을 설정할 수 있습니다.
- 정렬 콘텐츠를 세로로 섹션에 정렬할 수 있습니다. 상단, 중앙, 하단 정렬을 설정할 수 있습니다.
- 선택 콘텐츠 순서 즉, 먼저 표시될 목록 항목의 이미지 또는 관련 텍스트입니다.
텍스트 크기
- 온 클릭 텍스트 스타일 변경 방문하기 버튼 디자인 섹션 글꼴 크기와 스타일을 관리하세요.
- 설정 Title 섹션의 목록 항목에 대한 글꼴 스타일.
- 설정 부제 섹션의 목록 항목에 대한 글꼴 스타일.
- 기본값 설정 기술설명 섹션의 목록 항목에 대한 글꼴 스타일.
- 이 옵션을 활성화하려면 어떤 숫자든 애니메이션 효과 적용 현재의 Title 부제 입력 필드입니다. 이 기능을 켜면 숫자 값이 동적인 카운팅 애니메이션과 함께 표시되어 시각적으로 더욱 매력적입니다.
간격
- 지정 이미지 폭 목록 항목의 경우.
- 지정 콘텐츠 너비 목록 항목에 대해.
- 지정 섹션 제목 아래 공간 px에서.
- 지정 이미지 아래 공간 목록 항목의 (%).
- 지정 제목 아래 공간 목록 항목의 (%).
- 지정 자막 아래 공간 목록 항목의 (%).
섹션 제목
- 수평 정렬 섹션 헤드라인 텍스트입니다. 왼쪽, 가운데, 오른쪽으로 설정할 수 있습니다.
- 활성화/비활성화 분할기 섹션 제목과 섹션 내용 사이.
- 설정 디바이더의 두께 (픽셀 단위).
- 지정 구분선 색상 색상 선택기에서.
- 선택 구분선 스타일 드롭 다운에서
- 설정 헤드라인 너비 섹션 제목이 표시되는 너비를 정의합니다. 최소 50%부터 시작합니다.
이미지
- 선택 I마법사 자르기 목록 항목의 경우. 이미지를 정사각형, 원형, 가로, 세로, 원본으로 설정할 수 있습니다.
- 목록 항목의 각 측면에 대해 공통 모서리 반경 또는 다른 모서리 반경을 갖도록 선택하고 C반경 목록 항목 이미지 중. 더 많이 알아라..
사용법 - 모서리 반경 필드에서 다양한 모양의 목록 항목 이미지를 만들 수 있습니다. 여기서 500px를 지정하면 이미지가 원 모양으로 표시됩니다.
- 분할 모서리를 선택한 경우 각 모서리에 대해 서로 다른 모서리 반경을 설정할 수 있습니다.
셰이프 마스크
- 모양 마스크: 이 토글을 활성화하면 가격 섹션의 이미지에 모양 마스크를 적용할 수 있습니다. 활성화하면 선택한 모양이 이미지를 해당 모양에 시각적으로 잘립니다.
- 모양 선택: 미리 정의된 다양한 모양 중에서 선택하여 이미지에 적용할 수 있습니다. 둥근 모양, 마름모 모양, 물방울 모양 등 독특한 모양으로 이미지를 표시하여 콘텐츠를 창의적으로 꾸밀 수 있습니다.
- 뻗기: 이 옵션을 활성화하면 선택한 도형이 이미지 컨테이너에 더 잘 맞도록 늘어납니다. 이렇게 하면 도형이 사용 가능한 공간에 비례하여 채워져 다양한 화면 크기에 맞춰 시각적 정렬이 향상됩니다.
이미지 호버
- 선택 이미지 호버 색상 너는 악센트 색상 또는 될 지정. 선택했다면 악센트 색상을 지정한 다음 불투명각 항목의 악센트 색상을 지정할 수 있습니다. 항목 편집 패널.
- 당신이 선택한 경우 색상 지정 옵션을 설정한 다음 오버레이 색상 및 불투명도.
- 설정 오버레이 텍스트 색상 호버하면 표시됩니다.
- 로 선택 목록 항목 이미지에 애니메이션 적용 마우스를 올리면 예를 클릭합니다. 라이브 페이지에서 이 기능을 확인하십시오..
- 선택 애니메이션 스타일 커서를 이미지 위로 가져가면 이미지가 표시됩니다.
- 허용할지 여부를 선택하세요 이미지 전환 호버 여부.
- 를 선택 전환 스타일 호버 전환을 위해. 사용 가능한 옵션은 페이드와 플립입니다.
이미지 테두리
- 테두리 활성화 / 비활성화 토글을 전환하여 이미지 주변을 둘러보세요.
- 다음을 선택하세요. 공통 국경 이미지의 모든 면에 표시하거나 테두리를 별도로 각 측면에 대해.
- 지정 폭 국경의. 0으로 설정하면 테두리가 나타나지 않습니다. 이미지의 각 측면에 대해 개별적으로 테두리 너비를 설정할 수도 있습니다.
- 선택 테두리 색 색상 선택기에서.
- 선호하는 것을 선택하십시오 테두리 스타일 드롭 다운에서
- 결정 모바일의 테두리 너비 데스크탑용으로 선택한 너비에 맞춰 정렬합니다.
카드
- 방법을 참조하십시오 카드를 관리합니다.
그림자
- 디스플레이 – 항상 목록 항목 뒤에 그림자를 표시하거나 가리키기만 하면 표시되도록 선택합니다.
- 스타일 – 기존 사전 설정에서 선택하거나 사용자 지정 그림자를 만듭니다.
사용자 정의 옵션을 선택한 경우 다음을 방문하십시오. 상자 그림자 생성기 사용자 지정 그림자를 만듭니다. 마지막으로 복사 붙여넣기 상자 그림자 CSS. - 사전 설정 옵션을 선택한 경우 그림자 스타일 선택 드롭 다운에서
버튼 및 링크
- 방법을 참조하십시오 스타일링을 관리하기 위해 버튼 및 링크.
- 찜하기 모든 스타일이 변경됩니다.
