웹사이트 방문자는 브랜드 뒤에 누가 있는지 알고 싶어합니다. 잘 디자인된 엘리멘터 팀원 섹션은 비즈니스에 얼굴을 넣고 신뢰를 쌓으며 사이트가 기업적이기보다는 개인적인 느낌을 갖게합니다. 문제? Elementor 는 헌신적 인 팀원 위젯을 즉시 제공하지 않습니다.
거기가 어디야 Elementor용 마스터 애드온 들어옵니다. 이것은 여러분에게 이것을 위해 특별히 만들어진 두 개의 위젯을 제공합니다: the MA 팀원 위젯(그리드 레이아웃용) 및 MA 팀원 회전목마 (팀 섹션 슬라이딩의 경우). 둘 다 무료이며, 둘 다 한 번의 클릭으로 적용 할 수있는 11 가지 고유 한 디자인 변형이 제공됩니다.
이 가이드에서는 방법을 정확히 배우게됩니다 elementor 에서 팀원 섹션을 만듭니다 두 가지 방법을 모두 사용하여 스타일을 맞춤화하고 사용 가능한 모든 디자인 옵션을 최대한 활용하세요.
모든 웹사이트에 팀원 섹션이 필요한 이유
사람들은 사람들로부터 구매합니다. Edelman 의 Trust Barometer 의 연구에 따르면 소비자는 뒤에있는 실제 사람들을 볼 수있을 때 회사를 신뢰 할 가능성이 훨씬 높습니다. 귀하의 “정보”또는 “팀”페이지는 종종 전체 사이트에서 가장 많이 방문한 페이지 중 하나입니다.
여기 무슨 좋은 elementor의 팀원 섹션 귀하의 웹사이트에 해당:
- 신뢰성을 구축합니다 — 방문자는 연락하기 전에 누구와 함께 작업하는지 확인할 수 있습니다
- 개인적인 연결을 만듭니다 — 사진과 짧은 약력은 귀하의 브랜드를 공감하게 만듭니다
- 전환율을 높입니다 — 팀 사진과 같은 신뢰 신호는 구매 시 주저함을 줄여줍니다
- 고용주 브랜딩을 향상시킵니다 — 팀을 소개하면 더 나은 취업 지원자가 유치됩니다
- 이탈률을 감소시킵니다 — 매력적인 시각적 섹션은 방문자를 페이지에 더 오래 머물게 합니다
소규모 대행사, SaaS 회사 또는 지역 비즈니스를 운영하는 경우 WordPress 사이트에 팀 섹션을 추가하는 데 10 분이 걸리며 측정 가능한 영향을 미칩니다.
팀원 섹션에 포함할 내용
위젯을 페이지로 드래그하기 전에 각 팀 카드에 표시해야 할 정보를 계획하십시오. 포함할 내용과 건너뛸 내용에 대한 간략한 분석은 다음과 같습니다:
| 요소 | 우선순위 | 왜 중요한가 |
|---|---|---|
| 사진 | 필수적인 | 사람들은 문자보다 얼굴을 더 빨리 처리합니다. 일관되고 전문적인 헤드샷을 사용하세요. |
| 이름 | 필수적인 | 연결이 즉시 이루어지도록 사진 바로 옆이나 아래에 나타나야 합니다. |
| 지정/직위 | 필수적인 | 방문자에게 이 사람이 팀에서 어떤 역할을 하는지 알려줍니다. |
| 짧은 설명 | 추천 | 1-2 문장 약력. 그것을 인간적이고 성격 중심적으로 유지하십시오. |
| 소셜 미디어 링크 | 추천 | 방문자가 LinkedIn, Twitter 또는 기타 채널에 연결할 수 있도록 합니다. |
| 이메일이나 전화 | 선택사항 | 직접 연락을 원하는 경우에만 추가하세요(판매가 많은 팀의 경우 일반적). |
프로 팁: 팀 전체에서 헤드샷을 일관되게 유지하십시오. 동일한 배경색,유사한 자르기 및 일치하는 이미지 치수 (300x300px 또는 400x400px 가 잘 작동함) 로 전체 섹션이 광택이 나는 것처럼 보입니다.
시작하기 전에 필요한 것
이 튜토리얼을 따르려면 다음을 수행해야 합니다:
- 워드 프레스 설치 및 실행 중 (최근 버전)
- 엘리멘터 (무료 또는 프로) — 이는 두 가지 모두에서 작동합니다
- Elementor용 마스터 애드온 (무료 버전) — wordpress.org 에서 다운로드
- 업로드할 준비가 된 팀원 사진 (헤드샷,제곱 비율 권장)
마스터 애드온이 설치되고 활성화되면 다음을 찾을 수 있습니다 MA 팀원 그리고 MA 팀원 회전목마 “MASTER ADDONS” 탭 아래 Elementor 편집기 내부의 위젯.
Elementor 팀 구성원 그리드 섹션을 만드는 방법
그리드 레이아웃은 여러 열로 구성된 깔끔하고 구조화된 형식으로 팀을 표시하고자 할 때 완벽합니다. 단계별로 설정하는 방법은 다음과 같습니다:
1단계: 새 섹션을 삽입합니다
Elementor 편집기에서 아무 페이지나 엽니다. “+” 아이콘을 클릭하여 새 섹션을 추가합니다. 원하는 열 구조를 선택하십시오. 팀 섹션의 경우 3 열 또는 4 열 레이아웃이 가장 잘 작동합니다.
2단계: 내부 섹션을 추가합니다
간격과 레이아웃에 대한 더 많은 제어가 필요한 경우 을 드래그하십시오 내부 섹션 메인 섹션 안에 위젯. 이것은 당신에게 각 팀원 카드가 독립적으로 앉아 중첩 된 열을 제공합니다.
팀 크기에 필요한 만큼 열을 만듭니다. 행당 세 개의 열은 데스크톱 디스플레이에 가장 일반적으로 선택됩니다.
3 단계: MA 팀원 위젯을 드래그하십시오
왼쪽 Elementor 패널에서 아래로 스크롤합니다 마스터 애드온 탭 (또는 검색창에서 “MA 팀원”을 검색하면 됩니다). 드래그 the MA 팀원 위젯을 열 중 하나로 변환하세요.
자리 표시자 이미지, 이름, 지정 및 소셜 아이콘이 포함된 기본 팀원 카드가 즉시 나타나는 것을 볼 수 있습니다.
4단계: 각 팀 구성원에 대해 반복합니다
위젯을 복제하거나 새 것을 드래그하십시오 MA 팀원 나머지 각 열에 위젯. 각 위젯은 한 팀원을 나타내므로 개별 카드를 완전히 제어 할 수 있습니다.
프로 팁: 위젯을 마우스 오른쪽 버튼으로 클릭하고 “복제”를 선택하여 모든 스타일링을 그대로 복사하십시오. 그런 다음 각 새 팀 구성원에 대해 사진과 텍스트를 바꾸면됩니다.
Elementor 팀원 위젯 콘텐츠 사용자 지정
아무거나 클릭 MA 팀원 설정을 여는 위젯입니다. 그만큼 콘텐츠 탭 각 팀원의 모든 개인 정보를 추가하는 곳입니다.
팀원 세부정보
콘텐츠 탭 elementor 팀원 위젯 다음을 위한 필드를 제공합니다:
- 이미지 — 헤드샷 또는 팀 사진을 업로드합니다. 이미지 크기를 설정하고 사용자 정의 종횡비를 선택할 수도 있습니다.
- 이름 — 팀원의 전체 이름. 이것은 표제 태그로 렌더링되므로 적절한 HTML 태그를 선택하십시오 (H3 또는 H4 는 팀 카드의 일반적인 경우).
- 지정 — 직책, 역할 또는 직책 (예를 들어, “리드 디자이너” 또는 “공동 설립자 & CEO”).
- 설명 — 짧은 약력이나 태그라인. 가장 깔끔한 모습을 위해 1-2 문장으로 유지하세요.
소셜 미디어 프로필
주요 세부 정보 아래에는 소셜 미디어 섹션이 있습니다. 각 팀원의 프로필에 대한 링크를 추가하세요. 위젯은 다음을 포함한 모든 주요 플랫폼을 지원합니다:
- 페이스북
- 트위터 / X
- 링크드인
- 인스타그램
- 깃허브
- 사용자 정의 아이콘이 있는 사용자 정의 URL
소셜 링크는 팀원의 정보 아래에 작은 아이콘으로 나타납니다. 기본적으로 새 탭에서 열리므로 방문자가 페이지를 떠나지 않습니다.
스타일 탭: 디자인 변형 및 사전 설정
여기가 바로 그 곳이에요 MA 팀원 위젯은 기본 Elementor 해결 방법에서 정말 눈에 띕니다. 팀 카드 디자인을 처음부터 구축하는 대신 얻을 수 있습니다 11 독특한 디자인 변형 그리고 5 스타일 사전 설정 선택할.
디자인 변형
를 클릭하세요 스타일 탭을 연 다음 일반 스타일 패널. “디자인 변형”이라는 라벨이 붙은 드롭다운을 찾을 수 있습니다. 11 가지 옵션 중 하나를 선택하면 위젯이 즉시 카드 레이아웃을 재구성합니다. 일부 변형은 텍스트 위에 이미지를 쌓습니다. 다른 변형은 나란히 레이아웃을 사용합니다. 일부는 호버에 오버레이 효과를 추가합니다.
가장 좋은 점: 변형 간 전환은 콘텐츠를 지우지 않습니다. 이름,사진, 약력 및 소셜 링크는 모두 그대로 유지됩니다. 모든 변형을 시도하고 사이트 디자인과 일치하는 변형에 정착 할 수 있습니다.
5 스타일 사전 설정
일반 스타일 패널 내에서도 찾을 수 있습니다 5 스타일 사전 설정. 이들은 당신에게 단 하나 누르기를 가진 닦은 보기를 주는 전 윤곽을 그린 색깔과 배치 조합입니다.
수동 스타일 컨트롤
완전한 크리에이티브 제어를 위해 스타일 탭을 사용하면 다음을 사용자 정의할 수도 있습니다:
- 배경 색상 — 각 카드에 대해 단색, 그라데이션 또는 투명한 배경을 설정합니다
- 콘텐츠 정렬 — 왼쪽, 중앙 또는 오른쪽은 모든 텍스트와 아이콘을 정렬합니다
- 타이포그래피 — 이름, 명칭, 설명에 대한 글꼴 패밀리, 크기, 무게, 줄 높이, 문자 간격을 별도로 완벽하게 제어할 수 있습니다
- 텍스트 색상 — 이름, 명칭, 설명 텍스트의 색상이 다릅니다
- 소셜 아이콘 색상 — 일반 상태와 호버 상태 모두에 대해 아이콘 색상을 사용자 정의합니다
- 간격 & 패딩 — 카드 내부 요소 사이의 공간을 미세 조정합니다
- 국경 및 국경 반경 — 테두리를 추가하거나 카드 모서리를 둥글게 만듭니다
- 박스 섀도우 — 깊이에 미묘한 그림자 효과를 추가합니다
모든 스타일 옵션을 완벽하게 살펴보려면 다음을 확인하세요 MA 팀 구성원 문서.
Elementor에서 팀원 회전목마를 만드는 방법
더 큰 팀이 있습니까? The MA 팀원 회전목마 위젯을 사용하면 슬라이딩 섹션 하나에 팀원을 무제한으로 추가할 수 있습니다. 팀원이 6+명이고 전체 페이지를 그리드로 채우고 싶지 않을 때 더 잘 맞습니다.
Here's how the X 는 1000 개의 100 개의 100 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 1 개의 elementor의 팀원 회전목마 작품:
1 단계: MA 팀원 회전목마 위젯을 드래그합니다
그리드 방식과 달리, 당신은 아닙니다 내부 섹션 또는 여러 열이 필요합니다. 단일 열로 새 섹션을 추가한 다음 “MA 팀원 회전목마”를 검색하여 드래그하세요.
2단계: 팀원을 추가하세요
위젯 안에는 리피터 필드가 표시됩니다. 리피터의 각 항목은 팀원 한 명을 나타냅니다. “항목 추가”를 클릭하여 새 카드를 만듭니다. 각 카드에 대해 다음을 입력하십시오:
- 사진
- 이름
- 지정
- 설명
- 소셜 미디어 링크
팀원을 원하는 만큼 추가할 수 있습니다. 제한은 없습니다. 회전목마는 5 명 또는 50 명의 멤버를 똑같이 쉽게 처리합니다.
3 단계: 제목 태그 설정
팀원 이름 (H2,H3, H4 등) 에 대한 HTML 제목 태그를 정의합니다. 대부분의 페이지에서 위의 섹션 제목이 일반적으로 H2 이기 때문에 H3 또는 H4 가 올바른 선택입니다.
회전목마 설정: 탐색, 열 및 자동 재생
캐러셀 위젯은 슬라이더의 동작 방식을 제어하기 위한 전용 설정 패널과 함께 제공됩니다. 구성할 수 있는 내용은 다음과 같습니다:
스크롤할 열 및 항목
한 번에 화면에 나타나는 팀원 수를 설정합니다. 레이아웃 너비에 따라 2,3, 4,또는 그 이상의 열을 표시할 수 있습니다. “스크롤할 항목” 설정은 방문자가 탐색 화살표를 클릭할 때 이동하는 카드 수를 제어합니다.
| 스크린 크기 | 추천 칼럼 | 스크롤할 항목 |
|---|---|---|
| 데스크탑 (1200px+) | 3-4 열 | 1-2 |
| 정제(768px-1199px) | 2-3열 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X |
| 모바일 (768px 이하) | 1열 | 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X |
탐색 스타일
두 가지 탐색 유형을 얻을 수 있습니다:
- 화살표 — 회전 목마 측면에 왼쪽 및 오른쪽 화살표 버튼. 호버 상호 작용이 일반적인 데스크탑에 가장 적합합니다.
- 점들 — 총 슬라이드와 현재 위치를 표시하는 캐러셀 아래의 작은 점 표시기. 데스크톱과 모바일 모두에서 잘 작동합니다.
하나, 둘 다 또는 둘 다 활성화할 수 있습니다. 자동 재생을 켜면 일부 사용자에게는 수동 탐색이 필요하지 않을 수도 있습니다.
자동 재생
자동 재생을 켜고 기간을 밀리초 단위로 설정합니다. 3000-5000ms (3-5 초) 의 값은 방문자가 슬라이더가 이동하기 전에 각 카드를 읽을 수 있는 충분한 시간을 제공합니다. 또한 일시 중지를 활성화하여 누군가가 카드 위로 마우스를 올리면 슬라이더가 멈출 수 있습니다.
회전 목마 스타일 옵션
그리드 위젯과 마찬가지로 회전목마도 함께 제공됩니다 5 스타일 사전 설정 그리고 완전한 수동 제어:
- 아이템 패딩 (각 팀 카드 사이의 공간)
- 이름, 명칭, 설명에 대한 타이포그래피입니다
- 모든 텍스트 요소의 색상
- 카드당 배경 및 테두리 설정
- 탐색 화살표/점 스타일링 및 색상
전체 설정 참조는 다음을 참조하세요 팀원 회전목마 문서.
더 나은 팀 섹션을 위한 팁
팀 섹션의 수백을 구축 한 후, 여기에 좋은 팀 페이지와 훌륭한 하나를 분리 하는 작은 세부 사항입니다:
- 스톡 이미지가 아닌 실제 사진을 사용하십시오. 방문자는 차이를 알 수 있습니다. 정통 헤드샷은 광택 스톡 사진보다 더 많은 신뢰를 구축합니다.
- 설명을 짧고 일관되게 유지하십시오. 한 사람이 3 문장의 약력을 가지고 있고 다른 사람이 전체 단락을 가지고 있다면 시각적 불균형을 만듭니다. 모든 카드에서 동일한 길이를 목표로하십시오.
- 이미지 치수를 정확하게 일치시킵니다. 모든 헤드샷을 동일한 해상도 (예, 400x400px) 로 업로드합니다. 일치하지 않는 크기는 그리드 정렬을 깨뜨립니다.
- 활성 소셜 프로필만 포함하세요. 죽은 LinkedIn 링크는 링크가 전혀없는 것보다 나쁩니다. 팀이 실제로 사용하는 플랫폼에 충실하십시오.
- 모바일에서 테스트. 회전목마 섹션은 특히 모바일 테스트가 필요합니다. 카드가 읽을 수 있고 탐색 도트가 탭하기 쉬운지 확인하십시오.
- 6+ 멤버의 회전목마를 사용하세요. 팀원이 3-4 명이라면 그리드가 더 깔끔해 보입니다. 스크롤이 필요하게 되는 더 큰 팀을 위해 회전목마를 저장하세요.
MA 팀원 대 MA 팀원 회전 목마: 어떤 것을 사용해야합니까?
| 특징 | MA 팀원(그리드) | MA 팀원 회전목마 |
|---|---|---|
| 위한 최고의 | 소규모 팀(2-6명) | 더 큰 팀 (6+ 회원) |
| 레이아웃 | 정적 열(그리드를 제어함) | 자동/수동 탐색 기능이 있는 슬라이딩 캐러셀 |
| 설정 | 내부 섹션에서 팀원당 위젯 1개 | 중계기 필드가 있는 단일 위젯 |
| 디자인 변형 | 11가지 변형 | 5 스타일 사전 설정 |
| 네비게이션 | 필요하지 않습니다(모두 표시됨) | 화살표, 점, 자동 재생 |
| 페이지 공간 | 더 많은 수직 공간을 차지합니다 | 콤팩트, 공간을 절약합니다 |
| 개별 카드 제어 | 전체 (각 위젯은 독립적입니다) | 모든 카드에 걸쳐 통일된 스타일링 |
대부분의 소규모 비즈니스 웹 사이트의 경우 3-4 명의 팀원이있는 그리드 접근 방식이 최적의 장소입니다. 팀이 6 명을 넘어 성장하면 회전 목마로 전환하여 페이지를 깨끗하게 유지하십시오.
사용 가능한 위젯의 전체 목록을 살펴보고 싶습니까? 체크 아웃 the 마스터 애드온 위젯 라이브러리를 완료하세요 80 + 위젯 및 확장 기능 포함.
자주 묻는 질문
Elementor에는 팀원 위젯이 내장되어 있나요?
아니요. Elementor (무료 또는 Pro) 에는 팀원 전용 위젯이 포함되어 있지 않습니다. 다음과 같은 타사 애드온이 필요합니다 마스터 애드온 목적에 맞게 제작됩니다 elementor 팀원 위젯 디자인 사전 설정, 소셜 링크 및 캐러셀 옵션이 있습니다.
MA 팀원 위젯은 무료인가요?
예. MA 팀 멤버와 MA 팀 멤버 캐러셀 위젯은 모두 Elementor 용 Master Addons 무료 버전에서 사용할 수 있습니다 wordpress.org 에서 다운로드하세요 무료. 일부 고급 디자인 변형에는 Pro 버전이 필요할 수 있습니다.
회전목마에 팀원을 몇 명 추가할 수 있나요?
제한이 없습니다. MA 팀원 회전목마는 리피터 필드를 사용하므로 페이지에 필요한 만큼 팀원을 추가할 수 있습니다. 위젯은 성능 문제 없이 5 장 또는 50 장의 카드를 처리합니다. 보이는 열을 설정하고 슬라이더가 나머지를 처리하도록 하면 됩니다.
팀원마다 다른 디자인을 사용할 수 있나요?
그리드 레이아웃 (MA 팀원 위젯) 으로,예. 각 팀원이 별도의 위젯이므로 각 카드에 다른 디자인 변형을 적용할 수 있습니다. 캐러셀에서 모든 카드는 시각적 일관성을 위해 동일한 디자인 사전 설정을 공유합니다.
팀원 사진에는 어떤 이미지 크기를 사용해야 하나요?
300x300px 와 500x500px 사이의 정사각형 이미지가 가장 잘 작동합니다. 일관된 정렬을 위해 모든 사진을 동일한 크기로 유지하십시오. 80% 품질의 JPEG 또는 WebP 형식은 페이지 속도를 늦추는 큰 파일 크기없이 좋은 시각적 품질을 제공합니다.
관련 읽기
감싸는 중
a 만들기 elementor의 팀원 섹션 사용자 정의 코드나 값비싼 페이지 빌더 추가 기능이 필요하지 않습니다. Master Addons 의 두 팀 위젯을 사용하면 빈 섹션에서 완전한 스타일의 팀 페이지로 10 분 이내에 이동할 수 있습니다.
소규모 팀의 경우 다음을 사용하십시오 MA 팀원 그리드 레이아웃의 위젯. 더 큰 팀의 경우 로 전환합니다 MA 팀원 회전목마 공간 절약 슬라이더의 경우. 두 옵션 모두 디자인 사전 설정,소셜 미디어 통합,전체 타이포그래피 및 색상 제어를 제공합니다.
마스터 애드온 시작하기 그리고 방문자가 실제로 신뢰할 수있는 팀 섹션을 구축하십시오.
