다음을 사용하여 팀 구성원 섹션을 생성하시겠습니까? Elementor ?

잘 찾아오셨습니다. 오늘 우리는 당신에게 멋진 팀원 섹션을 만드는 방법을 보여줄 것입니다 작성자 페이지 Elementor.

이 튜토리얼을 완료하려면 다음이 필요합니다. 엘리멘터 프로 버전, 왜냐하면 우리는 사용자 정의 CSS 코드 사용 이는 프로 버전에서만 가능합니다.Elementor. 아직 업데이트하지 않았다면 업데이트하세요.

그리고 이 튜토리얼에서 말하는 내용을 이해하기 위해 다음 비디오를 시청하도록 초대합니다.

시작하려면 페이지를 만들고 Elementor로 편집하세요.

그런 다음 후자에 3개의 열이 있는 구조를 삽입한 다음 패널의 탭 아래에 삽입합니다. 내용, 높이를 최소 높이로 설정하고 VH 최소 높이를 선택한 다음 슬라이더를 100으로 설정합니다.

중간 열을 선택하여 편집하고 고급 탭으로 이동하겠습니다. 모든 내부 여백을 30으로 설정합시다.

이 열에 내부 섹션 위젯을 삽입한 다음 내부 섹션에 포함된 열 중 하나를 삭제하고 탭 아래 패널에서 삭제해 보겠습니다. 내용, 높이를 Min Height로 설정하고 슬라이더를 450px로 설정하겠습니다.

Elementor로 팀원 섹션 만들기

수직 정렬 선택 낮은 오버 플로우 선택 마스크.

탭에서 스타일 배경을 다음으로 변경 고전적인 라이브러리에서 이미지를 선택합니다.

다음에 대한 가이드 읽기: Elementor로 제품 카드를 만드는 방법

위치 선택 우수한 중심, 첨부 파일 스크롤, 다시 말 반복되지 않음 et 허리 씌우다

Elementor로 팀원 섹션 만들기

경계에서 정의 국경 12.

그림자 효과를 추가해 봅시다. 상자의 그늘에서 수정합시다 수직선 22, Flou 40 et 디퓨저 -10.

추가하자 제목 위젯 내부 섹션에서 회원의 이름을 지정하고 센트론 위젯.

읽기 : Elementor로 페이지 스크롤 시 헤더를 변경하는 방법

탭에서 스타일, 수정하자 텍스트 색상활판 인쇄술 고르다 22 글꼴 크기 및 500 유지, 변환 대문자 et 문자 간격1.2

Elementor로 팀원 섹션 만들기

그럼 복제를 해보자 제목 위젯 두 번째 위젯의 제목을 수정하고 타이포그래피에서 15 글꼴 크기 및 500 너비에 대한 변환 결함 및 문자 간격 1.2

Elementor로 팀원 섹션 만들기

탭으로 가자 고급 그리고 정의 상단 여백-15. 소셜 미디어 아이콘 위젯을 내부 섹션에 추가해 보겠습니다.

Elementor로 팀원 섹션 만들기

탭으로 가자 스타일, 색상을 Custom으로 변경하고 기본 색상을 투명하게 만들고 내부 여백을 0.30으로 설정합니다.

탭에서 고급, 여백 정의 -15에서 높음 및 20에서 낮음

Elementor로 팀원 섹션 만들기

그런 다음 내부 섹션의 열을 선택하여 수정하고 탭에서 스타일 유형 선택 고전적인 그리고 컬러로 잡아보자 # FFFFFF28.

읽기 : Elementor로 긴 포트폴리오 이미지를 스크롤하는 방법

그런 다음 내부 섹션의 열을 선택하여 수정하고 탭에서 고급 현장에서 CSS 클래스, 잡자 회원 정보

Elementor로 팀원 섹션 만들기

그런 다음 선택 내부 섹션 그런 다음 탭에서 고급 현장에서 사용자 정의 CSS, 다음 코드를 붙여넣습니다.

/ * CSS 유리 효과 * /

선택기 {

    – 높이: 150px;

    -하단: -150px;

    오버플로: 숨겨진! 중요;

}

선택기 .구성원 정보 {

    높이: var(-높이);

    위치 : 절대;

    배경 필터: 흐림(15px);

    하단: 0;

    전환: 5초 인-아웃;

}

Elementor로 팀원 섹션 만들기

첫 번째 CSS 코드 뒤에 다음을 붙여넣습니다.

/ * 호버에서 숨기거나 표시하는 CSS * /

선택기 .구성원 정보 {

    하단: var(-하단);

}

선택기: hover .member-info {

    하단 : 0px;

}

이제 이미지 위로 마우스를 가져가면 회원 정보가 나타납니다.

열을 2번 복제하고 다른 빈 열을 삭제합니다.

그런 다음 내부 섹션을 선택하고 배경 이미지를 다른 팀원의 이미지로 변경하고 이름과 직업을 변경하고 다른 열과 동일하게 수행하십시오.

더 나은 보기를 위해 여백 등을 개선하면서 태블릿 및 모바일에서 작업을 미리 봅니다.

이것이 멋진 팀원 섹션을 만드는 방법입니다.

지금 Elementor Pro를 받으세요!

결론

그래서 ! 팀 구성원 섹션을 만드는 방법을 보여 주는 이 자습서에서는 여기까지입니다. 가는 방법에 대해 우려 사항이 있으면 commentaires.

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...