Chuyên mục: Làm web với jweb

Tạo website cơ bản với Jweb: Landing page

Tạo website cơ bản với Jweb: Landing page

Chú ý: Để công việc được tiến hành nhanh, hãy làm theo đúng những gì tôi chỉ dẫn, bạn sẽ tự hiểu nó sau này, và có thể thay đổi tùy ý bất cứ lúc nào. Đây là các bước demo để bạn tạo ra một website chuẩn và đẹp. Vì thế, tại thời điểm này bạn chỉ việc làm theo, chưa cần phải hiểu.

* Bây giờ tạo website, Tạm thời bạn hãy sử dụng máy tính hoặc laptop để tạo website nhanh nhất và thuận tiện nhất.

Bước 1: Bấm đây để đăng ký một tài khoản jweb. Sau khi bấm vào bạn sẽ thấy giao diện như hình dưới. Bạn bấm vào “Tạo webite ngay bây giờ” để tiến hành tạo website.

Bấm vào "Tạo website ngay bây giờ" để đăng ký website
Bấm vào “Tạo website ngay bây giờ” để đăng ký website

Sau khi bấm vào nút tạo website, bạn sẽ chọn giao diện cho website của bạn, bạn có thể chọn giao diện bạn thích, nhưng để thuận tiện cho việc hỗ trợ, và phù hợp nhất với sản phẩm Monkey Junior, bạn hãy chọn giao diện giống như tôi (sau này bạn có thể đổi, nhưng bây giờ hãy làm y như tôi sẽ tốt hơn): Chọn tab Bất động sản, chọn mẫu giao diện Bất động sản 1

Chọn mẫu giao diện Bất động sản 1
Chọn mẫu giao diện Bất động sản 1

Chọn giao diện Bất động sản 1 và bấm nút Tạo ngay, hoàn thành thông tin để đăng ký website:

Hoàn thành thông tin để đăng ký website
Hoàn thành thông tin để đăng ký website

Chú thích trong hình trên:

(1) là điền địa chỉ website, hãy chọn địa chỉ website bạn mong muốn, nếu địa chỉ đó chưa có ai đăng ký thì bạn sẽ được đăng ký. Địa chỉ website của bạn sẽ có dạng: tenbandangky.jweb.vn. Sau này nếu có điều kiện, bạn có thể mua địa chỉ khác đẹp hơn và thay vào. (Ví dụ nếu tôi điền ở đây là daybehoc, thì website của tôi là: daybehoc.jweb.vn, sau bạn có thể thay đổi thành abc, xyz.com tùy ý, nhưng phải mua)

Tên miền (địa chỉ website) rất quan trọng, bạn hãy chọn tên miền ngắn nhất và ý nghĩa nhất có thể. Như tôi đã chọn daybehoc là khá hay, bạn có thể chọn behocchu, ungunghay, hocngoaingu, … có thể những tên miền đẹp đã bị người khác chọn nhưng hãy thử và cố gắng chọn tên miền ý nghĩa nhất. Mặc dù sau này bạn có thể đổi tên miền nhưng dù sao, đẹp ngay từ đầu cũng tốt.

(2) Chọn giao diện là Bất động sản 1.

(3) Điền tên bạn, (4) là số điện thoại của bạn, (5) là Email, và (6) là mật khẩu đăng nhập quản trị website.

Xong bấm nút “Tạo ngay cho tôi”

Vậy là xong, bạn sẽ có một website demo. Bây giờ chúng ta sẽ chỉnh sửa nó. Xong bước 1 tạo lập website.

Bước 2: Bạn truy cập taikhoan.jweb.vn, đăng nhập bằng email và mật khẩu bạn đã tạo lúc đăng ký website ở bước trên. Sau khi đăng nhập bạn sẽ thấy danh sách website mà bạn đã tạo với jweb. Bạn hãy chọn website cần chỉnh sửa và bấm vào nút “VÀO QUẢN TRỊ”.

Chọn website và bấm vào nút VÀO QUẢN TRỊ để chỉnh sửa website
Chọn website và bấm vào nút VÀO QUẢN TRỊ để chỉnh sửa website

Trang quản trị sẽ có giao diện như hình dưới đây, Việc đầu tiên là thay đổi giao diện website và loại bỏ những thành phần thừa của website demo. Bạn bấm vào mục Giao diện ở thanh menu bên trái, sẽ thấy như hình dưới.

Thay đổi, chỉnh sửa giao diện website
Thay đổi, chỉnh sửa giao diện website

Giới thiệu một chút, ở hình này, ở mục giao diện, tab bố cục chưc năng, dãy chức năng bên trái (màu xanh xanh lá cây đấy) là các block chức năng (tôi sẽ hướng dẫn cụ thể sau), còn bên phải nó là mô hình giao diện website (bạn hãy truy cập địa chỉ website bạn đã tạo để hình dung rõ hơn về mô hình bố cục này (nếu bạn chưa chỉnh sửa gì thì giao diện sẽ giống mẫu demo này – bấm xem). Bạn có thể kéo thả các block chức năng từ cột bên trái này qua mô hình giao diện để tạo chức năng đó co website. Hơi loằng ngoằng thôi cứ làm theo tôi sẽ rõ.

Website demo mặc định đã tạo sẵn một số bài viết và một số modul chức năng, nhưng bây giờ tôi sẽ thay đổi thiết kế để tạo thành một trang landing page, loại bỏ tất cả các yếu tố thừa làm giảm tỉ lệ chuyển đổi mua hàng. Bạn có thể xem thêm: Bấm xem – Landing page là gì

Tôi sẽ tập trung xây dựng nội dung cho trang chủ, vì thế mục quan trọng nhất là bảng “nội dung giữa” ở mô hình giao diện. Mặc định website demo đã tạo cho bạn 3 chức năng có sẵn ở đây đó là Banner chạy ngang (là cái ảnh to to trượt qua trượt lại trên đầu website đấy), Hộp bài viết 4 (là modul hiển thị những bài viết mới của website), Trình soạn thảo 1 (đây là một hộp văn bản mà bạn viết gì vào hộp này thì sẽ hiển thị ra như thế, ở trang chủ). Bây giờ tôi sẽ xóa model Hộp bài viết 4 ở trang chủ, vì nó không cần thiết. Bạn bấm chuột vào modul hộp bài viết 4, giữ chuột và rê sang cột chức năng bên trái để xóa modul này (xem hình)

Bấm giữ chuột và rê sang ô bên trái để xóa modul đó.
Bấm giữ chuột và rê sang ô bên trái để xóa modul đó.

Giờ còn lại 2 modul là Banner chạy ngang và Trình soạn thảo 1. Bây giờ bạn chỉnh sửa hình ảnh banner chạy ngang để phù hợp hơn với Monkey Junior.  Bạn bấm vào hình cái bút ở cạnh Banner chạy ngang để sửa modul này (sửa các modul khác cũng tương tự, bấm vào hình cái bút cạnh modul đó)

Bấm vào biểu tượng cái bút để chỉnh sửa modul bất kỳ
Bấm vào biểu tượng cái bút để chỉnh sửa modul bất kỳ
Bạn có thể thêm và xóa các hình ảnh banner
Bạn có thể thêm và xóa các hình ảnh banner

Bạn có thể thêm và xóa các hình ảnh banner, hãy xóa hết các ảnh mặc định và thay vào đó các ảnh mà bạn cảm thấy phù hợp hơn (ví dụ như Ảnh này – Bấm xem) Bạn chỉ cần tải 1 ảnh cho banner này (nếu tải nhiều ảnh thì banner sẽ trượt, còn chỉ tải 1 ảnh thì banner sẽ đứng yên – tốt hơn). Bạn có thể thêm mục tiêu đề và mô tả ảnh để nó hiển thị ra bên ngoài website (đè lên ảnh). Xong bấm Lưu lại, sau đó bấm Quay lại để chỉnh sửa các modul khác.

Tương tự, bạn bấm vào cái bút của modul Trình soạn thảo 1, và bắt đầu viết văn. Ở modul này có các công cụ soạn thảo văn bản tương tự như phần mềm word office thông thường, bạn có thể trình bày, chèn hình ảnh, video, trang trí… Hãy soạn một bài bán hàng thật hay ở đây để khách hàng đọc nhé. Bạn viết gì ở đây thì sẽ hiện thị ra trang chủ.

Soạn thảo văn bản tương tự như các phần mềm soạn thảo thông thường
Soạn thảo văn bản tương tự như các phần mềm soạn thảo thông thường

Thôi bạn cứ copy tạm đoạn này rồi làm các bước tiếp theo đã, xong rồi quay về chỉnh sửa theo ý thích nhé. Tôi cũng sẽ hướng dẫn trang trí bài viết này ở phần sau.

Bấm để copy tạm: Bài viết Demo

Bạn paste vào, sau đó bấm lưu, xong bấm quay lại.

Tiếp tục chỉnh sửa ở vị trí bên phải website. Mặc định có 3 modul là Modul thu thập Email, modul fanpage facebook, model Hộp bài viết 1. Bạn hãy xóa modul hộp bài viết 1 đi (rê sang bên phải, tương tự như lúc nãy), nếu bạn chưa có fanpage facebook, bạn cũng xóa luôn modul fanpage facebook (sau này có thì thêm sau). Chỉ còn lại model thu thập Email, bạn bấm vào cái bút của modul này để chỉnh sửa. Tạm thời bạn chỉnh sửa y xì hình bên dưới nhé.

Chỉnh sửa modul thu thập email

Modul này để làm gì? Chức năng của modul này là thu thập email khách hàng. Bạn đặt tiêu đề modul này là Đăng ký tư vấn (hoặc Đặt hàng nhanh gì đấy) ở đây sẽ có các ô nhập liệu là email khách hàng, tên, số điện thoại hoặc bất cứ nội dung gì bạn muốn thu thập (bấm vào “thêm ô nhập liệu mới” để thêm), Tick vào ô “bắt buộc nhập” nghĩa là khách hàng bắt buộc phải nhập thông tin đó mới gửi được yêu cầu. Khi khách hàng điền thông tin vò form thu thập dữ liệu này, toàn bộ thông tin khách hàng nhập vào sẽ được gửi về email của bạn, và trong bảng quản trị. Còn thông tin này bạn dùng để làm gì thì bạn biết rồi đấy: gọi điện cho khách hàng, gửi mail cho khách hàng… để tư vấn.

Một phần quan trọng nữa, đó là CSS. Giờ có nói CSS là gì thì bạn cũng không biết đâu, nếu lần đầu làm web. Vậy nên cứ làm theo hướng dẫn đã nhé.

Vẫn ở trang chỉnh sửa giao diện, bạn bấm vào tab Tùy chỉnh CSS.

Tùy chỉnh CSS để tinh chỉnh giao diện
Tùy chỉnh CSS để tinh chỉnh giao diện

Đừng thay đổi bất cứ cái gì ở đây. Bạn hãy kéo xuống dưới cùng, đặt chuột vào dòng dưới cùng của css, gõ enter để xuống dòng và dán đoạn code này vào: Bấm để xem và copy code (nhớ Ctrl+A để copy toàn bộ, không sót ký tự nào nhé).

Thêm mới css để tinh chỉnh giao diện
Thêm mới css để tinh chỉnh giao diện

Đoạn code css này sẽ giúp loại bỏ một số thành phần không cần thiết và giúp giao diện bạn đẹp hơn.