Tải xuống đầu trang và chân trang MIỄN PHÍ cho Gói bố cục Luật sư Di trú của Divi

Tải xuống đầu trang và chân trang MIỄN PHÍ cho Gói bố cục Luật sư Di trú của Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

[Ad_1]

Xin chào Divi Nation! Cảm ơn bạn đã tham gia với chúng tôi cho phần tiếp theo của sáng kiến ​​thiết kế Divi hàng tuần của chúng tôi, nơi mỗi tuần chúng tôi đều tặng quà miễn phí mới. Gần đây, chúng tôi đã chia sẻ một gói bố cục hoàn toàn mới cho luật sư nhập cư. Để giúp bạn thiết lập và chạy trang web càng sớm càng tốt, chúng tôi đang chia sẻ một mẫu đầu trang và chân trang tổng thể hoàn toàn phù hợp với gói bố cục này! Tôi hy vọng bạn sẽ thích nó.

chân trang đầu trang luật sư di trú

Tải xuống Mẫu đầu trang và chân trang toàn cầu cho Gói bố cục luật sư nhập cư

Để có được mẫu đầu trang và chân trang toàn cầu miễn phí, trước tiên bạn cần tải xuống bằng cách sử dụng nút bên dưới. Để truy cập bản tải xuống, bạn cần đăng ký vào danh sách gửi thư Divi Daily của chúng tôi bằng cách sử dụng biểu mẫu bên dưới. Là người đăng ký mới, bạn sẽ nhận được nhiều lợi ích hơn nữa từ Divi vào mỗi Thứ Hai hàng tuần và một gói Divi Layout miễn phí! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn vào bên dưới và nhấn tải xuống. Bạn sẽ không được "đăng ký lại" hoặc nhận thêm email.

Cách tải xuống mẫu

Đi tới Trình tạo chủ đề Divi

Để tải xuống mẫu, hãy truy cập Trình tạo chủ đề Divi trong phần phụ trợ của trang web WordPress của bạn.

chân trang đầu trang luật sư di trú

Tải xuống mẫu trang web toàn cầu

Sau đó, ở góc trên bên phải, bạn sẽ thấy một biểu tượng có hai mũi tên. Bấm vào biểu tượng.

chân trang đầu trang luật sư di trú

Đi tới tab nhập, tải xuống tệp JSON mà bạn có thể tải xuống trong bài viết này và nhấp vào "Nhập mẫu Trình tạo chủ đề Divi".

chân trang đầu trang luật sư di trú

Lưu các thay đổi đã thực hiện đối với trình tạo chủ đề Divi

Khi bạn đã tải tệp lên, bạn sẽ nhận thấy một đầu trang và chân trang chung mới trong mẫu trang web mặc định của mình. Lưu các thay đổi của Divi Theme Builder ngay khi bạn muốn kích hoạt mẫu.

chân trang đầu trang luật sư di trú

Cách sửa đổi mẫu

Mở mẫu tiêu đề

Để chỉnh sửa các phần tử của mẫu tiêu đề chung, trước tiên hãy mở mẫu.

chân trang đầu trang luật sư di trú

Thay đổi logo

Thay đổi logo bên trong mô-đun menu.

chân trang đầu trang luật sư di trú

Thêm liên kết vào theo dõi nút và mô-đun truyền thông xã hội

Sau đó, thêm các liên kết có liên quan đến mô-đun Nút và từng mạng xã hội bên trong mô-đun theo dõi phương tiện truyền thông xã hội.

chân trang đầu trang luật sư di trú

Mở mẫu chân trang

Tiếp tục bằng cách mở Global Footer trong Mẫu trang web mặc định.

chân trang đầu trang luật sư di trú

Thay đổi logo

Chỉnh sửa biểu trưng bên trong mô-đun Hình ảnh trong cột 1.

chân trang đầu trang luật sư di trú

Chỉnh sửa các phần tử chân trang và các liên kết

Sau đó, chỉnh sửa nội dung và liên kết cho từng phần tử của footer.

chân trang đầu trang luật sư di trú

Thêm tài khoản email vào mô-đun tùy chọn email

Đồng thời đảm bảo thêm tài khoản email vào mô-đun Email Optin của bạn.

chân trang đầu trang luật sư di trú

Chỉnh sửa bản sao

Và hoàn thành thiết kế của chân trang bằng cách sửa đổi bản sao bên trong các mô-đun văn bản mà bạn có thể tìm thấy ở hàng cuối cùng của phần.

chân trang đầu trang luật sư di trú

Lưu các thay đổi đã thực hiện đối với trình tạo chủ đề Divi

Khi bạn đã thực hiện tất cả các thay đổi đối với đầu trang và chân trang, hãy nhớ lưu các thay đổi vào trình tạo chủ đề!

chân trang đầu trang luật sư di trú

Quà tặng mới mỗi tuần!

Chúng tôi hy vọng bạn sẽ thích Gói Bố cục Luật sư Di trú của tuần này và phần quà tặng đầu trang và chân trang kèm theo. Chúng tôi mong muốn được nghe ý kiến ​​của bạn trong phần bình luận bên dưới. Hãy nhớ quay lại vào tuần sau để nhận thêm quà tặng miễn phí!



[Ad_2]

Liên kết nguồn

Cách sử dụng khối tích hợp SoundCloud

Cách sử dụng khối tích hợp SoundCloud

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

[Ad_1]

Với khối tích hợp SoundCloud dành cho WordPress, bạn có thể thêm album, danh sách phát hoặc bản nhạc vào bài đăng hoặc trang của mình. Việc tích hợp nội dung SoundCloud vào Gutenberg cung cấp cho bạn nhiều tùy chọn về cách khối trông và hoạt động. Mặt khác, nếu bạn chỉ sao chép và dán liên kết SoundCloud vào trình chỉnh sửa cổ điển, bạn có thể giới thiệu âm nhạc, nhưng các tùy chọn của bạn sẽ bị hạn chế nghiêm trọng khi nói đến các tùy chỉnh và thiết kế trang.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách nhúng album, danh sách phát hoặc bản nhạc SoundCloud vào bài đăng hoặc trang WordPress. Chúng tôi cũng sẽ đề cập đến các phương pháp hay nhất, Câu hỏi thường gặp và mẹo mà bạn nên biết.

Trước khi bắt đầu, hãy lưu ý rằng mặc dù bạn không cần tài khoản SoundCloud để nhúng nội dung của dịch vụ, nhưng bạn sẽ cần chọn các bản nhạc công khai - không thể nhúng các bản nhạc riêng tư. Ngoài ra, bạn cần sử dụng Gutenberg Block Editor để thêm Khối tích hợp SoundCloud. (Tuy nhiên, chúng tôi sẽ đề cập đến một số lựa chọn thay thế.)

Cách nhúng nội dung SoundCloud vào WordPress

Đầu tiên, chúng ta sẽ xem cách thêm bản nhạc SoundCloud vào bài đăng hoặc trang WordPress. Tiếp theo, chúng ta sẽ nhanh chóng xem cách thêm album / danh sách phát, vì quá trình này tương tự như thêm một bản nhạc.

Cách nhúng bản nhạc SoundCloud vào WordPress

Truy cập SoundCloud và tìm bản nhạc bạn muốn nhúng vào WordPress. Bấm vào bản nhạc để mở nó trên trang của chính nó. Sao chép URL từ thanh địa chỉ ở đầu trang.

Soundcloud tích hợp

Truy cập WordPress và tạo hoặc chỉnh sửa một bài đăng hoặc trang. Trong phần nội dung chính của trang, bạn sẽ thấy dấu cộng. Nếu bạn không nhìn thấy, hãy nhấp vào một nơi nào đó trong phần nội dung của trang và nó sẽ xuất hiện.

Soundcloud tích hợp

Nhấp vào nó dấu cộng để hiển thị bộ chọn khối. Nhập "SoundCloud" vào Tìm kiếm trường hợp, sau đó chọn khối được liên kết. Khối tích hợp SoundCloud bây giờ sẽ được thêm vào trang hoặc bài đăng của bạn.

thêm nhạc vào wordpress

Soundcloud tích hợp

Dán địa chỉ SoundCloud bạn đã sao chép vào trường có nội dung Nhập URL để tích hợp tại đây ... Bấm vào tích hợp. Bây giờ bạn sẽ thấy một cái gì đó như thế này:

Soundcloud tích hợp

Để xem nó sẽ trông như thế nào trên trang web của bạn sau khi nó hoạt động, hãy nhấp vào khảo sát > Văn phòng > Xem trước trong tab mới ở trên cùng bên phải của trang.

thêm nhạc vào wordpress

Soundcloud tích hợp

Bạn có thể thêm chú thích nếu bạn muốn. Có một khu vực dành riêng bên dưới bản nhạc tích hợp để nhập phụ đề, cũng như các tùy chọn định dạng.

Soundcloud tích hợp

Cách nhúng album hoặc danh sách phát SoundCloud vào WordPress

Nhúng một album hoặc danh sách phát từ SoundCloud rất giống với việc thêm một bản nhạc. Trong SoundCloud, điều hướng đến album hoặc danh sách phát bạn muốn thêm và nhấp vào album hoặc danh sách phát đó để mở trong trang riêng. Sao chép URL từ thanh địa chỉ.

Trong hộp tích hợp SoundCloud trong WordPress, hãy dán thanh địa chỉ vào không gian dành riêng. Bấm vào tích hợp.

Kết quả về cơ bản là giống nhau cho dù bạn đã thêm một album hay một danh sách phát. Ảnh bìa album hoặc danh sách phát sẽ hiển thị trong phần chính của liên kết được nhúng và bên dưới sẽ là danh sách các bản nhạc để bạn duyệt qua. Khi bạn di chuột qua các bản nhạc và cuộn, bìa chính sẽ trở nên nhỏ hơn để hiển thị nhiều hơn danh sách bản nhạc. Trong ảnh chụp màn hình này, phần nhúng trên cùng là danh sách phát, trong khi phần nhúng dưới cùng là một album.

thêm nhạc vào wordpress

Thông báo lỗi tích hợp

Nếu bạn nhập nội dung nào đó không phải là liên kết, đó là liên kết bị hỏng hoặc chuyển đến nội dung không thể nhúng, bạn sẽ nhận được thông báo lỗi giống như sau:

Soundcloud tích hợp

Bạn có thể thử lại liên kết hoặc nhấp vào Chuyển đổi thành liên kết để xem liệu điều đó có tạo ra sự khác biệt hay không. Nếu cả hai tùy chọn đều không hoạt động, bạn có thể cần phải tích hợp các nội dung khác nhau.

Tùy chọn khối tích hợp SoundCloud

Có hai khu vực khác nhau nơi bạn sẽ tìm thấy các tùy chọn cho khối tích hợp SoundCloud: ở đầu thanh và trong thanh bên phải. Hãy xem chúng là gì.

Tùy chọn thanh công cụ

Khi bạn đã thêm nội dung vào khối nhúng, hãy nhấp vào nó để hiển thị thanh công cụ tùy chọn ở trên cùng. Nó trông như thế này:

Soundcloud tích hợp

Từ trái sang phải, đây là ý nghĩa của các biểu tượng:

  • Trở nên : Bạn có thể biến khối nhúng SoundCloud thành một đoạn, cột hoặc nhóm. Lựa chọn duy nhất để xem xét là nhóm một vì nó cho phép bạn thay đổi màu nền của khối. Nếu bạn không quan tâm, hãy để nó một mình - hơi khó sử dụng.
  • Để lướt: Di chuột qua trượt và con trỏ của bạn sẽ biến thành một bàn tay nhỏ. Nhấp bằng nút chuột trái và kéo khối nhúng đến vị trí bạn muốn đặt trên trang.
  • Lên trên và đi xuống: Les Mũi tên lên sẽ di chuyển khối lên một khoảng trống và Mũi tên xuống sẽ di chuyển nó xuống một khoảng trống.
  • Thay đổi căn chỉnh: Căn chỉnh khối lắp phẳng sang trái, giữa hoặc phải. Căn chỉnh nó sang trái hoặc phải sẽ làm cho nó nhỏ hơn. Tùy thuộc vào chủ đề của bạn, bạn cũng có thể có các tùy chọn chiều rộng và chiều rộng đầy đủ, có thể làm cho khối nhúng lớn hơn.
  • Chỉnh sửa URL: Thay thế URL SoundCloud để nhúng album, danh sách phát hoặc bản nhạc khác.
  • Tùy chọn: Biểu tượng cuối cùng hiển thị menu thả xuống với các tùy chọn bổ sung.

Menu Tùy chọn khác

Soundcloud tích hợp

Danh sách tùy chọn thả xuống này chứa một số tùy chọn dễ hiểu. Từ trên xuống dưới, chúng là:

  • Ẩn các cài đặt khác: Ẩn (hoặc hiển thị) thanh bên cài đặt ở bên phải.
  • Sao chép: Sao chép khối và dán nó vào bất cứ nơi nào bạn muốn.
  • Bản sao: Nhân đôi khối, khối này sẽ tạo một bản sao ngay bên dưới bản gốc.
  • Chèn trước: Thêm một khối trước khối đã chọn.
  • Chèn sau: Thêm một khối sau khối đã chọn.
  • Để chuyển đến: Thao tác này sẽ hiển thị một thanh màu xanh lam, bạn có thể di chuyển xung quanh trang bằng các nút mũi tên trên bàn phím. Khi bạn đã đặt nó ở nơi bạn muốn, hãy nhấp vào Nhập / Trả lại để di chuyển khối tích hợp đến đó.
  • Chỉnh sửa trong HTML: Chỉnh sửa mã HTML cho khối.
  • Thêm vào các khối có thể tái sử dụng: Thêm khối đã chọn vào danh sách các khối có thể sử dụng lại của bạn. Điều này cho phép bạn dễ dàng thêm nó vào một bài đăng hoặc trang khác hoặc vào một phần khác của bài đăng hoặc trang hiện tại.
  • Tập đoàn: Như nhóm tùy chọn được đề cập ở trên, điều này cho phép bạn thay đổi màu nền của khối.
  • Xóa khối: Xóa khối khỏi trang.

Tùy chọn thanh bên

thêm nhạc vào wordpress

Thanh bên phải có hai cài đặt: Cài đặt Phương tiện và Nâng cao. Hãy xem lại.

Cài đặt đa phương tiện

Nếu bạn kích hoạt Thay đổi kích thước cho các thiết bị nhỏ trong Cài đặt đa phương tiện , khối nhúng sẽ tự động thay đổi kích thước theo kích thước màn hình. Điều này đặc biệt quan trọng đối với những người đang xem nội dung của bạn trên thiết bị di động, vì vậy bạn nên bật tùy chọn này.

tiến bộ

Trong tiến bộ , bạn có thể thêm một khối CSS vào khối đã chọn. Điều này có nghĩa là bạn có thể tùy chỉnh và tạo kiểu khối theo cách bạn muốn (tất nhiên là nếu bạn biết CSS).

Các phương pháp hay nhất và mẹo để sử dụng khối nhúng SoundCloud một cách hiệu quả

Nhanh chóng thêm nội dung được nhúng

Nếu bạn biết chính xác nơi bạn muốn nội dung SoundCloud tích hợp sẵn đi đến, bạn có thể chỉ cần dán URL vào trang. Một khối tích hợp SoundCloud sẽ được tự động tạo cho bạn, với tất cả các tùy chọn giống như khi bạn thêm khối theo cách thủ công.

Nhúng nội dung SoundCloud bằng trình chỉnh sửa cổ điển

Nếu bạn thích làm việc với trình chỉnh sửa WordPress cổ điển, bạn luôn có thể nhúng nội dung SoundCloud. Bạn chỉ cần sao chép và dán liên kết vào bất kỳ đâu bạn muốn trong phần nội dung của bài đăng hoặc trang. Điều này sẽ tự động tích hợp nội dung. Tuy nhiên, bạn sẽ không có các tùy chọn thanh công cụ giống như với khối Gutenberg.

Sử dụng mã nhúng cho các tùy chỉnh khác nhau

Một cách khác để nhúng nội dung SoundCloud vào WordPress là sử dụng mã nhúng. Điều hướng đến nội dung SoundCloud bạn muốn nhúng và nhấp vào nút Chia nút.

Soundcloud tích hợp

Trong cửa sổ bật lên, bạn có thể thay đổi giao diện của nội dung được nhúng. Trong ví dụ này, tôi đã thay đổi nút phát / tạm dừng thành màu xanh lam nhạt và điều chỉnh chiều cao của hộp nhúng.

thêm nhạc vào wordpress

Khi bạn hoàn tất, hãy sao chép mã nhúng và sau đó dán nó vào một khối HTML trong WordPress. Bạn sẽ có thể xem nội dung sẽ như thế nào khi bạn xem trước trang.

Câu hỏi thường gặp về Khối tích hợp SoundCloud

SoundCloud chỉ có nhạc?

Không! SoundCloud cũng cung cấp podcast. Tích hợp podcast cũng giống như tích hợp một bản nhạc. Sao chép URL, sau đó dán vào hộp nhúng. Bạn có thể nhúng một tập duy nhất hoặc nếu bạn muốn giới thiệu toàn bộ podcast, hãy truy cập trang chính của nó trên SoundCloud và sao chép / dán URL.

Soundcloud tích hợp

Tôi có thể thêm nhiều bản nhạc vào khối tích hợp SoundCloud không?

Nếu bạn muốn giới thiệu nhiều bài hát hoặc các tập podcast trên trang web WordPress của mình, bạn có thể tạo danh sách phát của riêng mình và sau đó nhúng danh sách đó. Lưu ý rằng cài đặt quyền riêng tư của mỗi bản nhạc sẽ được giữ nguyên, ngay cả khi bạn đặt danh sách phát ở chế độ công khai (bạn sẽ cần nhúng danh sách đó). Điều này có nghĩa là nếu bạn thêm bản nhạc riêng tư vào danh sách phát công khai, bản nhạc đó sẽ luôn ở chế độ riêng tư.

https://help.soundcloud.com/hc/en-us/articles/115003449787-Creating-and-adding-tracks-to-a-playlist

Tôi có thể chọn nơi bắt đầu phát một bản nhạc SoundCloud không?

Tiếc là không có. Khi bạn nhấp vào Chia trên nội dung SoundCloud, một cửa sổ sẽ mở ra. Ở dưới cùng là một tùy chọn để bắt đầu chơi bản nhạc. Tuy nhiên, khi bạn sao chép và dán liên kết có liên quan vào khối nhúng, nó không thực sự bắt đầu theo dõi ở phần đó. Chúng tôi đã thử nó theo nhiều cách khác nhau, nhưng không thành công.

Soundcloud tích hợp

gói

Tích hợp nhạc hoặc podcast vào trang web của bạn có thể làm cho trải nghiệm có giá trị hơn và cải thiện mức độ tương tác. Nếu bạn có nội dung của riêng mình hoặc muốn chia sẻ của người khác, khối nhúng SoundCloud là cách dễ nhất để thực hiện điều đó với nhiều tùy chọn bố cục và tùy chỉnh nhất có thể. Bạn có thể thêm album, danh sách phát, podcast hoặc bản nhạc vào trang web của mình và cho phép khách truy cập nghe mà không bị chuyển hướng đến nơi khác. Và nếu họ muốn khám phá thêm, họ có thể dễ dàng nhấp vào nội dung của SoundCloud.

Bạn cũng có thể quan tâm đến bài viết của chúng tôi với 11 plugin trình phát âm thanh tốt nhất cho WordPress. Kiểm tra nó ra!

Hình ảnh được apghedia giới thiệu trên Shutterstock.com



[Ad_2]

Liên kết nguồn

Cách áp dụng bảng màu cho trang web Divi của bạn

Cách áp dụng bảng màu cho trang web Divi của bạn

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

[Ad_1]

Có vài thứ tồi tệ hơn trên Internet so với một trang web nhạt nhẽo. Chắc chắn, một số trang web tự nguyện đi theo chủ nghĩa tàn bạo hoặc giao diện tối giản (nhìn bạn trên Craigslist), nhưng ngay cả những trang web này cũng không. phai. Có một bảng màu đồng nhất là một cách chắc chắn để làm cho trang web của bạn nổi bật so với những khối màu be denhấn qua je suissự vội vàng. May mắn thay, Divi đã hỗ trợ bạn bằng sự kết hợp giữa hệ thống Màu ma thuật của chúng tôi và tính năng Màu toàn cầu. Bạn có thể dễ dàng áp dụng các bảng màu cho trang web Divi của mình. Kết quả chắc chắn sẽ gây ấn tượng với khách truy cập của bạn.

Lời khuyên chung về bảng màu

Cho dù bạn có dễ dàng thêm bảng màu vào trang web Divi của mình hay không, bạn bắt buộc phải sử dụng đúng loại bảng màu cho ngành và thương hiệu của mình. Nếu bạn đã có những màu có thương hiệu, đây là sự lựa chọn hiển nhiên. Cũng như đi sâu vào lý thuyết màu sắc (nhân tiện, rất thú vị), chúng tôi có một số mẹo có thể giúp bạn tìm ra nơi bắt đầu với bảng màu mới của mình.

1. Chọn một trang web màu tối hoặc màu sáng

Trong bảng màu mà bạn sẽ sử dụng, chắc chắn bạn sẽ có các màu sáng và tối. Sự tương phản là bắt buộc trong bảng màu để nội dung viết không bị mất đi.

Bây giờ điều đó ngay lập tức đưa chúng ta đến câu hỏi đầu tiên bạn cần tự hỏi khi muốn áp dụng bảng màu cho trang web của mình; bạn muốn tạo một trang web màu tối hay màu sáng? Chỉ vì bạn chọn một chiếc không có nghĩa là bạn không thể kết hợp chúng, nhưng lựa chọn giúp bạn chọn bảng màu dễ dàng hơn.

2. Lựa chọn màu sắc

Về lý thuyết, bạn có thể tự mình xác định xem bạn muốn có bao nhiêu màu trong bảng màu của mình. Không có phương pháp tiêu chuẩn để áp dụng hoặc xác định bảng màu. Tuy nhiên, để tạo sự cân bằng màu sắc đẹp với Divi, chúng tôi khuyên bạn nên sử dụng năm màu.

Để giúp bạn áp dụng bảng màu có năm màu cho trang web của mình, chúng tôi đã chọn một loại phương pháp mà chúng tôi sẽ áp dụng nhất quán cho cùng một bố cục khi trình bày các bảng màu khác nhau. Nhưng trước khi đi sâu vào vấn đề đó, chúng ta hãy xem xét các loại màu khác nhau mà bạn cần có trong bảng màu của mình nếu bạn định sử dụng phương pháp của chúng tôi.

Màu nền

bảng màu

Đảm bảo các màu nền bạn chọn phù hợp với nhau. Bạn sẽ sử dụng các màu nền này gần nhau và cho kết quả đẹp; chúng phải có một sự hòa hợp nhất định.

Màu chữ

bảng màu thay đổi

Điều tiếp theo bạn sẽ cần phải chọn là màu chữ. Về mặt logic, màu chữ phụ thuộc vào màu nền bạn chọn. Nếu bạn đã chọn màu nền sáng, hãy đảm bảo rằng màu chữ của bạn là màu tối và ngược lại.

Màu siêu liên kết và CTA

bảng màu thay đổi

Màu siêu liên kết bạn chọn là một trong những màu làm sống động trang web của bạn. Đảm bảo rằng màu này nổi bật so với các màu khác trong bảng màu của bạn, vì bạn sẽ sử dụng nó cho bất kỳ lời kêu gọi hành động nào mà bạn đưa vào trang web của mình.

Màu sắc cho những nét cuối cùng

bảng màu thay đổi

Cuối cùng, bạn có thể chọn một màu làm sẵn khác sẽ tạo thêm màu sắc cho trang web của bạn. Mặc dù màu này không quan trọng bằng màu siêu liên kết, nhưng nó sẽ giúp bạn hoàn thành việc cân bằng màu sắc trên trang web của mình.

3. Đảm bảo có đủ độ tương phản

Như đã đề cập trước đó, cung cấp độ tương phản giữa một số màu trong bảng màu của bạn là điều cần thiết. Nếu bạn đang sử dụng bảng màu cho một trang web, sự tương phản này chủ yếu sẽ giúp bạn làm cho nội dung bằng văn bản mà bạn chia sẻ có thể đọc được. Bởi vì, nếu nội dung của bạn không dễ đọc, thì vấn đề là gì?

4. Tìm sự cân bằng sử dụng màu sắc phù hợp

Có nhiều cách khác nhau để xác định tần suất bạn muốn sử dụng một màu cụ thể trong bảng phối màu của mình. Tạo sự cân bằng màu sắc tốt là cần thiết nếu bạn không muốn họ cảm thấy choáng ngợp bởi màu sắc bạn sử dụng trên trang web của mình.

Đảm bảo hầu hết thời gian sử dụng các màu trung tính nhất trong bảng màu của bạn và sử dụng các màu khác để làm nổi bật nội dung bạn cung cấp.

Cách thêm bảng màu vào trang web Divi của bạn

Với tất cả những điều đó, đã đến lúc tìm hiểu Divi và áp dụng bảng màu mới cho trang web của bạn!

Bảng màu Divi mặc định

Đầu tiên, hãy truy cập trang tổng quan WordPress của bạn và điều hướng đến Divi - Tùy chọn chủ đề. Phía dưới cái Chung , bạn sẽ thấy một mục có tiêu đề Bảng chọn màu mặc định. Điều này cho phép bạn chọn 8 màu mà bạn muốn truy cập nhanh chóng mỗi khi bạn mở các tùy chọn màu trong trình tạo Divi. Theo mặc định, đây là những màu sáng được nhiều người sử dụng, nhưng chúng không phải là một bảng màu hoàn chỉnh nên được sử dụng trên một trang web duy nhất.

bảng màu mặc định

Xin lưu ý rằng điều này không áp dụng màu sắc cho chính trang web của bạn. Nó chỉ trình bày chúng dưới dạng các tùy chọn nhanh trong hàm tạo.

Nhập hàm tạo Divi

Cho dù bạn có xác định bảng màu trong cài đặt Divi hay không, bạn sẽ luôn có khả năng áp dụng các màu khác nhau cho các phần tử của trang web của mình. Để thực hiện việc này, hãy vào Divi Builder và nhập các thông số của bất kỳ mô-đun nào bạn muốn điều chỉnh trong bảng màu mới của mình.

công cụ chọn màu

Dưới màu hiện được chọn cho bất kỳ phần tử nào, bạn sẽ thấy biểu tượng dấu chấm lửng (ba chấm). Khi bạn nhấp vào nó, bạn sẽ xuất hiện công cụ Magic Color từ Divi. Trình tạo sẽ tính đến các màu được sử dụng gần đây của bạn và các màu trên chính trang để cung cấp cho bạn một loạt nhiều bảng được tạo thành từ các màu bổ sung sẽ hoạt động với nhau khá tốt.

Xác định màu sắc toàn cầu

Khi bạn đã quyết định màu nào bạn muốn sử dụng, đã đến lúc thiết lập chúng thành màu toàn cầu. Màu toàn cục có thể được định cấu hình để thay đổi trên toàn bộ trang bất kể mô-đun hoặc phần tử. Điều này có nghĩa là nếu bạn muốn hoán đổi 5 màu khác nhau, bạn sẽ không phải làm điều đó hơn 100 lần, riêng lẻ trên các trường hợp của màu đó. Bạn sẽ làm điều này 5 lần.

Để bắt đầu, hãy chuyển đến bất kỳ mô-đun nào có bộ chọn màu. Dưới đây bạn sẽ thấy một liên kết có tên Toàn cầu. Nhấp vào nó và bảng màu toàn cầu biến mất. Từ đó, bạn sẽ xác định các màu bạn muốn cung cấp trên toàn cầu bằng cách nhấp vào nút thêm + biểu tượng.

toàn cầu

Khi bộ chọn mới xuất hiện, hãy nhấp vào nút đánh dấu xanh để thêm màu hiện tại dưới dạng tùy chọn chung.

màu sắc toàn cầu

Vòng tròn màu trắng ở đâu không quan trọng. Giá trị thập lục phân là giá trị được thêm vào các màu toàn cục. Bây giờ bạn sẽ thấy màu mặc định được thêm vào bên cạnh biểu tượng dấu cộng. Và bạn có thể thấy rằng màu đã được áp dụng cho trang web vì biểu tượng thả trên màu thay vì hình tròn thông thường.

giọt có nghĩa là màu tổng thể

Ngoài ra, bạn có thể nhấp chuột phải vào màu đã chọn và chọn "Chuyển đổi sang toàn cầu" để thêm màu đó vào danh sách.

Chuyển đổi Global Divi

Lặp lại quy trình này cho từng màu trong bảng màu bạn đã chọn để toàn bộ bảng màu của bạn cuối cùng được lưu dưới liên kết Toàn cầu. Điều này rất quan trọng khi bạn áp dụng bảng màu mới cho tất cả các phần tử trên một trang.

Áp dụng màu toàn cầu

Sau đó, bạn muốn thay thế tất cả các trường hợp cùng màu trên trang của bạn có thể được điều chỉnh trên toàn cầu. Những gì bạn muốn làm là chuyển đến phần tử có màu bạn muốn thay đổi và nhấp chuột phải vào nó. Sau đó bạn sẽ chọn Tìm và thay thế từ menu ngữ cảnh. Không chuyển đổi màu này thành toàn cục ở đây. Đây là một phần của bước tiếp theo.

tìm và thay thế

Màn hình tiếp theo sẽ là nơi bạn chọn để thay thế màu này bằng màu tổng thể của bạn. Đảm bảo rằng dưới Thay bằng bạn bấm vào Toàn cầu sau đó chọn màu tổng thể bạn muốn mở rộng trên trang. Đảm bảo bạn chọn hộp có nội dung "Thay thế tất cả các giá trị được tìm thấy trong mỗi loại tùy chọn, không giới hạn ở [chèn loại phần tử hiện tại]." Điều này sẽ đảm bảo rằng không có vấn đề gì, màu đó sẽ được thay thế.

tìm và thay thế bằng toàn cầu

Bây giờ bạn có thể thay đổi màu tổng thể cụ thể đó và khi bạn làm vậy, mọi trường hợp của nó sẽ thay đổi. Hãy cẩn thận, bạn không chọn một màu mới từ bảng màu. Điều này sẽ chỉ thay đổi màu hiện tại. Bạn Biên tập màu để thay đổi nó ở mọi nơi vì bạn đã đánh dấu từng trường hợp của màu đơn đó là toàn cục.

chọn màu sắc

Bạn có thể chỉnh sửa nó chung bằng cách sử dụng công cụ chọn màu. Chỉ cần nhấp vào giọt để chọn một hình mới.

chỉnh sửa màu sắc

Sau đó, chỉ cần lặp lại quy trình này cho từng màu trong bảng màu mới của bạn. Chỉ một thay đổi cho mỗi màu trong bảng màu của bạn. Không phải là một sự trao đổi của từng mặt hàng cụ thể của một màu nhất định.

gói

Việc chọn và áp dụng bảng màu toàn cầu cho trang Divi của bạn chưa bao giờ dễ dàng hơn thế. Bạn có thể sử dụng tính năng Magic Color của chúng tôi để giúp bạn chọn bảng màu và sau đó bạn có thể đặt chúng làm màu tổng thể cho trang web của mình. Sau khi hoàn tất, tất cả những gì bạn phải làm là chọn màu bạn đang hoán đổi và sử dụng chức năng tìm kiếm và thay thế tích hợp của Divi để thay thế các màu đó trên trang. Với quy trình làm việc này, bạn chắc chắn sẽ tiết kiệm được nhiều thời gian khi thiết kế lại các trang web khác nhau và sửa đổi một số gói bố cục miễn phí của chúng tôi.

Thưởng thức!

Hình ảnh nổi bật của bài báo của ART.ICON / shutterstock.com



[Ad_2]

Liên kết nguồn

Cách sử dụng khối Nhúng Vimeo của WordPress

Cách sử dụng khối Nhúng Vimeo của WordPress

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

[Ad_1]

Khả năng nhúng video vào các bài đăng trên blog WordPress của bạn mở ra nhiều khả năng về cách bạn trình bày nội dung của mình. Trong Trình chỉnh sửa khối của WordPress, người dùng có tùy chọn để thêm tích hợp Vimeo nhanh chóng và dễ dàng vào các bài đăng trên blog của họ. Đó là một lựa chọn tuyệt vời cho những người sáng tạo nội dung muốn kết hợp video vào chiến lược tiếp thị nội dung của họ.

Một video được nhúng hoặc bài đăng trên mạng xã hội có thể cải thiện đáng kể bài đăng trên blog hoặc trang web WordPress của bạn. Bài viết này sẽ hướng dẫn bạn các bước tích hợp video Vimeo thông qua WordPress.

Vimeo là gì?

Vimeo là một nền tảng video và công cụ tiếp thị có một số điểm tương đồng với YouTube. Nếu bạn đang tích hợp video vào tiếp thị nội dung của mình, thì bạn sẽ muốn xem xét ưu và nhược điểm của từng nền tảng trước khi tham gia. Cả hai đều có thể được sử dụng hiệu quả cho các mục đích tiếp thị.

Tích hợp Vimeo không phải là loại tích hợp duy nhất bạn có thể tích hợp vào trang web WordPress của mình. Ví dụ: bạn có thể tích hợp các khối Twitter, video YouTube và TikTok, các bài đăng trên Facebook và một loạt các tính năng khác. Tích hợp Vimeo có thể thêm nhiều ngữ cảnh hơn vào một bài viết thông tin. Ngoài ra, bạn có thể cung cấp cho khách truy cập trang web của mình nhiều cách để biết bạn, cả qua văn bản và video.

Tại sao lại sử dụng khối Vimeo Embed trên trang web WordPress của bạn?

Bao gồm nhiều loại phương tiện trong một bài viết, chẳng hạn như âm thanh, video và văn bản, có thể cung cấp cho người đọc của bạn nhiều nội dung để dành thời gian. Nhúng nội dung như video cũng có thể lôi kéo người đọc theo dõi bạn trên các nền tảng liên quan.

Cho dù bạn có nội dung video của riêng mình để chia sẻ hay muốn chia sẻ video của người tạo nội dung khác, thì khối nhúng Vimeo trên WordPress sẽ làm cho nó trở nên đơn giản và dễ hiểu. Bạn không cần phải sử dụng video của riêng mình. Khối tích hợp Vimeo sẽ hoạt động với bất kỳ video nào trên nền tảng được định cấu hình để xem công khai - tất cả những gì bạn cần là URL.

Hãy cùng xem các bước chính xác bạn cần thực hiện để video Vimeo hiển thị trên trang WordPress của bạn bằng trình chỉnh sửa khối.

Sử dụng Khối nhúng Vimeo: Hướng dẫn từng bước

Bạn đã sẵn sàng thêm tích hợp Vimeo vào trang WordPress của riêng mình chưa? Thật dễ dàng để thêm video vào bài đăng blog hoặc trang web của bạn bằng trình chỉnh sửa khối WordPress.

Cách thêm khối tích hợp Vimeo

Tạo một bài đăng blog mới trên trang web WordPress của bạn và đảm bảo rằng nó được đặt thành trình chỉnh sửa khối. Khi bạn đã thêm tiêu đề của mình, bạn có thể tạo và nhập một khối văn bản. Khi bạn đã sẵn sàng thêm khối sẽ chứa tích hợp Vimeo của mình, chỉ cần nhấp vào dấu cộng màu đen.

Bạn sẽ nhận được một hộp thả xuống, nơi bạn có thể tìm kiếm công cụ bạn muốn sử dụng. Nếu bạn gõ "vim" vào hộp tìm kiếm, bạn sẽ thấy biểu tượng Vimeo xuất hiện trong hộp. Nhấp vào nó để mở công cụ tích hợp.

Sau đó, công cụ tích hợp Vimeo sẽ xuất hiện trên màn hình của bạn. Bạn sẽ thấy lời nhắc nhập URL Vimeo của video bạn muốn nhúng.

Bây giờ điều hướng đến video Vimeo mà bạn muốn chia sẻ trên trang web của mình. Đi tới thanh điều hướng, sau đó đánh dấu và sao chép URL của video.

Quay lại tab WordPress của bạn và dán URL của video Vimeo vào công cụ tích hợp Vimeo của bạn. Sau đó nhấp vào nút Tích hợp màu xanh lam.

Khi bạn đã thêm URL của video, tích hợp Vimeo sẽ xuất hiện trên màn hình của bạn. Nếu vì lý do nào đó mà video không thể được nhúng vào trang web của bạn, bạn sẽ nhận được thông báo lỗi hoặc URL sẽ xuất hiện ở dạng văn bản thuần túy. Sau đó, bạn có tùy chọn để liên kết nó trong văn bản qua URL, nếu không có video thay thế, bạn có thể đưa vào thay thế.

Tối ưu hóa Vimeo Embed của bạn

Nhấp vào bên dưới bản xem trước video của bạn. Bạn sẽ thấy một hộp văn bản và tùy chọn để nhập phụ đề mô tả video của bạn. Phụ đề có thể thêm ngữ cảnh vào nội dung trang web của bạn, vì vậy hãy sử dụng chúng khi bạn có thể.

Bây giờ hãy di chuột qua thanh công cụ ở trên cùng bên trái của tích hợp Vimeo của bạn. Bạn sẽ thấy danh sách các biểu tượng và nút.

Nếu bạn nhấp vào chữ V màu xanh lam ở phía bên trái, bạn sẽ thấy trình đơn thả xuống gồm các tùy chọn để chuyển đổi tích hợp của bạn. Bạn có thể biến tích hợp Vimeo thành nội dung cao cấp, cột hoặc nhóm, tùy thuộc vào cách bạn định tổ chức bài đăng hoặc trang của mình.

Từ bên trái, hai tùy chọn tiếp theo cho phép bạn kéo khối hoặc di chuyển khối lên và xuống trên trang. Khi bạn nhấp vào nút căn chỉnh, bạn sẽ thấy các tùy chọn để căn chỉnh video của bạn sang trái, phải hoặc giữa trang. Ngoài ra, bạn sẽ có thể hiển thị tích hợp Vimeo ở toàn bộ chiều rộng hoặc chiều rộng đầy đủ.

Biểu tượng cây bút cho phép bạn chỉnh sửa hoặc thay đổi URL của video.

Cuối cùng, nhấp vào nút ở ngoài cùng bên phải của thanh công cụ tích hợp Vimeo. Bạn sẽ thấy danh sách các cài đặt và tùy chọn chặn, bao gồm:

  • Ẩn các cài đặt khác
  • Sao chép khối
  • Khối trùng lặp
  • Chèn một khối trước hoặc sau khối đã chọn
  • Di chuyển khối
  • Chỉnh sửa khối dưới dạng mã HTML
  • Thêm vào danh sách các khối có thể tái sử dụng
  • nhóm
  • Xóa khối

Thêm màu nền vào khối nhúng Vimeo

Nếu bạn muốn thêm màu nền vào khối nhúng Vimeo, bạn có thể thực hiện việc này bằng cách chuyển video nhúng thành một nhóm.

Sau khi hoàn tất, bạn có thể nhấp vào khối nhúng để xem lựa chọn màu sắc ở phía bên phải của màn hình. Đối với ví dụ của tôi, tôi đã chọn màu xanh lam và nó xuất hiện trong tích hợp Vimeo, nơi có chú thích.

gói

Bây giờ bạn đã biết cách sử dụng khối nhúng Vimeo trong WordPress, đã đến lúc bắt đầu thêm video vào nội dung của bạn! Hãy nhớ làm theo các phương pháp hay nhất tiêu chuẩn để chia sẻ video, đặc biệt chú ý đến các video chất lượng cao, dễ hiểu và dễ xem. Bất cứ khi nào có thể, chia sẻ các video có thể truy cập bao gồm phụ đề là lý tưởng để nhiều khán giả hơn có thể thưởng thức nội dung trên trang web của bạn.

Bạn có định chia sẻ video trên blog hoặc trang web của mình không? Bạn muốn sử dụng tích hợp YouTube hay Vimeo? Tại sao hoặc tại sao không? Bình luận bên dưới để chia sẻ suy nghĩ của bạn.

Hình ảnh nổi bật qua ST.art / shutterstock.com



[Ad_2]

Liên kết nguồn

Cách tạo thanh điều hướng từ dưới lên cố định trong Divi

Cách tạo thanh điều hướng từ dưới lên cố định trong Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: chủ đề WordPress dễ sử dụng nhất

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] TẢI XUỐNG [/ vcex_button] [/ vc_column] [/ vc_row]

[Ad_1]

Trong hướng dẫn Divi hôm nay, chúng tôi sẽ chỉ cho bạn từng bước cách tạo thanh điều hướng cố định từ dưới lên trong Divi. Điều này sẽ cho phép thanh điều hướng ở cuối trang ban đầu cho một bố cục duy nhất phía trên đường nước. Sau đó, khi bạn đi qua phần phía trên đường nước của trang, thanh điều hướng sẽ ở trên cùng của trang và ở đó trong suốt phần còn lại của trang. Bạn có thể nói rằng trang sẽ "tiếp quản" menu ở cuối màn hình và mang lại hiệu ứng tương tác tốt cho menu chính và trang web của bạn.

Hãy bắt đầu!

khảo sát

Để giúp bạn hình dung kết quả chúng tôi đang cố gắng đạt được, hãy xem kết quả cuối cùng:

Tải xuống bố cục MIỄN PHÍ

Để có được các thiết kế cho hướng dẫn này, trước tiên bạn cần tải xuống bằng cách sử dụng nút bên dưới. Để truy cập bản tải xuống, bạn cần đăng ký vào danh sách gửi thư Divi Daily của chúng tôi bằng cách sử dụng biểu mẫu bên dưới. Là một người đăng ký mới, bạn sẽ nhận được nhiều lợi ích hơn nữa từ Divi vào mỗi Thứ Hai hàng tuần và một gói Divi Layout miễn phí! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn bên dưới và nhấn tải xuống. Bạn sẽ không được "đăng ký lại" hoặc nhận thêm email.

Để nhập bố cục của phần vào thư viện Divi của bạn, hãy chuyển đến thư viện Divi.

Bấm vào nút Nhập.

Trong cửa sổ bật lên khả năng di động, hãy chọn tab nhập và chọn tệp để tải xuống từ máy tính của bạn.

Sau đó bấm vào nút nhập.

hộp thông báo divi

Sau khi hoàn tất, bố cục của các phần sẽ có sẵn trong Divi Builder.

Bạn sẽ tiếp tục hướng dẫn này chứ?

Những gì bạn cần để bắt đầu

mở rộng các tab góc

Để bắt đầu, bạn cần thực hiện những việc sau:

  1. Nếu bạn chưa làm như vậy, hãy cài đặt và kích hoạt chủ đề Divi.
  2. Tạo một trang mới trong WordPress và sử dụng Divi Builder để chỉnh sửa trang trên giao diện người dùng (trình tạo trực quan).
  3. Chọn tùy chọn "Xây dựng từ đầu".

Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.

Tạo thanh điều hướng từ dưới lên trên cố định trong Divi

Phần 1: Tạo phần và tiêu đề phía trên đường nước

Đối với phần đầu tiên của hướng dẫn này, chúng tôi sẽ tạo phần và tiêu đề phía trên đường nước sẽ đóng vai trò là phần tiêu đề chính của trang của chúng tôi. Phần này sẽ ở toàn màn hình trên màn hình nền để đảm bảo rằng phần đó chiếm toàn bộ cửa sổ.

Thêm một hàng

Để bắt đầu, hãy thêm một hàng vào một cột vào phần mặc định.

thanh điều hướng divi dính từ dưới lên trên

Cài đặt phần

Trước khi thêm mô-đun, hãy mở cài đặt phần và thêm nền như sau:

  • Màu nền: # e9f9ff
  • Hình nền: [thêm hình ảnh]

thanh điều hướng divi dính từ dưới lên trên

Trên tab Thiết kế, cập nhật chiều cao và phần đệm tối thiểu.

  • Chiều cao tối thiểu: 100 vh (máy tính để bàn), tự động (máy tính bảng và điện thoại)
  • Lớp đệm: 20vh trên, 20vh dưới

thanh điều hướng divi dính từ dưới lên trên

Văn bản tiêu đề

Để tạo văn bản tiêu đề, hãy thêm một mô-đun văn bản mới vào dòng.

thanh điều hướng divi dính từ dưới lên trên

Sau đó cập nhật nội dung với tiêu đề H1 sau:

<h1>Above the Fold</h1>

thanh điều hướng divi dính từ dưới lên trên

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

Trên tab Thiết kế của Cài đặt Văn bản, cập nhật Kiểu Phông chữ Tiêu đề như sau:

  • Phông chữ tiêu đề: Rubik
  • Độ đậm phông chữ của tiêu đề: Bán đậm
  • Kiểu phông chữ tiêu đề TT
  • Căn chỉnh văn bản tiêu đề: Căn giữa
  • Màu văn bản tiêu đề: # 302ea7
  • Kích thước văn bản tiêu đề: 130px (máy tính để bàn), 70px (máy tính bảng), 40px (điện thoại)
  • Khoảng cách chữ cái tiêu đề: 2px
  • Chiều cao dòng tiêu đề: 1,3 em

thanh điều hướng divi dính từ dưới lên trên

Phần 2: Tạo phần dưới nếp gấp

Để chứng minh chức năng của thanh điều hướng cố định, chúng tôi cần thêm một phần bên dưới màn hình đầu tiên để chúng tôi có thể có chỗ để cuộn.

Để tạo phần này, hãy nhân đôi phần phía trên đường nước mà chúng ta vừa tạo.

thanh điều hướng divi dính từ dưới lên trên

Cập nhật nền của phần trùng lặp.

  • Màu nền: # f4def1

thanh điều hướng divi dính từ dưới lên trên

Sau đó, cung cấp cho phần này một chiều cao tối thiểu lớn để chúng ta có chỗ để cuộn trang. Đây chỉ là một phần để điền thay vì nội dung thực tế trên một trang.

thanh điều hướng divi dính từ dưới lên trên

Sau đó, cập nhật nội dung của mô-đun văn bản bằng cách thay thế từ “Bên dưới” bằng “Bên trên”.

thanh điều hướng divi dính từ dưới lên trên

Phần 3: Tạo thanh điều hướng dính

Để tạo thanh điều hướng cố định từ dưới lên trên, bước đầu tiên của chúng ta là tạo một phần mới với một hàng đến một cột.

Thêm một phần mới và một dòng mới

Thêm một phần thông thường mới ngay bên dưới phần phía trên đường nước.

thanh điều hướng divi dính từ dưới lên trên

Sau đó, thêm một hàng vào một cột vào phần.

thanh điều hướng divi dính từ dưới lên trên

Nền và phần đệm của phần

Mở cài đặt phần và cập nhật màu nền.

  • Màu nền: # 302ea7

thanh điều hướng divi dính từ dưới lên trên

Sau đó, loại bỏ phần đệm trên và dưới để thanh điều hướng có ít chiều cao hơn.

  • Infill: 0px trên, 0px dưới

thanh điều hướng divi dính từ dưới lên trên

Thêm phần tràn có thể nhìn thấy

Để đảm bảo rằng các menu thả xuống vẫn hiển thị, hãy cập nhật các tùy chọn hiển thị như sau:

  • Tràn ngang: Có thể nhìn thấy
  • Tràn dọc: hiển thị

thanh điều hướng divi dính từ dưới lên trên

Cung cấp cho phần này một vị trí tuyệt đối trên thiết bị di động

Menu thả xuống trên thiết bị di động sẽ mở theo mặc định bên dưới biểu tượng bánh hamburger. Nếu chúng ta giữ thanh điều hướng ở dưới cùng, nó sẽ ẩn menu thả xuống nếu người dùng nhấp vào nó ở vị trí xuống. Để có trải nghiệm người dùng tốt hơn, chúng tôi muốn thanh điều hướng bắt đầu ở đầu trang trên màn hình máy tính bảng và điện thoại.

Để làm điều này, hãy chỉ định phần này một vị trí tuyệt đối trên máy tính bảng và điện thoại.

  • Vị trí: Tương đối (máy tính để bàn), Tuyệt đối (máy tính bảng và điện thoại)

thanh điều hướng divi dính từ dưới lên trên

Thêm vị trí cố định cho máy tính để bàn và thiết bị di động

Để thêm vị trí cố định vào phần thanh điều hướng, hãy cập nhật thông tin sau:

  • Vị trí cố định: Dán lên trên và dưới (máy tính để bàn), Dính lên trên (máy tính bảng và điện thoại)

thanh điều hướng divi dính từ dưới lên trên

Cập nhật phần đệm hàng

Khi phần dính hoàn tất, hãy mở cài đặt hàng bên trong phần và cập nhật phần điền như sau:

  • Padding: 10 pixel ở trên cùng, 10 pixel ở dưới cùng

thanh điều hướng divi dính từ dưới lên trên

Tạo menu điều hướng

Với phần và hàng ở đúng vị trí, chúng tôi đã sẵn sàng tạo menu điều hướng.

Bắt đầu bằng cách thêm một mô-đun menu vào hàng thành một cột.

thanh điều hướng divi dính từ dưới lên trên

Nội dung menu

Cập nhật nội dung menu như sau:

  • chọn menu từ danh sách thả xuống
  • thêm hình ảnh biểu trưng (tôi đang sử dụng hình ảnh 122px x 52px)
  • loại bỏ màu nền mặc định

thanh điều hướng divi dính từ dưới lên trên

Trên tab Thiết kế, cập nhật cài đặt biểu tượng và văn bản menu sau:

  • Màu liên kết đang hoạt động: #fff
  • Phông chữ menu: Rubik
  • Kiểu phông chữ menu: TT
  • Màu văn bản menu: #fff
  • Kích thước văn bản menu: 16px
  • Căn chỉnh văn bản: phải
  • Màu dòng menu thả xuống: # e19dff
  • Màu văn bản menu trên điện thoại di động: # 302ea7
  • Màu biểu tượng giỏ hàng: #fff
  • Màu biểu tượng tìm kiếm: #fff
  • Màu biểu tượng menu bánh hamburger: #fff

thanh điều hướng divi dính từ dưới lên trên

Sử dụng đường viền để bù đắp vị trí tuyệt đối của thanh điều hướng trên thiết bị di động

Vì phần thanh điều hướng có vị trí tuyệt đối trên thiết bị di động nên thanh này sẽ nằm phía trên (và cắt ngang) phần trên cùng của trang. Để giải quyết vấn đề này, chúng ta cần bù đắp phần trên cùng bằng cách sử dụng đường viền trên cùng có cùng chiều cao với thanh điều hướng / phần.

Kiểm tra chiều cao của phần thanh điều hướng trên thiết bị di động

Để xác định chiều cao của thanh điều hướng trên thiết bị di động, hãy mở phiên bản trực tiếp của trang trong cửa sổ trình duyệt mới. Sau đó, bạn có thể giảm chiều rộng của trình duyệt xuống dưới 980px để xem menu di động. Nhấp chuột phải vào phần chứa menu và chọn tùy chọn Kiểm tra Mục từ menu ngữ cảnh của trình duyệt. Bạn sẽ thấy một hộp công cụ bên dưới phần hiển thị các kích thước (bao gồm cả chiều cao) của phần. Đối với ví dụ này, chiều cao của phần thanh điều hướng là 72px.

thanh điều hướng divi dính từ dưới lên trên

Thêm phần bù đắp đường viền trên cùng vào phần trong màn hình đầu tiên

Bây giờ chúng ta đã xác định được chiều cao của phần, hãy mở cài đặt cho phần trên cùng (trong màn hình đầu tiên).

Trong tab Thiết kế, thêm đường viền trên cùng sau trên cả máy tính bảng và điện thoại:

  • Chiều rộng đường viền trên cùng: 72px (máy tính bảng và điện thoại)
  • Màu viền trên: # 302ea7

Vì đường viền có cùng độ cao với phần có vị trí tuyệt đối, bạn sẽ không thể nhìn thấy đường viền vì nó chỉ dùng để đẩy phần xuống để không bị cắt.

thanh điều hướng divi dính từ dưới lên trên

Kết quả cuối cùng

Khám phá kết quả cuối cùng!

cuối cùng suy nghĩ

Có thể dễ dàng tạo thanh điều hướng cố định từ dưới lên bằng cách sử dụng các tùy chọn cố định và vị trí tích hợp của Divi. Điều quan trọng là cung cấp cho phần bên trên đường nước có độ cao 100vh, sau đó thêm phần thanh điều hướng bên dưới dính vào phần dưới và đầu của trình duyệt. Hy vọng rằng điều này sẽ giúp thêm phần trên đường nước độc đáo và hấp dẫn hơn cho trang web của bạn.

Thanh điều hướng cố định này hoạt động tốt nhất cho một thiết kế trang đơn hơn là một mẫu tổng thể. Điều đó nói rằng, bạn có thể dễ dàng chọn sử dụng nó làm thiết kế trang chủ của mình và sử dụng tiêu đề tổng thể cho các trang còn lại bằng trình tạo chủ đề Divi.

Tôi mong muốn được nghe từ bạn trong các ý kiến.

Để sức khỏe của bạn!



[Ad_2]

Liên kết nguồn