EN
수색...

버튼 및 아이콘

사용 버튼 및 링크, 모든 유형을 추가할 수 있습니다. (링크) (1) 섹션에 버튼/텍스트 링크/이미지 링크/아이콘/구분 기호를 추가할 수 있습니다.

여러분의 시간과 재능으로 복제 (2) 편집 (3) 또는 . (4) 기존 버튼/링크.

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

  1. 버튼/링크 추가
  2. 스타일 버튼/링크

버튼/링크 추가

  • 섹션에 링크 유형을 추가하려면 + 추가 버튼 옵션을 선택합니다.

The + 추가 버튼 옵션은 링크를 추가하는 네 가지 방법을 제공합니다. 이 외에도 분리기 버튼/링크 사이에 공백을 추가합니다. 옵션은 다음과 같습니다.

단추

목록 항목에 버튼을 추가합니다.

다음을 업데이트할 수 있습니다.

  1. 버튼 라벨 – 지정하세요 보이는 텍스트 버튼에 있습니다. 사용자가 보고 클릭하게 될 부분입니다.
  2. 버튼 링크 – 지정하세요 URL 또는 작업 버튼을 클릭하면 작동해야 합니다.
  3. 대상 창 – 링크가 다음에서 열리는지 여부를 선택하세요. 같은 탭 또는 새 탭.
  4. 버튼 스타일 – 버튼 스타일을 기본값으로 선택합니다( 버튼 및 링크 디자인 섹션의 탭), 단색, 개요 또는 텍스트 링크.
    • 태만: 사이트의 테마 설정을 따릅니다.
    • 고체: 굵게 채워진 버튼.
    • 개요 : 테두리가 있는 투명한 배경.
    • 텍스트 링크: 간단하고 깔끔한 텍스트 전용 스타일(버튼 상자 없음).
  1. 버튼 모양 – 설정하다 각 버튼에 대한 사용자 정의 모양 섹션 내에서. 이를 통해 아래에 정의된 글로벌 버튼 모양을 재정의할 수 있습니다. 디자인 설정각 버튼의 모양을 더욱 세밀하게 제어할 수 있습니다. 사용 가능한 모양은 정사각형, 둥근 모양, 필 모양입니다.
  2. 버튼 색상 – 버튼의 색상 구성표를 사용자 정의합니다.
    • 태만: 테마 설정을 상속합니다.
    • 거꾸로 하다: 버튼 텍스트/배경색을 반전시킵니다.
    • 정의 : 특정 텍스트와 배경색을 선택할 수 있습니다.
  1. 단추 텍스트 – 사용하는 경우 사용자 정의 버튼 색상, 설정할 수 있습니다 텍스트(레이블) 색상 여기에서.
  2. 버튼 배경 – 사용자 지정에서도 사용할 수 있으며, 버튼의 배경색을 설정합니다. 텍스트 색상과 함께 사용하면 가독성과 스타일을 극대화할 수 있습니다.
  3. 버튼 아이콘 – 버튼 라벨 옆에 아이콘을 추가하세요. 다양한 아이콘 옵션 중에서 선택할 수 있습니다.
  4. 레이아웃 – 레이블을 기준으로 아이콘의 위치를 ​​제어합니다. 사용 가능한 레이아웃 옵션은 다음과 같습니다.
    • 라벨 + 아이콘: 텍스트가 먼저 나타나고 그 다음에 아이콘이 나타납니다.
    • 아이콘 + 라벨: 아이콘이 먼저 나타나고 그 다음에 텍스트가 나타납니다.
    • 라벨 + 아이콘(와이드): 더 넓은 버튼에 맞게 텍스트와 아이콘을 더 넓게 배치했습니다.
    • 아이콘 + 라벨(와이드): 아이콘을 먼저 배치하고 패딩 레이아웃을 더 넓게 합니다.
  1. 아이콘 색상 – 버튼 아이콘의 색상을 선택하세요. 단추 텍스트 색상 또는 브랜드 색.

버튼 스타일 설정

이러한 설정은 다음에서 찾을 수 있습니다. 스타일 탭 섹션. 이러한 설정을 사용하면 Pixpa 사이트에서 버튼의 모양, 간격 및 레이아웃을 미세 조정하여 디자인 제어 및 반응성을 향상시킬 수 있습니다.

  1. 버튼 크기 – 버튼 크기를 선택하세요(예: 소, 중, 대). 디자인에 맞게 패딩과 글꼴 크기가 조정됩니다.
  2. 버튼 사이 공간 – 여러 버튼 사이의 가로 간격을 조절합니다. 반응형 간격을 위해 vw(뷰포트 너비) 단위를 사용할 수 있습니다.
  3. 버튼 위 공간 – 버튼 위에 세로 간격을 추가합니다. 이렇게 하면 버튼과 위쪽 콘텐츠 사이의 간격을 % 단위로 구분할 수 있습니다.
  4. 텍스트 링크 – 버튼 텍스트 링크의 글꼴 크기를 조절합니다(특히 기존 버튼 대신 "텍스트 링크" 스타일을 사용할 때 유용합니다).
  5. 버튼 이미지(크기) – 기존 버튼 대신 이미지를 사용하는 경우 이 설정은 이미지의 표시 크기(픽셀)를 정의합니다.
  6. 버튼 너비 – 버튼이 얼마나 넓게 나타날지 선택하세요:
    • 태만: 버튼 콘텐츠에 따른 표준 너비
    • 대형 / 특대형: 더 강조하기 위해 더 넓은 버튼
    • 전체 넓이: 버튼은 컨테이너 전체 너비에 걸쳐 늘어납니다.

텍스트 링크

추가 할 텍스트 링크 목록 항목에.

다음을 업데이트할 수 있습니다.

  1. 설정 텍스트 레이블.
  2. 지정 텍스트 링크.
  3. 대상 창 – 동일한 창 또는 새 창에서 페이지를 열도록 선택합니다.

영상

이미지를 추가하고 모든 페이지에 링크하십시오.

  • 이미지를 업로드하면 이런 식으로 나타납니다. 편집하려면 링크를 클릭하십시오.

  • 여기에서 다음을 수행할 수 있습니다.
    1. 가이드라가/이미지를 변경합니다.
    2. 버튼 링크 – 링크를 지정합니다.
    3. 대상 창 – 동일한 창 또는 새 창에서 페이지를 열도록 선택합니다.

주의 사항

사이트 제목은 검색 가능성을 높이기 위해 버튼 이미지의 대체 텍스트로 사용됩니다.

사회 아이콘

  • 목록 항목에 소셜 아이콘을 추가합니다.

다음을 관리할 수 있습니다.

  1. 연결할 소셜 아이콘입니다.
  2. 관련 소셜 프로필 경로를 지정합니다.
  3. 대상 창 – 동일한 창 또는 새 창에서 페이지를 열도록 선택합니다.

분리 기호

The 분리 기호 이 옵션을 사용하면 버튼이나 링크 사이에 간격을 삽입할 수 있습니다.

이 기능은 서로 가까이 배치된 버튼 사이에 시각적인 구분을 만드는 데 유용합니다. 버튼 및 링크 다른 버튼을 추가하는 것과 마찬가지로 패널도 추가합니다.

  • 버튼 사이의 공간은 다음에 의해 제어됩니다. 패딩 - 상단 구분 기호 내 설정입니다. 이 값을 조정하면 서로 가까이 배치된 버튼 사이의 세로 간격이 늘어나거나 줄어듭니다.

 

주의 사항

  • 구분 기호는 어디에도 연결되지 않습니다. 단지 수직 공간을 만들 뿐입니다.
  • 필요에 따라 위아래로 움직여 항목 간 간격을 조정할 수 있습니다.

버튼 및 링크에 대한 스타일 옵션

The 스타일 옵션 아래에 존재할 것입니다. 스타일 섹션을 관리하는 동안 탭.

다음과 같이 단추 및 링크에 대한 여러 스타일 옵션이 있습니다.

  1. 지정 버튼/링크 사이의 공간 추가된 것입니다.
  2. 지정 버튼/링크 위의 공간.
  3. 선택 호버 효과 버튼/링크용.

  1. 선택 일반 버튼의 크기 에 추가한 버튼/링크. 
  2. 지정 이미지 버튼의 높이 이미지 링크를 추가한 경우 버튼/링크. 
  3. 지정 아이콘 버튼의 크기 소셜 아이콘을 추가한 경우 버튼/링크. 

소셜 아이콘을 추가한 경우 버튼/링크 위의 다음:

  1. 선택 소셜 아이콘 유형/모양.
  2. 선택 소셜 아이콘 색상 스타일. 당신이 선택한 경우 브랜드 색상, 아이콘의 브랜드 색상이 상속됩니다.
    당신이 선택한 경우 선택한 색상 위의 옵션:
    1. 지정 소셜 아이콘 색상.
    2. 지정 소셜 아이콘 배경색.

예시

예를 들어 Amazon 소셜 링크를 버튼/링크, 그리고 지정 아이콘 색상은 빨간색 그리고 아이콘 배경색을 녹색으로, 그러면 아이콘이 아래와 같이 나타납니다.

태그가 :

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

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

문의하기