Bạn có muốn tìm hiểu cách Phóng to thẻ hồ sơ bằng plugin trình tạo trang không Elementor ?
Trong hướng dẫn mới này Elementor, chúng tôi sẽ chỉ cho bạn cách áp dụng hiệu ứng Thu phóng trên thẻ hồ sơ, đồng thời tiết lộ tên của hồ sơ cũng như các biểu tượng mạng xã hội của nó.
Nếu bạn không biết chúng tôi muốn nói về điều gì hôm nay, mời bạn xem video sau:
Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.
Để hoàn thành hướng dẫn này, bạn sẽ cần phiên bản Pro của Elementor, bởi vì chúng tôi sẽ sử dụng mã CSS tùy chỉnh chỉ được hỗ trợ bởi phiên bản này củaElementor.
Hãy tạo một phần mới với cấu trúc 3 cột, sau đó trong bảng điều khiển, hãy xác định Hauteur sur Chiều cao tối thiểu, và sau đó Chiều cao tối thiểu hãy nhấp vào VH và đặt thanh trượt thành 100.
Hãy thêm một widget Phần nội bộ ở cột giữa. Tiện ích Phần nội bộ được định cấu hình mặc định với 2 cột, hãy xóa một trong số chúng. Hãy định cấu hình phần còn lại trong bảng điều khiển bằng cách sửa đổi Hauteur sur Chiều cao tối thiểu và Chiều cao tối thiểu hãy đặt con trỏ thành 400.
Trong tab Phong cách, hãy sửa đổi Lớp phủ nền. Nhấp vào cổ điển trên loại nền và chọn một hình ảnh từ thư viện và trong cài đặt hình ảnh, hãy chọn Căn giữa ở giữa vào vị trí Trải ra về Kích thước. Độ mờ trên 1 và
Trong phần biên giới bấm vào % và nhập 4 cho tất cả các bán kính lề đường.
Trong số hộp, hãy đặt thanh trượt thành 0 sur Ngang, Trong 70 sur Theo chiều dọc, Trong 63 sur Flou, Trong -60 sur máy khuếch tán. Bạn sẽ thấy hiệu ứng đổ bóng tuyệt đẹp dưới hình ảnh của mình.
Trong phần nội bộ trượt Tiện ích tiêu đề. Khi nhập tiêu đề Steve Jobs, trong tab Kiểu, chọn màu trắng # FFFFFF. Trong kiểu chữ, hãy chọn Kích thước 20.
Sau đó, chọn cột của Tiện ích Phần bên trong và trong tab Kiểu, chọn kiểu đường viền bằng cách nhấp vào Rắn, tất cả các chiều rộng trên 1 và màu trên #FFFFFF.
Trong tab tiên tiến, thay đổi lề thành 15 và lợi nhuận nội bộ trên 20.
Bây giờ, hãy chèn các biểu tượng mạng xã hội bằng cách kéo tiện ích Biểu tượng mạng xã hội vào phần Nội bộ.
Chỉnh sửa liên kết truyền thông xã hội trong tab Nội dung bằng cách nhấp vào Mỗi mạng xã hội. Nếu muốn thêm các mạng xã hội khác nhấn nút Adder một phần tử
Trên Trường Biểu tượng, nhấp vào Thư viện Biểu tượng và trong thanh tìm kiếm, hãy nhập các chữ cái đầu tiên của mạng xã hội của bạn, ngay khi bạn tìm thấy nó, hãy chọn nó và nhấp vào nút Chèn.
Sau đó chuyển đến tab Phong cách, trong phần biểu tượng, thay đổi màu sắc thành Personnalisé.
Cũng đọc hướng dẫn của chúng tôi về; Cách thêm phân trang bằng Elementor
Sur Màu chính, đặt tính minh bạch ở mức tối thiểu.
Sur Màu thứ cấp, chọn màu # FFFFFF. Về Kích thước, hãy nhập 20, Ký quỹ nội bộ trên 0.4.
Bây giờ hãy nhấp vào tab tiên tiếnvà trong phần định vịClick vào Personnalisé. Chắc chắn rồi chiều rộng tùy chỉnh, đi vào 0.
Khám phá quá Cách sử dụng công cụ chọn màu với Elementor
Sur Chức vụ, chọn tuyệt đối, trên sự thay đổi 15Trên Định hướng dọc choisir Bas, Và Bù lại sur 20.
Chọn lại Phần nội bộ và trong tab tiên tiến, trong phần Tùy chỉnh CSS (Nếu bạn không có phần này thì hãy nhanh chóng nâng cấp lên phiên bản chuyên nghiệp của Elementor để tiếp tục)
Sao chép và dán đoạn mã sau vào phần này:
/*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);
}Trước tiên, bạn sẽ không nhìn thấy nhiều, nhưng nếu bạn di chuột qua hình ảnh, bạn sẽ thấy mức thu phóng được áp dụng cho hình ảnh.
Bây giờ sao chép và dán mã sau vào mã trước đó để hiển thị hoặc ẩn các phần tử nhất định của cột:
/*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;
}Bây giờ, ngay sau khi bạn di chuột qua hình ảnh, tính năng thu phóng sẽ áp dụng cho hình ảnh, tên và biểu tượng của các mạng xã hội sẽ xuất hiện.
Hãy nhân đôi cột này 2 lần và xóa 2 cột còn lại.
Thay đổi hình nền của các Phần bên trong, cũng như tên và liên kết của các mạng xã hội.
Vậy là xong, bạn vừa thực hiện nhiệm vụ này một cách dễ dàng. Chỉ cần xem trước hoạt động của máy tính bảng và điện thoại thông minh, cố gắng thay đổi lợi nhuận để phù hợp với từng thiết bị.
Tải xuống Elementor Pro ngay!
Kết luận
Cho nên ! Đó là vì bài viết này hướng dẫn bạn cách áp dụng hiệu ứng Thu phóng trên thẻ hồ sơ. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
