페이지 빌더 플러그인을 사용하여 프로필 카드를 확대/축소하는 방법을 알고 싶습니까? Elementor ?
이 새로운 튜토리얼에서 Elementor, 프로필 카드에 확대/축소 효과를 적용하는 방법과 프로필 이름과 소셜 네트워크 아이콘을 표시하는 방법을 보여줍니다.
오늘 우리가 무엇에 대해 이야기하고 싶은지 잘 모르겠다면 다음 비디오를 시청하도록 초대합니다.
그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.
이 튜토리얼을 완료하려면 다음이 필요합니다. Elementor의 Pro 버전이 버전에서만 지원되는 사용자 정의 CSS 코드를 사용할 것이기 때문에Elementor.
3열 구조로 새 섹션을 만든 다음 패널에서 고도 에 최소 높이그리고 최소 높이 클릭하자 VH 슬라이더를 100.
위젯을 추가하자 내부 섹션 중간 열에. 내부 섹션 위젯은 기본적으로 2개의 열로 구성되어 있으므로 그 중 하나를 삭제하겠습니다. 패널의 나머지 부분을 수정하여 구성해 보겠습니다. 고도 에 최소 높이 과 최소 높이 커서를 설정하자 400.
탭에서 스타일, 수정하자 배경 오버레이. 클릭 고전적인 배경 유형에서 라이브러리에서 이미지를 선택하고 이미지 설정에서 중앙 중앙 위치에 씌우다 크기에. 불투명도 1에 그리고
섹션에서 국경 클릭 % 그리고 입력 4 모든 연석 반경에 대해.
상자 수에서 슬라이더를 다음으로 설정합니다. 0 에 수평로 70 에 수직선로 63 에 Flou로 -60 에 디퓨저. 이미지 아래에 아름다운 그림자 효과가 표시되어야 합니다.
에서 내부 섹션 슬라이드 제목 위젯. 제목으로 Steve Jobs를 입력하고 스타일 탭에서 흰색을 선택합니다. #FFFFFF. 타이포그래피에서 크기를 선택합니다. 20.
그런 다음 내부 섹션 위젯의 열을 선택하고 스타일 탭에서 단색을 클릭하여 테두리 유형을 선택하고 모든 너비를 1로, 색상을 #FFFFFF로 선택합니다.
탭에서 고급, 여백을 다음으로 변경 15 및 내부 여백 20.
이제 소셜 미디어 아이콘 위젯을 내부 섹션으로 끌어 소셜 미디어 아이콘을 삽입합니다.
탭에서 소셜 미디어 링크 편집 내용 각 소셜 네트워크를 클릭하면 됩니다. 다른 소셜 네트워크를 추가하려면 추가 버튼을 클릭하세요.어 요소
아이콘 필드에서 아이콘 라이브러리를 클릭하고 검색 표시줄에 소셜 네트워크의 첫 글자를 입력하고 찾으면 바로 선택하고 삽입 버튼을 클릭합니다.
그런 다음 탭으로 이동하십시오. 스타일섹션에서 아이콘, 색상을 다음으로 변경 Personnalisé.
또한 우리의 가이드를 읽으십시오. Elementor로 페이지 매김을 추가하는 방법
약 메인 컬러, 투명도를 최소로 설정합니다.
약 보조 색상, 색상 선택 #FFFFFF. 크기에 다음을 입력합니다. 20, 내부 마진 켜기 0.4.
이제 탭을 클릭하십시오. 고급, 그리고 섹션에서 위치에 클릭 Personnalisé. 에 사용자 정의 너비, 시작하다 0.
너무 발견 Elementor와 함께 색상 선택기를 사용하는 방법
약 위치, 선택 압솔뤼, 시프트 15, 물론 수직 방향 과즙 낮은과 오프셋 에 20.
다시 선택 내부 섹션 그리고 탭에서 고급섹션에서 사용자 정의 CSS (이 섹션이 없는 경우 계속하려면 Elementor의 프로 버전으로 빠르게 업그레이드하세요.)
다음 코드를 복사하여 이 섹션에 붙여넣습니다.
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}선험적으로 많이 볼 수는 없지만 이미지 위로 마우스를 가져가면 이미지에 확대/축소가 적용된 것을 볼 수 있습니다.
이제 이전 코드 뒤에 다음 코드를 복사하여 붙여넣어 열의 특정 요소를 표시하거나 숨깁니다.
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}이제 이미지 위로 마우스를 가져가면 확대/축소가 이미지에 적용되고 소셜 네트워크의 이름과 아이콘이 나타납니다.
이 열을 2번 복제하고 나머지 2개 열을 삭제해 보겠습니다.
내부 섹션의 배경 이미지와 소셜 네트워크의 이름 및 링크를 변경합니다.
자, 이 작업을 쉽게 완료했습니다. 태블릿과 스마트폰 작업을 미리 보고 각 장치에 맞게 여백을 변경하려고 합니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 프로필 카드에 확대/축소 효과를 적용하는 방법을 보여주는 이 문서의 내용은 여기까지입니다. 가는 방법에 대해 우려 사항이 있는 경우 내부에 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
