Trong hướng dẫn hôm nay, chúng tôi sẽ chỉ cho bạn cách bạn có thể hiển thị động các vị trí tuyển dụng trên trang Tuyển dụng của mình. Hãy bắt đầu.

Tổng quan kết quả

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả trên các kích thước màn hình khác nhau.

1. Tạo trang Tuyển dụng

Thêm một trang mới và chuyển sang Visual Builder

Bắt đầu bằng cách tạo một trang mới, đặt tiêu đề cho trang của bạn và đi đến Visual Builder.

2. Bắt đầu tạo trang Tuyển dụng trên lối vào

Thêm phần đầu tiên

Nền Gradient

Thêm phần đầu tiên vào trang, mở cài đặt phần và sử dụng nền gradient.

• Màu 1: # ff6600
• Màu 2: # fbff30
• Hướng dốc: 126deg

Dải phân cách dưới

Cũng sử dụng một bộ chia phần thấp hơn.

• Phong cách tách biệt: Tìm kiếm trong danh sách
• Chiều cao chia: 8vw
• Sự lặp lại theo chiều ngang của dải phân cách: 3x
• Bố trí các ngăn: theo nội dung của phần

khoảng cách

Hoàn thành các tham số phần bằng cách thêm phần đệm thấp hơn.

• Đệm dưới: 200px

Thêm một dòng mới

Cấu trúc cột

Tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:

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

Thêm nội dung H1

Thêm một mô-đun văn bản vào cột hàng với nội dung H1 tùy bạn chọn.

Cài đặt văn bản H1

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản H1 cho phù hợp:

• Phông chữ: Montserrat
• Trọng lượng phông chữ: nặng
• Màu văn bản tiêu đề: #ffffff
• Kích thước văn bản tiêu đề: 8rem (máy tính để bàn), 4rem (máy tính bảng), 2.5rem (điện thoại)

Thêm một mô-đun tách vào cột

tầm nhìn

Ngay bên dưới mô-đun văn bản, hãy thêm một mô-đun phân tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.

• Hiển thị dấu phân cách: Có

Dòng

Sau đó thay đổi màu dòng của mô-đun.

• Màu đường kẻ: #ffffff

kích thước

Và hoàn thành các tham số mô-đun bằng cách sửa đổi các tham số kích thước.

• Trọng lượng bộ chia: 8px
• Chiều rộng: 30%

Thêm phần # 2

Thêm một phần thông thường vào trang.

Thêm một dòng mới

Cấu trúc cột

Thêm một dòng mới vào phần sử dụng cấu trúc cột sau:

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

Thêm nội dung H2

Thêm mô-đun văn bản vào cột hàng và chèn văn bản nội dung H2 tùy bạn chọn.

Cài đặt văn bản H2

Sửa đổi các tham số văn bản H2 của mô-đun như sau:

• Cảnh sát tiêu đề 2: Montserrat
• Mục 2 Trọng số của chính sách: nặng
• Màu văn bản của mục 2: # ffa500
• Tiêu đề 2 Kích thước văn bản: 2.3rem

Thêm một mô-đun tách vào cột

tầm nhìn

Mô-đun tiếp theo chúng ta cần trong cột này là một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.

• Hiển thị dấu phân cách: Có

Dòng

Sau đó thay đổi màu dòng của mô-đun.

• Màu đường kẻ: # ffa500

kích thước

Và hoàn thành các tham số mô-đun bằng cách sửa đổi trọng lượng của dải phân cách và chiều rộng tối đa trong các tham số kích thước.

• Trọng lượng bộ chia: 6px
• Chiều rộng tối đa: 80 px

Thêm một mô-đun blog vào cột

Nội dung

Để hiển thị các vị trí tuyển dụng khác nhau, chúng tôi sẽ sử dụng một mô-đun blog mà chúng tôi sẽ tùy chỉnh theo nhu cầu của mình. Đảm bảo áp dụng các cài đặt nội dung sau:

• Loại tin nhắn: Tin nhắn
• Bao gồm các danh mục: Marketing
• Chiều dài trích xuất: 150

Các yếu tố

Trong các tham số của các phần tử, hai tùy chọn duy nhất mà chúng tôi kích hoạt là:

• Hiển thị thêm nút: Có
• Trích từ chương trình: Có

Bố trí

Chuyển sang tab thiết kế mô-đun và đảm bảo rằng bạn đang sử dụng bố cục chiều rộng đầy đủ.

• Bố cục: chiều rộng đầy đủ

Cài đặt văn bản tiêu đề

Cũng thay đổi cài đặt văn bản tiêu đề.

• Cấp độ tiêu đề: H3
• Phông chữ: Montserrat
• Kích thước văn bản tiêu đề: 1.5rem

Cài đặt văn bản

Sau đó thay đổi cài đặt văn bản cơ thể.

• Cảnh sát cơ thể: Raleway
• Kích thước văn bản: 1.1rem
• Chiều cao của đường cơ thể: 2.1em

Tìm hiểu thêm Cài đặt văn bản

Với các cài đặt văn bản tìm hiểu thêm.

• Đọc thêm Cảnh sát: Montserrat
• Tìm hiểu thêm Kiểu phông chữ: Vốn
• Tìm hiểu thêm Màu văn bản: #ffffff
• Đọc thêm Kích thước văn bản: 1rem

khoảng cách

Thêm lề và giá trị đệm tùy chỉnh vào cài đặt giãn cách.

• Lề trái: 100px (máy tính để bàn), 50px (máy tính bảng), 0px (điện thoại)
• Phần đệm trên: 0px
• Đệm dưới: 0px

Tìm hiểu thêm Nút CSS

Và hoàn thành cài đặt mô-đun bằng cách thêm các nút phát CSS trong tab nâng cao.

max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Nhân bản dòng nhiều lần khi cần thiết

Khi bạn đã hoàn thành dòng và tất cả các mô-đun của nó, bạn có thể sao chép nó bao nhiêu lần tùy ý, tùy thuộc vào số lượng phòng ban trong công ty của bạn.

Chỉnh sửa nội dung của mô-đun văn bản

Đảm bảo chỉnh sửa nội dung H2 của từng dòng trùng lặp.

Chỉnh sửa danh mục các mô-đun blog

Với các thể loại của mô-đun Blog.

Thêm một mô-đun mã vào cột của dòng cuối cùng

Chèn mã CSS để cách điệu các máy trạm mở riêng lẻ

Để hoàn thành thiết kế, chúng tôi sẽ thêm một mô-đun mã vào dòng cuối cùng của trang của chúng tôi và chèn các dòng mã CSS sau:

<style>.et_pb_posts .et_pb_post {box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);padding: 50px;border-radius: 20px;background-color: #fff;}</style>

3. Lưu thiết kế trang và hiển thị kết quả

Khi bạn đã hoàn tất thiết kế trang, bạn có thể lưu tất cả các thay đổi, thoát khỏi Visual Builder và xem kết quả!

Kết quả cuối cùng

Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.

cuối cùng suy nghĩ

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách giới thiệu các bài viết động, kết thúc mở này trên Trang tuyển dụng của bạn bằng cách sử dụng mô-đun Blog của Divi. Hãy để lại ý kiến ​​trong phần bình luận bên dưới.