Vì vậy, bạn mới để Webflow, eh? Chúng ta hãy đi sâu vào.

Hướng dẫn thiết kế Visual Web

Hướng dẫn trực quan này sẽ hướng dẫn bạn thông qua các khái niệm thiết kế web đáp ứng quan trọng và làm thế nào để thực hiện chúng bằng mắt bên Webflow.

# 1 Các mô hình hộp

Cấu trúc website của sự hiểu biết

Tất cả các yếu tố trên trang này là tất cả các khối bên trong các khối khác (aka "Box Model"). Khi kéo các yếu tố web, bạn kéo chúng từ một khối và thả chúng vào nhau. Đó là cách làm việc HTML!

siêu PLAN

75 $ / mon

Hoàn hảo cho bất kỳ doanh nghiệp có từ 20 lao động trở lên.

500GB lưu trữ
1 triệu lượt truy cập
20 Cộng tác viên
50 mạng xã hội
Cao cấp Hỗ trợ

Những gì bạn nhìn thấy

Lưu ý: Bạn sẽ hiểu làm thế nào để thiết kế một cái gì đó như thế này với các khái niệm dưới đây.

Có gì Blocks Nó được làm bằng

Div Khối

H2 nhóm siêu PLAN

Khối văn bản 75 $ / mon

Khoản hoàn hảo cho bất kỳ doanh nghiệp có từ 20 lao động trở lên.

Danh sách

Danh sách Item
500GB lưu trữ
Danh sách Item
1 triệu lượt truy cập
Danh sách Item
20 Cộng tác viên
Danh sách Item
50 mạng xã hội
Danh sách Item
Cao cấp Hỗ trợ

thử nó cho mình

Kéo đoạn này ...

Tất cả các tính năng mà không có những hạn chế. Tất cả những gì bạn có thể ăn. (Đây là một yếu tố đoạn)

TIP: Click và kéo các yếu tố khoản trên và thả nó theo giá ở bên phải. Bạn cũng có thể sử dụng các phím tắt như sao chép và dán (ctrl + c, ctrl + v), sao chép khi kéo (giữ alt) và xóa (delete).

Thành khối màu tím ...

Siêu PLAN

75 $ / mon

INFO: Đây là cách HTML và web cấu trúc hoạt động - yếu tố ngăn xếp dưới mỗi khác hoặc bên trong của mỗi khác. Đó là cách tốt nhất để xây dựng một trang web dịch và đáp ứng.

# 2 YẾU TỐ LAYOUT

Yếu tố bố trí cơ bản

Thêm các thành phần vào website của bạn bằng cách nhấp vào [+] biểu tượng ở góc trên bên trái. Dưới đây là một số trong những yếu tố cơ bản nhất cấu trúc trong thiết kế web - phần, thùng chứa và cột.

Một phần chiếm 100% độ rộng của cửa sổ trình duyệt nếu bạn thêm nó vào cơ thể (canvas của một trang web).
Thật tuyệt vời cho các phần ngang lớn của một trang web.

Mục tử

Một container là một khối 960px trung ở giữa các trình duyệt. Thông thường nhất nội dung trang web được thêm vào bên trong một container để nó làm trung tâm. Container thường được bổ sung vào cơ thể hoặc một phần mục.

Container tử

Thêm Cột là cách nhanh nhất để xây dựng một bố cục trang web độc đáo. Để chỉnh sửa bao nhiêu cột bạn muốn trong các thiết bị khác nhau, chỉ cần bấm vào Gear Icon trong góc trên bên phải để truy cập cài đặt phần tử.

Cột Responsive

# 3 Thiết kế với CSS

Tạo kiểu tóc yếu tố của bạn

Chọn một phần tử và thêm một lớp trong bảng điều khiển phong cách bên phải (Brush Icon). Trong bảng này, bạn có thể thêm văn bản và đồ họa phong cách như màu chữ, đường cao, độ dốc, đường viền, bóng, và nhiều hơn nữa. Thiết kế web trực quan là cách thú vị hơn so với mã hóa phải không?

thiết kế nút ví dụ

Thêm vào giỏ ➜

Phong cách đó cho mình

Button Text ➜

TIP: Nút này đã có một lớp "Button" với một số phong cách cơ bản. Chọn nút và cố gắng thêm các gradient, biên giới, góc tròn, bên trong bóng tối / bên ngoài, di chuột phong cách nhà nước, và chuyển tiếp cho các phong cách di chuột - tất cả bằng cách sử dụng bảng điều khiển phong cách.

Những gì bạn tạo ra

Button Text ➜

áp dụng các 'nút' lớp

Button Text

TIP: Trong thiết kế web, bạn có thể áp dụng một lớp học với nhiều yếu tố để làm cho chúng trông giống nhau. Áp dụng các "nút" lớp học mà bạn theo kiểu liên kết ở trên bằng cách nhấn vào [+] ở phía trên cùng của bảng điều khiển Phong cách và gõ "Button" để tìm class đó.

Mẫu thiết kế ví dụ

Cảm ơn!

Đá của bạn vớ của tôi!

Rất tiếc! Một cái gì đó đã đi sai khi nộp mẫu đơn :(

Phong cách đó cho mình

Cam on! Trình của bạn đã được nhận!

Rất tiếc! Một cái gì đó đã đi sai khi nộp mẫu đơn :(

TIP: Đầu tiên tạo ra các lớp học cho các trường văn bản và nút (áp dụng các lớp học tương tự cho cả hai lĩnh vực). Sau đó thay đổi kiểu viền, màu nền, và thêm phong cách cho hover & bâm. Đừng quên để tạo kiểu cho "thành công" nhà nước cho các yếu tố hình thức, được tìm thấy trong các thiết lập bảng (bánh Icon trong cùng bên phải).

Ví dụ Typography

Lakewood Stout

The Dark Bia của Lakewood, Colorado

Bia đen huyền thoại được sinh ra từ cuộc hôn nhân đẹp của một người đàn ông núi và điều thân yêu nhất của mình, thành phố Lakewood ở Colorado. Người đàn ông núi cũng yêu cái rìu của mình và single-shot Remington súng trường của mình, nhưng không nhiều như anh yêu thành phố của mình. Ông mơ ước của con sông flowy cô và núi non hùng vĩ. Vì vậy, ông đặt tên mập mạp lớn nhất của mình sau khi cô ấy. Do đó, mập mạp vinh quang đã được birthed ra khỏi trái tim một người đàn ông trên núi.

"Tôi crafted bia vinh quang này để bày tỏ tình yêu bất diệt của tôi cho thành phố xinh đẹp của tôi."

- Mountain Man

Phong cách đó cho mình

Lakewood Stout

The Dark Bia của Lakewood, Colorado

Bia đen huyền thoại được sinh ra từ cuộc hôn nhân đẹp của một người đàn ông núi và điều thân yêu nhất của mình, thành phố Lakewood ở Colorado. Người đàn ông núi cũng yêu cái rìu của mình và single-shot Remington súng trường của mình, nhưng không nhiều như anh yêu thành phố của mình. Ông mơ ước của con sông flowy cô và núi non hùng vĩ. Vì vậy, ông đặt tên mập mạp lớn nhất của mình sau khi cô ấy. Do đó, mập mạp vinh quang đã được birthed ra khỏi trái tim một người đàn ông trên núi.

"Tôi crafted bia vinh quang này để bày tỏ tình yêu bất diệt của tôi cho thành phố xinh đẹp của tôi."

- Mountain Man

TIP: Đi trước và thêm tùy chỉnh kiểu chữ và phong cách để nền. Mát tip: Nếu bạn thêm phong cách typography đến một khối phụ huynh, tất cả các yếu tố con chữ của nó sẽ thừa hưởng những phong cách văn bản. Trong CSS hành vi này được gọi là "tầng".

# 4 Giao diện với CSS

Layout web xây dựng với CSS

Tương tự như việc thêm phong cách cho một phần tử, để thay đổi vị trí của một phần tử đầu tiên thêm một lớp và sau đó chỉnh sửa các thuộc tính vị trí. Bạn sẽ tìm hiểu về Margin, Padding, Display, nổi, tràn, và Vị trí.

Margin & Padding dụ

Tin giật gân

Đại lý Liên bang Raid Gunshop, Tìm Weapons

Chủ cửa hàng Steve Witmere trước đó bị bắt vì kinh doanh Blackmarket bazooka. Thú nhận với sự tham gia trong mafia Nga.

Trong số rất nhiều bazookas tìm thấy trong gunshop là hàng chục ngàn bức tranh bất hợp pháp trị giá ít nhất 10.000 $. Thats một giá đắt phải trả cho những bức tranh câm.

Mô tả: Margin và đệm có thể được tìm thấy trong bảng vị trí của bảng Style. Margin thêm sẽ bổ sung thêm không gian bên ngoài của một khối, và thêm Padding sẽ thêm không gian bên trong của một khối.

Thêm khoảng cách Yourself

Tin giật gân

Đại lý Liên bang Raid Gunshop, Tìm Weapons

Chủ cửa hàng Steve Witmere trước đó bị bắt vì kinh doanh Blackmarket bazooka. Thú nhận với sự tham gia trong mafia Nga.

Trong số rất nhiều bazookas tìm thấy trong gunshop là hàng chục ngàn bức tranh bất hợp pháp trị giá ít nhất 10.000 $. Thats một giá đắt phải trả cho những bức tranh câm.

TIP: Bắt đầu bằng cách thêm padding trên tất cả các mặt của khối màu xám chính (yếu tố phụ huynh). Sau đó, thêm lề dưới để thêm khoảng cách giữa các yếu tố văn bản cá nhân (trẻ em yếu tố). Gợi ý: Giữ phím SHIFT trong khi sử dụng điều khiển lề / padding để áp dụng cho tất cả các bên và ALT còn áp dụng cho các mặt đối lập.

'Hiển thị: Block' ví dụ

Nhóm này được thiết lập để hiển thị: Block

Đoạn này được thiết lập để hiển thị: Block. Vì vậy, nó lấp đầy chiều rộng của cửa sổ cha mẹ và ngăn xếp trên đỉnh của các khối khác.

Nút với Hiển thị: Block nút với Hiển thị: Chặn liên kết này được thiết lập để hiển thị: Khối liên kết này được thiết lập để hiển thị: Block

Mô tả: Thiết lập Display Setting yếu tố 'Block sẽ làm cho họ ngăn xếp trên đầu trang của mỗi khác và điền 100% chiều rộng của khối cha của nó. Hầu hết các yếu tố thực sự có thiết lập này theo mặc định.

Làm cho họ 'Display: Block' chính mình

Đây là một Button này là một nút Liên kết được hiển thị: Inline theo mặc định Liên kết được hiển thị: Inline theo mặc định

TIP: Chọn các yếu tố này (một số là Inline Block và một số là Inline) và làm cho họ Display: Block để họ ngăn xếp trên đầu trang của mỗi khác.

'Hiển thị: inline-block' dụ

Tải về Chỉnh sửa Xóa

Mô tả: Thiết lập Display Setting yếu tố 'để Inline-Block sẽ làm cho chiều rộng của khối phù hợp với chiều rộng của các nội dung bên trong nó. Điều đó có nghĩa là nếu nội dung của chúng đủ nhỏ mà họ có thể ngăn xếp cạnh nhau. Bạn có thể sao chép và dán các nút ở trên và chỉnh sửa văn bản bên trong để xem làm thế nào nó hoạt động.

làm cho họ inline-block mình

Tải về Chỉnh sửa

TIP: Chọn các yếu tố trên và làm cho họ Display: Inline-block để họ ngăn xếp cạnh nhau. Bạn sẽ thấy rằng những hình ảnh chồng bên cạnh các nút. Mẹo: Thả các nút và hình ảnh vào riêng biệt Div Blocks sẽ làm cho họ ngăn xếp trên đầu trang của mỗi khác (vì Div Blocks là Display: Block theo mặc định).

Float dụ

Cam on! Trình của bạn đã được nhận!

Rất tiếc! Một cái gì đó đã đi sai khi nộp mẫu đơn :(

Mô tả: Thiết lập Display: Inline-Block hoặc nổi (ví dụ này) là những cách phổ biến nhất để ngăn xếp các yếu tố cạnh nhau. Trong ví dụ này, tôi sẽ chỉ cho bạn cách để nổi một cái gì đó.

Phao nó cho mình

Cam on! Trình của bạn đã được nhận!

Rất tiếc! Một cái gì đó đã đi sai khi nộp mẫu đơn :(

TIP: Trước tiên hãy chọn các lĩnh vực văn bản, làm cho nó nổi: Trái và cung cấp cho nó một chiều rộng tỷ lệ phần trăm (ví dụ: 60%). Sau đó thiết lập các nút để Nổi: Left là tốt và thiết lập một chiều rộng tỷ lệ phần trăm (ví dụ: 40%) vì vậy họ cả thêm lên đến 100%. Đó là một cách hướng dẫn sử buộc bất kỳ yếu tố để ngăn xếp cạnh nhau.

Absolute Position Ví dụ

Cup của tôi của Joe

Đây là một văn bản chú thích ảnh.

Nổi bật

Mô tả: Nếu bạn thiết lập vị trí để tuyệt đối trên một phần tử, bạn sẽ có thể để định vị nó ở bất cứ nơi nào bên trong khối cha của nó. Để chọn phụ huynh đến vị trí bên trong, thiết lập vị trí các phần tử của phụ huynh để tương đối. Lưu ý: Khi các yếu tố là tuyệt đối vị trí họ nổi lên trên các yếu tố khác.

Phong cách It Yourself

Cup của tôi của Joe

Đây là một chú thích ảnh cho cốc yêu thích của tôi của Joe.

Nổi bật

TIP: Trước tiên hãy chọn các yếu tố ảnh Wrapper và thiết lập vị trí của mình để tương đối. Tiếp theo chọn chú thích, kéo nó vào hình ảnh thiết lập nó là vị trí để Absolute và chọn cài đặt trước thứ 7. Đến vị trí huy hiệu nổi bật vào đúng vị trí chọn sẵn 2 và tay vị trí của nó.

# 5 Kiểu Cascading

Bằng cách sử dụng Cascading Style

Bạn có thể dễ dàng tạo ra các biến thể của một phần tử bằng cách thêm vào các lớp học thêm trên đầu trang của mỗi khác và thêm phong cách khác nhau vào những lớp học. Kiểm tra các ví dụ dưới đây, nơi chúng tôi có các biến thể khác nhau của một nút.

Chia sẻ phong cách nút ví dụ

Thiết kế các nút chính mình

Nút XANH

Nút RED

TIP: Chọn nút thứ hai và bấm vào [+] bên cạnh các lớp học thêm một lớp khác. Bạn có thể gọi nó là "Green". Sau đó, cho nó phong cách khác nhau. Những phong cách sẽ ghi đè lên các phong cách cơ bản của lớp đầu tiên. Sau đó tạo một nút đỏ.

# 6 truy vấn phương tiện truyền thông

Thiết kế cho các thiết bị khác nhau

Trong Webflow bạn lần đầu tiên thiết kế trang web của bạn cho các thiết bị máy tính để bàn và sau đó thực hiện thay đổi trên các thiết bị di động (truy cập vào biểu tượng thiết bị trong thanh hàng đầu). Thêm phong cách trong một thiết bị di động sẽ ghi đè lên phong cách máy tính để bàn.

Responsive nhóm dụ

Đây là một số văn bản đề đó sẽ được nhỏ hơn trong các thiết bị di động.

Mô tả: Nhóm này là thực sự lớn trên máy tính để bàn, nhưng chúng tôi muốn nó được nhỏ hơn trên các thiết bị di động. Click vào trong các thiết bị trong thanh hàng đầu để thấy rằng kích thước văn bản và đường cao đã được giảm.

Fix It mình

Làm cho văn bản này đề lớn có nhỏ hơn trong các thiết bị di động.

TIP: Chọn nhóm này trên các thiết bị máy tính bảng và làm cho kích thước font chữ và chiều cao dòng nhỏ hơn. Làm tương tự cho các thiết bị Cảnh Điện thoại và điện thoại Portrait. Bạn có thể thấy rằng

Responsive dụ Nút

Button Text

Mô tả: Nút này có nghĩa là phải nhỏ trên màn hình Desktop vì nó dễ dàng để nhấp con trỏ chuột. Chúng tôi đã làm cho nó lớn hơn trên các thiết bị di động để nó dễ dàng hơn để khai thác với các ngón tay

Button Text

Fix It mình

TIP: Tới các thiết bị máy tính bảng và tăng miếng đệm của các nút. Khi bạn làm điều đó nó sẽ ghi đè lên phong cách trước đó thiết lập trên máy tính để bàn và sẽ thác xuống đến tất cả các thiết bị có màn Tablet.

Cột Responsive dụ