Giới thiệu những phần mềm, plugin thiết kế website kéo thả

Hẳn nhiều anh em thiết kế website trên nền tảng wordpress từng đã một lần tìm kiếm các phần mềm, plugin kéo thả để building một website đẹp với nhiều tiện ích và dễ dàng hơn đúng không ạ! Ok hôm nay mình sẽ giới thiệu đến mọi người các plugin dùng để thiết kế web đơn giản với những thao tác kéo thả cũng sẽ làm nên được một trang web chuyên nghiệp nhất có thể nhé.

Phần mềm plugin thiết kế website kéo thả là gì?

Plugin thiết kế website kéo thả nó chính là phần mềm trong wordpress bổ trợ cho theme giúp người thiết kế và quản trị website có thể dễ dàng tùy biến giao diện theo ý mình một cách sáng tạo và đẹp nhất mà không cần phải sử dụng tới code hoặc sử dụng nhưng rất ít

Những plugin thiết kế website ở dạng kéo thả phổ biến 

Ở đây mình sẽ chia sẽ cho anh em 3 plugin phổ biến mà mình hay dùng để tạo nên một website hoàn chỉnh dựa trên một template thô sơ nhé.

Plugin đầu tiên Elementor

Đây là plugin miễn phí và có phí, tuy nhiên ở cái bản miễn phí thì mình thấy nó cũng đã rất ngon rồi anh em có thể sử dụng nó để xây nên bất kỳ cấu trúc web nào mình muốn, tùy vào khả năng sáng tạo của mình nhé. Với những phần tử element khá là xịn xò chỉ cần kéo thả một cách đơn giản vãi chưởng mà không cần dùng tới code nhé, vâng chính xác là không cần dùng tới code nhé.

Để có thể cài đặt plugin này anh em làm như sau truy cập vào dashboard trang quản trị wordpress bạn kéo xuống phần plugin vào mục cài mới rồi tìm kiếm plugin có tên elementor và tiến hành cài đặt active nó lên như hình bên dưới bạn nhé.

 

Sau khi kích hoạt plugin bạn có thể vào tạo một trang mới hay bài viết mới, phía trong phần nhập text trang tạo bài post hoặc page bạn sẽ thấy có một phần tử tên là elementor bạn click chọn vào nó nhé.

 

plugin elementor thiết kế web kéo thả

Nó sẽ hiện lên trong trang với giao diện như bên dưới. Bao gồm hai phần section cột bên phải và phần tử element cột bên trái. Nếu bạn muốn thêm phần tử nào vào section thì chọn phần tử đó sau đó kéo ra phần section nhé.

plugin thiết kế web elementor

 

 

Ví dụ:

Ở đây mình chọn phần tử element là hình ảnh là ví dụ nhé. Khi mình kéo element hình ảnh vào trong website nó sẽ hiển thị trong phàn section bạn có thể chỉnh sửa và thêm hình ảnh vào ở cột bên trái nhé.

 

plugin thiết kế website elemontor builder

Sau khi thao tác đã thấy ngon hết rồi thì bấm lưu lại ở phái dướt cùng thanh công cụ bên trái màn hình nhé.

plugin thiết kế website elemontor builder

 

Đó là quy trình thao tác cơ bản để sử dụng được plugin này vào việc thiết kế website đấy.

Plugin WPBakery Page Builder là công cụ thứ hai admin muốn giới thiệu đến bạn

Wpbakery page builder trước kia có tên là visual composer nhé, về chức năng và công dụng của nó thì nó tương tự như plugin ở phía trên nhưng nó không có bản free, bạn muốn sử dụng nó thì phải bỏ phí ra mua plugin bản quyền về sài nhé. Nếu bạn muốn sài chùa mà không cần phải bỏ tiền ra mua thì có thể tải bản nun về mà chơi.

Đây là link tải, yên tâm sẽ không có virus đâu nhé:

Mình khuyên các bạn nên bỏ tiền ra mua để ủng hộ tác giả có động lực phát triển plugin nhé, còn không mua thì thôi hehehee.

Khi đã tải plugin về máy rồi thì ta tiến hành upload nó lên website nhé anh em bằng cách tạo trang quản trị website wordpress của bạn tìm đến phần plugin chon vào mục cài mới bấm vào nút thêm mới plugin trên thanh công cụ trên cùng. Rồi tiến hành upload plugin lên sau đó cài đặt plugin nhé.

upload plugin WP bakery page builder lên website

 

Rồi active nó lên

active plugin Wpbakery page buider

Sau khi kích hoạt plugin bạn vào trang bài viết hay trang page bắt đầu tạo bài viết mới thử nhé. Bạn sẽ thấy phía trên thanh công cụ dùng để nhập văn bản bài viết có các nút  Backend và Frontend editor hai nút này dùng để xây dựng nên một trang web view phía bên ngoài người dùng với frontend và phía admin với backend editor. Chúng ta thấy thao tác phía nào tiện và dễ dàng nhất cho mình thì sử dụng nhé.

Wpbakery page builder

 

Ví dụ: Ở đây mình chỉnh sửa trang với frontend thì bấm vào nút frontend trên thanh công cụ trong mục nhập văn bản bài viết. Nó sẽ hiển thị ra trang chỉnh sửa với các element và section, Bạn muốn thêm phần tử nào vào trong section của trang thì bấm vào nó. Cách làm là bạn bấm vào dấu cộng trên đầu trang nó sẽ hiện lên các option thêm phần tử nào vào website thì click vào nó.

Wpbakery page builder cách sử dụng

 

Wpbakery page builder cách sử dụng tiếp theo

 

Sau khi đã thao tác ổn tạo nên một trang hoàn thiện rồi thì bấm lưu lại trang ở nút puclic phía trên màn hình nhé.

Wpbakery page builder lưu lại page

 

Vậy là bạn đã biết tạo lên một page với plugin này như nào rồi nhé. Ta tiến hành bước sang plugin thứ 3 thôi nào.

Plugin smart slider 3 

Hai plugin phía trên là hai plugin tạo có các phần tử cơ bản để xây nên một trang web. Nhưng nhược điểm của nó là không thể tạo slider ở phiên bản miễn phí. Thế nên plugin smart slider 3 này sẽ bổ sung điều đó. Là một plugin miễn phí có thể tạo nên những slider thật đẹp và hoàn hảo trên cả máy tính và điện thoại sử dụng lại đơn giản. Nói chung là tuyệt vời ông mặt giời các ông ạ.

Để cài đặt được plugin này anh em vào trong mục plugin tìm kiếm plugin có tên smart slider 3 nhé. Nó sẽ xuất hiện trên kết quả tìm kiếm anh em tiến hành cài đặt và kích hoạt nó lên.

smart slider 3

 

Khi đã kích hoạt xong anh em quay trở lại trang dashboard của wordpress trên thanh công cụ bên trái tìm đến mục smart slider 3 bấm chọn vào nó

 sử dụng smart slider 3

 

lúc này sẽ ra một giao diện mới nó sẽ yêu cầu bạn tạo mới một project cho slider. Ở cái mục project type có hai tùy chọn nhưng mình sẽ chọn slider, còn ở mục slider type mình sẽ chọn simple bạn muốn tùy chọn nào thì chọn vào nó nhé. Phần setting mục đặt tên theo ý bạn, mục width, height, layout để nguyên mặc định vẫn ok nhé. Sau đó Create để tạo.

tạo project smart slider 3

 

tạo project cho slider

Nó sẽ hiện ra giao diện chỉnh sửa slider như này nhé. Xong bạn add các hình ảnh vào các slide one, slide two… nhiều hơn nữa nếu muốn thì cứ thêm vào sau đó bấm save. Và coppy shortcode ở phía dướt chổ số 3 trong hình.

tạo slider ở smart slider 3

 

 

Rồi vào trong bài viết hoặc page tạo một trang mới dán cái short code này vào phần nhập văn bản của bài viết trong trang quản trị sau đó ấn cập nhật page rồi ra xem kết quả slider mình vừa tạo ở trang người dùng nhé.

coppy short code smart slider 3 vào trong page

Ví dụ mình họa cho slider của mình làm.

 

Mình đã giới thiệu xong cho anh em những plugin thiết kế web chỉ với thao tác kéo thả mà mình hay sử dụng rồi nhé. Sẽ còn nhiều plugin khác nữa nhưng mình nghĩ với những plugin này thì cũng đã khá là ngon để làm thật sự tốt rồi. Cuối cùng chúc mọi người thao tác thành công.

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *