Cài Đặt Web Giống AZLifeMastery Như Thế Nào? Cần Thêm Công Cụ Gì?

Xin chào các bạn AZLifeMastery bạn đang đọc chính là được làm từ giao diện Generatepress, đây là giao diện Thiết Tiến cực kỳ ưa thích sau khi đã trải qua vô số các giao diện khác trên nền tảng làm website WordPress.

Xét về độ chuẩn seo cũng như tốc độ tải trang thì giao diện này đang đứng ở top những giao diện trên thế giới về dung lượng nhỏ cũng như tốc độ tải trang web.

Và như vậy khi bạn dùng giao diện này bạn đã có lợi ích rất lớn về tối ưu công cụ tìm kiếm Google, hay nói cách khác bạn đang có lợi thế để có thể đưa trang web của mình lên top trang 1 Google tìm kiếm.

Để làm một trang web tối ưu được công cụ tìm kiếm google và thân thiện với người dùng thì giao diện trang web làm một trong những vấn đề không thể thiếu và có thể nói khá quan trọng, một trong những yếu tố lớn.

Cài Đặt Web Giống AZLifeMastery Như Thế Nào? Cần Thêm Công Cụ Gì?
Cài Đặt Web Giống AZLifeMastery Như Thế Nào? Cần Thêm Công Cụ Gì?

Chính vì vậy trong bài viết này mình xin phép chia sẻ cách sử dụng cũng như cài đặt giao diện Này để bạn có thể thêm những giao diện để lựa chọn cho mình!

Để cài đặt web giống như AZLifeMastery: Bạn cần thêm 2 plugin trả phí này

Giao Diện GeneratePress:

Đầu tiên chúng ta cần tìm hiểu cách cài giao diện web.

Kể từ khi ra mắt giữa năm 2014 đến nay Giao Diện GeneratePress đã có gần 2 triệu lượt download, và đánh giá 5/5 sao trên WordPress.ORG.

Giao Diện GeneratePress
Giao Diện GeneratePress

Ưu điểm của Giao Diện GeneratePress là gì:

GeneratePress là theme WordPress rất nhẹ và được thiết kế tập trung vào tốc độ và tính dễ sử dụng. Hiệu suất rất quan trọng, đó là lý do tại sao bản cài đặt GeneratePress ít hơn 15kb (file nén gzip).

GeneratePress tận dụng tối đa trình sửa block (Gutenberg), cho phép bạn kiểm soát nhiều khi viết nội dung. Theme hoàn toàn tương thích với các page builder, bao gồm Beaver Builder và Elementor.

Nhờ tập trung theo chuẩn code của WordPress, theme tương thích tốt với các plugin có code sạch, bao gồm WooCommerce.

GeneratePress có responsive, sử dụng chuẩn HTML/CSS và đã được dịch ra hơn 25 ngôn ngữ bởi cộng đồng người dùng. Theme có nhiều tính năng nổi bật như tương thích microdata, 9 wdiget, 5 menu, 5 layout sidebar, menu thả xuống (bấm hoặc di chuột) và màu menu mặc định.

  • Cực nhẹ và load nhanh: chỉ 912 kb
  • Code chuẩn SEO (Schema markup standard)
  • Tương thích hầu hết các Page Builder: là một trong số ít theme mà mọi Page Builder đều khuyên dùng.
  • Khả năng tùy biến cao – Hỗ trợ Live Customizer drag & drop.
  • Hỗ trợ Hooks và Filters tuyệt vời để bạn tùy biến – mở rộng tính năng
  • Support tuyệt vời: bạn có thể đăng ký thành viên miễn phí trên forum và hỏi bất cứ điều gì, các members có kinh nghiệm và chính tác giả sẽ support 24/24!

So với cái tên nổi tiếng Genesis Framework thì GeneratePress khá tương đồng về thiết kế và tính năng, nhưng lại dễ dùng hơn rất nhiều, support và tài liệu hướng dẫn cũng thân thiện với tất cả người dùng free và premium.

GP premium

Bộ Premium Addons của GeneratePress còn mang đến những tính năng cực mạnh mà có lẽ đàn anh StudioPress (Genesis) sẽ không có gì để làm đối trọng trong tương lai gần!

Mình mua bản quyền và dùng giao diện này từ 2018:

mua bản quyền

 Mua GP Từ Nhà Sản Xuất

hoặc

 Mua GP Dùng Chung Giá 1/10

Cách Sử Dụng Giao Diện GeneratePress

Trong bài viết này, sẽ hướng dẫn cơ bản về việc sử dụng theme GeneratePress và bộ Premium Addons.

Với các thành viên của GB, trong thời gian tới các bạn sẽ có một hướng dẫn Case Study chi tiết A-Z trên trang thành viên Club!

Cài đặt và sử dụng Giao Diện GeneratePress

Như hầu hết các Theme Free khác, bạn có thể download trực tiếp GeneratePress trên WordPress.ORG, hoặc Install và Update tự động từ WP Repository.

Vào mục Themes -> Add new, gõ GeneratePress để cài đặt và kích hoạt:

Cài đặt và sử dụng Giao Diện GeneratePress

Sau khi kích hoạt, bạn nên vào mục Appearance -> GeneratePress để xem qua:

Ở đây giới thiệu các Modules của GeneratePress Premium, bạn sẽ cần cài đặt plugins GP Premium để có các addons này. Theme GeneratePress miễn phí chỉ hỗ trợ tùy biến trên Customizer.

Modules của GeneratePress Premium

Tùy chỉnh GeneratePress qua Customize

Bạn mở Customize lên (Appearance -> Customize)

Giao diện Customize bao gồm nhiều mục tương tự đa số các themes khác. Chúng ta sẽ khảo sát qua các mục tùy chỉnh đặc trưng của GeneratePress:

Tùy chỉnh GeneratePress qua Customize

Trước hết, lướt qua 6 tùy biến thường thấy ở mỗi theme:

  1. Site Identity: thay đổi Site Title, Tagline, cho phép hiển thị hoặc không. Mục này cũng hỗ trợ thay đổi logo cho và site icon (Favicon).
  2. Color: chọn màu sắc cho text, background và link (default – hover – visited).
  3. Typograhy: chọn fonts – font size & style. Hỗ trợ hầu hết Google Fonts phổ biến.
  4. Menus: cài đặt Menu, GeneratePress hỗ trợ một Menu location là Primary menu.
  5. Homepage Settings: chọn trang làm trang chủ và trang blog. Cái này bạn có thể chọn trong Dashboard Settings -> Readings.
  6. Advanced CSS: thêm code CSS nếu bạn muốn tùy biến thiết kế.

6 Options trên không có gì đặc biệt so với các theme free khác nếu bạn chỉ dùng bản Free của GeneratePress. Chúng ta còn có 3 Options giúp GeneratePress ghi điểm:

GeneratePress Widgets: Các phần bên lề trang web

GP hỗ trợ 5 khu vực dành cho Widgets:

GeneratePress Widgets: Các phần bên lề trang web

Đây là khu vực nằm trên Primary Menu (bên phải Logo) – thích hợp để chúng ta đặt các Icon link đến các tài khoản mạng xã hội, hay nút Call to Action:

Header

Khu vực này cũng tương tự các theme khác:

Footer Widget 1,2,3…

Nhưng, chúng ta có thể chọn hiển thị hoặc không (0 widgets), cũng như chọn số cột hiển thị ngay trong phần soạn thảo của Page. Mặc định sẽ là 3 cột (3 widgets):

Mặc định sẽ là 3 cột (3 widgets)

Là khu vực ngay phía dưới Footer Widgets (dưới phần màu đen), bạn có thể viết lưu ý như mình:

Thanh dưới chân trang web

Top bar: Thanh trên menu web:

Khu vực trên cùng của Header, rất hợp để đặt một Menu phụ (top menu) hoặc thanh thông báo (khuyến mãi chẳng hạn):

General: tổng quát

Phần này chỉ có 2 tùy chọn đơn giản giúp tăng tốc độ load trang. GeneratePress có tích hợp toàn bộ thư viện FontAwesome để dùng các icons. Ở đây cho phép bạn chỉ load những icon fonts có dùng trên site thay vì load toàn bộ thư viện FontAwesome.

Tùy chọn còn lại là cache dynamic CSS trên trình duyệt để người dùng load site nhanh hơn từ lần thứ 2.

tổng quát

Bản Premium còn có tùy chọn cho phép bạn nén CSS và JS trong phần này.

Layout: bố cục chia cột trang web

Mục này cho phép người dùng tùy chỉnh lại độ rộng của Site Container bằng cách kéo thả, cũng như chia size layout thành 2 cột riêng biệt (Content và Sidebar) hay dạng full.

Ngoài ra ở mỗi phần đều có tùy chỉnh để bố cục lại. Đây là mục bạn phải làm việc khá nhiều để lựa chọn bố cục ưng ý nhất!

Mục Footer cũng có tùy chọn số Widgets hiển thị trong khu vục Footer Widgets đã giới thiệu ở trên. Tùy chọn này áp dụng lên toàn bộ các Pages của Site, còn tùy chọn trong trang soạn thảo trang như nói ở phần trên, chỉ áp dụng cho trang đó.

Sử dụng GeneratePress Premium Addons Thế Nào?

Đây là phần chính của bài hướng dẫn. Với Premium Addons, Giao Diện GeneratePress sẽ như chiếc Ferrari được lắp thêm động cơ tên lửa!!!

GeneratePress Premium hiện có 15 addons cho phép chúng ta tùy biến đến tận răng:

Sử dụng GeneratePress Premium Addons Thế Nào

Chúng ta sẽ lướt qua từng Addons và sẽ hướng dẫn sử dụng những Addons mạnh nhất để xây dựng site phức tạp. Nhưng trước tiên cần cài đặt và kích hoạt chúng đã:

Cài đặt và kích hoạt GP Premium Addons

Như đã nói, GeneratePress Premium là bộ Addons để nâng cấp tính năng cho theme GeneratePress, vì vậy, chúng ta upload và cài đặt từ mục Plugins chứ không phải mục Themes

Sau khi vào Plugins -> Add New để upload, install và activate. Chúng ta lại vào tab cấu hình của GP (Appearance -> GeneratePress) để kích hoạt các addons và nhập key để auto update (bạn có thể không nhập key vẫn sử dụng full tính năng được):

kích hoạt GP Premium Addons

Lưu ý bạn có thể bỏ chọn những Addons mà mình không muốn dùng. Riêng Addons WooCommerce chỉ có thể kích hoạt sau khi bạn đã cài đặt và kích hoặt WooCommerce plugin.

Bên sidebar bên phải còn có khu vực Export, Import và Reset Settings cho các addons.

Chúng ta sẽ xem tính năng của các Addons này ở phần sau bài viết.

Trước hết hãy lướt qua mục Site Library để xem GeneratePress Premium đã tích hoạt sẵn cho chúng ta những demo nào:

Import Demo Templates cho GeneratePress

Hiện GeneratePress Premium tích hợp cho chúng ta hơn 20 Templates (vẫn còn tăng thêm mỗi tháng). Có 3 tùy chọn khi xây dựng Templates cho GeneratePress, là dùng Page Builder Elementor – Beaver Builder, hoặc dùng chính Page Builder của GeneratePress (cụ thể là Sections Addons).

Import Demo Templates cho GeneratePress

Tùy vào việc bạn thích dùng Page Builder nào, hãy chọn Import Templates mình muốn. Nếu bạn để ý, các Templates ứng với từng Page Builder khá giống nhau, cho thấy sức mạnh khá tương đồng của 3 cái trong việc xây dựng giao diện cơ bản.

Để import demo templates, chúng ta rà chuột lên demo tương ứng, chọn Details để hiển thị Popup Import:

Để import demo templates

Thông tin về Demo, các plugins tích hợp kèm theo và Page Builder được dùng hiển thị đầy đủ trong Popup này. Nhấn Get Started để bắt đầu, nút Backup Options sẽ hiện ra để bạn sao lưu và tải về (Save) các Options hiện có sẵn, bước này rất quan trọng vì nếu chúng ta không hài lòng với demo mới, có thể remove và Restore lại Theme Options lúc chưa Import demo

Sau khi Backup Options, chúng ta sẽ làm bước tiếp theo là Import Options của Demo cần Import:

Sau khi Backup Options,

Tiếp theo là tùy chọn Import demo contents, bao gồm Content, Widgets, Menus, Site Options và các plugins tích hợp trong bản demo. Nếu bạn thích site sạch để tự cài đặt thì nhấp Skip để bỏ qua bước này.

Nhưng thường chúng ta nên Import content để dễ dàng có sẵn các cấu trúc để bắt đầu viết nội dung, sau này xóa nội dung demo và chỉnh lại các Options cũng không khó khăn gì. Nhớ tick vào check-box ” I understand…” và nhấn nút Import Conent để tiến hành Import:

Import

Đợi một lúc, lưu ý quá trình này nhanh chậm phụ thuộc vào tốc độ tải của Hosting. Nói chung việc Import demo của GeneratePress, OceanWP hay Astra đều khá nhẹ nhàng nhanh chóng vì data rất nhẹ, không ì ạch như các themes ở ThemeForest (đặc biệt là The7 và BeTheme).

Khi hoàn tất, nhấn nút View site để trải nghiệm Demo

Công dụng các Addons của GP Premium

Chúng ta cần lưu ý là bộ Addons sẽ tích hợp tính năng vào Customize, nên khi cài đặt kích hoạt các Addons này, trong Customize sẽ thêm nhiều tùy chỉnh trong mỗi phần so với khi chỉ dùng Giao Diện GeneratePress free.

Ta sẽ xem qua từng Addons, rồi dùng một số Addons nổi bật nhất để tạo ra các trang ứng ý. Trước hết giới thiệu các Addons đơn giản trước:

Bản quyền ý

2 & 3 & 4- Color & Typography & Background: Màu – Chữ – Nền:

Các addons này cho phép bạn tùy chỉnh Color, Typography (Font chữ) và Background (màu & ảnh nền) của tất cả các khu vực và thành phần có trên layouts:

Màu - Chữ - Nền

Như đa số các themes hiện đại, GeneratePress tích hợp sẵn Google Fonts, nên chúng ta dễ dàng chọn Font Family cho từng thành phần ngay trong Customize.

5- Secondary Nav: Menu Phụ

Addons này cho phép chúng ta tạo và tùy chỉnh Menu thứ 2, thường nằm ở dưới Menu chính hoặc đặt ở Sidebar:

Menu Phụ

6- Menu Plus Addons: tùy chỉnh menu

Menu Plus cho phép chúng ta tạo Sticky Menu, thêm Logo trên Menu. Nó cũng hỗ trợ bạn tạo Menu SlideOut với đầy đủ các hiệu ứng chuyển động từ Main Menu. Bạn có thể chọn hiển thị trên Desktop, Mobile hoặc cả 2:

tùy chỉnh menu

7- Page Header: Tạo 1 trang trên đầu trên cả menu

Một Addons rất tuyệt để bạn tạo Page Header cho tất cả các trang hoặc một vài trang được chỉ định nào đó.

Bạn cũng có thể tạo Page Header riêng cho mỗi trang. Ngoài dạng Page Header ‘cổ điển’ thường gặp ở Genesis child-themes thì GeneratePress cho phép bạn tạo Page Header hiện đại kiểu Hero – Image/ Video Header:

Một điểm khác biệt của Page Header addons là bạn phải tạo nó trong Dashboard -> Giao Diện -> Elements. (các bản cũ sẽ khác còn đây là với phiên bẻn pro mới hiện nay 1.91).Chọn Add New để tạo ra một Page Header:

Tạo 1 trang trên đầu trên cả menu

 

Sau khi tạo và tùy chỉnh, Publish xong. Chúng ta sẽ vào mục Global Locations để chỉ định loại trang nào sẽ dùng Page Headers.

8- Blog Addons: Tùy chọn trang blog

Blog Addons cho phép chúng ta chọn layout hiển thị các bài viết dạng cột (magazine) hoặc dạng masonry nổi tiếng.

Tùy chọn trang blog

Nó còn cho phép tùy chỉnh featured image size và canh lề,…

9- Sections Addons: Các vùng chọn để viết bài

Đây chính là Addons giúp GeneratePress Premium được xem như một Page Builder, có thể tạo những giao diện tương tự như Beaver Builder và Elementor.

Để sử dụng Sections Addons, khi mở Page để Edit hoặc tạo mới, chúng ta phải chọn dùng Sections. Lưu ý, khi dùng addons cho trang nào, thì các Page Builder khác sẽ tự động mất hiệu lực, vì Sections Addons cũng như Page Builder, nó không thể dùng kèm một Page Builder khác trên cùng một trang.

Các vùng chọn để viết bài

GeneratePress gọi Sections Addons là “A very simple Page Buider” và khuyên bạn nếu đã dùng Elementor hay Beaver Builder (và các Page Builder nổi tiếng khác) thì không cần phải kích hoạt cái này.

Tất nhiên, nếu bạn muốn tạo các Templates cực nhẹ thì sao ta không tận dụng nó chứ!

10- Spacing Addons: Chỉnh độ rộng khoảng cách

Nếu chỉ thấy cái tên thì chúng ta sẽ dễ khinh thường Addons này. Nhưng nó là tính năng ‘chất’  mà các đối thủ Genesis, Astra, OceanWP không thể so được với GeneratePress.

Spacing Addons cho phép bạn chỉnh kích cỡ (độ rộng – khoảng cách, margin & padding) Layouts và tất cả các block trên đó một cách dễ dàng mà không sợ vỡ layout. Bạn có thể tùy chỉnh cả trên giao diện Desktop lẫn Mobile!

Nó nằm trên Customize -> Layout:

Chỉnh độ rộng khoảng cách

Chúng ta thường bất lực khi muốn thay đổi kích cỡ layout của theme vì mỗi theme được tác giả xây dựng trên một Grid chuẩn & cố định để đáp ứng tốt cho các thiết bị desktop và tablet, mobile. Nhưng GeneratePress cho phép chúng ta làm tùy biến rất linh hoạt.

11- WooCommerce Addons: Cho 1 site bán sản phẩm dịch vụ

Như cái tên, addons này cho phép chúng ta tùy chỉnh trang Sản phẩm (Product Page) và Single Product của WooCommerce. Nó hỗ trợ tùy chỉnh layout, typography, color…

Cho 1 site bán sản phẩm dịch vụ

12- Import & Export Addons: Xuất nhập các phần mở rộng

Addons này giúp người dùng nhập / xuất các Options của site, rất hữu dụng trong trường hợp bạn muốn Clone site sang hosting khác.

Xuất nhập các phần mở rộng

13 – Hooks Addons: Phần thêm code mở rộng chức năng giao diện

Dành cho người dùng có kinh nghiệm, muốn thêm nội dung vào các khu vực của theme (nơi có khai báo hook). Tính năng này khá giống Genesis Framework, nhưng dễ dùng hơn.

Phần thêm code mở rộng chức năng giao diện

Để dùng Hooks, bạn vào Appearance -> Elements – Chọn Hooks

14 – Disable Elements: Tắt bật thành phần nào đó mình muốn

Giúp người dùng tắt một số phần như Header, Content Title, Footer… trên một số trang tùy chọn. Tính năng này tích hợp cả trong trình soạn trang và Customize:

Tắt bật thành phần nào đó mình muốn

15- Site Templates: giao diện mẫu từ nhóm tác giả sẵn có

giao diện mẫu từ nhóm tác giả sẵn có

Chính là Addons giúp chúng ta Import Demo từ Server của tác giả!

Cài Website Giống Như AZLifeMastery bạn còn cần:

Một plugin Trả Phí có tên là Elementor!

Công cụ này có 1 bản free cho bạn những tính năng cơ bản nhưng còn thiếu nhiều để tùy chỉnh không giới hạn!

Tức là khi cài bạn cần 1 plugin miễn phí cài trước sau đó cài bản plugin trả phí, đây là giá tiền mua từ nhà sản xuất:

Elementor

Tức là hơn 1 triệu Việt Nam đồng cho một site cài đặt, họ sẽ gắn tên miền vào đó, nếu bạn có điều kiện đầu tư ngay nên mua 1 mình 1 key, tuy nhiên điều này không phải ai cũng có tiền ngay bỏ ra phải không nào!

Tuy nhiên có 1 cách dùng rẻ hơn nhiều là Mua Chung, mình đang dùng bản mua chung mà! Giá tiền bằng 1 phần 10 giá mua gốc. Nó sạch 100% từ nhà cung cấp, đầy đủ các chức năng chỉ khác, chỉ là bạn không có key và không tự update được, vài tháng khi nào tác giả update thì lại liên hệ mình, mình gửi bản up free vào mail bạn

Dùng Chung Plugin Trả Phí

Đó là 2 công cụ: Elementor Pro và GP Premium

Nếu mua trực tiếp từ nhà sản xuất bạn cần 100 USD, theo tỷ giá hiện nay tương ứng bạn tốn: 2,3 củ – 2,4 củ gì đó

Nhưng chỉ với con số đáng yêu dưới đây bạn hoàn toàn dùng đầy đủ tính năng. Bạn nào muốn dùng chung Elementor và GP Premium có thể liên hệ với mình qua mẫu dưới đây, mình sẽ phải hồi trong 48h, mình chia sẻ dùng chung bản hiện tại web này đang dùng:

 

Tải Miễn Phí Sách 100 Ý Tưởng Kinh Doanh Hay Nhất Mọi Thời Đại

Hãy điền tên và email của bạn và nhấn Tải Ngay

AZLifeMastery ghét spam và chắc chắn bạn cũng vậy.

Bạn vừa đăng ký thành công, vui lòng chờ ít phút và chek email của bạn. Cảm ơn!

Viết một bình luận

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.