8 chủ đề trẻ em Divi tuyệt vời cho các nhiếp ảnh gia

8 chủ đề trẻ em Divi tuyệt vời cho các nhiếp ảnh gia

Divi là một chủ đề WordPress tuyệt vời để xây dựng một trang web nhiếp ảnh. Thể hiện kỹ năng chụp ảnh của bạn với thư viện, giới thiệu các ví dụ về công việc của bạn với danh mục đầu tư, cung cấp thông tin về giá cả, đặt lịch cho khách hàng thông qua biểu mẫu liên hệ, v.v. 

Tất nhiên, bạn không phải xây dựng trang web nhiếp ảnh của mình từ đầu. Có rất nhiều chủ đề chụp ảnh trẻ em có sẵn để giúp bạn bắt đầu. Trong bài viết này, chúng ta sẽ xem xét 10 Chủ đề Trẻ em Divi hoàn hảo cho các nhiếp ảnh gia.

8 chủ đề Divi cho trẻ em Hoàn hảo cho các nhiếp ảnh gia

KHAI THÁC. Tử tế

Kindred

Kindred được thiết kế cho các nhiếp ảnh gia, nhà quay phim và nghệ sĩ sáng tạo. Nó đi kèm với 16 bố cục trang với 2 trang chủ, 3 kiểu tiêu đề, 3 kiểu thư viện, trang tài liệu giới thiệu giá, nhiều trang blog và hơn thế nữa. 

Các trang bao gồm các dịch vụ, Câu hỏi thường gặp, lời chứng thực, giá cả, nhiều bố cục email, v.v. Trang chủ hiển thị các ví dụ về công việc của bạn trong một thanh trượt toàn màn hình. Blog bao gồm một thanh bên cách điệu.

Tạo mạng xã hội của bạn với nguồn cấp dữ liệu Instagram tích hợp. Nó có màu sắc nhẹ nhàng, thiết kế đẹp mắt và đồ họa vẽ tay rất lý tưởng để chụp ảnh cưới, nhưng nó cũng hoạt động tuyệt vời cho các loại nhiếp ảnh khác.

Thêm thông tin | cuộc biểu tình | Web hosting

2. Phototeals

Hotelo

Photelo là một chủ đề trẻ em đa năng được thiết kế cho bất kỳ loại hình kinh doanh nhiếp ảnh nào. Nó có 8 trang chính bao gồm các trang cho các dịch vụ của bạn và một thư viện ảnh. 

Trang chủ có thanh trượt toàn màn hình để hiển thị các ví dụ về công việc của bạn, nhiều CTA để xem các dịch vụ, lời chứng thực của bạn, dòng giới thiệu phong cách trên ảnh có đường viền cách điệu, thư viện cách điệu giới thiệu các danh mục và Hơn thế nữa.

 Các trang blog bao gồm một thanh bên cách điệu. Nó cũng bao gồm một phong cách cho Bloom. Kiểu dáng và màu sắc phù hợp cho chụp ảnh chân dung, gia đình và đám cưới.

Thêm thông tin | cuộc biểu tình | Web hosting

3.Joshua

Joshua

Joshua được thiết kế cho các nhiếp ảnh gia và studio chụp ảnh chuyên nghiệp. Nó bao gồm 3 trang chủ khác nhau cung cấp các cách khác nhau để hiển thị nhiếp ảnh và dịch vụ của bạn. 

Nó cũng bao gồm 2 trang Giới thiệu về bản thân, 2 trang dịch vụ với một trang dịch vụ duy nhất, 5 trang danh mục đầu tư bao gồm một trang danh mục và 2 trang dự án đơn lẻ, nhiều trang blog, một trang định giá, v.v. Có 19 trang con để sử dụng. 

Blog có một trang đăng bài. Trang chủ bao gồm rất nhiều CTA cách điệu với hình ảnh để thể hiện các danh mục của bạn và làm nổi bật cho các dịch vụ. Hình ảnh nghiêng trong chuyến bay lơ lửng. Nó là lý tưởng cho các nhiếp ảnh gia tự do của tất cả các loại.

Thêm thông tin | cuộc biểu tình | Web hosting

4. Parker

Parker

Parker được thiết kế cho các nhiếp ảnh gia, nhà quay phim, nhà tổ chức sự kiện, nghệ sĩ sáng tạo và huấn luyện viên. Nó đi kèm với 13 trang, 3 kiểu tiêu đề, 3 kiểu thư viện, một trang tài liệu quảng cáo giá, 4 trang blog và hơn thế nữa.

Các trang bao gồm Giới thiệu, Danh mục đầu tư, Thông tin, Giá cả, Khen ngợi, Blog và Liên hệ. Trang chủ hiển thị hình ảnh với thông tin chồng lên nền, CTA, liên kết đến danh mục đầu tư, blog, trích dẫn, v.v. Màu sắc nhẹ nhàng rất lý tưởng để chụp ảnh gia đình và đám cưới.

Thêm thông tin | cuộc biểu tình | Web hosting

5. Hội trường

Halle

Halle được thiết kế dành cho các nữ nhiếp ảnh gia và nhà quảng cáo để bán ảnh, dịch vụ và các sản phẩm khác của họ. Nó đi kèm với 14 trang, bao gồm trang đích, trang chủ, 3 phòng trưng bày, giá cả, Instagram, blog với nhiều bố cục, trang cửa hàng, v.v. 

Trang đích là một CTA với một hình thức đăng ký. Tôi thích trang phòng trưng bày hiển thị các hình ảnh xen kẽ. Nó có một số tùy chọn điều hướng và trình tải trước hiển thị hoạt ảnh trong khi trang web đang tải. Thiết kế và màu sắc nữ tính rất phù hợp để chụp ảnh cưới.

Thêm thông tin | cuộc biểu tình| Web hosting

6. Danh mục nhiếp ảnh

Danh mục nhiếp ảnh

Photo Portfolio được thiết kế để tạo ra một danh mục đầu tư cho các nhiếp ảnh gia. Nó đi kèm với 4 trang chính và bao gồm các trang danh mục hiển thị các phòng trưng bày cho từng chủ đề. Trang Book Now bao gồm lịch dựng sẵn và biểu mẫu để đặt lịch chụp ảnh. 

Trang chủ hiển thị CTA đặt phòng trong phần anh hùng. Bố cục bao gồm các hình ảnh cho các liên kết đến ảnh để mua. Thanh bên bao gồm các liên kết đến từng danh mục. Đó là một lựa chọn tốt để hiển thị các thư viện ảnh của bạn.

Thêm thông tin | cuộc biểu tình | Web hosting

7. Nhiếp ảnh Divi

Nhiếp ảnh Divi

Divi Photography được thiết kế dành cho các nhiếp ảnh gia muốn giới thiệu dịch vụ của họ, bán ảnh, tạo sự kiện và tạo các khóa học trực tuyến. Nó có một phiên bản sáng và một phiên bản tối. Mỗi phiên bản có hàng chục trang, bao gồm tất cả các trang lưu trữ cho WooCommerce và tất cả các trang khóa học cho LifterLMS. 

Nó cũng bao gồm nhiều trang danh mục đầu tư để giới thiệu công việc của bạn, nhiều trang blog, nhiều trang sự kiện, đặt chỗ, dịch vụ, v.v. Bao gồm plugin Divi Icon Expansion Pack với 50 biểu tượng nhiếp ảnh tùy chỉnh. Đây là một lựa chọn đặc biệt tốt cho bất kỳ ai muốn bán sản phẩm hoặc cung cấp các khóa học thông qua trang web của họ.

Thêm thông tin | cuộc biểu tình | Web hosting

8. Birdie Jones

Birdie jones

Birdie Jones được thiết kế cho các nhiếp ảnh gia đám cưới. Nó có 6 trang chính và bao gồm 3 bố cục thư viện khác nhau. Trang chủ hiển thị ảnh của bạn trong một thanh trượt cho phần anh hùng. Nó cũng bao gồm một phần có liên kết đến thông tin trong một tập hợp các hình ảnh. 

Phần portfolio hiển thị các hình ảnh dưới dạng liên kết đến các danh mục nhiếp ảnh. Trang Thông tin cung cấp thông tin về các gói của bạn dưới dạng CTA trong một bố cục thay thế. Nó cũng bao gồm một chân trang tùy chỉnh với nguồn cấp dữ liệu Instagram được tích hợp sẵn để xây dựng mạng xã hội của bạn. Nó là hoàn hảo cho bất kỳ kinh doanh liên quan đến đám cưới.

Thêm thông tin | cuộc biểu tình | Web hosting

Đó là nó cho danh sách các chủ đề trẻ em Divi này. Nếu bạn không có Divi, nhưng muốn tìm một chủ đề tuyệt vời mà bạn có thể sử dụng để tạo blog nhiếp ảnh gia, chúng tôi đề xuất danh sách sau.

Cách tạo bộ đếm vòng tròn sống động trong khi cuộn với Divi

Cách tạo bộ đếm vòng tròn sống động trong khi cuộn với Divi

Bộ đếm vòng tròn hoạt hình là một cách phổ biến để trình bày thông tin (như thống kê hoặc chỉ số) trên trang web với sự tương tác thú vị. Trên thực tế, bạn có thể đã quen thuộc với mô-đun bộ đếm vòng tròn của Divi, giúp việc thêm bộ đếm vòng tròn vào trang Divi của bạn nhanh chóng và dễ dàng. 

Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo các bộ đếm vòng kết nối hoàn toàn tùy chỉnh hoạt động khi bạn cuộn! Chúng tôi sẽ không cần bất kỳ CSS tùy chỉnh bên ngoài nào để tạo chúng. Bí quyết là tận dụng chức năng Lớp của Divi để quản lý một số mô-đun hoạt hình và xếp chồng với độ chính xác.

Kết quả có thể

Dưới đây là tổng quan nhanh về các vạch chia vòng tròn hoạt hình mà chúng ta sẽ tạo trong hướng dẫn này.

quầy vòng tròn hoạt hình trên cuộn

Tạo bốn bộ đếm vòng tròn trở nên sống động khi cuộn với Divi

Cấu hình phần và dòng

Đầu tiên, thêm một hàng bốn cột vào phần mặc định.

quầy vòng tròn hoạt hình trên cuộn

Tiếp theo, mở cài đặt phần và thêm lề trên và dưới để chúng ta có đủ không gian để kiểm tra hiệu ứng cuộn của các bộ đếm vòng tròn mà chúng ta sẽ tạo.

  • Ký quỹ: cao 85vh, thấp 85vh
quầy vòng tròn hoạt hình trên cuộn

Sau đó mở cài đặt dòng và cập nhật như sau:

  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 1200px
quầy vòng tròn hoạt hình trên cuộn

Sử dụng chế độ xem Lớp

Trước khi bạn bắt đầu tạo bộ đếm vòng tròn động, hãy đảm bảo rằng bạn triển khai chức năng Lớp Divi. Bạn có thể thực hiện việc này bằng cách nhấp vào biểu tượng lớp màu xám trong menu cài đặt dưới cùng.

quầy vòng tròn hoạt hình trên cuộn

Vì chúng ta sẽ tạo ra rất nhiều phần tử (hoặc lớp) chồng lên nhau, hộp lớp chắc chắn sẽ rất hữu ích để quản lý các lớp của chúng ta trong tương lai.

Tạo bộ đếm vòng tròn hoạt hình # 1 (25%)

Bộ đếm vòng tròn hoạt hình đầu tiên này sẽ tạo hoạt ảnh lên đến 25% hình tròn trên cuộn và có phần trăm văn bản tương ứng với tâm sẽ hòa vào cuộn. Để xây dựng thiết kế bộ đếm vòng tròn hoàn chỉnh, chúng tôi sẽ sử dụng một số mô-đun và phân chia văn bản chồng lên nhau. Đây là cách để làm điều đó.

Vòng tròn phía sau

Để tạo vòng tròn phía sau, chúng ta sẽ sử dụng một mô-đun phân tách mà chúng ta sẽ định hình thành một vòng tròn và tạo màu nền cho nó.

Thêm một mô-đun tách
quầy vòng tròn hoạt hình trên cuộn

Kéo dải phân cách lên trong chế độ xem lớp và thay đổi nhãn thành "hình tròn". Sau đó, mở cài đặt của mô-đun tách và cập nhật những điều sau:

  • Hiển thị dải phân cách: KHÔNG
  • Màu nền: # c3e0e5
quầy vòng tròn hoạt hình trên cuộn

Cập nhật các thông số thiết kế như sau:

  • Chiều rộng: 250px
  • Chiều cao: 250px
  • Lề: 25 pixel ở trên cùng, 25 pixel ở dưới cùng, 25 pixel ở bên trái
  • Góc làm tròn: 50%
quầy vòng tròn hoạt hình trên cuộn

Thanh màu xoay

Phần tiếp theo của bộ đếm hình tròn sẽ là thanh màu xoay. Nhân đôi dấu phân cách trước đó (vòng tròn sau) để khởi chạy lại thiết kế. Sau đó, cập nhật dấu phân cách mới với nhãn "thanh màu".

quầy vòng tròn hoạt hình trên cuộn

Để tạo hiệu ứng thanh màu xoay, chúng ta cần biến tấm ngăn này thành hình bán nguyệt với màu sắc mà chúng ta muốn sử dụng cho thanh.

Mở cài đặt dải phân cách thanh màu và cập nhật các mục sau:

  • Màu nền: không có
  • Nền gradient màu bên trái: # 121b55
  • Màu nền của gradient bên phải: rgba (255,255,255,0)
  • Hướng dốc: 90deg
  • Vị trí bắt đầu: 50%
  • Vị trí cuối cùng: 0%
quầy vòng tròn hoạt hình trên cuộn

Trên một số trình duyệt, có một vấn đề nhỏ chồng chéo hiển thị màu không mong muốn qua các lớp. Để tránh điều này, chúng ta sẽ làm cho hình bán nguyệt này nhỏ hơn một chút và điều chỉnh độ lệch cho phù hợp.

  • Chiều rộng: 248px
  • Chiều cao: 248px
quầy vòng tròn hoạt hình trên cuộn

Để làm cho vòng tròn của thanh màu chồng lên vòng tròn phía sau, hãy đặt dải phân cách một vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 26 pixel
  • Độ lệch ngang: 26 pixel
quầy vòng tròn hoạt hình trên cuộn

Sau đó, thêm hiệu ứng cuộn sau để xoay thanh tròn 90 độ (hoặc 25% hình tròn).

Trong tab Hiệu ứng quay ...

  • Bắt đầu xoay vòng: 0deg (ở mức 15% của cửa sổ)
  • Xoay trung bình: 90 độ (ở 20% -25% khung nhìn)
  • Kết thúc xoay: 90 độ (ở 30% khung nhìn)
quầy vòng tròn hoạt hình trên cuộn

Các giá trị phần trăm và xoay vòng ở đây dường như không có ý nghĩa hoàn toàn vào thời điểm này. Chúng tôi giúp cập nhật vòng quay sau này dễ dàng hơn khi chúng tôi xây dựng bộ đếm vòng tròn tiếp theo kết thúc ở 180 độ (50% vòng tròn). Điều quan trọng tại thời điểm này là vòng quay kết thúc ở 90 độ (hoặc 25%).

Cái khiên

Phần tử tiếp theo của bộ đếm vòng tròn của chúng tôi là cái mà tôi gọi là lá chắn, là một hình bán nguyệt khác ẩn bên trái của vòng tròn thanh màu khi nó quay.

 Để tạo lá chắn, hãy nhân đôi mô-đun phân tách Vòng tròn Quay lại đầu tiên mà chúng ta đã tạo trước đó. Sau đó kéo nó xuống dưới mô-đun phân tách "Thanh màu" và cập nhật nhãn thành "lá chắn" để dễ dàng tham khảo.

quầy vòng tròn hoạt hình trên cuộn

Mở cài đặt bộ chia lá chắn và cập nhật các thông tin sau:

  • Màu nền: không có
  • Màu nền gradient bên trái: # c3e0e5 (giống như vòng tròn phía sau)
  • Màu nền của gradient bên phải: rgba (255,255,255,0)
  • Hướng dốc: 90deg
  • Vị trí bắt đầu: 50%
  • Vị trí cuối cùng: 0%
quầy vòng tròn hoạt hình trên cuộn

Bây giờ cung cấp cho các mô-đun một vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 25px
  • Độ lệch ngang: 25 pixel
quầy vòng tròn hoạt hình trên cuộn

Vòng tròn phía trước

Phần tiếp theo của bộ đếm vòng tròn là vòng tròn phía trước, nó sẽ ẩn phần giữa của các lớp trước đó và để lộ cạnh bên ngoài.

Để tạo nó, hãy nhân đôi dải phân cách hình tròn phía sau, thả nó xuống dưới mô-đun dải phân cách hình khiên và cập nhật nhãn thành "vòng tròn phía trước".

quầy vòng tròn hoạt hình trên cuộn

Mở cài đặt của mô-đun tách vòng tròn phía trước và cập nhật các thông tin sau:

  • Màu nền: #ffffff
  • Chiều rộng: 200px
  • Chiều cao: 200px
quầy vòng tròn hoạt hình trên cuộn

Sau đó thêm vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 50px
  • Độ lệch ngang: 50px
quầy vòng tròn hoạt hình trên cuộn

Số lượng đổi màu

Phần cuối cùng của bộ đếm vòng tròn đầu tiên này là số lượng đổi màu tương ứng với giá trị được chỉ định bởi thanh quay.

Để xây dựng nó, thêm một mô-đun văn bản mới dưới mô-đun tách vòng tròn phía trước.

quầy vòng tròn hoạt hình trên cuộn

Trong hộp Lớp, đặt tên cho mô-đun văn bản mới là "num1". Sau đó, mở cài đặt và cập nhật nội dung để đọc "25%".

quầy vòng tròn hoạt hình trên cuộn

Trong cài đặt thiết kế, cập nhật các thông tin sau:

  • Trọng lượng phông chữ của văn bản: đậm
  • Kích thước văn bản: 25px
  • Chiều cao của dòng văn bản: 2em
  • Sắp xếp văn bản: trung tâm
quầy vòng tròn hoạt hình trên cuộn
  • Chiều rộng: 200px
  • Chiều cao: 200px
  • Góc làm tròn: 50%
quầy vòng tròn hoạt hình trên cuộn
  • Đệm: trên 75px
  • Vị trí: tuyệt đối
  • Độ lệch dọc: 50px
  • Độ lệch ngang: 50px
quầy vòng tròn hoạt hình trên cuộn

Bây giờ văn bản nên được tập trung hoàn hảo trong bộ đếm vòng tròn.

Để thêm hiệu ứng mờ dần, hãy cập nhật các hiệu ứng cuộn sau:

Trong tab Làm mờ dần và Làm mờ dần ...

  • Kích hoạt mờ dần trong và ngoài: CÓ
  • Độ mờ ban đầu: 0% (ở mức 10% của cửa sổ)
  • Độ mờ trung bình: 100% (ở mức 20% của cửa sổ)
  • Độ mờ cuối: 100% (ở 100% chế độ xem)
quầy vòng tròn hoạt hình trên cuộn

Đó là nó cho đồng hồ tròn. Khám phá kết quả.

quầy vòng tròn hoạt hình trên cuộn

Tất cả những gì bạn cần làm bây giờ là sao chép những gì chúng ta đã làm cho đến nay trên các cột khác và sửa đổi các giá trị khác nhau để làm cho bộ đếm trở thành duy nhất.

8 chủ đề trẻ em Divi cho huấn luyện viên cá nhân

8 chủ đề trẻ em Divi cho huấn luyện viên cá nhân

Nhiều huấn luyện viên cá nhân đã chuyển sang Divi để xây dựng nền tảng trực tuyến của họ. Tất nhiên, lý do tại sao họ sử dụng Divi là rất hợp lý: Divi cung cấp mọi thứ bạn cần để hiển thị dịch vụ, lời chứng thực, blog trên miền của bạn và giao tiếp với khách hàng tiềm năng. 

May mắn thay, bạn không phải xây dựng trang web huấn luyện cuộc sống của mình từ đầu. Trong danh sách này, chúng tôi sẽ xem xét 8 chủ đề trẻ em Divi dành cho huấn luyện viên cá nhân, những chủ đề này sẽ giúp bạn bắt đầu dự án Divi tiếp theo của mình. Bám sát cho đến cuối cho gói bố cục thưởng.

1. Quimper

Quimper

Quimper được thiết kế cho các huấn luyện viên cuộc sống, nhà trị liệu, người chữa bệnh và các chuyên gia chăm sóc sức khỏe. Nó đi kèm với 8 trang cá nhân hóa. Trang Chi tiết gói có rất nhiều thông tin về gói và bao gồm CTA. 

Quimper cung cấp thông tin chi tiết của một sự kiện, bao gồm CTA và lịch trình hàng giờ. Trang Podcast bao gồm các podcast cài sẵn. Nó cũng bao gồm nhiều bố cục blog, một trang chứng thực, 3 lựa chọn tham gia, một lựa chọn Bloom cho chân trang, một nguồn cấp dữ liệu Instagram được tích hợp sẵn và một trang đăng nhập và tùy biến đăng nhập WP. Phong cách bao gồm một thiết kế nữ tính với màu sắc nhẹ nhàng và nền hoa.

Giá: 170 € | Thêm thông tin | nơi ăn nghỉ

2. Huấn luyện viên cuộc sống

Huấn luyện viên cuộc sống

Life Coach được thiết kế cho các huấn luyện viên cuộc sống, những người cung cấp các cuộc hội thảo tại chỗ và âm thanh. Đó là một thiết kế một trang bao gồm một nền trắng tối giản với các điểm nổi bật màu xanh đậm. Một phần dành cho hội nghị bao gồm trình phát âm thanh tích hợp. Một phần cho lịch hội nghị hàng tháng được quản lý bằng các tab cách điệu. 

Bạn cũng sẽ tìm thấy bảng mờ, bộ đếm số, lời chứng thực, CTA, bảng giá cả, bản đồ, tùy chọn nhỏ cho email và hơn thế nữa. Thiết kế gọn gàng mang lại cảm giác công ty chuyên nghiệp sẽ thu hút các giám đốc điều hành.

Giá: 29 $ | Thêm thông tin | nơi ăn nghỉ

3. Sống động

Vivid

Vivid được thiết kế cho các huấn luyện viên, cố vấn và nhà giáo dục. Nó đi kèm với 10 trang chính, bao gồm một số trang Work With Me dành cho huấn luyện riêng, huấn luyện nhóm, chương trình trực tuyến, tư cách thành viên VIP.

 Nó cũng bao gồm các trang bán hàng dạng dài và mới bắt đầu, 2 biểu mẫu Bloom, 2 trang chính sách, trang lưu trữ, trang bài đăng đơn, trang 404, phong cách quân chủ, tích hợp biểu tượng xã hội, Vân vân. 

Một menu kép hiển thị menu chính và menu bánh hamburger với nhiều liên kết hơn. Các dịch vụ được hiển thị với hoạt ảnh hiển thị khi di chuột qua tùy chỉnh. Nó có thiết kế nữ tính có thể thay đổi dễ dàng trong bảng định kiểu.

Giá: £ 120,00 | Thêm thông tin | Nhà trọ

4. Huấn luyện viên Divi

Huấn luyện viên Divi

Divi Coach được thiết kế với tâm trí là huấn luyện viên cuộc sống, người cố vấn, diễn giả, nhà trị liệu và huấn luyện viên. Nó đi kèm với 4 trang để hiển thị các dịch vụ, sự kiện, lời chứng thực, bài đăng trên blog, thông tin và biểu mẫu liên hệ của bạn. Trang chủ bao gồm một phần danh mục đầu tư được cá nhân hóa. 

Các bài đăng trên blog được hiển thị trong một băng chuyền tùy chỉnh và một blog gần đây tùy chỉnh. Nó cũng bao gồm một phong cách tùy chỉnh cho trang blog. Nó có một bảng màu nữ tính, nhưng màu sắc rất dễ thay đổi cho bất kỳ loại thiết kế chuyên nghiệp nào bạn muốn.

Giá: 39 $ | Thêm thông tin | nơi ăn nghỉ

5. Cô gái Divi

Cô gái divi

Divi Girl được thiết kế dành cho huấn luyện viên cuộc sống, người viết blog, diễn giả, nhà đào tạo, tác giả, nhà cung cấp dịch vụ, v.v. Nó đi kèm với 12 trang chủ bao gồm một trang gọi là Life Coach để hiển thị các dịch vụ, thông tin, lời chứng thực của bạn, v.v.

 Nó cũng bao gồm một blog với nhiều bố cục cho các bài đăng độc đáo, tích hợp WooCommerce với tất cả các trang cửa hàng, trang Câu hỏi thường gặp và trang Liên hệ. 

Trang chủ hiển thị một CTA trong phần anh hùng, một số kiểu làm nổi bật và một số phần có chiều rộng đầy đủ cho báo giá và CTA liên hệ. Màu sắc nhẹ nhàng rất phù hợp cho thiết kế nữ tính.

Giá: 49 $ | Thêm thông tin | nơi ăn nghỉ

6. Phát triển

Phát triển mạnh

Thrive được thiết kế với các huấn luyện viên, cố vấn và chuyên gia tư vấn. Nó đi kèm với 6 trang chính bao gồm Work With Me để hiển thị các dịch vụ của bạn và Kind Words để hiển thị lời chứng thực của bạn. Nó bao gồm một nam châm chính cho Divi và Bloom, một chân trang tùy chỉnh toàn cầu, phông chữ tùy chỉnh và lời kêu gọi hành động. 

Phần anh hùng và phần nổi bật bao gồm văn bản với lớp phủ màu xanh nhạt và viền trắng. Phông chữ tiêu đề là vàng. Các trang khác có phong cách tương tự. Màu sắc có thể được thay đổi dễ dàng trong bảng định kiểu.

Giá: £ 79,00 | Thêm thông tin | nơi ăn nghỉ

7. Lil nữ tính

Nữ tính lil

Lil Feminine được thiết kế cho các huấn luyện viên cuộc sống, huấn luyện viên kinh doanh và hơn thế nữa. Nó đi kèm với 6 trang chính bao gồm Dịch vụ để hiển thị các loại dịch vụ và khóa học bạn cung cấp. Các dịch vụ trên trang chủ được trình bày trong nhiều phần với các mô tả bao gồm lớp phủ cho phần đó. 

Nó cũng có các CTA tuyệt vời, phần blog tùy chỉnh, nhiều bố cục blog với thanh bên tùy chỉnh, trang lưu trữ và danh mục, chân trang tùy chỉnh và nguồn cấp dữ liệu Instagram tích hợp sẵn. Màu sắc nhẹ nhàng là lý tưởng cho các huấn luyện viên cuộc sống nữ.

Giá: 99,99 € | Thêm thông tin | nơi ăn nghỉ

8. Chủ đề trẻ em của Divi Coach

Chủ đề trẻ em huấn luyện viên divi

Chủ đề Divi Coach Child được thiết kế cho một số loại trang web huấn luyện bao gồm huấn luyện viên cuộc sống. Nó đi kèm với 5 trang để hiển thị các dịch vụ và thông tin của bạn. Các dịch vụ được hiển thị trong bố cục bao gồm hoạt ảnh tùy chỉnh và lớp phủ hiển thị thông tin di chuột. 

Phần nhóm tùy chỉnh bao gồm thiết kế tương tự, điều này rất phù hợp cho các doanh nghiệp có nhiều huấn luyện viên cuộc sống. Lớp phủ Divi, thanh Divi và Divi Mega Pro được tích hợp sẵn và bao gồm các mẫu được thiết kế chuyên nghiệp. Menu hiển thị CTA. Điểm nổi bật và kiểu dáng màu xanh lá cây rất phù hợp cho cả huấn luyện viên nam và nữ.

Giá: 49 $ | Thêm thông tin | nơi ăn nghỉ

Tiền thưởng: gói bố trí huấn luyện viên cuộc sống

Gói bố trí huấn luyện viên cuộc sống

Gói bố trí huấn luyện viên cuộc sống Elegant Themes đi kèm với 6 trang bao gồm Trang chủ, Blog, Huấn luyện để hiển thị các dịch vụ huấn luyện của bạn, Liên hệ, Giới thiệu và trang đích. 

Bố cục bao gồm các điểm nổi bật màu cam, nền màu xám, dải phân cách góc cạnh và rất nhiều mô-đun tạo kiểu như blurb, blog, lời chứng thực, biểu mẫu liên hệ, biểu mẫu đăng ký, theo dõi mạng xã hội, dép tông, v.v. 

Bố cục có sẵn trong Divi Builder và bao gồm các ảnh miễn phí mà bạn có thể sử dụng với các dự án của mình. Cấu trúc đường chéo và màu sắc tạo cho bố cục một thiết kế độc đáo và nổi bật.

Giá: Miễn phí | Thêm thông tin | nơi ăn nghỉ

Kết thúc suy nghĩ

Đây là cái nhìn của chúng tôi về 8 chủ đề trẻ em Divi dành cho huấn luyện viên cá nhân. Chúng tôi cũng đã thêm một gói bố cục bổ sung gồm Chủ đề thanh lịch, đề phòng trường hợp bạn không tìm kiếm chủ đề con. 

Các chủ đề con này là lựa chọn tuyệt vời để giới thiệu các dịch vụ huấn luyện cuộc sống, lời chứng thực, các gói có sẵn, công cụ, xây dựng bộ phần mềm của bạn, giao tiếp với khách hàng, v.v. Chúng được thiết kế chuyên nghiệp và chắc chắn sẽ mang đến cho bạn một khởi đầu thuận lợi trên trang web Divi tiếp theo của bạn.

Tài nguyên bổ sung

Ngoài ra, bạn luôn có thể chọn một chủ đề WordPress khác không nhất thiết phải sử dụng Divi. Đây là danh sách các bộ sưu tập chủ đề có thể giúp bạn xây dựng trang web mới của mình.

Cách tạo hiệu ứng cuộn phần chia trong Divi

Cách tạo hiệu ứng cuộn phần chia trong Divi

Tạo hiệu ứng cuộn bằng cách sử dụng bộ chia phần là một kỹ thuật thú vị và dễ dàng có thể thêm sức sống cho trang web của bạn bằng cách sử dụng chủ đề Divi WordPress. Dấu phân chia phần tiếp tục là một yếu tố thiết kế linh hoạt, hữu ích để tăng thêm tính sáng tạo cho các chuyển đổi nội dung trang của bạn. 

Nhưng với hiệu ứng cuộn của Divi, các phần chia phần còn trở nên thú vị hơn! Bí quyết là tách một phần dành riêng cho kiểu dải phân cách mà bạn lựa chọn. Sau đó, bạn có thể thêm tất cả các loại chuyển động tạo cuộn vào phần để tạo hiệu ứng cuộn đẹp mắt làm nền cho nội dung trang.

Hãy bắt đầu nào!

Kết quả có thể

Dưới đây là tổng quan về các thiết kế mà chúng tôi sẽ có thể đạt được sau khi hoàn thành hướng dẫn này.

Cách tạo bộ chia phần cuộn hoạt hình với Divi

Tạo hai phần nội dung

Thêm một hàng

Để bắt đầu, tạo một hàng với một cột trong phần mặc định.

Thêm phần divi

Phần lề (cho các bài kiểm tra)

Với mục đích thử nghiệm, hãy thêm một lề trên vào phần để chúng ta có thể có chỗ cho việc cuộn. Mở cài đặt phần và thêm phần sau:

  • Lề trên: 80vh
Định cấu hình giãn cách phần divi

Thêm một mô-đun văn bản

Trong hàng của một cột, hãy thêm một mô-đun văn bản mới.

Mô-đun văn bản Divi

Nội dung của mô-đun văn bản

Bên trong nội dung nội dung, hãy thêm tiêu đề H2 sau:

<h2>Section Avec Séparateurs</h2>

Phần có dải phân cách

Thiết kế mô-đun văn bản

Trong cài đặt thiết kế, cập nhật các thông tin sau:

  • Phông chữ: Roboto
  • Sắp xếp văn bản: trung tâm
  • Mục 2 Màu văn bản: # bae0d8
  • Tiêu đề 2 Kích thước văn bản: 80px (máy tính để bàn), 50px (máy tính bảng), 30px (điện thoại)
Cấu hình phông chữ Divi

Thêm phần nội dung thứ hai

Trong phần trước, thêm một phần thông thường mới.

hiệu ứng cuộn phần chia

Thêm một hàng

Trong phần mới, thêm một hàng vào một cột.

Thêm divi phần 1

Thêm một mô-đun văn bản

Sau đó thêm một mô-đun văn bản mới vào dòng.

Thêm mô-đun văn bản divi

Thiết kế mô-đun văn bản

Bây giờ chúng ta có thể giữ nội dung đệm mặc định bên trong phần thân. Hãy chuyển sang tab thiết kế và cập nhật những điều sau:

  • Phông chữ: Roboto
  • Màu văn bản văn bản: #dddddd
  • Kích thước văn bản: 16px
  • Chiều cao dòng văn bản: 1,5 em
  • Căn chỉnh văn bản: bên trái
  • Chiều rộng tối đa: 400 px
  • Sắp xếp mô-đun: trung tâm
Tùy chỉnh mô-đun divi kiểu văn bản

Cài đặt phần

Đảm bảo loại bỏ màu nền mặc định của phần nhưng cung cấp cho nó một nền hoàn toàn trong suốt. Sau đó, chúng ta có thể loại bỏ phần đệm trên cùng và thêm một lề dưới cho mục đích kiểm tra cuộn.

Để thực hiện việc này, hãy mở cài đặt phần và cập nhật các mục sau:

  • Màu nền: rgba (0,0,0,0)
  • Lề dưới: 80vh
  • Đệm: 0px
Cấu hình phần giãn cách Divi

Tạo phần tách hoạt hình

Khi hai phần nội dung được hoàn thành, chúng tôi sẵn sàng thêm phần cho các phần chia phần hoạt hình của chúng tôi.

Thêm một phần mới

Đi trước và tạo một phần thông thường mới ở giữa hai phần nội dung.

Thêm divi phần thông thường

Bối cảnh của phần

Và một lần nữa, hãy xóa màu nền mặc định của phần, nhưng cập nhật những điều sau:

  • Màu nền: rgba (0,0,0,0)
Phần nền nhân văn divi

Thiết kế vách ngăn

Đừng lo lắng, chúng tôi sẽ tạo màu nền của chúng tôi bằng các vạch chia phần. Để thực hiện việc này, hãy nhấp vào tab thiết kế và thêm một dải phân cách trên và dưới vào phần như sau:

Thiết kế vách ngăn cao cấp

  • Kiểu dải phân cách trên cùng: xem ảnh chụp màn hình
  • Màu của dải phân cách trên: # 524fbf
  • Chiều cao của dải phân cách trên: 20vw
  • Sự lặp lại theo chiều ngang của dải phân cách trên: 0,6x
  • Lật của dải phân cách trên: ngang
Cấu hình đường viền phần Divi

Thiết kế vách ngăn dưới

  • Kiểu dải phân cách dưới cùng: xem ảnh chụp màn hình
  • Màu phân cách dưới: # 524fbf
  • Chiều cao của dải phân cách dưới: 20vw
  • Sự lặp lại theo chiều ngang của dải phân cách dưới: 0,5x
  • Độ phân chia dưới: ngang và dọc
Bộ chọn divi thấp hơn
Phần chiều cao và phần đệm

Vì phần này hoàn toàn dành cho thiết kế dải phân cách, chúng ta có thể loại bỏ chiều cao và phần đệm để chỉ hiển thị kiểu dáng của dải phân cách và không có khoảng trống không cần thiết giữa hai phần nội dung. Cập nhật thông tin sau:

  • Chiều cao: 0px
  • Đệm: cao 0px, thấp 0px
Phần dải phân cách thấp divi
Phần hiệu ứng cuộn phân cách

Sau đó cung cấp cho các phần hiệu ứng cuộn sau đây:

Dưới tab Chuyển động ngang ...

  • Kích hoạt chuyển động ngang: CÓ

Chúng tôi có thể giữ cài đặt mặc định cho cài đặt này trên giao diện của văn phòng .

Divi cuộn ngang

Sau đó cập nhật các tham số chuyển động ngang trên máy tính bảng :

  • Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
  • Độ lệch trung bình: 0 (ở 50% khung nhìn)
  • Độ lệch cuối: -3 (ở 100% chế độ xem)
Bảng độ lệch ngang divi

Dưới tab Mở rộng quy mô lên và xuống , cập nhật những điều sau đây trên văn phòng ...

  • Tỷ lệ bắt đầu: 200% (ở mức 0% của cửa sổ)
  • Tỷ lệ trung bình: 150% (ở 45% -65% khung nhìn)
  • Tỷ lệ kết thúc: 150% (ở 100% khung nhìn)
Cấu hình bố cục

Sau đó, cập nhật hiệu ứng Scaling Up and Down trên máy tính bảng như sau:

  • Tỷ lệ bắt đầu: 400% (ở 0% cửa sổ)
  • Tỷ lệ trung bình: 300% (ở 45% -65% khung nhìn)
  • Tỷ lệ kết thúc: 400% (ở 100% khung nhìn)

Lý do chính mà chúng ta cần điều chỉnh hiệu ứng chuyển động trên máy tính bảng (và điện thoại) là do các giá trị chuyển động ngang sử dụng đơn vị độ dài pixel (tức là 3 = 300 pixel), là tuyệt đối và không điều chỉnh theo chiều rộng của trình duyệt.

Bây giờ hãy xem kết quả cuối cùng của bộ chia phần hoạt hình cuộn của chúng tôi.

cuối cùng suy nghĩ

Tạo hoạt ảnh cho các ngăn chia phần trên cuộn là một cách thú vị và hiệu quả để làm cho một trang web trở nên sống động. Hy vọng điều này mang lại cho bạn một số cảm hứng để tự mình tạo ra nhiều thiết kế sáng tạo hơn nữa.

Cách tiết lộ thư viện ảnh của bạn với hiệu ứng cuộn trên Divi

Cách tiết lộ thư viện ảnh của bạn với hiệu ứng cuộn trên Divi

Phòng trưng bày hình ảnh là điểm đến yêu thích trên hầu hết các trang web. Và, trong nhiều trường hợp, có thể tốt nhất là giữ cho các phòng trưng bày hình ảnh đó vui tươi và tĩnh, để hình ảnh hoạt động kỳ diệu.

 Nhưng, thêm một hiệu ứng cuộn câu đố trượt vào một bộ sưu tập hình ảnh (như chúng ta sẽ làm trong hướng dẫn này), có thể mang lại một cảm giác mới mẻ cho một tác phẩm kinh điển vượt thời gian.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một bố cục đơn giản để hiển thị thư viện hình ảnh với hiệu ứng cuộn câu đố trượt trên Divi. 

Điều quan trọng là phải hiểu kích thước của hình ảnh liên quan như thế nào đến các giá trị bù dọc và ngang của mỗi hiệu ứng cuộn để di chuyển hình ảnh chính xác đến một điểm. Nhưng khi hoàn thành, hiệu ứng chuyển động thu được sẽ sắc nét và chính xác khi nó dần dần lắp ráp và hiển thị một bộ sưu tập hình ảnh theo một cách độc đáo.

Kết quả có thể

Đây là tổng quan về bố cục bộ sưu tập hình ảnh với hiệu ứng cuộn xếp hình trượt mà chúng tôi sẽ tạo trong hướng dẫn này.

Divi kết quả có thể xảy ra

Tạo phần tiêu đề

Để bắt đầu, hãy tạo một phần tiêu đề nhanh sẽ yêu cầu người dùng cuộn trang để xem thư viện và với các hiệu ứng cuộn tuyệt vời.

Thêm một hàng

Thêm một hàng một cột vào phần mặc định.

Hàng cột đơn

Thêm một mô-đun văn bản

Bên trong cột / hàng thêm một mô-đun văn bản mới.

Trong cài đặt văn bản, cập nhật nội dung cơ thể với các mục sau:

<h1>Image Gallery</h1>

Thêm mô-đun văn bản

Cài đặt mô-đun văn bản

Trên tab Thiết kế, cập nhật thiết kế văn bản như sau:

  • Phông chữ: Roboto
  • Trọng lượng phông chữ: đậm
  • Kiểu chữ tiêu đề: TT
  • Căn chỉnh văn bản tiêu đề: Căn giữa
  • Kích thước văn bản tiêu đề: 50px (máy tính để bàn), 40px (máy tính bảng và điện thoại)
  • Khoảng cách tiêu đề thư: 4px
Kiểu văn bản đã sửa đổi

Thêm biểu tượng mô-đun Blurb

Khi văn bản đã được đặt đúng chỗ, hãy thêm một mô-đun văn bản trình bày mới bên dưới mô-đun văn bản.

Mô-đun tóm tắt lựa chọn Divi

Sau đó, xóa tất cả tiêu đề và nội dung khỏi nội dung mặc định và chọn sử dụng biểu tượng mũi tên xuống.

Mô-đun tóm tắt Divi

Cài đặt văn bản trình bày

Sau đó cập nhật cài đặt văn bản trình bày với màu mới và hình ảnh động lặp lại.

  • Màu biểu tượng: # ffb500
  • Phong cách hoạt hình: Trang trình bày
  • Hướng hoạt ảnh: xuống
  • Cường độ hoạt ảnh: 20%
  • Lặp lại hoạt ảnh: vòng lặp
Mô-đun tóm tắt hoạt ảnh Divi

Phần đệm

Để cung cấp không gian phần để cuộn, hãy cập nhật phần đệm như sau:

  • Đệm: 20vh ở trên, 50vh dưới

Ở đây chúng tôi đang sử dụng đơn vị độ dài vh có liên quan đến chiều cao của cửa sổ trình duyệt để khoảng cách phù hợp nhất quán trên tất cả các kích thước trình duyệt.

Định cấu hình giãn cách mô-đun divi

Tạo thư viện hình ảnh với các hiệu ứng cuộn

Bây giờ phần tiêu đề của chúng tôi đã hoàn tất, chúng tôi đã sẵn sàng xây dựng thư viện hình ảnh thực tế với các hiệu ứng cuộn câu đố trượt. Toàn bộ thư viện sẽ bao gồm ba hàng gồm 4 hình ảnh / cột trong mỗi hàng để tạo ra tổng số 12 hình ảnh. Tuy nhiên, bạn có thể dễ dàng thêm nhiều dòng và hình ảnh vào bố cục sau khi hoàn tất.

Tạo phần và dòng

Thêm một phần mới

Hãy bắt đầu bằng cách thêm một phần thông thường mới trong phần tiêu đề.

Phần lựa chọn divi

Thêm một hàng

Sau đó thêm một hàng với bốn cột vào phần.

Phần có 4 cột divi

Cài đặt dòng

Trong cài đặt dòng, cập nhật như sau:

  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 1200 px (máy tính để bàn), 600 px (máy tính bảng), 300 px (điện thoại)
Tham số dòng Divi
Cách độ rộng dòng xác định kích thước hình ảnh

Chiều rộng của hàng rất quan trọng đối với thiết kế này vì nó sẽ quy định chiều rộng của mỗi cột trong số bốn cột. Khi chúng tôi đặt chiều rộng rãnh nước thành 1, sẽ không còn lề giữa các hình ảnh. 

Và khi chúng tôi đặt chiều rộng tối đa thành 1200px, bố cục bốn cột sẽ làm cho mỗi cột / hình ảnh rộng chính xác 300px (1200px / 4 = 300px). 

Ngoài ra, vì mỗi hình ảnh đều là hình vuông, chúng ta biết rằng chiều cao của mỗi hình ảnh cũng sẽ là 300 pixel. Chúng ta không cần phải giữ nó như vậy nếu chúng ta không muốn. 

Ví dụ: chúng tôi cũng có thể chọn bố cục ba cột với hình ảnh 400 x 400 pixel. Biết chiều rộng hình ảnh (300px) và chiều cao (cũng là 300px) sẽ là chìa khóa để tạo hiệu ứng cuộn sau này.

Thêm hình ảnh

Thêm hình ảnh 1

Thêm div mô-đun hình ảnh

Hiệu ứng hình ảnh 1 cuộn

Hiệu ứng cuộn Divi
Mối quan hệ giữa kích thước hình ảnh và hiệu ứng cuộn

Khi sử dụng hiệu ứng cuộn dọc và ngang, điều quan trọng là phải hiểu giá trị số đã nhập đại diện cho điều gì. Trong ví dụ này, chúng ta có độ lệch bắt đầu di chuyển thẳng đứng là -3. -3 này thực tế là -300px (hoặc 300px xuống) là chiều rộng của hình ảnh. 

Sau đó, độ lệch đạt đến 0 (vị trí chính) khi người dùng cuộn. Đây là những gì tạo ra hiệu ứng cuộn di chuyển hình ảnh đến chính xác một khối / khung hình. Chuyển động ngang bắt đầu từ 3 (300 pixel từ bên phải) và dừng ở vị trí mặc định của nó. Hai hiệu ứng này kết hợp với nhau để tạo ra hiệu ứng cuộn hai phần độc đáo.

Thêm hình ảnh 2

Sau khi thêm hiệu ứng cuộn vào ảnh 1. Thêm ảnh mới vào cột 2.

Chúng tôi sẽ để lại hình ảnh tĩnh này mà không có bất kỳ hiệu ứng cuộn.

Thêm hình ảnh 3

Sau đó, thêm một mô-đun hình ảnh khác vào cột 3 và cập nhật mô-đun bằng một hình ảnh mới.

Hiệu ứng hình ảnh 3 cuộn

Trong Cài đặt Hình ảnh, cập nhật các hiệu ứng cuộn sau:

Trong tab Di chuyển ngang ...

  • Kích hoạt chuyển động ngang: CÓ
  • Bắt đầu bù: -3 (ở mức 0% của cửa sổ)
  • Độ lệch trung bình: 0 (ở 15% khung nhìn)
  • Độ lệch cuối: 0 (ở 100% chế độ xem)
Hiệu ứng cuộn divi mô-đun hình ảnh

Thêm hình ảnh 4

Để tạo hình ảnh cuối cùng, hãy sao chép hình ảnh 1 và dán vào cột 4.

Tải lên hình ảnh mới trong cài đặt hình ảnh.

Tải lên hình ảnh divi mới

Hiệu ứng hình ảnh 4 cuộn

Sau đó cập nhật các hiệu ứng cuộn sau:

Trong tab Chuyển động dọc ...

  • Kích hoạt chuyển động dọc: CÓ
  • Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
  • Độ lệch trung bình: 0 (ở mức 15% -28% của khung nhìn)
  • Độ lệch cuối: 0 (ở 40% chế độ xem)

Trong tab Di chuyển ngang ...

  • Kích hoạt chuyển động ngang: CÓ
  • Bắt đầu bù: 3 (ở mức 0% của cửa sổ)
  • Độ lệch trung bình: 3 (ở 28% khung nhìn)
  • Độ lệch cuối: 0 (ở 40% chế độ xem)
Tùy chọn cuộn Divi

Dòng trùng lặp

Bây giờ các hiệu ứng cuộn hình ảnh đã được thực hiện cho hàng đầu tiên, tất cả những gì chúng ta cần làm là sao chép hàng để tạo thêm hình ảnh và các hiệu ứng cuộn tương ứng của chúng. Đối với ví dụ này, hãy nhân đôi hàng hai lần để tạo ra tổng cộng ba hàng.

Thay thế và sắp xếp lại hình ảnh khi cần thiết

Sau đó, chúng ta có thể di chuyển các hình ảnh bằng chức năng kéo và thả bất cứ nơi nào chúng ta muốn. Đây là nơi bạn có thể sáng tạo và xem các hình ảnh chuyển động sẽ cuộn như thế nào. Và khi hình ảnh đã có, bạn có thể thay thế nội dung của mô-đun hình ảnh bằng những hình ảnh mới đáp ứng nhu cầu của trang web.

Tổng số hình ảnh

Touch-up cuối cùng

Phần hiển thị

Vì hình ảnh của chúng ta có thể sẽ mở rộng ra bên ngoài phần / cửa sổ, hãy ẩn phần tràn để làm sạch nó một chút. Mở cài đặt phần và cập nhật phần sau:

  • Tràn ngang: ẩn
  • Tràn dọc: ẩn
Divi khả năng hiển thị

Phần đệm

Chúng tôi muốn hiệu ứng cuộn dọc của hình ảnh trên cùng (kéo dài phía trên phần) có thể nhìn thấy được mặc dù có phần tràn ẩn. Vì vậy, hãy thêm phần đệm trên và dưới bằng chiều cao hình ảnh (300 pixel).

Đệm Divi

Kết quả cho đến nay

Ngay bây giờ chúng ta có thể dừng ở đây nếu bạn muốn giữ nguyên thiết kế thư viện mà không có bất kỳ khoảng cách nào giữa các hình ảnh. Đây là kết quả cho đến nay. Chú ý cách các hình ảnh di chuyển theo chiều dọc và chiều ngang chính xác một khối / khung hình.

Thêm không gian giữa các hình ảnh

Bởi vì chúng tôi đặt chiều rộng rãnh nước thành 1, chúng tôi không còn có lề giữa các cột hoặc hình ảnh của chúng tôi. Để tạo lại khoảng cách tương tự, chúng ta có thể thêm tô vào mỗi khung.

 Điều này sẽ cho phép chúng tôi tạo khoảng cách chúng tôi cần mà không ảnh hưởng đến chức năng của các hiệu ứng cuộn. Điều này có thể thực hiện được vì thêm phần đệm vào hình ảnh sẽ không làm tăng chiều rộng hoặc chiều cao của vùng chứa hình ảnh. Bạn cũng có thể tạo hiệu ứng tương tự bằng cách sử dụng đường viền.

Hình ảnh 1 Đệm

Mở cài đặt cho hình ảnh 1 và cập nhật phần sau:

  • Đệm: 10 pixel ở trên cùng, 10 pixel ở dưới cùng, 10 pixel ở bên trái, 10 pixel ở bên phải
Thêm ký quỹ divi

Mở rộng điền vào tất cả các hình ảnh

Trước khi lưu, nhấp chuột phải vào tùy chọn đệm và chọn "Mở rộng đệm". Trong cửa sổ bật lên Mở rộng Kiểu, nhấp vào nút Mở rộng để mở rộng phần tô này cho tất cả các hình ảnh trên trang.

Mở rộng biên divi

Kết quả cuối cùng

Đây là kết quả của tất cả các công việc chúng tôi đã làm cho đến nay.

Kết quả cuối cùng trên máy tính để bàn Divi

cuối cùng suy nghĩ

Hiệu ứng cuộn câu đố trượt được giới thiệu trong bài viết này không chỉ cung cấp cho chúng tôi một thiết kế độc đáo cho thư viện hình ảnh. Nó cũng chỉ ra rằng các hiệu ứng chuyển động ngang và dọc có thể được sử dụng cho các hiệu ứng cuộn chính xác hơn.

 Hãy tự do khám phá các biến thể khác nhau của bố cục này bằng cách thay đổi các hiệu số và trộn các vị trí của hình ảnh. 

Bạn cũng có thể thay đổi số lượng cột miễn là bạn hiểu kích thước cột / hình ảnh sẽ thay đổi như thế nào và sau đó cập nhật cách cập nhật hiệu ứng cuộn với giá trị tương ứng.

Một số tài nguyên được đề xuất

Bạn có thể sẽ thấy những tài nguyên này thú vị bởi vì chúng cũng sẽ cho phép bạn tạo các thư viện ảnh trên blog WordPress của bạn.

5 chủ đề trẻ em Divi cho thực hành thú y

5 chủ đề trẻ em Divi cho thực hành thú y

Divi là một lựa chọn tuyệt vời để xây dựng các trang web chất lượng cao cho bất kỳ loại hình chăm sóc động vật nào. Divi giúp bạn dễ dàng giới thiệu các dịch vụ, sản phẩm, lời chứng thực, thông tin liên hệ và hơn thế nữa. 

May mắn thay, bạn không phải xây dựng trang web từ đầu. Có rất nhiều bố cục và chủ đề con để bạn có thể bắt đầu. Trong danh sách này, chúng tôi sẽ xem xét 5 chủ đề con của Divi dành cho bác sĩ thú y và dịch vụ thú cưng để giúp bạn thực hiện dự án Divi tiếp theo của mình.

5 chủ đề Divi Kids dành cho bác sĩ thú y và dịch vụ thú cưng

1.VetCare

Chăm sóc thú y

Vetcare được thiết kế cho bác sĩ thú y, phòng khám động vật và các loại hình kinh doanh chăm sóc thú cưng khác. Nó đi kèm với 15 bố cục trang bao gồm 2 trang chủ, dịch vụ, 2 trang blog, 3 bài đăng blog duy nhất, 3 trang dịch vụ duy nhất và nhiều hơn nữa. 

Các tùy chỉnh khác bao gồm menu động với CTA, bộ chèn chân trang, Trình tạo cửa sổ bật lên, trình tải trước, 30 biểu tượng tùy chỉnh và tùy chọn chủ đề tùy chỉnh. Nó có một thiết kế sạch sẽ và sử dụng rất nhiều màu sắc cho các điểm nổi bật. 

Nó bao gồm rất nhiều kiểu và hình ảnh động cho các mod blog, mod cá nhân, blurb, gallery, bảng giá, v.v. Tôi yêu màu sắc tươi sáng và hình ảnh động.

Prix: € 55 | Thêm thông tin

2. Phòng khách cho thú cưng được nuông chiều

Tiệm xì hơi được nuông chiều

Pampered Pet Parlour được thiết kế cho bất kỳ loại trang web thú cưng nào bao gồm chăm sóc sức khỏe thú cưng, chải chuốt, sản phẩm, v.v. và tập trung vào thương mại điện tử. . 

Nó đi kèm với trang chủ, các trang sản phẩm, trang sản phẩm đơn lẻ, trang Liên hệ và WooCommerce. Nó được tích hợp WooCommerce và bao gồm một số plugin miễn phí: WooCommerce Product Carousel Slider, NC Wishlist cho WooCommerce và WooCommerce Product Navigation. 

Trang chủ hiển thị tiêu đề tùy chỉnh, CTA, biểu mẫu email mỏng, sản phẩm mới nhất, lời chứng thực và khu vực tiện ích tùy chỉnh ở chân trang. Tôi thích sử dụng màu sắc trong bức tranh này.

Prix: $ 97 | Thêm thông tin

3. Pettz

Pettz

Pettz được thiết kế cho bác sĩ thú y, chăm sóc động vật, cửa hàng thú cưng, cắt tỉa lông động vật, nơi trú ẩn cho động vật, người huấn luyện động vật và các doanh nghiệp liên quan đến động vật khác. Nó đi kèm với 6 trang bao gồm Trang chủ, Dịch vụ, Giới thiệu về chúng tôi, Giá cả, Blog và Liên hệ. 

Trang chủ hiển thị các dịch vụ với mờ, CTA, bảng giá cả, thư viện, phần nhóm với mô-đun người, lời chứng thực, phần blog và phần liên hệ. 

Mỗi phần bao gồm các mô-đun phong cách. Hầu hết đều có hoạt ảnh di chuột tùy chỉnh. Các trang khác theo một thiết kế tương tự. Tôi đặc biệt thích màu sắc, đồ họa và phông chữ trong chủ đề con này.

Prix: $ 44 | Thêm thông tin

4. Tổ chức phi lợi nhuận Divi

Tổ chức phi lợi nhuận Divi

Tổ chức phi lợi nhuận Divi đã được thiết kế cho một số loại tổ chức phi lợi nhuận. Nó bao gồm một số trang chủ cho các tổ chức này, bao gồm một trang có tên là Animal Rescue. 

Trang chủ này có nhiều CTA trong một số bố cục và thiết kế để nuôi các động vật khác nhau. Nó cũng bao gồm CTA để biết thêm, một phần blog và CTA quyên góp được tích hợp sẵn bằng cách sử dụng plugin WP Give. 

Các tính năng khác bao gồm các sự kiện với loại bài đăng tùy chỉnh, loại bài đăng của các dự án đã được định cấu hình, các trang cửa hàng WooCommerce, 100 biểu tượng vẽ tay tùy chỉnh, breadcrumbs, style sidebar và rất nhiều. nhiều trang thông tin. Nó cũng tích hợp Bloom và Monarch. Tôi thích đồ họa, bố cục sắc nét và màu đỏ nổi bật.

Prix: $ 39 | Thêm thông tin

5. Phúc lợi xã hội: tổ chức từ thiện phi lợi nhuận đa mục đích Divi

Phúc lợi xã hội phi lợi nhuận tổ chức từ thiện đa năng

Phúc lợi xã hội: Tổ chức từ thiện phi lợi nhuận Divi đa năng đã được thiết kế cho một số loại hình tổ chức từ thiện, bao gồm cứu hộ động vật quốc tế. Nó bao gồm một số trang chủ cho các loại hình tổ chức từ thiện khác nhau. 

Trang chủ Cứu hộ Động vật Quốc tế hiển thị một CTA trong phần anh hùng với 2 CTA khác nhau theo sau là các khối lớn có liên kết đến các cách khác nhau mà khách truy cập có thể tham gia. Nó cũng bao gồm 2 Trang Giới thiệu, 2 Sự kiện, 2 Phòng trưng bày, 2 Blog, 2 Trang Liên hệ, Chân trang Trình tạo Chủ đề Tùy chỉnh và nhiều hơn nữa. Nó có một phối màu vàng nổi bật và một CTA quyên góp màu xanh lam trên menu.

Prix: $ 25 | Thêm thông tin

Kết luận

Đây là 5 chủ đề con của chúng tôi dành cho Divi dành cho bác sĩ thú y và dịch vụ thú cưng để giúp bạn trong dự án Divi tiếp theo của bạn. Chủ đề con bao gồm nhiều trang và mô-đun phong cách. 

Nhiều người thêm hoạt ảnh tùy chỉnh, loại bài đăng tùy chỉnh, tích hợp WooCommerce để bán sản phẩm của bạn và các trang để giới thiệu dịch vụ chăm sóc động vật của bạn. Cho dù bạn cần tạo loại trang web chăm sóc động vật nào, bạn chắc chắn sẽ tìm thấy thứ gì đó trong danh sách này để bắt đầu.