Hướng dẫn cơ bản nhất để bạn có thể hiểu các thành phần, bố cục của website & thao tác tuận tiện nhất. Nội dung hướng dẫn do HaloViet cung cấp đến thành viên sử dụng gói dịch vụ Onlyhost

HƯỚNG DẪN CHỈNH SỬA WEBSITE

Thay đổi tên website, Slogan

Bước 1: Vào Cài đặt –> Tổng quan

Bước 2: Thay thế tên & Slogan mới

Thay đổi múi giờ, ngôn ngữ trang & đinh dạng ngày tháng

Bước 1: Vào Cài đặt –> Tổng quan

Bước 2: Chỉnh sửa các thông tin trong trang quản trị cho phù hợp. Có thể xem cấu hình mẫu trong hình

Bước 3: Bấm lưu thay đổi

Cài đặt cho phép / chặn google index website

Bước 1: Vào Cài Đặt –> Đọc

Bước 2: Tick chọn / bỏ chọn dòng “Ngăn chặn các công cụ tìm kiếm đánh chỉ mục website này”

Bước 3: Bấm Lưu thay đổi

Google index là việc các con bot của google tự động truy xuất vào website của bạn & thu thập thông tin đưa lên bộ máy tìm kiếm của google. Bạn chỉ nên cho phép google truy xuất khi website đã tối ưu về mặt nội dung, SEO để tránh google thu thập những thứ ko cần thiết & phải mất thời gian để bạn yêu cầu nó thu thập lại

Thay đổi số Hotline

Bước 1: Vào Cài đặt –> Easy Call Now

Bước 2: Thay đổi số điện thoại, màu sắc và bấm Lưu

Header quản lý các Logo , các thông tin đầu trang web: hotline, số điện thoại, email, giỏ hàng (nếu là trang thương mại điện tử) …

 

Thay đổi Logo, biểu tượng site (favicon)

Bước 1: Truy cập vào Theme Option -> Header -> Logo & Identify như hình dưới

Bước 2: Upload Logo mới lên thay thế Logo cũ

 

Bước 3: Cấu hình các thông tin về logo (nếu cần thiết thay đổi, khuyến khích không nên thay đổi nếu ko nắm rõ, nên sử dụng các kích thước tiêu chuẩn bên thiết kế web cung cấp)

Bước 4: Thay đổi logo favicon

Bước 5 (Quan trọng): Lưu lại @@

Thay đổi nội dung text header

 

Bước 1: Truy cập vào Theme Option -> Header -> Logo & Identify như hình dưới

Bước 2: Chọn vào biểu tượng bánh xe mục HTML 2 để chỉnh thông tin

 

Bước 3: Thay đổi thông tin HTML trong box hiện ra & lưu lại

Tips: Nếu sửa trực tiếp trên code bạn nên copy toàn bộ code & lưu lại phòng trường hợp bị lỗi sẽ có bản backup để copy – paste lại

Cách #: Copy toàn bộ code và sử dụng tính năng soạt thảo của trình duyệt soạn thảo bài viết thay vì sửa code. Xem hướng dẫn tại đây

Chỉnh sửa các thành phần của Footer

 

Chỉnh sửa các thành phần của Footer

Thông tin Copyright

Bước 1: Vào Theme Options –> Footer

Bước 2: Kéo xuống chọn mục có chứa thông tin copyright và chỉnh sửa

Bước 3: Lưu thông tin lại

Thông tin nội dung Footer

Bước 1: Vào Giao diện -> Chọn Widget

Bước 2: Chọn các thông tin cần thay đổi trong widget Footer 1: Fanpapge, thông tin địa chỉ, menu điều hướng

SLIDER

Thao tác với slider: thêm mới, xóa, chỉnh sửa, slider có thể thêm ở nhiều vị trí của website, xem thêm bài viết về UX Builder để hiểu rõ hơn.

Bước 1: Ngay tại trang có chưa Slider ngoài giao diện (không phải trong admin), chọn Sửa trang –> Edit with UX Builder

Bước 2: Chọn mục slider bên cột trái và thao tác với các slide trong đó: chỉnh sửa, thêm mới, xóa

Nếu muốn thêm 1 slide mới thì chọn mục Add to slide

 

Trong wordpress có 2 loại hình để bạn có thể viết bài là Page và Post. Trước tiên cần hiểu rõ từng loại để có thể sử dụng chúng tốt hơn.

Page thích hợp cho việc tạo các trang đơn,trang không chứa các tin tức bên trong nó, ví dụ như các trang: giới thiệu, liên hệ, chính sách, thanh toán, cộng tác viên…Các trang mà bạn để nó nằm độc lập không nằm chung trong 1 thư mục nào đó

Post thường nằm trong 1 chuyên mục cụ thể, ví dụ các tin tức được đăng tải hàng ngày, tin tức này nên là post và nó được nằm trong chuyên mục Tin 24H chẳng hạn. Page sẽ không có phân chuyên mục như Post


PAGE

Để quản lý Page bạn thao tác như hình: Thêm mới, sửa, xóa Page

Muốn chỉnh sửa, xóa, thêm mới các Page (Trang) có 2 cách:

Cách 1: thay đổi trong admin Trang –> Tất cả trang & thao tác

Cách 2: Bấm nút sửa Trang tại Page mà bạn cần sửa ngay ngoài website 

Việc soạn thảo 1 Page / Post sẽ có 2 công cụ hỗ trợ: trình soạn thảo chuẩn của WordPress hoặc Công cụ soạn thảo nhanh UX Builder giúp cho người không cần biết lập trình có thể sử dụng dễ dàng. Xem thêm bài viết UX Design

 

POST

Để quản lý Post hiệu quả, nên tạo các chuyên mục để lưu post trong đó trước

Bạn có thể thêm, xóa, tạo mới chuyên mục, chuyên mục có thể có chuyên mục con để phân loại. Nhờ vào cách phân loại chuyên mục bạn có thể hiện thị được các tin tức trong từng chuyên mục ngoài website hoặc đưa ra các menu để hiện thị

Thao tác với Post tương tự như thao tác với Page,  khác biệt chính ở chỗ Post bạn chọn Chuyên mục cho nó lúc lưu bài viết

Thao tác với bài viết: xem, xóa, sửa 

Post cũng có hỗ trợ công cụ UX Design để thuận tiện cho bạn trong quá trình thiết kế

UX BUILDER

Để thức hiện việc xây dựng một Trang ( Page )có nhiều thành phần và bố cục phức tạp một nhanh chóng mà không phải động vào code thì các Ux-Builder ra đời giúp quá trình xây dựng một cách nhanh chóng và dễ dàng cho người dùng, Trong Flatsome  cũng hỗ trợ một Ux-builder mạnh mẻ giúp người dùng nếu ko rành về code vẩn có thể kéo thả các thành phần mình muốn vào trong giao diện của mình và có rất nhiều tùy chỉ cho mỗi thành phần trong đó

  • Dàn trang, tạo bố cục trang đơn giản và nhanh chóng
  • Có sẵn thư viện các thành phần hình ảnh, video, các media…
  • Chỉnh sửa các thành phần nội dung trong website chỉ với thao tác KÉO – THẢ
  • Được tích hợp sẵn vào trong quản trị nội dung website

Được xây dựng từ công nghệ DRAP-DROP từ các kỹ sư thiết kế cấp cao trên thế giới nên các bạn có thể hoàn toàn yên tâm sử dụng các tiện ích của nó.

Các thành phần của Ux Builder trong flatsome

1. Các elements( thành phần bên trái )

Ở phần này flatsome đã xây dựng một bộ các thành phần ( element ) cấu trúc để giúp chúng ta hiển thị rất nhiều thứ ra giao diện người dùng một cách đơn giản là chọn add Elements  hoắc trong mỗi đối tượng chứa khác thì chúng ta cũng có add to-đối tượng chứa cha để tạo ra một thành phầm hiển thị ở phần nội dung ở giữa ( số 2 ).

Trong flatsome thì ux của nó được chia thành 3 khối chính : Sơ đồ trình bày – Nội dung – shop (cài đặt woocommence)

Sơ đố trình bày :

Tạo ra những layout (bố cục) khác nhau để chúng ta có thể hiển thị phần nội dung vào trong đấy. Với sự lồng gép các đối tượng chứa này với nhau chúng ta có thể tạo ra một bố cục web site với nhiều thành phần hiển thị dữ liệu ra một cách phong phú và tạo ra phong cách độc đáo cho trang của mình.

Các thành phần chứa này có thể chứa các đối tượng chứa khác và chứa phần nội dung ở  phần nội dụng và các thành phần trong Shop/

có một số thành phần chứa có giới hạn đối tượng có thể được cho vào trong đó ví như Slider chỉ chứa 3 thành phầ nội dung và 3 thành phần chứa khác. nếu bạn muốn thêm nội dung mà ko có trong danh sách thì đơn giản bạn thêm vào một đối tượng chứa khác trong danh sách như Row hoắc là section là được. Hoặc một thành phần nữa là Page header chỉ chứa nội dung tiêu đề trang, nhưng lại được gắn mặc định rồi, bạn chỉ cần tạo ra là nói sẽ tự động lấy nội dung của tiêu đề trang và hiển thị ra.

Ở trên đây mình đã tạo ra một bố cục (mình chỉ kéo các thành phần ra rồi nhé, chưa có tính thẩm mĩ 🙂 ) Bao tất cả là một section -> Row ( mắc định trong row sẽ chứa các column nữa) có 3 column > column 1 -> slider -> imager. Bên phải sẽ là phần hiển thị nôi dung ra, như ta thấy rằng kéo nhiều thành phần ra như vậy mà chỉ hiển thị có một bức hình thôi. Ở đây bởi vì các đối tượng còn lại chỉ là cái thùng rông thôi a, nếu muốn cái thùng đấy hiểu thị cái gì thì mình phải bỏ vào phần nuội dung tương ứng để được hiển thị ra nhé.

Nội dung:

Chứa các đối tượng hiển thị nội dung, ở trong này chúng ta có rất nhiều đối tượng hiện thị nội dung ra ngoài. Bạn có thể tự kéo xuống và xem qua danh chắc. Một đối tượng nội dung bạn có thể tạo ở phía ngoài không nằng trong bất cứ đối tượng chứa nào khác hoắc nằm trong đối tượng khác để có thể dễ quản lý cũng như có sơ đồ trình bài riêng. các đôi tượng này chỉ hiển thị nội dung tương ứng của chúng ra ngoài giao diện mà không thể chứa đối tượng khác.

Shop:

Như đã nói từ bài đầu tiên Giới thiệu về Flatsome thì nó là một theme bán bàng cực tốt. nên họ đã xấy dựng một bộ công cụ để hiển thị  liên quan tới  phần shop bán hàng.  giúp chúng ta tạo ra một trang bán hành nhanh chóng.

 

2.Content (Hiển thị nội dung )

Ở trong này chỉ là hiểu thị ra nội dụng bạn cài đặt bạn đã thểm vào thôi nhưng nó tương tác trực tiếp giúp chúng ta có thể thông qua nó để chỉnh sử trong các thành phần một cách nhanh chóng.

3. Cách hiển thị khi responsive (thanh bên phải)

Chúng ta có các tùy chọn chế độ xem khác nhau gồm có xem trên màn hình lớn như destop, laptop, mac-book, màn hình vừa như là tablet, ipad, màn hình nhỏ. các loại điện thoại. ở lưu ý rằng mỗi chế độ xem ở màn hình nhỏ hơn destop chúng ta có một số tùy chỉnh tiêng cho các thành phần hiển thị, bạn có thể thay đổi khác với cài đặt mặc định.

Chế độ trên màn hình lớn gồm 4 hình trên một row.

Tablet mình có thể tùy chỉnh 3 hình trên một hàng, bạn có thấy bên cột trái và phải có hiện lên Chấm xanh nhỏ không. Bình thương ( nghĩa là mặc đinh ) những chấm này là màu trắng dục chỉ khi bị thay đổi mới chuyển qua màu xanh thôi,  Ví dụ cái này là mặc định nha hiển thị ở chế độ này là 100%.

Hiển thị trên di động. Lưu ý nữa bạn chỉ có thể tùy chỉnh ở những thuộc tính có chấm tròn phía sau thôi nha nhưng thuộc tính không có thì bạn thay đổi nó sẽ được áp đụng cho tất cả các chế độ xem khác nhé. Bạn lưu lai và ra ngoài giao diện để xem nó hiển thị thế nào trên các thiết bị khác nha.

Một cái bất tiện của Ux-builder flatsome là nó không có chết độ view xem từ trong khung làm việc này, bạn phải ra ngoài, tìm tơi file bạn đang làm việc rồi chọn xem trang hoặc bài biết mới được.

Mình sẽ không đi giới thiệu từng thành phần trong UX-builder của flatsome mà mình sẽ xây dựng một ví dụ về trang chủ một trang tin giới thiệu về công ty mà một trang về bán hàng ở các bài sau nhé nhé.

MENU

Menu là công cụ giúp tạo ra các đường dẫn để điều hướng người dùng tới các vị trí mong muốn trên web, nôm nam menu giống như các shortcut ngoài desktop của bạn, để bạn có thể truy cập tới các vị trí nằm sâu trong ổ C:, D:..

Như vậy: có thể có rất nhiều thứ nằm trên web như page, post, danh mục, chuyên mục… nhưng không được đưa ra menu do chủ ý của người làm web. Bên cạnh đó menu có thể link tới ngoài website tới các website khác

Bản chất menu chỉ là shortcut kết nối tới 1 link mà bạn mong muốn

Để việc kết nối đó tiện lợi hơn trong menu hỗ trợ bạn tự dộng lấy danh sách page, chuyên mục, danh mục để bạn có thể add vào menu dễ dàng hơn

Một website có thể tạo vô số menu và để các menu ở vị trí nào là do bạn / người làm web quyết định

Ví dụ ở hình trên footer có chứa 1 menu: “HỖ TRỢ KHÁCH HÀNG”


Để thao tác với menu, trong admin bạn vào Giao diện –> Menu

Bước 1: Tạo hoặc chọn hoặc xóa các menu chính, đây là menu chính, còn các thành phần trong menu tạm gọi là các Item menu

Ví dụ ở đây mình chọn Main menu là menu chính của website để thao tác

Menu sẽ load các item ra ngoài cho bạn thấy, và bạn sẽ thấy được cột bên trái có các thành phần có sẵn để bạn có thể tiện thêm vào menu

Thao tác cơ bản: di chuyển vị trí các menu bạn nắm giữ chuột vào menu cần di chuyển, lôi tới vị trí mới, nếu lôi menu tụt vào 1 menu nào đó, menu đó sẽ tự động được hiểu là menu con của 1 menu trên nó

Hình dưới cho thấy “Giá bán lẻ” là menu con của “Nhà phân phối”

Ngoài trang web sẽ hiện thị

Để thêm các item vào menu bạn có thể chọn từ cột bên trái và bấm Add to Menu, sau đó kéo thả menu tới vị trí mong muốn

Để link tới 1 link bất kỳ & tạo 1 menu bất kỳ

Chọn mục Menu tự tạo, điền tên meun & đường dẫn cho menu đó

Để item trong menu, click vào mũi tên góc phải và chọn Xóa

Lưu menu khi đã thao tác xong

BACKUP WEB

Backup là tạo bản sao lưu website mỗi khi bạn có thay đổi lớn về nội dung, giao diện web, hoặc chỉ đơn giản là sao lưu lại phòng trường hợp sự cố xảy ra

Việc backup hoàn toàn không cần nhờ đến sự hỗ trợ của IT, việc phục hồi lại bản backup bạn có thể tự làm hoặc nhờ sự hỗ trợ của bên thiết kế web

Bước 1: Vào Duplicator -> Package

Bước 2: Chọn mục Create New

Bước 3: Next

Bước 4: Chọn Yes và bấm Build và chờ quá trình hệ thống build file backup cho bạn

Bước 5: Lưu file Installer và Archive về lưu vào 1 thư mục tránh nhầm lẫn các file giữa các lần backup

Bạn có thể tạo nhiều bản backup và quản lý chúng tại menu Duplicator –> Package

Tuy nhiên không nên để quá nhiều bản backup trên web sẽ làm nặng web, nên down các bản backup về máy hoặc up lên driver google để lưu trữ