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.
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.
Ư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.
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:
hoặc
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:
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.
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:
Trước hết, lướt qua 6 tùy biến thường thấy ở mỗi theme:
- 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).
- Color: chọn màu sắc cho text, background và link (default – hover – visited).
- Typograhy: chọn fonts – font size & style. Hỗ trợ hầu hết Google Fonts phổ biến.
- Menus: cài đặt Menu, GeneratePress hỗ trợ một Menu location là Primary menu.
- 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.
- 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:
Right Sidebar: khu vực sidebar, như các theme khác
Header:
Đâ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:
Footer Widget 1,2,3…
Khu vực này cũng tương tự các theme khác:
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):
Footer bar: Thanh dưới chân trang web
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:
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.
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 đó.
Đâ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:
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 đã:
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):
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).
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:
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:
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:
Đợ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
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:
1- Copyright Addons: 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:
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:
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:
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:
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.
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.
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ú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…
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.
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.
Để 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:
15- Site Templates: 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ư DinhTienThietbạ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:
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.
Xem Thêm:
Hoặc bạn muốn nhanh hơn để bắt đầu xây hệ thống kinh doanh onlien của riêng mình có thể dùng dịch vụ cài wordpress trọn gói.
