MODREN

WEB

BUIDER

Responsive 

Flex Grid Structure


Super quick,

easy and flexible for smart originally website.

START to SITE 


เราช่วยให้งานยากๆ 

ที่แทบจะทำเองไม่ได้ถ้าไม่ใช่มืออาชีพ กลายเป็นงานง่ายๆ


ถ้าคุณไม่ใช่นักออกแบบและเขียนโปรแกรม การสร้างเว็บไซต์จากหน้าเปล่า ที่ตอบสนองความต้องการทุกอย่าง เป็นเรื่องแทบเป็นไปไม่ได้ และเสียเวลาอย่างมาก


ใช้เทมเพลต คุณต้องพยายามปรับเนื้อหาให้เข้า และพอดีกับแบบของเทมเพลตสำเร็จรูป  ซึ่งเร็วกว่า แต่ไม่เคยพอดี

แต่เราคิดว่าเนื้อหาของคุณเป็นสิ่งสำคัญ เราจึงคิดระบบที่ปรับการออกแบบ ให้เข้ากับเนื้อหาของคุณ


เราไม่ได้เอาผลลัพธ์ ให้คุณแทนที่ แต่เราให้คุณเลือก เพื่อให้ได้ผลลัพท์ที่คุณต้องการ


 

responsive grid ดียังไง?

กริดช่วยกำหนดพื้นที่และขอบเขตในการแสดงเนื้อหา เมื่อขนาดหน้าจอเปลี่ยน


เลือกกำหนดคอลัมน์กริดทั้งจำนวนและความกว้างเป็นอัตราส่วนของหน้าจอ และเมื่อพื้นที่แสดงผล มีขนาดเล็กลง กริดถัดไปจะแสดงต่อลงไปด้านล่าง  จึงไม่ต้องกังวลว่าเนื้อหาของคุณจะล้น แสดงไม่ครบ หรือย่อลงจนอ่านไม่ออก


การเลือกกริดแบบต่างๆ (unit grid) คือการเลือกจำนวนคอลัมน์บล๊อค (Column block) ให้กับแต่ละพารากราฟเมื่อหน้าจอมอนิเตอร์มีขนาดใหญ่ที่สุด 


แต่ละคอลัมน์บล๊อค (Column block) ยังสามารถแบ่งได้อีกเป็นระดับ Brick ทั้งตามแนวตั้งและแนวนอน ทำให้สร้างรูปแบบได้ไม่จำกัด



เช่นหากคุณเลือก 1 unit Grid Columnแปลว่า ไม่ว่าหน้าจอจะแคบหรือกว้างเท่าใด จะแสดง 1 คอลัมน์เสมอ 


และหากเลือก 2 unit grid ถ้าขนาดหน้าจอกว้างพอ จะแสดง 2 คอลัมน์ เมื่อหน้าจอเล็กลงเป็นโมบายจะแสดง 1 คอลัมน์และอีก 1 คอลัมน์ จะเลื่อนลงมาต่อด้านล่าง 


และยังสามารถกำหนดให้ unit grid แต่ละชุดเป็น non responsive ได้ คือให้เป็น 2 คอลัมน์เสมอ ไม่ว่าขนาดหน้าจอเปลี่ยนเป็นเล็กลงแค่ไหน


responsive grid ของเราทำงานอัตโนมัติ ผู้ใช้งานไม่ต้องคำนวณหรือกำหนดค่าใดๆ 


unit grid ของคุณ


ยูนิตกริด Unit Grid แต่ละชุดสามารถเลือก layout columns ได้ไม่จำกัด 

สามารถเพิ่ม ลดได้ตลอดเวลา และ Unit Grid จะปรับตัวเข้ากับขนาดหน้าจอต่างขนาดโดยอัติโนมัติ 


ใส่ unit grid กี่ชุดก็ได้ในแต่ละ section และจัดลำดับภายหลังได้


Responsive Grid ช่วยให้ผู้ใช้งานเห็นเนื้อหาที่คุณสร้างดีที่สุด แม้จะดูจากหน้าจอขนาดต่างกัน


Fluid Grids,

Flexible Images,

Content Flow.



Non-Responsive Grid ผู้ใช้งานจะเห็นทุกคอลัมภ์ใน unit grid ย่อสเกลทั้งหมดลงในหน้าจอ


Fix Grids,

Flexible Images,

Content Flow.



ไม่ว่าคุณจะชอบเปลี่ยน ต้องเปลี่ยน หรือควรเปลี่ยน

START to SITE คือคำตอบ

section ของคุณ

Page ประกอบด้วย section ต่อๆกัน section ใช้แบ่งเพจตามแนวนอน เพื่อแบ่งหมวดใหญ่ๆ และเพื่อให้ทั้งเพจดูต่างกันไปด้วยรูปพื้นหลัง หรือสีพื้นหลัง ทั้งเพจจะมีเพียง section เดียว หรือหลาย section ก็ได้




แก้ได้ทุกจุด ตามต้องการ

ไม่ถูกจำกัดด้วยสไตล์ที่กำหนดค่าไว้แล้ว เลือกทำได้ตามแบบที่ต้องการ เราสร้างบนเทคโนโลยีล่าสุด ที่ใช้งานง่ายและทำได้มากกว่าเดิม เทคโนโลยีเปลี่ยนทุกวัน เราช่วยคุณก้าวทันเทคโนโลยี และใช้ประโยชน์ได้สูงสุด



FLEXBOX FOR GRID LAYOUT


แต่ละ unit grid จะมี flexbox ควบคุม


ทุกคอลัมน์ที่อยู่ใน unit เดียวกัน เมื่อแสดงในแถวเดียวกันแสดงจะสูงเท่ากันเสมอ ด้วย flexbox แม้ว่าเนื้อหาในแต่ละคอลัมน์จะไม่เท่ากัน 


ช่วยให้เลย์เอ้าท์ของคุณเรียบร้อย สวยงาม ในแนวเดียวกันเสมอ

คุณจะรู้สึกถึงความแตกต่าง สนใจเนื้อหาที่ต้องการสื่อสารเป็นหลัก ไม่ต้องกังวลกับเทคโนโลยี คุณจะสนุก และรักสิ่งที่คุณทำ

 START to SITE 2016

ONE SITE FOR ALL DEVICES

Do whatever you like, no matter what you do, 
our responsive structure can be done in minutes.


BUILDING YOUR WEB

เริ่มจากคิดเป็นกล่องเรียงต่อๆกัน


เหมือนเล่นเลโก้ เลือกกริดบล็อคมาเรียงต่อๆ กัน ทุกกริดสามารถใส่ข้อมูล จัดการรูปแบบภายในได้เหมือนกัน

ทำได้ทุกแบบตามจินตนาการของคุณ

 

2 columns




This unit grid use 2 column blocks.



column 1 of 2

this is brick 1

กำหนดความกว้างของกริดบล็อคได้ง่ายๆ จากการเลือก Block Size ซึ่งมีค่าเริ่มต้นเป็น auto คือเท่ากันเสมอ สามารถเพิ่ม Brick ลงใน Column Block เดิมได้เรื่อยๆ  เพื่อสร้างรูปแบบที่ต่างออกไป เช่น เพื่อใช้สีพื้น  หรือใช้รูปเป็นพื้นหลังที่ต่างกัน หรือใช้เพื่อเน้นหัวเรื่อง แบ่งเนื้อหาในกริดคอลัมน์เดิม คุณจึงสามารถสร้างและปรับเปลี่ยนรูปแบบได้ไม่จำกัด โดยเร็วและง่ายที่สุด ได้ตลอดเวลา 


การเพิ่ม Brick ยังสามารถเพิ่มได้ทั้งแนวตั้งและแนวนอน ทำให้การแบ่งกริดเมื่อขนาดหน้าจอเปลี่ยนไปทำได้หลากหลายรูปแบบ ไม่น่าเบื่อ

 

this is brick 2

column 2 of 2




HELP ABOUT GRID


this is brick 1



ทุกกริดบล็อค 

สามารถใส่รูป สีพื้น รูปพื้นหลัง จัดตำแหน่ง แบบและขนาดตัวอักษร กรอบ ง่ายๆโดยการเลือกและเห็นผลเลยขณะทำ 


this is brick 2

this is brick 3

3columns




This unit grid use 3 column blocks.


column 1 of 3

ในแต่ละ Unit Grid กำหนดให้มีกี่ Column blocks ก็ได้ และใส่สีและรูป ลงในแต่ละ Coloumn Blocks ได้เป็นอิสระต่อกัน


column 2 of 3

ในแต่ละ Column Blocks ประกอบไปด้วยเซ็ตของบล็อคเรียกว่า Column Brick ที่สามารถเพิ่มได้ทั้งแนวตั้งและแนวนอน


column 3 of 3

5 columns




This unit grid use 5 column blocks.


เพิ่ม Column Brick เพื่อแบ่งพื้นที่ในคอลัมน์เพื่อสร้างรูปแบบที่แตกต่างจากกัน


column 1 of 5

column 2 of 5

ใส่รูป ใส่สี เนื้อหา วีดีโอ ลงในแต่ละกริดคอลัมน์ แต่ละช่อง 

ได้เป็นอิสระต่อกัน



column 3 of 5

เพิ่ม ลด รวมทั้งกำหนดขนาดความกว้างคอลัมน์แต่ละช่องได้ด้วยตัวเอง 

column 4 of 5

เรียนรู้เครื่องมือชุดเดียว ทำได้ทุกอย่างทั้งแบนเนอร์ ฟุตเตอร์ และเว็บเพจ

column 5 of 5

เห็นเหมือนจริงทุกอย่างขณะทำไม่ว่าเพิ่ม ลด เปลี่ยนสี ใส่รูป ทำได้ตั้งแต่เลย์เอ้าท์จนขึ้นเว็บในที่เดียว



add your

BUTTON LINK





ามารถทำลิงก์จากรูป 

ตัวอักษร 

หรือสร้างปุ่มลิงก์

เพื่อไปยังเพจอื่นๆ




add your

BUTTON LINK






เราทำให้การทำเว็บไซต์ เหมือนการทำเอกสารในชีวิตประจำวัน ทำง่ายด้วยตัวเอง โลกเปลี่ยนไป ทุกคนต้องเปลี่ยนวิธีทำเว็บ และ เราคือคำตอบ

เราทำระบบ Hybrid ให้คุณออกแบบและอัพเดทเนื้อหาในเวลาสั้นที่สุด

ทำเว็บกับเราประหยัดทั้งเวลาและค่าใช้จ่าย ไม่อุ้ยอ้าย ล่าช้า หน้าตาโบราณเหมือนเทมเพลตเก่าๆ ที่ใช้มาหลายปี จนผู้ใช้งานเว็บไซต์เห็นซ้ำจนจำไม่ได้ว่าอยู่ที่เว็บไหน 

เราสัญญาว่า คุณจะสนุกและรักสิ่งที่คุณทำ



START to SITE

smart site builder