타임라인 섹션

이 타임라인 섹션을 통해 사용자는 프로젝트 이정표와 작업을 시간순으로 표시할 수 있습니다.

이는 프로젝트 진행 상황을 강조하고, 신청 프로세스를 설명하고, 수상과 같은 성과를 보여주고, 기타 사용자 정의 가능한 옵션을 제공하는 데 특히 유용합니다.

정보를 타임라인 형식으로 표시하는 체계적이고 시각적으로 매력적인 방법을 제공하여 사용자 경험과 참여를 향상시킵니다.

이 기사는 다음 주제들로 구성되어 있습니다 :


페이지에 섹션 추가

  • 페이지에 섹션을 추가할 수 있습니다. 이미 존재하는 페이지에 섹션을 추가하거나 새 페이지 만들기 귀하의 웹사이트 내에서.
  • 귀하의 페이지에서은 클릭 파란색 + 아이콘 추가 새 섹션 귀하의 페이지에.

  • 이제 섹션 카테고리 왼쪽에
  • 온 클릭 연혁 선택할 수 있는 탭(1) 다른 레이아웃 타임라인 (2) 섹션의
  • 이제 섹션이 페이지에 추가됩니다. 클릭 찜하기 (3) 버튼을 눌러 변경 사항을 유지합니다.


목록 항목 추가 및 편집

목록 항목 추가

섹션을 추가한 후:

  • 온 클릭 타임라인 편집 (1) 버튼을 눌러 목록 항목 패널을 엽니다.

  • 온 클릭 항목 추가(2) 버튼을 눌러 새 목록 항목을 추가합니다.
  • 당신은 선택할 수 있습니다 복제 또는 삭제 (3) 목록 항목.
  • 지정 표제 (4) 타임라인 섹션의 경우.

목록 항목 편집

편집할 목록 항목을 클릭합니다. 특정 목록 항목의 편집 옵션이 열립니다.

여기에서 다음을 수행 할 수 있습니다.

  • 1차 및 XNUMX차 이미지 업로드/제거 (XNUMX)
    당신은 XNUMX 차 이미지 함께 기본 이미지 각 목록 항목에 대해. 사용자가 항목 위에 마우스를 올리면 보조 이미지가 표시되어 기본 이미지를 대체합니다. 또한 다음을 설정할 수 있습니다. 이미지 강조 색상, 이미지에 호버하면 표시됩니다.
  • 추가 할 Title (2), 자막 (3), 및 설명 (4) 목록 항목의.
  • 선택한 레이아웃에 따라 특정 목록 항목에서 자막 및 설명 옵션을 찾지 못할 수 있습니다.

주의 사항

설명을 추가하기 전에 확인하십시오.  문서를 참조하십시오.

5. 클릭 시 액션 – 제목 및 이미지

개별 항목의 클릭 동작을 사용자 정의할 수 있습니다. 연혁 섹션. 사용 가능한 옵션은 다음과 같습니다.

  • 링크로 이동
    이 옵션을 선택하면 다음이 열립니다. 링크 빌더, 이 항목에 하이퍼링크를 추가할 수 있습니다. 이 링크는 사용자를 웹사이트 내의 다른 페이지나 외부 URL로 안내할 수 있습니다. 더 많이 알아라. about 링크 빌더.
  • 라이트박스에서 열기
    이 옵션은 항목을 확대하여 표시합니다. 라이트 박스 클릭하면 보기가 나타납니다. 이 모드에서는 부제    기술설명 해당 항목과 관련된 내용은 그리드 보기에는 나타나지 않지만 라이트박스 모드에서는 표시됩니다.
  • 조치 없음
    이 옵션을 선택하면 항목을 클릭할 수 없게 됩니다. 선택하면 항목을 클릭해도 아무런 동작이 트리거되지 않습니다.

6. 새 창에서 링크 열기: 다음에서 열리도록 링크 설정 새 탭이나 같은 탭에서. 이것은 다음과 같은 경우에만 표시됩니다. 링크로 이동 옵션이 선택되었습니다 클릭 시 동작 메뉴를 선택합니다.

7. 버튼 및 링크: 모든 유형 추가 (링크) 목록 항목에. 버튼/이미지 링크/소셜 아이콘/텍스트 링크를 추가할 수 있습니다. 상세보기.

8. 카드 스타일 오버라이드

섹션에서 글로벌 카드 스타일 설정을 재정의할 수 있습니다. 스타일 설정 타임라인 섹션에서 각 항목의 카드를 개별적으로 사용자 지정할 수 있습니다. 이렇게 하면 목록 항목마다 고유한 스타일을 적용하여 더욱 효과적으로 사용자 지정할 수 있습니다.

상세보기 동적 섹션의 카드 옵션에 대한 정보입니다.

9. 모양 스타일 재정의

타임라인 섹션에서 각 이미지에 개별적으로 다른 모양을 지정하려면 재정의 옵션을 사용하면 모든 항목의 시각적 스타일을 더 효과적으로 제어할 수 있습니다. 상세보기 셰이프 마스크에 대하여.

10. 저장: 사용자 지정을 한 후 변경 사항을 저장합니다.


시퀀스 목록 항목


타임라인 섹션의 요소 관리

타임라인 섹션에는 다음이 포함됩니다. 요소 탭 섹션 내의 다양한 요소의 가시성을 쉽게 관리할 수 있게 해줍니다. 간단한 토글 스위치를 사용하면 요소 자체를 삭제하거나 수정하지 않고도 특정 요소를 활성화하거나 비활성화할 수 있습니다.

  • 온 클릭 타임라인 편집 (1) 버튼.

  • 선택 요소 (2) 탭.
  • 변경 사항을 적용한 후에는 찜하기 (3) 버튼.

섹션 옵션

  1. 헤드라인 표시: 타임라인 섹션의 헤드라인 표시 여부를 설정합니다.
  2. 단추 표시: 버튼이 섹션 수준에 표시되는지 여부를 제어합니다.

아이템 옵션

  1. 이미지 표시: 이미지의 표시 여부를 전환합니다.
  2. 제목 표시: 제목 표시 여부를 제어합니다.
  3. 자막 표시: 자막을 활성화하거나 비활성화합니다.
  4. 설명 표시: 항목 설명의 가시성을 관리합니다.
  5. 단추 표시: 개별 항목에 대한 버튼을 표시할지 여부를 결정합니다.


섹션 레이아웃 변경

  • 클릭 타임라인 편집 버튼을 눌러 섹션 편집 패널을 엽니다.
  • 선택 레이아웃 탭.
  • 여기에서는 페이지에 섹션을 추가한 후에도 섹션의 레이아웃을 쉽게 변경할 수 있습니다.

레이아웃을 변경하면 상단에 섹션 관련 레이아웃이 표시됩니다.

이 외에도 다음 아래의 다른 섹션에서 레이아웃을 선택할 수 있는 옵션도 있습니다. 더 많은 레이아웃 표제.


스타일 옵션

  • 를 클릭하십시오 이미지 목록 편집 버튼을 클릭합니다.
  • 선택 스타일 (1) 탭.
  • 섹션 요소의 스타일을 변경하고 저장 (2) 당신의 변경.

섹션에 대한 여러 스타일 옵션이 있습니다. 

  1. 옵션을 표시
  2. 조정
  3. 텍스트 크기
  4. 간격
  5. 섹션 제목
  6. 타임라인 스타일 옵션
  7. 이미지 옵션
  8. 셰이프 마스크
  9. 이미지 호버 옵션
  10. 이미지 테두리
  11. 카드 옵션
  12. 그림자 옵션
  13. 버튼 및 링크

디스플레이 옵션

  1. 지정 행 사이의 공백 목록 항목 중.


조정

  1. 정렬 텍스트를 수평으로 섹션에 있습니다. 왼쪽, 오른쪽 또는 가운데 정렬을 설정할 수 있습니다.
  2. 정렬 콘텐츠를 세로로 섹션에 정렬할 수 있습니다. 상단, 중앙, 하단 정렬을 설정할 수 있습니다.
  3. 선택 콘텐츠 순서 즉, 먼저 표시될 목록 항목의 이미지 또는 관련 텍스트입니다.


텍스트 크기

  1. 온 클릭 텍스트 스타일 변경 방문하기 버튼 디자인 섹션 글꼴 크기와 스타일을 관리하세요. 
  2. 설정 Title 섹션의 목록 항목에 대한 글꼴 스타일.
  3. 설정 부제 섹션의 목록 항목에 대한 글꼴 스타일.
  4. 기본값 설정  기술설명 섹션의 목록 항목에 대한 글꼴 스타일.
  5. 이 옵션을 활성화하려면 어떤 숫자든 애니메이션 효과 적용 현재의 Title 부제 입력 필드입니다. 이 기능을 켜면 숫자 값이 동적인 카운팅 애니메이션과 함께 표시되어 시각적으로 더욱 매력적입니다.


간격

  1. 지정 이미지 폭 목록 항목의 경우.
  2. 지정 섹션 제목 아래 공간 px에서.
  3. 지정 이미지 위의 공간 목록 항목의 (%).
  4. 지정 구분선 주변 공간 목록 항목의 수평 방향(%)
  5. 지정 제목 아래 공간 목록 항목의 (%).
  6. 지정 자막 아래 공간 목록 항목의 (%).


섹션 제목

  1. 수평 정렬 섹션 헤드라인 텍스트입니다. 왼쪽, 가운데, 오른쪽으로 설정할 수 있습니다.
  2. 활성화/비활성화 분할기 섹션 제목과 섹션 내용 사이.
  3. 설정 디바이더의 두께 (픽셀 단위).
  4. 지정 구분선 색상 색상 선택기에서.
  5. 선택 구분선 스타일 드롭 다운에서
  6. 설정 헤드라인 너비 섹션 제목이 표시되는 너비를 정의합니다. 최소 50%부터 시작합니다.


타임라인 스타일 옵션

  1. 섹션의 모든 두 번째 항목이 대체 (반대) 쪽.
  2. 선택 방향 항목의.
  3. 지정 구분선 너비 섹션을 위해.
  4. 지정 기준선 (배경) 구분선의 색상입니다.
  5. 지정 활성 라인 (강조 표시) 구분선의 색상입니다.


이미지

  1. 선택 I마법사 자르기 목록 항목의 경우. 이미지를 정사각형, 원형, 가로, 세로, 원본으로 설정할 수 있습니다.
  2. 목록 항목의 각 측면에 대해 공통 모서리 반경 또는 다른 모서리 반경을 갖도록 선택하고 C반경 목록 항목 이미지 중. 더 많이 알아라..


셰이프 마스크

  1. 모양 마스크: 이 토글을 활성화하면 타임라인 섹션의 이미지에 도형 마스크를 적용할 수 있습니다. 활성화하면 선택한 도형이 이미지를 해당 도형에 시각적으로 잘립니다.
  2. 모양 선택: 이미지에 적용할 다양한 미리 정의된 모양 중에서 선택하세요. 이를 통해 이미지를 둥근 모양, 마름모 모양, 물방울 모양 등과 같은 고유한 형태로 표시하여 콘텐츠를 창의적으로 스타일링할 수 있습니다.

노트

  • 모양 마스크 옵션은 레이아웃에 따라 달라집니다. – 제목이나 부제 등의 텍스트가 이미지 위에 표시되는 레이아웃에서는 나타나지 않을 수 있습니다.
  • Stretch 설정은 여러 요인에 따라 달라집니다. – 스타일 탭에서 정의된 이미지 크기, 정렬 및 자르기 설정을 포함합니다.
  • 이미지 자르기가 원본으로 설정된 경우, 이미지의 실제 크기에 따라 수직이나 수평으로 늘어날지 여부가 결정됩니다.


이미지 호버

  1. 선택 이미지 호버 색상 너는 악센트 색상 또는 될 지정. 선택했다면 악센트 색상을 지정한 다음 불투명각 항목의 악센트 색상을 지정할 수 있습니다. 항목 편집 패널.
  2. 당신이 선택한 경우 색상 지정 옵션을 설정한 다음 오버레이 색상 및 불투명도.
  3. 로 선택 목록 항목 이미지에 애니메이션 적용 마우스를 올리면 예를 클릭합니다. 라이브 페이지에서 이 기능을 확인하십시오..
  4. 선택 애니메이션 스타일 커서를 이미지 위로 가져가면 이미지가 표시됩니다.
  5. 허용할지 여부를 선택하세요 이미지 전환 호버 여부.
  6. 를 선택 전환 스타일 호버 전환을 위해. 사용 가능한 옵션은 페이드와 플립입니다.


이미지 테두리

  1. 테두리 활성화 / 비활성화 토글을 전환하여 이미지 주변을 둘러보세요.
  2. 다음을 선택하세요. 공통 국경 이미지의 모든 면에 표시하거나 테두리를 별도로 각 측면에 대해.
  3. 지정  국경의. 0으로 설정하면 테두리가 나타나지 않습니다. 이미지의 각 측면에 대해 개별적으로 테두리 너비를 설정할 수도 있습니다.
  4. 선택 테두리 색 색상 선택기에서.
  5. 선호하는 것을 선택하십시오 테두리 스타일 드롭 다운에서
  6. 결정 모바일의 테두리 너비 데스크탑용으로 선택한 너비에 맞춰 정렬합니다.


카드


그림자

  1. 디스플레이 – 항상 목록 항목 뒤에 그림자를 표시하거나 가리키기만 하면 표시되도록 선택합니다.
  2. 스타일 – 기존 사전 설정에서 선택하거나 사용자 지정 그림자를 만듭니다.
    사용자 정의 옵션을 선택한 경우 다음을 방문하십시오. 상자 그림자 생성기 사용자 지정 그림자를 만듭니다. 마지막으로 복사 붙여넣기 상자 그림자 CSS.
  3. 사전 설정 옵션을 선택한 경우 그림자 스타일 선택 드롭 다운에서


버튼 및 링크


원하는 것을 찾을 수 없습니까?

Pixpa 전문가에게 문의하세요.

Pixpa Studio가 새롭게 개편되었습니다. 현재 모든 도움말 문서의 스크린샷을 업데이트하고 있습니다.