Có phải bạn mới làm website WordPress và cần một hướng dẫn sử dụng Astra theme để bạn dễ dàng kiểm soát mọi thứ và có được giao diện đẹp mắt theo ý muốn.
Chắc chắn bài viết này sẽ dành cho bạn.
Hầu hết khi mới dùng WordPress, bạn sẽ được nhiều người (trong đó có mình) chia sẻ Astra là một theme WordPress đáng để sử dụng.
Đơn giản vì nó quá nổi tiếng bởi sự linh hoạt, tải trang nhanh, tích hợp rất tốt với các công cụ phát triển WordPress khác và đặc biệt là dễ dàng sử dụng.
Tuy nhiên mình hiểu rằng một người mới bước chân vào WordPress luôn có những giới hạn về kiến thức kỹ thuật. Để kiểm soát hết bạn cần mày mò một thời gian mới làm quen được.
Do đó, để giúp bạn rút ngắn thời gian học tập thì trong bài viết này mình sẽ hướng dẫn bạn sử dụng Astra theme free một cách hoàn chỉnh. Đây là kiến thức cơ bản cũng như nền tảng để bạn có thể điều khiển theme này một cách linh hoạt theo ý muốn.
Mình hứa dù không rành gì về kỹ thuật bạn hoàn toàn vẫn tự tạo ra các giao diện đẹp mắt nhờ Astra được.
Cần chuẩn bị gì để sử dụng Astra theme free?
Chắc có hơi dư thừa nhưng mình cũng nhắc sơ lại cho bạn nào chưa rõ.
Hầu hết những bạn khi sử dụng Astra theme đều có mục tiêu là làm Blog/website bằng với mục đích kiếm tiền Online hoặc kinh doanh Online. Do vậy, hãy đảm bảo bạn đã có 3 thứ sau:
- Có tên miền/hosting và kết nối chúng lại: Nếu bạn chưa biết thì bạn hãy bắt đầu tại đây.
- Cài đặt WordPress trên Hosting thành công để đảm bảo website của bạn luôn Online.
- Quản trị WordPress cơ bản: Biết truy cập giao diện quản trị, hiểu về theme, plugin.
Cơ bản thì người mới chỉ cần nhiêu đó là đủ để bạn không bị bỡ ngỡ.
Cài đặt Astra theme Free
Bạn nào xem hướng dẫn cài đặt theme WordPress của mình chắc không còn xa lạ gì với thao tác này nữa. Mình có nói đến rất nhiều cách khác nhau cho bạn chọn.
Nhắc lại cách cơ bản nhất.
Trên giao diện quản trị WordPress -> Themes -> Add New -> Gõ hoặc tìm “Astra”.
Nhấn Install và Active nó.
Cài đặt Starter Templates
Một trong những lý do chính khiến Astra trở nên dễ sử dụng cho người mới chính là Starter Templates.
Về cơ bản, bạn hiểu đơn giản đây là một plugin giúp bạn có một số mẫu dựng sẵn cho Astra theme. Nói cách khác thì người ta làm sẵn, bạn chỉ việc chọn và sử dụng mà không cần thiết kế từ đầu.
Ngay khi Active theme thì nó sẽ tự động gợi ý cho bạn.
Trong trường hợp không thấy thì Dashboard -> Astra -> Useful plugins -> Starter Templates.
Sau khi cài đặt và kích hoạt thì nó sẽ có một thông báo hỏi bạn sử dụng Page Builder nào cho Astra.
Page builder hiểu đơn giản là một công cụ cho phép bạn tạo các trang chỉ với thao tác kéo thả các phần tử hoặc lựa chọn các khối nội dung có sẵn.
Thông thường và phổ biến nhất bạn nên chọn Elementor.
Tiếp tục bạn sẽ thấy rất nhiều mẫu trang web được thiết kế sẵn, bạn có thể dùng các tùy chọn phân loại theo mục đích hoặc chủ đề.
Lưu ý rằng có những mẫu có nhãn “Premium” nghĩa là chỉ dành cho những ai dùng gói Essential Toolkit (một phiên bản trả phí với rất nhiều tính năng cao cấp khác).
Ví dụ mình chọn mẫu Creative Blog và nhấp vào nó.
Bây giờ bạn có thể xem trước giao diện cũng như tải lên logo cho website (không tải cũng được).
Nhấn Skip Continue.
Tiếp tục bạn có thể chọn bộ màu sắc hoặc font chữ, những thay đổi sẽ hiển thị ngay trên màn hình nên tha hồ thử.
Nhấn continue.
Bây giờ hãy cung cấp các thông tin như tên, Email, mục đích làm website.
Tại Advanced option thì bạn nên tick vào hết để có thể hình dung về cách nó hoạt đông và phục vụ tùy chỉnh ở bước sau. Nhưng sau này khi đã quen thì có thể bỏ tick ở một số chỗ để tránh phải xóa lại.
Nhấn Submit & Build My Website và chờ vài phút cho hệ thống tự làm việc.
Bạn sẽ nhận được một thông báo thế này nghĩa là thành công.
Nhấn View Your Website để xem kết quả.
Về cơ bản, bạn đã có một giao diện khá là đẹp như mẫu bạn chọn.
Tuy nhiên có những chỗ như ngôn ngữ, hình ảnh, nội dung thì cần phải tùy chỉnh lại. Với hầu hết các template nhập từ Astra theme thì bạn cần 2 bước tùy chỉnh.
Tùy chỉnh trong customize
Đây là khu vực cho phép bạn tùy biến theme Astra, nó liên quan đến các yếu tố tổng thể như header, kích thước chiều rộng, màu sắc, font chữ.
Để khởi động bạn hãy vào Themes -> Customize, hoặc trên giao diện người dùng nhấp vào customize ở thanh admin bar cũng được.
Bây giờ bạn sẽ thấy một khung tùy chỉnh và giao diện người dùng.
Hãy cùng mình làm quen với từng tùy chọn,
Global
Mục này liên quan đến các yếu tố toàn trang.
Typography: Tại đây cho phép bạn thay đổi các yếu tố liên quan đến font chữ, gồm tên font, kích thước, khoảng cách chữ cho các thành phần nội dung chính và các thẻ heading.
Color: Thay đổi màu sắc thương hiệu cho website, nó có một số bảng màu được các chuyên gia xây dựng sẵn, bạn chỉ việc áp dụng là mọi thứ tự thay đổi. Bên cạnh đó bạn cũng có thể thay đổi theo ý muốn của mình.
Container: Thay đổi khung bố cục của website.
Button: Phong cách các nút mặc định trên website, tại đây bạn có thể chọn mẫu, thiết lập màu sắc, kích thước, hiệu ứng rê chuột.
Scroll To Top, Accessibility, Block Editor, Misc: Những cái này không quan trọng nên tốt nhất cứ để mặc định.
Header
Mục này cho phép bạn tùy chỉnh các yếu tố của header (phần đầu trang), tại đây bạn có thể thiết kế nó bằng thao tác kéo thả các widget như primary menu (menu chính), Site title & logo (thêm tiêu đề website và logo), search (thanh tìm kiếm), button (nút kêu gọi hành động). Với mỗi widget này bạn có thể nhấp vào và tùy chỉnh.
Các vị trí kéo thả tương ứng với hiển thị trên giao diện hiển thị
Breadcrumb
Đây là mục cho phép bạn thêm cấu trúc phân cấp cho trang để khách hàng dễ dàng điều hướng, thông thường sẽ sử dụng trên các bài post. Ở đây tùy chỉnh khá đơn giản khi chỉ cần bật nó lên sau đó chọn thiết kế lại như chọn vị trí hiển thị, màu sắc chữ.
Blog
Cho phép bạn tùy chỉnh các yếu tố liên quan đến bài viết.
Blog / Archive
Tại đây bạn có thể tùy chỉnh hiển thị cho 2 loại trang là trang Blog (tổng hợp tất cả bài viết), Archive (tổng hợp tất cả bài viết được phân loại theo category, tag, author,…).
Bạn có thể tùy chỉnh bố cục như Container, bên cạnh đó có thêm Post structure nó cho phép bạn bật tắt ảnh Featured image (ảnh đặc trưng), Title & Blog meta (tiêu đề bài viết các meta như comment, author, category.
Single Post
Cũng tương tự như Blog / Archive, tuy nhiên nó chỉ khác ở chỗ là tùy chỉnh này chỉ dành riêng cho các bài viết .
Page
Cũng như Single Post nhưng chỉ dành riêng cho các trang, nó cũng ít tùy chọn hơn ngoài bố cục và tiêu đề.
Sidebar
Đây là khu vực cho phép bạn tùy chỉnh vị trí thanh bên với các widget hiển thị cũng như kích thước chiều rộng so với phần nội dung chính.
Footer Builder
Tương tự như Header nhưng khác ở chỗ dành cho phần cuối trang.
Site Identity: Cho phép bạn tải lên site icon (biểu tượng nhỏ trên tab trình duyệt).
Menu/widget: Cái này chắc mình không cần nói thêm vì WordPress cơ bản đã được chỉ rồi.
Homepage settings: Đưa một trang ra làm trang chủ
Additional CSS: Tùy chỉnh website bằng mã CSS.
Lưu ý: Sau mỗi thay đổi ưng ý bạn hãy nhấn vào nút Publish ở góc trên để lưu lại.
Phiên bản Astra free thì chỉ có bấy nhiêu thôi, tuy nhiên sau này khi có điều kiện dùng Astra Pro thì sẽ còn nhiều tùy chọn nhỏ khác trong các mục trên. Vì vậy mà bạn phải vọc mới hiểu được.
Tùy chỉnh bằng Page builder
Đây là phần khá thú vị.
Hầu hết các template đều đi kèm với một plugin trình tạo trang kéo thả giúp bạn có những trang đẹp mắt mà theme không thể làm được.
Do khi nhập mẫu demo nó tự cài cho bạn (như ở trên là mình chọn Elementor), giờ chỉ việc truy cập và chỉnh sửa lại.
Tại trang chủ hoặc một số trang đặc biệt như about, contact. Bạn hãy nhấn vào nút edit with elementor.
Bây giờ bạn có thể thoải mái tùy chỉnh lại theo ý muốn, từ việc nhấp vào các chỗ chữ tiếng anh và đổi lại tiếng việt, thêm các nội dung theo chủ đề website của bạn, đổi các hình ảnh mặc định, hoặc thậm chí là thêm các phần tử khác như nút, icon.
Để tùy chỉnh chuyên nghiệp, bạn cần phải biết sử dụng Elementor cơ bản, nếu chưa hãy đọc hướng dẫn chi tiết của mình tại đây.
Sau khi chỉnh sửa hoặc thiết kế lại theo ý bạn thì hãy nhớ nhấn “update” để cập nhật các thay đổi, nếu không thì công cốc hết.
Vậy là giờ bạn đã có kiến thức cơ bản về tùy chỉnh theme astra rồi đó, vấn đề còn lại là bạn tự vọc và kết hợp các ý tưởng trong thiết kế.
Tối ưu hiệu suất Astra
Khi đã có giao diện hoàn chỉnh, bạn đã có thể sản xuất nội dung phục vụ mục đích của mình. Tuy nhiên, bạn cũng nên dành một chút thời gian để tối ưu hiệu suất cho Astra theme.
Hiểu đơn giản điều này sẽ giúp cho quá trình sử dụng mượt mà và nhanh chóng hơn cho người dùng.
Một số cách giúp bạn tối ưu Astra như sau:
- Hosting chất lượng: Nên chọn các nhà cung cấp uy tín như Hawkhost, StableHost, Host Armada.
- Cập nhật phiên bản mới: Chú ý đến việc cập nhật trong phần Update để đảm bảo sử dụng phiên bản mới nhất, điều này không những tăng hiệu suất mà còn liên quan đến bảo mật
- Sử dụng plugin bộ nhớ đệm: Những plugin này sẽ giúp cải thiện tốc độ tải trang và giảm thời gian phản hồi của máy chủ.
- Tối ưu hình ảnh: Sử dụng hình ảnh đã được nén để giảm dung lượng tải. Bạn có thể sử dụng các plugin như Smush hoặc ShortPixel để tự động nén hình ảnh.
- Loại bỏ những plugin không cần thiết: Hạn chế dùng quá nhiều plugin và loại bỏ những plugin không cần thiết hoặc nặng nề. Nên dùng những plugin có thể giải quyết được nhiều vấn đề trong một.
- Tối ưu database: Sử dụng plugin như WP-Optimize để làm sạch và tối ưu hóa cơ sở dữ liệu WordPress của bạn.
- Sử dụng CDN (Mạng phân phối nội dung): Sử dụng CDN như Cloudflare để phân phối nội dung nhanh hơn đến người dùng từ vị trí gần họ nhất. Bạn nào đã trỏ tên miền về Hosting bằng phương pháp Cloudflare thì không cần lo vấn đề này.
Khi áp dụng các phương pháp trên, mình tin rằng hiệu suất Website sử dụng Astra theme của bạn sẽ được tăng lên đáng kể. Điều này sẽ làm gia tăng trải nghiệm người dùng và tối ưu cho các công cụ tìm kiếm như Google.
Một số plugin nên kết hợp với Astra để gia tăng sức mạnh
Về cơ bản, Astra theme bản miễn phí đã khá ổn cho một website cơ bản, tuy nhiên nếu bạn muốn gia tăng sức mạnh cho nó để đáp ứng một số nhu cầu khác thì dưới đây là những plugin bạn có thể kết hợp.
- Elementor: Plugin này dường như là một bộ đôi mạnh mẽ với Astra giúp bạn tạo ra các thiết kế độc đáo chỉ với những thao tác kéo thả mà không cần biết lập trình. Trong phần tùy chỉnh ở hướng dẫn trên bạn đã thấy rồi đấy.
- Astra Pro Addon: Đây là một plugin bổ sung cho Astra Theme, giúp bạn mở rộng nhiều tính năng cao cấp và tùy chỉnh nâng cao. Khi đó bạn sẽ có nhiều tùy chỉnh hơn trong customize như bố cục, màu sắc, header,…
- Convert Pro: Plugin này là một phần trong hệ sinh thái của Astra theme, nó giúp bạn tạo ra các biểu mẫu thu thập email với nhiều điều kiện hiển thị giúp gia tăng chuyển đổi. Plugin lý tưởng cho bạn nào muốn xây dựng danh sách làm email marketing.
- WooCommerce: Nếu bạn muốn xây dựng một website bán hàng trên Astra, WooCommerce chắc chắn là sự lựa chọn số 1. Astra tương thích tốt với WooCommerce, cho phép bạn tạo một trang web thương mại điện tử chuyên nghiệp và dễ sử dụng.
- Yoast SEO: Để tối ưu website của bạn cho công cụ tìm kiếm, Yoast SEO là một công cụ không thể thiếu. Nó giúp bạn tối ưu hóa các từ khóa, meta tags, và cung cấp nhiều tính năng khác để cải thiện SEO.
- WP Rocket: Một plugin tối ưu hóa hiệu suất toàn diện, giúp bạn tăng tốc độ tải trang thông qua các tính năng như caching, minifying files, và lazy loading.
- Contact Form 7 hoặc WPForms: Chọn 1trong 2 plugin này để tạo biểu mẫu liên hệ đơn giản trên WordPress.
Nhớ rằng, bạn không bắt buộc phải sử dụng hết các plugin trên, thay vào đó hãy cài đặt dựa trên nhu cầu của bạn.
Đồng thời sẽ có một số plugin có trả phí, nếu có thể mình vẫn khuyên bạn nên nâng cấp để trải nghiệm những tính năng mà nó đem lại. Bạn sẽ thấy nó xứng đáng như thế nào từ giao diện, hiệu suất, tính năng hỗ trợ công việc đều được cải thiện rõ rệt.
Lời kết
Và đó là toàn bộ hướng dẫn sử dụng Astra theme free mình muốn chia sẻ cho bạn, mình hiểu rằng khi là một người mới bạn sẽ cảm thấy nó hơi nhiều thông tin. Tuy nhiên, những gì mình chia sẻ cho bạn trong vài ngàn từ này là mình đã đánh đổi nhiều tháng trời để học tập và trải nghiệm.
Đồng thời mình đã cố gắng đơn giản hóa nhất, nên mình nghĩ khi bạn làm theo từng bước mình hướng dẫn và chịu khó vọc các tùy chỉnh, khi bạn làm nhiều thì tự nhiên sẽ quen tay và kiểm soát nó theo ý muốn.
Đừng quên áp dụng các phương pháp tối ưu hiệu suất và sử dụng các plugin bổ trợ trong trường hợp cần thiết.
Cuối cùng, mình hy vọng bạn sẽ sử dụng Astra theme free một cách nhuần nhuyễn và có website hoàn chỉnh theo ý muốn trong thời gian sớm nhất.
Nếu có khó khăn hoặc thắc mắc nào hãy để lại ý kiến trong phần comment bên dưới để mình phản hồi lại sớm nhất có thể nhé!
TOP 2: HOTSTING THIẾT KẾ TRANG WEBSITE TỐT NHẤT MÌNH ĐANG SỬ DỤNG
TOP 1: Hostinger: XEM TẠI ĐÂY, Xem video này làm theo nếu bạn chọn mua hostinger(khuyên dùng #1) MÃ GIẢM GIÁ SINHGIANG
TOP 2 : HostArmada: XEM TẠI ĐÂY
