Đây là hướng dẫn đơn giản, từng bước để giúp bạn tạo tiêu đề thay đổi khi cuộn bằng cách sử dụng Elementor và các tiêu đề cố định của Elementor.

Bạn đang xem : phần tử hoặc tiêu đề cố định thay đổi màu khi cuộn

Cách thay đổi tiêu đề khi cuộn bằng phần tử

Những người sáng tạo trang web và những người đam mê Elementor đã thành công gì! Hướng dẫn này sẽ chỉ cho bạn cách thay đổi hoặc chuyển đổi tiêu đề khi cuộn bằng cách sử dụng chức năng Sticky của Elementor’s .

Tôi sẽ chỉ cho bạn hai phong cách.

  1. Kiểu hiển thị trong đó tiêu đề hoạt hình lên và xuống khi cuộn
  2. Và kiểu mờ dần

Chúng tôi sẽ thực hiện việc này từng bước để ngay cả những người mới bắt đầu sử dụng Elementor và WordPress cũng có thể thêm hiệu ứng này vào trang web của bạn ở cuối video.

Quảng cáo Nổi bật


Quảng cáo Cloudways

Quảng cáo Nổi bật

Tiêu đề thay đổi là gì

Tiêu đề thay đổi là phương pháp chuyển đổi tiêu đề bằng cách sử dụng hai tiêu đề. Sẽ có một tiêu đề ban đầu là tiêu đề chính của bạn và bắt đầu là tiêu đề đầu tiên. Sau đó, khi người dùng cuộn trang web, tiêu đề thứ hai sẽ xuất hiện.

Phương pháp này là một phương pháp thay thế cho một tiêu đề duy nhất có kiểu thay đổi khi cuộn. Theo cá nhân tôi, đây là kỹ thuật tôi thích sử dụng và có một số lợi ích bổ sung đối với tiêu đề hấp dẫn.

Thêm nhiều hiệu ứng tiêu đề dính nhiều phần tử

Một trong những lợi ích lớn nhất là bạn có thể tạo 2 menu hoàn toàn khác nhau và không giới hạn ở cùng một bố cục. Điều này đặc biệt hữu ích với các trang web WooCommerce, nơi nhiều yếu tố khác như giỏ hàng và tài khoản có thể hữu ích trong menu.

Điều này cũng giúp dễ dàng thêm các hiệu ứng khác nhau, chẳng hạn như biểu trưng thay đổi hoặc thu nhỏ khi cuộn, màu nền cho tiêu đề thay đổi khi cuộn và tiêu đề thu nhỏ hoàn toàn, mỏng hơn nhiều khi cuộn. Và tất cả những điều này có thể được thực hiện ngay lập tức bằng cách sử dụng kỹ thuật thay đổi tiêu đề khi cuộn bằng hiệu ứng dính của Elementor.

Những gì bạn cần làm theo hướng dẫn này

Để sử dụng hiệu ứng và phương pháp với Elementor, bạn sẽ cần Elementor Pro. Nếu bạn chưa có, đây là liên kết để giúp bạn bắt đầu. Không cần có plugin nào khác.

Bạn cũng sẽ cần thêm một số CSS nhưng đừng lo, tôi đã giúp bạn. Bên dưới tôi đã thêm CSS và tất cả những gì bạn cần làm là sao chép và dán. Tôi sẽ chỉ cho bạn vị trí đặt nó và làm cho hướng dẫn này đơn giản đến mức ngay cả những người không phải là công nghệ cũng có thể làm theo và làm cho nó thành công.

Cách hoạt động của tiêu đề dính Elementor

Tiêu đề dính Elementor hoạt động nhờ chức năng cố định của Elementor. Có tùy chọn ‘Cố định’ trong tab Nâng cao trong ‘Hiệu ứng chuyển động’ trên bất kỳ phần tử nào.

XEM THÊM  Cách di chuyển thủ công một trang web WordPress (Từng bước) - cách di chuyển trang web wordpress theo cách thủ công

Khi tùy chọn này được bật và một giá trị được cấp cho ‘Hiệu ứng bù đắp’, một lớp đặc biệt sẽ được cấp cho phần tử. Với lớp đó, chúng ta có thể sử dụng CSS để nhắm mục tiêu và tạo kiểu cho phần tử đó.

Phần bù Hiệu ứng

Hiệu ứng Offset có tác dụng gì là điều này xác định khoảng cách cuộn trang web để hiệu ứng dính xảy ra. Ví dụ: nếu bạn đặt 100 cho giá trị Hiệu ứng bù đắp, khi trang cuộn 100 pixel, hiệu ứng sẽ xảy ra.

Tác dụng là gì, đó là lớp CSS đặc biệt, ‘elementor-stick-active’. Lớp xuất hiện trong mã khi bạn cuộn đến mức bù đắp hiệu ứng. Và CSS nhắm mục tiêu đến lớp đó sau đó sẽ có hiệu lực.

Vì vậy, khi thay đổi tiêu đề, những gì chúng tôi thực sự làm là làm cho phần của tiêu đề phụ trở nên dính, ẩn tiêu đề phụ phía trên trang web hoặc chỉ làm cho nó biến mất (tùy thuộc vào kiểu bạn thích.) Sau đó, chúng tôi viết CSS. nhắm mục tiêu lớp trong ẩn tiêu đề phụ để làm cho nó xuất hiện khi người dùng cuộn đến nơi chúng tôi đã đặt nó trong ‘hiệu ứng bù đắp’.

Quảng cáo Nổi bật


Quảng cáo Cloudways

Quảng cáo Nổi bật

Thay đổi tiêu đề khi cuộn bằng Hướng dẫn sử dụng Elementor

Bước 1: Tạo mẫu tiêu đề

Chúng tôi sẽ tạo các tiêu đề trong Trình tạo chủ đề của Elementor. Từ trang tổng quan của bạn, điều hướng đến thanh công cụ bên trái và bên dưới Elementor & gt; Mẫu & gt; Trình tạo chủ đề. Thêm mẫu Tiêu đề mới.

Nếu bạn đã có kinh nghiệm với Elementor, bạn có thể đã biết cách tạo tiêu đề. Nếu không, vui lòng xem video hướng dẫn ở cuối bài viết này.

Bước 2: Xây dựng cả hai menu của bạn

Trong mẫu tiêu đề của bạn, hãy thêm cả hai menu và tạo kiểu cho chúng theo ý muốn. Đối với tiêu đề chính của bạn, hãy thêm 100 vào chỉ mục z. Điều này sẽ đảm bảo nó nằm trên đầu biểu ngữ của bạn.

Bước 3: Thêm chức năng cố định và các lớp CSS

Trong tiêu đề chính của bạn, hãy chọn phần có trong đó, điều hướng đến tab Nâng cao và trong Lớp CSS, hãy thêm ‘tiêu đề-1’ và đó sẽ là lớp cho phần của tiêu đề chính của bạn.

Đối với tiêu đề phụ của bạn, đây là tiêu đề sẽ xuất hiện khi cuộn, hãy điều hướng đến phần có trong đó (giống như tiêu đề khác), chuyển đến Nâng cao trong trình chỉnh sửa Elementor và chuyển đến các lớp CSS. Thêm ‘tiêu đề-2’ vào đó và đây sẽ là lớp cho phần tiêu đề phụ của bạn.

Bước 4: Sửa Safari

Trong quá trình thử nghiệm, tôi nhận thấy các menu chuyển đổi không mượt mà trên Safari và việc chuyển đổi suôn sẻ sẽ tạo ra tác động lớn. Đây là bản sửa lỗi mà tôi đã sử dụng để đảm bảo menu của bạn thay đổi trơn tru trên Safari, Chrome và Firefox.

Nó đơn giản. Di chuyển tiêu đề phụ của bạn lên trên cùng và đảm bảo nó ở trên tiêu đề chính của bạn. Vì vậy, tiêu đề 2 sẽ thực sự nằm trên đầu tiêu đề 1.

Chiều rộng
Chiều rộng

Bước 5: Thêm hiệu ứng dính

Chúng tôi sẽ chỉ thêm hiệu ứng dính vào tiêu đề phụ. Trong tiêu đề phụ, điều hướng đến Phần để chỉnh sửa & gt; đến tab Nâng cao & gt; sang Hiệu ứng chuyển động & gt; trong Chọn “Lên trên”.

Chọn nếu bạn muốn có máy tính để bàn, máy tính bảng và điện thoại di động. Cá nhân tôi chỉ sử dụng máy tính để bàn và máy tính bảng, và tôi giữ cho các menu trên thiết bị di động của mình đơn giản hơn. Tôi nghĩ giao diện người dùng sẽ tốt hơn, nhưng tôi sẽ để điều đó tùy thuộc vào bạn.

Trong phần “Offset”, không chạm vào và để ở mức 0.

Trong phần ‘Effects Offset, đây là nơi điều kỳ diệu xảy ra. Số bạn đặt ở đây là số pixel mà trang web sẽ cuộn cho đến khi hiệu ứng xảy ra trong hộp giá trị. Bạn có thể chơi với con số này và xem điều gì phù hợp nhất với mình.

Chỉ cần lưu ý, nếu bạn để ở chế độ 0, điều này sẽ không hiệu quả.

Bước 6: Thêm CSS

Tôi khuyên bạn nên thêm CSS vào thư mục style.css của theme con. Bạn có thể tìm thấy điều này bằng cách điều hướng trong trang tổng quan của mình đến Giao diện & gt; Trình chỉnh sửa chủ đề. Từ trình chỉnh sửa chủ đề của bạn, hãy đảm bảo bạn đã chọn chủ đề con của mình bằng cách chọn “Chọn chủ đề để chỉnh sửa” trên thanh công cụ bên phải.

XEM THÊM  12+ CSS cuộn menu điều hướng một trang tốt nhất - css cuộn một trang

Nếu bạn không có chủ đề con, bạn có thể thêm CSS của mình trong tùy biến WordPress. Bạn có thể tìm thấy điều này bằng cách điều hướng đến Giao diện & gt; Tùy chỉnh & gt; CSS bổ sung.

Tôi cố gắng tránh thêm CSS trong trình chỉnh sửa Elementor vì nó có thể vô tổ chức và bị mất. Trở thành vấn đề đau đầu sau này trong tương lai. Cách tốt nhất luôn là giữ cho tất cả mã sạch sẽ, tập trung và có tổ chức.

Quảng cáo Nổi bật


Quảng cáo Cloudways

Quảng cáo Nổi bật

Đây là CSS

Vì có 2 kiểu, kiểu trượt xuống và kiểu mờ dần, bạn sẽ chỉ thêm một trong các đoạn CSS bên dưới. Không thêm cả hai.

Tùy chọn 1: Tiêu đề Hiển thị hoặc Trượt xuống

  / * Trượt vào Từ Tùy chọn Trên cùng * /

.header-2 {
 biến đổi: translatey (-80px);
 -moz-chuyển tiếp: tất cả .3s dễ dàng! quan trọng;
 -webkit-chuyển đổi: tất cả .3s dễ dàng! quan trọng;
 chuyển tiếp: tất cả .3s dễ dàng! quan trọng;
}


.elementor-stick - Effects.header-2 {
 chiều cao: auto! important;
 biến đổi: translatey (0px);
}

.elementor-stick - Effects.header-1 {
 hiển thị: không! quan trọng;
}

/ * Kết thúc Trang trình bày Từ Tùy chọn Trên cùng * /  

Tùy chọn 2: Tiêu đề mờ dần

  / * Fade In Option * /

.header-2 {
 độ mờ: 0;
 -moz-chuyển đổi: độ mờ. 25 giây dễ dàng thoát ra! quan trọng;
  -webkit-chuyển đổi: độ mờ. 25 giây dễ dàng thoát ra! quan trọng;
  chuyển tiếp: opacity, dễ dàng nhận ra 25 giây! quan trọng;
}


.elementor-stick - Effects.header-2 {
 độ mờ: 1! important;
}

/ * End Of Fade In Option * /  

Bước 7: Sửa Safari phần 2

Sau khi thêm CSS, tiêu đề phụ của bạn sẽ được ẩn đi và mọi thứ hoạt động tốt.

Nhưng… vì bản sửa lỗi Safari, có thêm không gian phía trên menu chính. Đó là một sửa chữa đơn giản. Trong phần của menu chính, hãy đặt giá trị âm cho lề trên. Nó sẽ giống như -80px ở lề trên. Cho hoặc lấy một vài pixel.

Bước 8: Tạo kiểu cho điện thoại di động

Đối với điện thoại di động, có một số tùy chọn. Để các menu chuyển đổi dành cho thiết bị di động đang hoạt động. Hoặc, bạn có thể ẩn cả hai menu dành cho thiết bị di động và tạo menu thứ 3 chỉ dành cho thiết bị di động. Sẽ mất một chút công việc, nhưng may mắn là Elementor thành công và giúp bạn dễ dàng tạo kiểu.

Thay đổi tiêu đề khi cuộn bằng Elementor – Video hướng dẫn

Nếu bạn đã làm theo tất cả các bước ở trên và có điều gì đó không hoạt động hoặc bạn bị mắc kẹt ở đâu đó trong quá trình thực hiện, thì không vấn đề gì! Tôi đã giúp bạn được bảo hiểm. Tôi cũng đã tạo một video hướng dẫn từng bước để giúp đơn giản hóa.

Nếu bạn có bất kỳ câu hỏi nào, hãy thả chúng vào phần nhận xét bên dưới và tôi sẽ liên hệ lại với bạn. Chúc mừng!


Xem thêm những thông tin liên quan đến chủ đề phần tử hoặc tiêu đề dính thay đổi màu khi cuộn

Nên làm gì khi đau dạ dày?

alt

  • Tác giả: Bệnh viện ĐKQT Vinmec
  • Ngày đăng: 2020-10-30
  • Đánh giá: 4 ⭐ ( 2596 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: daday daudaday viemdaday

    Đau dạ dày khiến cơ thể người bệnh bị suy nhược, gây khó khăn trong sinh hoạt và công việc. Người bị đau dạ dày cần được thăm khám và điều trị sớm để tránh các nguy cơ biến chứng về sau. Vậy khi đau dạ dày có nên đi nội soi? và đau dạ dày nên làm gì để giảm đau?

    Về vấn đề “đau dạ dày có nên đi nội soi?” bác sĩ chuyên khoa cho rằng, đau dạ dày có nhiều mức độ, với kiểm tra dạ dày thực quản thông thường ở những người có nguy cơ, thậm chí không đau cũng có thể phải làm nội soi. Khi bệnh nhân có triệu chứng đau thì nên thăm khám với bác sĩ chuyên khoa, tùy theo tính chất đau, bác sĩ sẽ quyết định đau dạ dày có nên đi nội soi hay không. Có khoảng 97-98% đau dạ dày không chống chỉ định với nội soi, có một số ít trường hợp đau do thủng ổ loét dạ dày tá tràng, đau ở vùng thượng vị loại trừ nhồi máu cơ tim ở thành sau dưới.

    “Đau dạ dày nên làm gì để giảm đau?” về vấn đề này, bác sĩ cho rằng, đau dạ dày có nhiều mức độ và phần lớn không đau nhiều, do tăng tiết axit, dạ dày bị tổn thương do các vết loét gây đau, co thắt nhu động ruột, rối loạn thần kinh…dựa vào từng nguyên nhân sẽ có cách giảm đau như sử dụng các loại thuốc giảm tiết axit, trung hòa axit, giảm co bóp, giảm đau để tác động vào hệ thần kinh. Trong trường hợp chưa có thuốc, chưa có can thiệp y tế thì người bệnh nên loại trừ các yếu tố nguy cơ gây đau, uống nhiều nước lọc để làm loãng axit, đau không ngồi được thì nên nằm nghiêng bên trái, tránh trường hợp dạ dày có nhiều thức ăn gây trào ngược thực quản và làm đau hơn, có thể ăn vài lát bánh mì để thấm axit trong dạ dày, khi bắt đầu có dấu hiệu đau thì nên xoa bụng theo chiều kim đồng hồ, hít thở nhẹ nhàng.

    Đau dạ dày nên tránh ăn gì là thắc mắc của nhiều người bệnh, theo đó, người bệnh đau dạ dày nên tránh ăn những thực phẩm khó tiêu, cứng, nhiều dầu mỡ, cay nóng, đồ sống có nhựa hay đồ uống có cồn…Song song với việc biết được đau dạ dày nên tránh ăn gì thì người bệnh cũng cần bổ sung kiến thức đau dạ dày nên ăn gì để bồi bổ sức khỏe của bản thân, cụ thể, người bệnh đau dạ dày nên ăn thức ăn có tính kiềm, mềm, dễ tiêu hóa như rau đay, rau mồng tơi, khoai lang, khoai sọ…

    Nhiều người bệnh thắc mắc “mật ong, nghệ có chữa khỏi đau dạ dày?” Về vấn đề này, bác sĩ cho rằng, đau dạ dày có nhiều nguyên nhân, nếu đau do vi khuẩn Hp thì điều trị bằng kháng sinh, ngoài ra, những thuốc khác không thể tiêu diệt được vi khuẩn, chỉ có tác dụng giảm đau tạm thời và sau đó lại đau trở lại. Về mặt khoa học, với thắc mắc “mật ong, nghệ có chữa khỏi đau dạ dày” thì câu trả lời là không, tuy nhiên, chúng có tác dụng hỗ trợ điều trị rất tốt, khuyến cáo không nên dùng nghệ tươi xay ra để dùng và mật ong nên sử dụng loại có nguồn gốc.

    Ấn “Đăng kí” để theo dõi các video mới nhất về sức khỏe tại :
    https://www.youtube.com/channel/UCuqtKp77ZbFRUFLq05-ddkw
    Liên hệ với Vinmec:
    Fanpage: https://www.facebook.com/Vinmec/
    Website: https://www.vinmec.com
    Hệ thống bệnh viện:
    https://www.vinmec.com/vi/danh-sach/ca-nuoc/coso-benh-vien-v-phong-kham/
    ————————
    Bản quyền thuộc về Vinmec
    Copyright by Vinmec ☞ Do not Reup

Thay nền/background cho section

  • Tác giả: help.ladipage.vn
  • Đánh giá: 4 ⭐ ( 3657 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tùy chỉnh biểu đồ Excel: thêm tiêu đề, trục, chú thích, nhãn dữ liệu,…

  • Tác giả: blog.hocexcel.online
  • Đánh giá: 4 ⭐ ( 2122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong các phiên bản hiện đại của Excel, 2013 và 2016, bạn có thể tùy chỉnh biểu đồ Excel dễ dàng. Microsoft đã thực sự đã nỗ lực để đơn giản hóa quá trình.

Cách sử dụng hiệu ứng cuộn và tiêu đề cố định với Elementor

  • Tác giả: www.holdersing.com
  • Đánh giá: 4 ⭐ ( 9483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiêu đề thường là thứ đầu tiên mà một người nhìn thấy khi họ truy cập trang web của bạn và nó đóng vai trò là nền tảng cho cách họ khám phá nó. Cho dù bạn có trang web Thương mại điện tử, trang web cá nhân, trang web giáo dục, diễn đàn cộng đồng hay trang web cho các phương tiện truyền thông, tiêu đề là thứ làm cho nó đơn giản để duyệt qua …

Hiển thị phần trăm nhãn trong biểu đồ cột Excel

  • Tác giả: vi.eyewated.com
  • Đánh giá: 3 ⭐ ( 8175 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Elementor: Cách thay đổi tiêu đề khi cuộn trang

  • Tác giả: vi.blogpascher.com
  • Đánh giá: 3 ⭐ ( 3564 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, hãy tìm hiểu cách thay đổi tiêu đề khi cuộn trang trên Elementor

Cách tạo một Header Cố định và Hoạt hình khi Cuộn Trang

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 4843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo một dạng thường được thấy trên nhiều trang web ngày này: một header cố định và hoạt hình thành một trạng thái thu nhỏ hơn khi chúng ta cuộn…

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Đăng nhập vào AdSense - làm cách nào để truy cập vào tài khoản adsense của tôi

By DEVTEAM