다음을 사용하여 팀 구성원 섹션을 생성하시겠습니까? Elementor ?
잘 찾아오셨습니다. 오늘 우리는 당신에게 멋진 팀원 섹션을 만드는 방법을 보여줄 것입니다 작성자 페이지 Elementor.
이 튜토리얼을 완료하려면 다음이 필요합니다. 엘리멘터 프로 버전, 왜냐하면 우리는 사용자 정의 CSS 코드 사용 이는 프로 버전에서만 가능합니다.Elementor. 아직 업데이트하지 않았다면 업데이트하세요.
그리고 이 튜토리얼에서 말하는 내용을 이해하기 위해 다음 비디오를 시청하도록 초대합니다.
시작하려면 페이지를 만들고 Elementor로 편집하세요.
그런 다음 후자에 3개의 열이 있는 구조를 삽입한 다음 패널의 탭 아래에 삽입합니다. 내용, 높이를 최소 높이로 설정하고 VH 최소 높이를 선택한 다음 슬라이더를 100으로 설정합니다.
중간 열을 선택하여 편집하고 고급 탭으로 이동하겠습니다. 모든 내부 여백을 30으로 설정합시다.
이 열에 내부 섹션 위젯을 삽입한 다음 내부 섹션에 포함된 열 중 하나를 삭제하고 탭 아래 패널에서 삭제해 보겠습니다. 내용, 높이를 Min Height로 설정하고 슬라이더를 450px로 설정하겠습니다.
에수직 정렬 선택 낮은 과 오버 플로우 선택 마스크.
탭에서 스타일 배경을 다음으로 변경 고전적인 라이브러리에서 이미지를 선택합니다.
다음에 대한 가이드 읽기: Elementor로 제품 카드를 만드는 방법
약 위치 선택 우수한 중심, 첨부 파일 에 스크롤, 다시 말 에 반복되지 않음 et 허리 에 씌우다
경계에서 정의 국경 에 12.
그림자 효과를 추가해 봅시다. 상자의 그늘에서 수정합시다 수직선 에 22, Flou 에 40 et 디퓨저 에 -10.
추가하자 제목 위젯 내부 섹션에서 회원의 이름을 지정하고 센트론 위젯.
읽기 : Elementor로 페이지 스크롤 시 헤더를 변경하는 방법
탭에서 스타일, 수정하자 텍스트 색상 과 활판 인쇄술 고르다 22 글꼴 크기 및 500 용 유지, 변환 에 대문자 et 문자 간격 에 1.2
그럼 복제를 해보자 제목 위젯 두 번째 위젯의 제목을 수정하고 타이포그래피에서 15 글꼴 크기 및 500 너비에 대한 변환 결함 및 문자 간격 1.2
탭으로 가자 고급 그리고 정의 상단 여백 에 -15. 소셜 미디어 아이콘 위젯을 내부 섹션에 추가해 보겠습니다.
탭으로 가자 스타일, 색상을 Custom으로 변경하고 기본 색상을 투명하게 만들고 내부 여백을 0.30으로 설정합니다.
탭에서 고급, 여백 정의 -15에서 높음 및 20에서 낮음
그런 다음 내부 섹션의 열을 선택하여 수정하고 탭에서 스타일 유형 선택 고전적인 그리고 컬러로 잡아보자 # FFFFFF28.
읽기 : Elementor로 긴 포트폴리오 이미지를 스크롤하는 방법
그런 다음 내부 섹션의 열을 선택하여 수정하고 탭에서 고급 현장에서 CSS 클래스, 잡자 회원 정보
그런 다음 선택 내부 섹션 그런 다음 탭에서 고급 현장에서 사용자 정의 CSS, 다음 코드를 붙여넣습니다.
/ * CSS 유리 효과 * /
선택기 {
– 높이: 150px;
-하단: -150px;
오버플로: 숨겨진! 중요;
}
선택기 .구성원 정보 {
높이: var(-높이);
위치 : 절대;
배경 필터: 흐림(15px);
하단: 0;
전환: 5초 인-아웃;
}
첫 번째 CSS 코드 뒤에 다음을 붙여넣습니다.
/ * 호버에서 숨기거나 표시하는 CSS * /
선택기 .구성원 정보 {
하단: var(-하단);
}
선택기: hover .member-info {
하단 : 0px;
}
이제 이미지 위로 마우스를 가져가면 회원 정보가 나타납니다.
열을 2번 복제하고 다른 빈 열을 삭제합니다.
그런 다음 내부 섹션을 선택하고 배경 이미지를 다른 팀원의 이미지로 변경하고 이름과 직업을 변경하고 다른 열과 동일하게 수행하십시오.
더 나은 보기를 위해 여백 등을 개선하면서 태블릿 및 모바일에서 작업을 미리 봅니다.
이것이 멋진 팀원 섹션을 만드는 방법입니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 팀 구성원 섹션을 만드는 방법을 보여 주는 이 자습서에서는 여기까지입니다. 가는 방법에 대해 우려 사항이 있으면 commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...