Một trang đích để thống trị tất cả chúng: Di chuyển toàn bộ trang web của bạn sang một ...


Vũ Vân Hà
2 năm trước
Hữu ích 10 Chia sẻ Viết bình luận 0
Đã xem 9458

Mọi người có một trang web đều biết trang đích là gì. Nhưng bạn đã bao giờ cân nhắc việc chuyển đổi trang web của mình để làm cho nó trông giống như một trang đích lớn không chỉ thông báo mà còn quảng bá sản phẩm và dịch vụ của bạn tới khách hàng tiềm năng chưa? Nếu bạn chưa, bạn nên thử bất kỳ trang đích tốt nào - ngay cả trang đơn giản nhất - cho phép bạn giới thiệu sản phẩm và dịch vụ của mình ngay lập tức. Trang đích thu hút khách hàng và giúp họ cảm thấy thoải mái hơn khi tiêu thụ nội dung hữu ích; họ không chỉ là về quảng cáo và công cụ quảng cáo.

Đây chính xác là lý do tại sao chúng tôi quyết định thiết kế và phát triển một trang web giống như trang đích cho cơ quan tiếp thị kỹ thuật số của chúng tôi. Mục tiêu của chúng tôi là tạo ra một trang web trực quan với cấu trúc đơn giản, thiết kế hấp dẫn và nội dung dễ truy cập (nghĩa là tất cả thông tin được đặt trên một trang; người dùng không phải nhấp vào bất kỳ tab nào hoặc đợi trong khi chờ các trang khác đang tải).

Trong bài viết này, tôi sẽ giải thích cách chúng tôi xây dựng một trang web như thế. Tôi sẽ xem xét những công cụ và công cụ chúng tôi đã sử dụng, cũng như cung cấp một số mẫu mã để giúp bạn nhìn thấy một bức tranh lớn. Nào cùng đào vào bên trong!

Phát triển Thiết kế

Để bắt đầu, nhóm của chúng tôi đã chọn một thiết kế hấp dẫn trực quan và tất cả các dụng cụ cần thiết. Sau đó, chúng tôi đã đưa ra một giải pháp đơn giản nhưng hiệu quả cho hàng đống công nghệ mà chúng tôi sẽ sử dụng trong quá trình phát triển. Để làm việc với các phong cách của trang web, chúng tôi đã quyết định dựa vào phát triển tùy chỉnh vì thiết kế là duy nhất và chúng tôi không thể tìm thấy các khung đáp ứng các tiêu chuẩn của chúng tôi.

Chúng tôi cũng chọn thư viện jQuery vì nó cho phép chúng tôi thao tác các phần tử và tạo hình động dễ dàng. Tuy nhiên, công cụ chính của chúng tôi là một plugin fullPage.js. Plugin đó rất hiệu quả để thực hiện các tính năng cuộn cho các phần toàn cảnh cụ thể của trang web.

Kiểu dáng

Như tôi đã đề cập ở trên, nhóm đã đi đến quyết định rằng việc tạo kiểu tùy chỉnh sẽ là giải pháp tốt nhất (vì mọi phần nội dung cần phải đáp ứng và thích ứng với các kích thước màn hình khác nhau một cách gọn gàng).

Sử dụng truy vấn phương tiện CSS, có thể thay đổi kích thước tương ứng tất cả các phần của trang web (bao gồm các tab, phông chữ và các yếu tố khác) để sắp xếp chúng gọn gàng trên các trang có độ phân giải màn hình khác nhau. Nhờ những truy vấn này, nội dung trông tuyệt vời trên màn hình nhỏ và lớn.

Dưới đây là một số ví dụ minh họa cách chúng tôi sử dụng và triển khai các truy vấn phương tiện CSS trên trang web của chúng tôi.

Hình 1

Hình 2

Và đây là mẫu mã ở đó:

.animation-box-2 {
position: absolute;
bottom: 0px;
left: 0px;
height: 24%;
font-size: 36px;
}
@media (max-width: 1200px)
.animation-box-2 {
font-size: 22px;
}
@media (max-width: 1400px)
.animation-box-2 {
font-size: 26px;
}
@media (max-width: 1500px)
.animation-box-2 {
font-size: 30px;
}

Về cơ bản, đoạn mã trên cho thấy kích thước phông chữ thay đổi như thế nào trên các màn hình khác nhau. Các truy vấn phương tiện CSS rất thuận tiện, đặc biệt là khi bạn cần hiển thị tất cả nội dung nhưng nó không phù hợp với các phần và tab trên độ phân giải màn hình cụ thể.

Plugin fullPage.js

Bây giờ, tôi muốn nói về khái niệm chính đằng sau quá trình thiết kế và phát triển của chúng tôi. Về cơ bản, ý chính của dự án này là một plugin jQuery có tên fullPage.js .

Như tôi đã đề cập, mục tiêu chính của chúng tôi là phát triển một trang web trực quan, đơn giản và dễ điều hướng có nội dung hữu ích và thông tin. Chúng tôi muốn làm cho trang đích của chúng tôi sáng tạo và hấp dẫn đối tượng mục tiêu rộng hơn. Đã xem qua nhiều giải pháp, chúng tôi đã tìm thấy plugin fullPage.js. Đây là lý do tại sao chúng tôi chọn nó làm công nghệ ngăn xếp của chúng tôi:

  • Dễ dàng cài đặt và thiết lập

  • Thể thao nhiều tính năng và linh hoạt

  • Có hỗ trợ nhiều trình duyệt trên tàu

  • Đi kèm với nhiều tài liệu và hướng dẫn

  • Cập nhật thường xuyên

  • Đáp ứng

Mã dưới đây cho thấy mức độ dễ sử dụng của plugin này:

$(document).ready(function() {

$('.js-allscreens').fullpage(); // Request a plugin by class .js-allscreens

});

Các plugin là một miếng bánh. Tuy nhiên, có một điều bạn nên nhớ: tất cả các phần được cuộn trong HTML của bạn phải được gói bởi một <div> với một lớp cụ thể. Như thế này:

<div class="js-allscreens">
<div class="js-screen">
</div>
<div class="js-screen" data-title="Why choose us">
Some Content
</div>
<div class="js-screen" data-title="Design">
Some Content
</div>
<div class="js-screen" data-title="Development">
Some Content
</div>
<div class="js-screen" data-title="Digital Marketing">
Some Content
</div>
<div class="js-screen" data-title="Integrated">
Some Content
</div>
<div class="js-screen" data-title="eCommerce">
Some Content
</div>
<div class="js-screen" data-title="Niche">
Some Content
</div>
<div class="js-screen" data-title="Additional">
Some Content
</div>
<div class="js-screen" data-title="Who We Are">
Some Content
</div>
</div>

Plugin có nhiều cài đặt. Dưới đây là những điều quan trọng nhất:

  1. neo - ID chỉ định URL cho các phần của trang web (dựa trên mảng) và cho phép người dùng truy cập nhanh vào các phần này

  2. menu - ID menu được sử dụng để chỉ định URL cho phần này hoặc phần kia của trang web

  3. thanh cuộn - nếu bạn chuyển giá trị TRUE cho cài đặt này, một thanh cuộn dọc sẽ được hiển thị

  4. scrollOverflow - được sử dụng để hiển thị thanh cuộn trong một phần nhất định nếu nội dung không phù hợp với lề

  5. điều hướng - nếu bạn chuyển giá trị TRUE cho cài đặt này, một thanh điều hướng sẽ được hiển thị, từng phần

  6. navigationTooltips - một loạt các bình luận bật lên; cho mỗi phần của thanh điều hướng

  7. slide Slide - nếu bạn chuyển giá trị TRUE cho cài đặt này, phần của thanh trượt sẽ hiển thị thanh điều hướng thanh trượt

  8. navigationPocation - một vị trí cho phép điều hướng giữa các phần khác nhau (giá trị được hỗ trợ: trái và phải)

  9. slidesNavPocation - một vị trí cho phép điều hướng giữa các thanh trượt khác nhau (giá trị được hỗ trợ: dưới cùng và trên cùng)

  10. loopTop - nếu bạn chuyển giá trị TRUE cho cài đặt này, bạn sẽ liên tục điều hướng giữa các phần khác nhau. Nếu bạn bắt đầu cuộn từ thanh trượt đầu tiên lên trên, nó sẽ di chuyển đến thanh trượt cuối cùng.

  11. loopBottom - nó thực hiện tương tự như trước đó (chỉ có nó di chuyển xuống dưới)

  12. loopHTHER - Giống như loopTop và loopBottom, nhưng hoạt động cho thanh trượt.

Suy nghĩ cuối cùng

Trong bài viết này, tôi giải thích cách bạn có thể sử dụng các công cụ và công cụ đơn giản nhất như truy vấn phương tiện CSS và plugin fullPage.js để tạo một trang web duy nhất trông độc đáo và hoạt động trơn tru. Tất nhiên, bạn có thể sử dụng các phương pháp khác để giải quyết vấn đề đó là tốt.

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào về bài viết, vui lòng để lại ý kiến ​​của bạn trong phần bên dưới, hoặc viết trực tiếp đến  Clever-Solution.com .

Hữu ích 10 Chia sẻ Viết bình luận 0
Đã xem 9458