제품 카드 만들기를 제시하고 싶었던 적이 있습니까? Elementor ?
이것이 이 튜토리얼에서 보여드릴 내용입니다. 오늘 우리가 이야기할 내용에 대한 정확한 아이디어를 얻으려면 다음 비디오를 보도록 초대합니다.
이 튜토리얼은 사이즈, 색상, 각각의 구매 버튼을 강조하여 신발인 제품을 제시하는 것입니다. 각 카드 위로 마우스를 가져가면 이 정보가 나타납니다. 다음은 우리가 할 일에 대한 간략한 요약입니다.
이 자습서를 따르려면 신발 이미지를 찾고 Elementor의 Pro 버전. 아직 가지고 있지 않다면 이 링크를 클릭하여 받으세요..
그러나 우리가 여기 있는 목적으로 돌아가십시오.
페이지를 만들고 다음을 사용하여 수정해 보겠습니다. Elementor.
여기서는 열이 3개인 구조를 선택해 보겠습니다. 해결하자 거만 에 최소 높이 , 최소 높이를 VH로 설정하고 슬라이더를 100.
스타일 탭에서 배경색을 선택하여 #130640
중간 열에 삽입 이미지 위젯 라이브러리에서 신발 이미지를 선택하여
스타일 탭으로 이동하여 이미지 속성에서 너비를 80으로 설정합니다.
그런 다음 제목 위젯 그리고 제목 입력 나이키 신발 – 이것은 예시이며, 완전히 다른 브랜드일 수도 있습니다 –
읽기 : Elementor로 웹사이트 레이아웃을 최적화하는 방법
HTML 태그를 H3로 설정하고 중앙 정렬
스타일 탭으로 이동하여 텍스트 색상을 흰색으로 변경합니다.
타이포그래피도 변경
그런 다음 내부 섹션 위젯 아래 제목 위젯 위에 삽입한 것입니다.
기본적으로 이 위젯은 2개의 열을 제공하며 그 중 하나를 삭제합니다. 이에 내부 섹션 위젯, 삽입 제목 위젯.
제목을 붙여라 컷 : HTML 태그를 스팬.
스타일 탭에서 제목 색상, 크기를 15, 가중치를 300으로 변경합니다.
고급 탭에서 오른쪽 여백만 5로 설정하고 속성에서 위치 선택 인라인(자동).
동일한 Inner Section에 Text가 8로 설정되고 Icon Spacing이 0으로 설정된 Button 위젯을 추가합니다.
읽기 : Elementor로 긴 포트폴리오 이미지를 스크롤하는 방법
스타일 탭에서 버튼의 텍스트 색상과 배경색을 각각 흑백으로 수정하고 내부 여백에서 내부 여백 Top-Right-Bottom-Left에 대해 각각 6-10-6-10을 입력합니다.
고급 탭에서 왼쪽 여백만 5로 설정하고 위치 속성에서 인라인(자동)을 선택합니다.
이 버튼을 3번 복제하고 마지막 3개 버튼의 텍스트를 9,10,11로 수정합니다. 문자 S, M, L, XL, XXL을 사용하여 이 작업을 수행할 수도 있습니다.
편집 섹션을 클릭하고 가로 정렬을 가운데로 설정합니다.
그런 다음 이 내부 섹션 -내부 섹션-을 복제하고 색상별로 크기를 수정하여 3개의 버튼을 삭제하고 남아 있는 버튼의 텍스트를 삭제합니다.
탭에서 내용 버튼의 아이콘 라이브러리에서 원 아이콘을 선택하고 삽입을 클릭하여 버튼에 추가합니다.
스타일 탭에서 타이포그래피에 크기 24를 지정하고 내부 여백을 바인딩하고 0을 입력합니다. 배경색에서 투명도를 최소로 설정한 다음 예를 들어 텍스트 색상을 파란색으로 변경할 수 있습니다.
그런 다음 이 버튼을 3번 복제하고 다른 두 버튼의 색상을 노란색과 빨간색으로 변경합니다. 그런 다음 내부 섹션을 클릭하여 편집하고 고급 탭에서 위쪽 및 아래쪽 여백을 -5 및 10으로 설정합니다.
이제 두 번째 내부 섹션 위젯 아래에 버튼 위젯을 추가하고 텍스트로 입력합니다. Achetez 유지 보수 및 센터 정렬. 스타일 탭에서 버튼 색상을 흰색으로 지정하고 버튼 텍스트 색상을 검정색으로 지정한 다음 모든 테두리 반경을 20으로 설정합니다.
작업한 메인 컬럼을 선택하고 얼라인먼트를 설정합니다. 수직선 에 환경, 스타일 탭에서 배경 유형으로 선택 타락한 유형 선택으로 요골의 그런 다음 기본 색상에서 투명도와 위치를 94. 두 번째 색상의 경우 위치를 다음으로 설정합니다. 77 테두리 반경을 10으로 설정합니다.
고급 탭에서 여백을 0-35-0-35로 설정하고 내부 여백을 50-20-50-20으로 설정합니다.
그런 다음 패널을 숨겨 작업이 어떻게 보이는지 확인할 수 있습니다. 맵이 매우 예쁘다는 것을 알 수 있지만 특정 섹션에 애니메이션을 적용하여 맵에 생명을 불어넣을 것입니다. 이를 위해 크기, 색상 및 구매 버튼에 애니메이션을 적용할 것입니다.
참조 : Elementor에서 페이지 스크롤의 헤더를 변경하는 방법
먼저 제품 크기를 표시하는 첫 번째 내부 섹션을 섹션화하고 고급 탭에서 페이드 인 업 모션 효과로 -Entry Animation 및 애니메이션 지연 켜짐 300.
색상을 표시하지만 애니메이션 지연이 800인 내부 섹션에 대해 동일한 작업을 수행해 보겠습니다. 구매 버튼의 경우 지연은 1000입니다.
이제 클래스를 할당하자 먼저 숨기기 내부 섹션과 구매 버튼에. 고급 탭에서 첫 번째 내부 섹션을 선택하고 고급 속성에서 CSS 클래스 필드에 hide-first를 입력합니다. 다른 내부 섹션과 구매 버튼에 대해 동일한 작업을 수행합니다.
따라서 전체 열에 애니메이션을 적용할 CSS 코드를 추가할 것입니다. 다음 코드를 복사합니다.
선택기 {
높이 : 400px;
디스플레이 : 플렉스;
}
/*표시/숨기기용 CSS*/
선택기 .hide-first{
디스플레이 : 없음;
}
선택기:hover .hide-first{
디스플레이 : 블록;
}
/* 이미지 변환 */
선택자 이미지{
전환: 완화 .5초;
}
선택기:이미지 가리키기{
변환: 변환(-20px, -40px) 회전(-25deg) 스케일(1.4);
}
/* 모바일에서 마우스 오버 */
@미디어(최대 너비: 767px) {
선택기:이미지 가리키기{
변환: 변환(-20px, 0px) 회전(-10deg) 스케일(1);
}
선택기 {
여백: 50px 10px;
}
}
수정할 열을 선택하고 고급 탭으로 이동하여 사용자 정의 CSS 필드에 이 코드를 붙여넣습니다.
주의: 이 옵션은 Pro 버전이 있는 경우에만 사용할 수 있습니다.Elementor.
완료되면 지도는 기본적으로 크기, 색상 및 구매 버튼을 숨기면서 마우스 오버 시 애니메이션을 적용합니다.
코드 설명과 관련하여 주석 부분은 개요를 제공합니다. 그러나 값을 수정하면 각 명령의 용도를 이해할 수 있습니다.
참조 : 같은 열에 두 개의 버튼을 나란히 추가하는 방법 Elementor와 함께
모든 것이 정상적으로 작동하면 이 열을 두 번 복제하고 다른 빈 열을 삭제합니다.
다른 블록의 이미지와 제목을 교체하고 마지막으로 작업을 미리보기만 하면 됩니다.
아름다운 제품 카드를 만들었습니다.
지금 Elementor Pro를 받으세요!
결론
그래서 ! 여기까지가 Elementor로 제품 카드를 만드는 방법을 보여주는 튜토리얼입니다. 가는 방법에 대해 우려 사항이 있는 경우 저희에게 알려주십시오. commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
