Giao Diện Nâng Cao

Trong phần này bạn sẽ học cách sử dụng một số Themes nâng cao để làm cho website của mình đẹp hơn

Hoàn thành phần 3, bạn có thể thiết kế một website doanh nghiệp đẹp như mơ mà các dịch vụ thiết kế web thường báo giá từ 5-10 triệu!

Bài 1 – Theme Responsive – 1

CÀI ĐẶT THEME RESPONSIVE

Trong bài học này bạn sẽ

• Cài đặt theme Responsive

BÀI HỌC

Như bài học trước đã nói, WordPress có sẵn hàng nghìn theme cho bạn lựa chọn

• Có những theme “bình dân” miễn phí
• Có những theme trả phí rất đẹp
• Nhưng nếu may mắn, bạn có thể tim được những theme vừa rẻ lại vừa đẹp

Thông thường những theme này đòi hỏi bạn phải có một số tùy chỉnh để sử dụng được. Nó sẽ phức tạp hơn các theme “bình dân” mà chúng ta sử dụng ở phần trước.

Sẽ rất thuận lợi cho bạn nếu bạn biết tiếng anh để đọc hướng dẫn sử dụng các theme loại này.

Nếu bạn không biết tiếng anh cũng không sao, tôi sẽ hướng dẫn bạn sử dụng 2 theme cực đẹp trong phần 3 này.

Theme Responsive là một trong những theme như vậy!

BÀI TẬP

Cài đặt theme Responsive

1. Vào Dashboard -> Appearance -> Themes
2. Click “Install Themes”
3. Click “Feature” hoặc search với từ khóa “Responsive”
4. Tìm theme có tên là “Responsive” và click “Install Now”
5. Chờ theme được cài xong, click “Activate”
6. Xem giao diện mới website của bạn.

VIDEO HƯỚNG DẪN

Bài 2 – Theme Responsive – 2

TÙY CHỈNH THEME RESPONSIVE

Trong bài học trước bạn đã

• Cài đặt theme Responsive

Trong bài học này bạn sẽ

• Đổi logo website
• Đổi tiêu đề và lời chào website
• Đổi hình ảnh ở trang chủ
• Đổi nội dung widget ở cuối trang

BÀI HỌC

Không có bài học, thư giãn chút 

BÀI TẬP

Đổi logo website

1. Vào Dashbloard -> Appearance -> Themes -> Themes Options
2. Click “Logo Upload”
3. Click Need to replace or emove logo? “Click here”
4. Click “Remove Header Image”
5. Xem lại website của bạn. Logo mặc định đã biến mất! Thay vào đó là tên website của bạn

Đổi tiêu đề và lời chào website

1. Vào Dashbloard -> Appearance -> Themes -> Themes Options
2. Click “Home Page”
3. Điền “Headline”: Lời chào của bạn
4. Điền “Sub Headline”: Lời chào phụ (Slogan)
5. Điền “Content Area”: Lời giới thiệu ngắn gọn
6. Điền “Call to Action URL”: Link đến trang giới thiệu (Page)
7. Điền “Call to Action Text”: Gõ “Xem thêm”
8. Click “Save Options”
9. Xem lại website của bạn

Đổi hình ảnh ở trang chủ

1. Download một ảnh nhỏ từ Google
2. Upload ảnh này lên Uphinh.vn
3. Lấy code chèn ảnh của ảnh này
4. Vào Dashbloard -> Appearance -> Themes -> Themes Options
5. Vào “Home Page”
6. Dán code chèn ảnh vào ô “Feature Content”
7. Click “Save Options”
8. Xem lại website của bạn

Đổi nội dung các widget ở cuối trang

1. Vào Dashboard -> Appearance -> Widgets
2. Kéo thả widget “Text” lần lượt vào các ô “Home Widget 1″, ”Home Widget 2″ và ”Home Widget 3″
3. Điền tiêu đề và nội dung cho các widget này
4. Xem lại website của bạn

VIDEO HƯỚNG DẪN

ĐỔI LOGO WEBSITE

Bài 3 – Theme Responsive – 3

THEME RESPONSIVE – 3

Trong bài học trước bạn đã:

• Đổ mồ hôi hột vì phải làm quá nhiều thứ 

Trong bài học này bạn sẽ:

• Đơn giản là tùy chỉnh lại menu và cột bên phải của website cho đẹp

BÀI HỌC

BÀI TẬP

Tùy chỉnh menu

1. Vào Dashboard -> Appearance -> Menus
2. Tạo và chỉnh menu  (Bạn có thể bỏ qua bước này nếu đã có menu rồi)
3. Ở phần “Themes Support Layout”, chọn “Menu” ở ô “Top Menu” và “Header Menu”
4. Click Save

Tùy chỉnh cột bên phải

1. Vào Dashboard -> Appearance -> Widgets
2. Kéo thả các widget vào ô “Main Sidebar”
3. Đổi tiêu đề các widget sang tiếng Việt, click “Save”
4. Xem lại website của bạn

WOW!

Website của bạn đã đẹp và chuyên nghiệp hơn hẳn so với phần trước!

Bạn có thể gửi sản phẩm của mình giới thiệu với bạn bè đươc rồi

Nếu có ai hỏi giá thiết kế là bao nhiêu. Bạn có thể trả lời là 5 triệu, biết đâu lại có người đặt hàng thuê bạn thiết kế web thì sao? 

VIDEO HƯỚNG DẪN

Bài 4 – Theme Boldy – 1

CÀI ĐẶT THEME BOLDY

Trong 3 bài trước bạn đã

• Cài đặt và tùy chỉnh theme Responsive

Trong bài học này bạn sẽ

• Cài đặt theme Boldy

BÀI HỌC

Ngoài các theme có sẵn trong mục Themes của WordPress, bạn còn có thể tìm thấy rất nhiều theme WordPress khác trên internet bằng cách search Google với từ khóa: theme wordpress, theme wordpress free, theme wordpress miễn phí…

Theme Boldy là một theme miễn phí được cung cấp bởi website Site5.com

Sau khi học xong khóa học này, bạn có thể thử download và sử dụng nhiều theme cực đẹp khác từ Site5.com

Bạn cũng có thể download rất nhiều theme đẹp miễn phí khác tại Artisteer

BÀI TẬP

1. Click vào đây để download Themes Boldy
2. Vào Dashboard -> Appearance -> Themes
3. Click “Install Themes”
4. Click “Upload”
5. Upload theme vừa tải về và cài đặt
6. Click “Activate” để kích hoạt theme Boldy

VIDEO HƯỚNG DẪN

Bài 5 – Theme Boldy – 2

THEME BOLDY
CẬP NHẬT LOGO

Trong bài học trước bạn đã

• Cài đặt theme Boldy

Trong bài học này bạn sẽ

• Cập nhật logo cho website của bạn

BÀI HỌC

• Làm sao để website của bạn “trông có vẻ” đẹp?

• Website của bạn phải có nhiều hình ảnh
• Hình ảnh của website của bạn phải có chất lượng cao

Nhiều website thiết kế đẹp nhưng hình ảnh xấu -> Website xấu

Nhiều website thiết kế bình thường nhưng có nhiều ảnh đẹp -> Website đẹp

Hình ảnh là yếu tố hàng đầu để có website đẹp. Đừng tiếc tiền thuê thợ chụp ảnh chụp vài tấm thật đẹp cho website của bạn.

BÀI TẬP

Download hình ảnh cho website

1. Click vào đây để download hình ảnh cho website
2. Giải nén thư mục vừa download vào thư mục “Học Thiết Kế Website” của bạn

Upload logo lên web

1. Vào Dashboard
2. Vào “Media” -> “Add New”
3. Upload hình ảnh logo của bạn
4. Lấy link logo của bạn

Cập nhật logo cho website

1. Vào “Boldy Options”
2. Dán link logo vào ô “Change Logo”
3. Chọn Blog Category là “Tin Tức”
4. Click “Save Change”

VIDEO HƯỚNG DẪN

Bài 6 – Theme Boldy – 3

CẬP NHẬT SOCIAL LINKS

Trong bài học trước bạn đã

• Cập nhật logo cho website của bạn

Trong bài học này bạn sẽ

• Cập nhật link đến Facebook, Twitter, Google+… từ website của bạn

BÀI HỌC

“Social Link” là gì?

Social Link là link đến các mạng xã hội như Facebook, Twiter, v.v…

Nếu bạn không hiểu những khái niệm này hoặc không có tài khoản ở các mạng xã hội thì bạn có thể bỏ qua bài học này và đọc bài kế tiếp.

BÀI TẬP

Cập nhật các “Social Link” trên website của bạn

1. Vào Dashboard -> Boldy Options
2. Kéo xuống phần “Social Links”
3. Gõ username Twitter của bạn
4. Gõ link Facebook của bạn
5. Gõ link LinkedIn của bạn
6. Click “Save Changes”
7. Xem lại website

VIDEO HƯỚNG DẪN

Bài 7 – Theme Boldy – 4

THEME BOLDY

CẬP NHẬT SLIDE HÌNH ẢNH

Trong bài học trước bạn đã

• Cập nhật Social Links cho website

Trong bài học này bạn sẽ

• Cập nhật hình ảnh cho slide ở trang chủ

BÀI HỌC

Theme Boldy hỗ trợ chức năng tạo Slide hình ảnh đẹp mắt.

Để tạo slide này, bạn phải tạo một trang (Page) và chèn hình ảnh vào đó. Bạn chèn bao nhiêu hình vào thì có bấy nhiêu hình trong slide ở trang chủ.

Sau khi tạo trang, bạn phải khai báo nó ở mục “Boldy Option”

BÀI TẬP

Tạo Page chứa hình ảnh

1. Vào Dashboard -> Page -> Add New
2. Tạo trang mới có tên là “Slide hình ảnh”
3. Chèn các hình bạn đã download ở bài tập trước vào
4. Click “Publish”

Thiết lập Slide hình ảnh cho website

1. Vào Dashboard -> Boldy Options
2. Kéo xuống phần “Home Page Settings”
3. Ở phần “Homepage Slider Images Page”, chọn “Slide hình ảnh”
4. Kéo xuống, click “Save Change”
5. Xem lại website của bạn

VIDEO HƯỚNG DẪN

SỬA LỖI HÌNH SLIDE BỊ NHỎ

Bài 8 – Theme Boldy – 5

THEME BOLDY

THÊM CÁC BÀI VIẾT NHỎ

Trong bài học trước bạn đã

• Tạo Slide hình ảnh cho website

Trong bài học này bạn sẽ

• Tạo các bài giới thiệu ngắn bên dưới slide hình ảnh

BÀI HỌC

Hãy xem lại website demo hoàn chỉnh: http://supermarketer.vn/demowebsite/

Bạn có thấy 3 bài giới thiệu ngắn “xinh đẹp” bên dưới slide hình ảnh? 

Trong bài hôm nay chúng ta sẽ tạo 3 bài viết đó bằng cách tạo 3 Page, sau đó thiết lập nó trong “Boldy Options”

BÀI TẬP

Tạo 3 Page giới thiệu ngắn

1. Vào Dashboard -> Pages -> Add New
2. Đặt tiêu đề là “Nhân Sự”
3. Chèn hình nhỏ đầu tiên vào (Hình bạn đã download)
4. Điền thông tin giới thiệu ngắn vào bên dưới hình ảnh
5. Click “Publish”
6. Làm tương tự cho trang “Quy Trình” và “Đối Tác”

Thiết lập bài giới thiệu cho trang chủ

1. Vào Dashboard -> Boldy Options
2. Kéo xuống mục “HomePage Settings”
3. Ở phần “Home Box1 Page”, chọn “Nhân Sự”
4. Ở phần “Home Box2 Page”, chọn “Quy Trình”
5. Ở phần “Home Box3 Page”, chọn “Đối Tác”
6. Click “Save Changes”
7. Xem lại website của bạn

VIDEO HƯỚNG DẪN

Bài 9 – Theme Boldy – 6

THEME BOLDY

THÔNG ĐIỆP BÁN HÀNG

Trong bài học trước bạn đã

• Tạo bài giới thiệu nhỏ cho trang chủ

Trong bài học này bạn sẽ

• Tạo ô “Thông điệp bán hàng”

BÀI HỌC

Xem lại trang demo hoàn chỉnh: http://noithat.net23.net/

Bên dưới slide hình ảnh có thông điệp bán hàng. Trong bài này chúng ta sẽ tạo thông điệp bán hàng đó.

BÀI TẬP

Tạo thông điệp bán hàng

1. Vào Dashboard -> Boldy Options
2. Kéo xuống phần “Homepage Settings”
3. Điền thông điệp bán hàng của bạn vào ô “Blur text”
4. Ở ô “Request Quote Page”, chọn trang “Liên hệ”
5. Click “Save Changes”
6. Xem lại website

VIDEO HƯỚNG DẪN

Bài 10 – Theme Boldy – 7

THEME BOLDY

TẠO MENU CHO WEBSITE

Trong bài học trước bạn đã

• Thêm Social Links cho website

Trong bài học này bạn sẽ

• Tạo Menu cho website

BÀI HỌC

Trong bài này bạn sẽ tạo menu cho Themes của mình. Bạn đã thực hiện việc này rồi đúng không?

BÀI TẬP

Tạo menu cho website

1. Vào Dashboard -> Appearance -> Menus
2. Tạo các mục menu, lưu lại (Bạn có thể bỏ qua bước này nếu đã tạo menu)
3. Ở phần “Theme Location”, chon “Menu” ở ô “Main Menu”
4. Click “Save”

VIDEO HƯỚNG DẪN

Bài 11 – Theme Boldy – 8

THEME BOLDY

TRANG TRÍ FOOTER

Trong bài học trước bạn đã

• Tạo Menu cho website

Trong bài học này bạn sẽ

• Trang trí Footer cho website

BÀI HỌC

Footer là gì?

Footer là phần dưới cùng của website của bạn. Thông thường nơi này sẽ trình bày thông tin liên hệ, bản quyền, các menu phụ v.v…

Trong bài học này bạn sẽ tiến hành trang trí footer bằng các Widget

BÀI TẬP

Trang trí footer

1. Vào Dashboard -> Appearance -> Widget
2. Kéo thả các widget sau vào ô Footer: Categories, Custom Menu, Recent Posts, Text
3. Đổi tiêu đề các Widget sang tiếng Việt
4. Click “Save”
5. Xem lại website của bạn

VIDEO HƯỚNG DẪN

Bài 12 – Tổng Kết Phần 3

TỔNG KẾT PHẦN 3

XIN CHÚC MỪNG!

(Lại chúc mừng? ^^)

Không chúc mừng sao được khi bạn đã làm được một website hết sức chuyên nghiệp!

Hãy một lần nữa nhìn lại thành quả mà bạn đã thực hiện!

Và đây là bài tập đặc biệt dành cho bạn ngày hôm nay:

Hãy gửi link website của bạn cho một công ty thiết kế web và yêu cầu họ báo giá. 

Bạn chắc chắn sẽ ngạc nhiên khi biết được bạn đã làm được một website với mức giá như vậy.

Biết đâu, sau ngày hôm nay chúng ta lại có thêm một tay cung cấp dịch vụ thiết kế web nghiệp dư?

Bài học thiết kế web cơ bản đến đây là kết thúc.

HẸN GẶP LẠI!