วิธีการออกแบบชุมชนของคุณบน Ning

เผยแพร่แล้ว: 2018-05-16

แม้ว่า เนื้อหาจะเป็นทรัพย์สินที่มีค่าที่สุด ของเครือข่าย Ning ของคุณ อย่างไม่ต้องสงสัย แต่การ ออกแบบก็เป็นสิ่งที่ต้องพิจารณาอย่างจริงจัง เช่นกัน ไม่ว่าเนื้อหาของคุณจะมีความเกี่ยวข้องและมีส่วนร่วมเพียงใด ไม่มีใครตื่นเต้นเป็นพิเศษที่จะเรียกดูเว็บไซต์ที่น่าเกลียดใช่ไหม ความจริงก็คือ 38% ของผู้คนให้ขึ้นการมีส่วนร่วมกับเว็บไซต์หากพวกเขาพบว่ามันไม่สวย แน่นอน ในฐานะผู้สร้างเครือข่าย คุณไม่ต้องการที่จะเสียผู้ชมไปมากขนาดนี้ ในทางกลับกัน คุณต้องการให้ผู้ใช้มีความสุขกับทุกแง่มุมของการสร้างสรรค์ของคุณ

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

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

แต่จะออกแบบเว็บไซต์ให้ดูดีและน่าใช้งานได้อย่างไร? ต่อไปนี้คือเคล็ดลับที่เป็นประโยชน์สำหรับผู้ที่เพิ่งเริ่มสำรวจแพลตฟอร์ม Ning และความสามารถของแพลตฟอร์ม

เริ่มต้นใช้งาน NING Design Studio

สิ่งสำคัญอันดับต้นๆ ของ Ning คือการให้ผู้ใช้ควบคุมรูปลักษณ์ของเครือข่ายของตนได้อย่างเต็มที่ นี่คือเหตุผลที่ Design Studio ถูกสร้างขึ้น

NING Design Studio เป็นชุดเครื่องมือที่ช่วยให้ปรับแต่งการออกแบบเว็บไซต์โซเชียลที่สร้างบนแพลตฟอร์ม Ning มันมีตัวเลือกการปรับแต่งมากมายให้ผู้ใช้มุ่งเป้าไปที่การทำให้เครือข่าย Ning ทุกเครือข่ายมีเอกลักษณ์และสวยงาม

Design Studio สามารถเปิดใช้ได้อย่างง่ายดายโดยคลิกที่ไอคอนที่เกี่ยวข้องบนแดชบอร์ดการดูแลระบบ ซึ่งมีให้ใช้งานเป็นแถบเครื่องมือสีเขียวที่มุมบนซ้ายของทุกหน้าเครือข่าย

มีหมวดหมู่การปรับแต่งที่หลากหลายภายในเมนู Design Studio:

  • ธีม : เลือกเทมเพลตการออกแบบทั่วไปสำหรับเว็บไซต์ของคุณ
  • พื้นหลัง : เลือกและกำหนดค่าภาพที่ปรากฎเป็นฉากหลังของเว็บไซต์ของคุณ
  • ส่วนหัว : ออกแบบส่วนหัวให้ตรงกับหัวข้อเครือข่ายของคุณ
  • หน้า : กำหนดลักษณะโดยรวมของหน้าเครือข่ายของคุณ
  • CSS ที่กำหนดเอง : ใส่โค้ด CSS ที่กำหนดเองเพื่อทำการเปลี่ยนแปลงขั้นสูงในการออกแบบเว็บไซต์ของคุณ

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

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

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

ธีม

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

Ning นำเสนอธีมพร้อมใช้งานมากมายที่ได้รับการออกแบบมาอย่างพิถีพิถันสำหรับเว็บไซต์ประเภทต่างๆ ต้องการเว็บไซต์พอร์ตโฟลิโอ? ไปเลือกธีมที่เกี่ยวข้องในห้องสมุด ขึ้นสำหรับการสร้างชุมชนดนตรี? ไม่มีปัญหา Ning มีเทมเพลตสำหรับสิ่งนั้นด้วย!

คุณค้นหาธีมทั้งหมดที่พัฒนาโดย Ning ได้ในแท็บ "ธีม" ของเมนู Design Studio

หน้าจอ1 เพียงเลือกอันที่เหมาะกับวัตถุประสงค์ของคุณที่สุดแล้วกดปุ่ม "เผยแพร่" ก่อนที่คุณจะใช้ธีม คุณสามารถดูตัวอย่างได้

ธีม Ning ดูดีทั้งบนเดสก์ท็อปและอุปกรณ์มือถือ เนื่องจากได้รับการปรับให้เหมาะสมที่สุดเพื่อประสิทธิภาพที่ดีที่สุดบนแพลตฟอร์มที่มีอยู่ทั้งหมด

นอกจากนี้ แท็บ "ธีม" ประกอบด้วยแท็บย่อยสองแท็บ:

  • ประวัติ : ให้คุณตรวจสอบธีมทั้งหมดที่คุณใช้กับเว็บไซต์เครือข่ายของคุณมาก่อน
  • จัดการ : คุณสามารถนำเข้าและส่งออกธีมได้ที่นี่ Design Studio รองรับธีมในรูปแบบ .txt

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

พื้นหลัง

เริ่มปรับแต่งธีมของคุณด้วยการตั้งค่าภาพพื้นหลัง มีสองวิธีง่ายๆในการทำ:

  • เลือกหนึ่งในภาพมาตรฐานที่นำเสนอโดย Ning;
  • อัปโหลดภาพของคุณเองและใช้เป็นพื้นหลัง

ในการอัปโหลดภาพของคุณเอง ให้เลือกแท็บ "พื้นหลัง" และคลิกที่ไอคอนกล้อง

ทางด้านขวาของรายการเลือกรูปภาพ คุณจะพบตัวเลือกเพิ่มเติมหลายตัวในการปรับแต่งภาพพื้นหลังของคุณ:

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

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

หัวข้อ

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

ในการเริ่มต้นออกแบบส่วนหัวของเว็บไซต์ของคุณ ให้คลิกที่แท็บ "ส่วนหัว" หัวข้อ

ภายในแท็บ คุณจะพบแท็บย่อยหลายแท็บที่ให้คุณตั้งค่าพารามิเตอร์ต่างๆ ของส่วนหัวของคุณได้:

  • สไตล์ :

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

ยิ่งไปกว่านั้น คุณสามารถเปลี่ยนขนาด (ความสูงและความกว้าง) ของส่วนหัวและช่องว่างภายในได้โดยป้อนค่าที่ต้องการ (เป็นพิกเซล) ลงในช่องที่เกี่ยวข้อง

เคล็ดลับ ขีดจำกัดความสูงเริ่มต้นสำหรับธีมส่วนใหญ่คือ 135px

  • ชื่อ/โลโก้ :

หน้าที่ที่สำคัญอย่างหนึ่งของส่วนหัวคือการสื่อสารชื่อเว็บไซต์ (หรือชื่อบริษัท/แบรนด์) เพื่อให้ภาพสมบูรณ์ คุณจะต้องแสดงโลโก้ของคุณด้วย ด้วย NING Design Studio คุณสามารถปรับแต่งทั้งชื่อและโลโก้ได้อย่างง่ายดาย

ในการตั้งชื่อเครือข่าย ให้ไปที่ "การตั้งค่าทั่วไป" ของเมนู "Social Site Manager" ที่สามารถเข้าถึงได้จากแดชบอร์ดผู้ดูแลระบบ และป้อนชื่อในกล่องข้อความ "ชื่อไซต์"

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

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

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

  • การนำทาง

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

  • พื้นหลัง

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

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

พบภาพที่เหมาะสม? ดี. เพียงอัปโหลดโดยคลิกที่ไอคอนกล้องและปรับตำแหน่งและการจัดตำแหน่ง - ง่าย!

นอกจากนี้คุณยังอาจต้องการที่จะแก้ไขภาพของคุณเพื่อให้พวกเขาพอดีกับขนาดของส่วนหัวใช้ตัวกรองและผลกระทบอื่น ๆ การทำเช่นนี้จะใช้ภาพการแก้ไขเครื่องมือออนไลน์เช่น BeFunky หรือ Pixlr

  • แถบบัญชี

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

หน้าหนังสือ

แท็บ "หน้า" ของเมนู Design Studio มีไว้เพื่อช่วยคุณปรับแต่งลักษณะโดยรวมของหน้าเครือข่ายของคุณ ประกอบด้วยแท็บย่อยหลายแท็บ:

  • ทั่วไป : กำหนดสีของพื้นหลังของหน้า เลือกแบบอักษรที่ปรากฏบนหน้า กำหนดระยะห่างของย่อหน้า ปรับเปลี่ยนขนาดการเติมหน้าและความกว้างของหน้า หากคุณต้องการให้เว็บไซต์ของคุณทำงานในโหมดเต็มหน้าจอ ให้เลือก "100%" ในเมนูแบบเลื่อนลง "ความกว้างของหน้า"
  • โมดูล : ควบคุมพารามิเตอร์ของโมดูล โมดูลคือบล็อกเนื้อหาที่ปรากฏทั่วหน้าในเครือข่ายของคุณ คุณสามารถเปลี่ยนสีพื้นหลัง ฟอนต์ ไทล์และช่องว่างภายในเนื้อหา การจัดตำแหน่งไทล์ ฯลฯ
  • ลิงค์ : ปรับแต่งรูปลักษณ์ของลิงค์ที่แสดงบนเว็บไซต์ รวมถึงปุ่มนำทางหน้าและชื่อโพสต์
  • ปุ่ม : ปรับแต่งการออกแบบปุ่มที่ดำเนินการต่างๆ บนไซต์
  • เอฟเฟกต์ : ทำให้มุมของหน้าและโมดูลเนื้อหาคมชัดหรือโค้งมน และกำหนดรูปร่างของรูปโปรไฟล์

CSS ที่กำหนดเอง

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

มีสองพื้นที่ที่สามารถป้อนโค้ด CSS:

  • Global CSS : หมายถึงการปรับแต่งสากล
  • ธีม CSS : หมายถึงการปรับแต่งเฉพาะธีม

ผู้ใช้ที่เชี่ยวชาญด้านเทคนิคจะพบว่าคุณลักษณะ CSS แบบกำหนดเองมีประโยชน์อย่างยิ่งในการบรรลุผลลัพธ์ที่น่าประทับใจยิ่งขึ้นในแง่ของการนำเสนอด้วยภาพ

ออกแบบเว็บไซต์ที่สมบูรณ์แบบของคุณ

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

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


เบรนด้า ปีเตอร์สัน

Brenda เป็นผู้เชี่ยวชาญด้านเทคนิคที่ Ning