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

Flatsome เป็นธีมที่ถูกสร้างขึ้นเพื่อใช้งานในเฟรมเวิร์ก WordPress ที่เป็น Open Source ยอดนิยมสำหรับคนที่ทำเว็บแบบไม่ต้องเขียนโค๊ดใดๆ จึงง่ายต่อการติดตั้งและปรับแต่งเว็บไซต์ได้ตามต้องการ มีคุณสมบัติที่ยอดเยี่ยมมากมาย เป็นธีมระดับพรีเมียมที่ช่วยให้คุณสร้างเว็บไซต์ได้ในเวลาไม่กี่นาที มันถูกออกแบบมาสำหรับผู้ที่ต้องการสร้างเว็บสมัยใหม่ด้วยการออกแบบเรียบๆ และหลากสไตล์ มีเครื่องมือพิเศษมากมาย เช่น การสร้างรูปแบบบล็อกในไม่กี่คลิก, การทำ Portfolio, การสร้างร้านค้าออนไลน์ด้วยการเชื่อมต่อกับปลั๊กอิน E-Commerce ยอดนิยมอย่าง WooCommerce, หรือแม้แต่การทำโซเชียลมีเดีย ก็ง่ายดายไม่แพ้กัน ฯลฯ ซึ่งมีฟังก์ชั่นจัดสรรการทำงานโดยเฉพาะให้ยืดหยุ่นสำหรับการใช้งานหลายอุปกรณ์ หรือที่เรียกกันว่า Responsive ซึ่งทั้งหมดนี้สามารถทำได้จากตัว UX Builder ของ Flatsome

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

คุณสมบัติและความน่าสนใจของธีม Flatsome

คุณสมบัติและความน่าสนใจของธีม Flatsome

Flatsome มีลักษณะการใช้งานฟังก์ชันที่โดดเด่นที่สำคัญ คือ 

1. ส่วนของ Section นำทางหรือ Navigation เน้นการออกแบบซึ่งมีอินเทอร์เฟซ (Interface) แบบลากและวางที่ใช้งานง่าย และมอบประสบการณ์สำหรับผู้ใช้ (UX) ที่ดีที่สุด คุณยังสามารถใช้คุณลักษณะการลากและวางเพื่อสร้างหน้า ซึ่งช่วยให้คุณปรับแต่งไซต์ของคุณได้ง่ายขึ้นโดยไม่ต้องรู้ HTML หรือ CSS ใดๆ ทั้งสิ้น (1)

2. ส่วนของการ Preview ซึ่งจะเป็นการแสดงผลแบบจริงทีเหมือนกับหน้าเว็บไซต์จริง ส่วนนี้สามารถดึงข้อมูลของโพสต์หรือเพจในระบบ WordPress มาแสดงให้ดูได้ทั้งหมด ขึ้นอยู่กับว่าจะให้แสดงผลอย่างไร (2)

ส่วนของ Section นำทางหรือ Navigation in Flatsome

วิธีการซื้อ Flatsome Theme

การซื้อธีม Flatsome ผ่าน Envato Market บนเว็บไซต์ themeforest.net เป็นกระบวนการง่ายๆ คุณสามารถซื้อใบอนุญาต (License) เพื่อรับรหัสการซื้อ (Purchase Code) จึงจะสามารถเปิดใช้งานและดาวน์โหลดข้อมูลของธีม

วิธีการซื้อ Flatsome Theme
หน้าการสั่งซื้อธีมใน Themeforest (Envato Market)
  1. คุณต้องไปที่หน้าธีมบนเว็บไซต์ Envato Market หรือ คลิ๊กที่นี่เพื่อซื้อธีม แล้วคลิกปุ่ม Add to Cart
  2. เลือก Go to Checkout ระบบจะนำคุณไปยังหน้ากรอกรายละเอียดการชำระเงิน และทำการชำระเงินให้เสร็จสิ้น
  3. เมื่อเสร็จสิ้นการชำระเงินแล้ว ระบบจะส่งลิงก์ดาวน์โหลดของคุณไปทางอีเมลที่ลงทะเบียนการซื้อ หรือสามารถกดที่ไอคอนสมาชิกมุมขวาบน แล้วคลิ๊ก Download

การดาวน์โหลดไฟล์ติดตั้ง

การดาวน์โหลดไฟล์ติดตั้ง Flatsome Theme
หน้าดาวน์โหลดไฟล์สำคัญสำหรับการติดตั้งและ Verify Flatsome Theme

ส่วนที่ 1 ให้เลือกดาวน์โหลด All files & Documentation ซึ่งเป็นไฟล์ทั้งหมดที่จะ Setup เว็บไซต์ของเรา เมื่อทำการดาวน์โหลดแล้วให้แตกไฟล์ จะได้โฟล์เดอร์ flatsome-main เมื่อเข้ามาที่โฟลเดอร์แล้วจะเจอกับข้อมูลหลายโฟลเดอร์ ทั้งนี้เราจะให้ความสำคัญไปกับ 2 โฟลเดอร์หลัก คือ Documentation และ Theme Files

Flatsome Theme Files
  • Documentation จะปรากฎคู่มือของธีมทั้งหมดแบบละเอียดทีละจุด ลงลึงไปแต่ละฟังก์ชัน
  • Theme Files จะมีอยู่สองไฟล์หลักนั่นก็คือ Flatsome และ flatsome-child (ตามตัวอย่างในภาพ)

*ถ้ามีปรากฎดังนี้ถือว่าถูกต้องสำหรับเตรียมตัว Activate Theme

Theme Files Flatsome และ flatsome-child
จากภาพจะปรากฎ Theme Files อยู่ 2 ไฟล์ คือ ตัวเต็ม และ ไฟล์ child

ส่วนที่ 2 ให้เลือก License certificate & purchase code (text) เพื่อจะเปิดไฟล์ Purchase code ที่ใช้สำหรับการ Register ใช้งานธีมที่ถูกต้องตามลิขสิทธิ์

การติดตั้ง Main Theme และ Child Theme

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

เราจะมาใช้ Child Theme กันด้วย ซึ่งอันดับแรกเลยคือเราทำการติดตั้งธีมหลัก โดยการอัพโหลดไฟล์ Flatsome Theme (หลัก) และจากนั้นเราก็เพียงแค่อัพโหลดอีกไฟล์คือ flatsome-child เพิ่มขึ้นไปและเปิดใช้งานธีม Child เพียงเท่านี้ก็เป็นอันเสร็จสิ้น เราก็จะสามารถแก้ไขได้แล้วเรียบร้อย โดยที่ไม่กระทบต่อธีมหลักแต่อย่างใด

Flatsome and flatsome-child

การ Register License ของธีม Flatsome

เมื่อเราทำการดาวน์โหลดไฟล์ License certificate & purchase code (text) มาเสร็จเรียบร้อยแล้ว เมื่อเปิดไฟล์ .txt ดูก็จะเห็นส่วน Item Purchase Code

Copy Theme Registration code

ให้เรา copy แล้วนำโค๊ดมาวางในส่วนของ Theme Registration (ตามภาพ) ก็เป็นอันเสร็จสิ้น

Flatsome Theme Registration
หน้า Theme Registration

การตั้งค่า Wizard

การตั้งค่าส่วนนี้นั้นเป็นการเซตระบบเว็บไซต์อย่างรวดเร็ว ส่วนนี้จะเรียกว่า Wizard ซึ่งระบบจะมีสถานะเป็นขั้นตอนให้เราสามารถทำได้อย่างเป็นลำดับโดยที่ไม่ขาดตกบกพร่องแต่อย่างใด เช่น การ Activate Plugin ที่จำเป็น, การ Import Dummy Content หรือแม้แต่การกำหนดโลโก้ เป็นต้น แต่ถ้าหากมีความต้องการในการกำหนดค่าต่างๆ ด้วยตนเอง ขอแนะนำให้ข้ามส่วนนี้ไปเลยด้วยการคลิ๊กที่ “Not right now”

การตั้งค่า Wizard สำหรับ Flatsome Theme

ปลั๊กอินที่ Recommend สำหรับการใช้งานควบคู่กับ Flatsome 

ปลั๊กอินเหล่านี้จะติดมากับ Flatsome ซึ่งสามารถใช้งานควบคู่ไปกับธีมได้อย่างมีประสิทธิภาพ เพราะว่าเมื่อเราทำการติดตั้งปลั๊กอินแล้ว จะมีฟังก์ชั่นที่เพิ่มส่วนที่รองรับการใช้งานใน UX Builder ด้วย ซึ่งมีปลั๊กอินดังต่อไปนี้

  • Contact Form 7 ปลั๊กอินสร้างฟอร์ม ที่ง่ายและใช้งานได้ดี
  • Nextend Social Login สมัครสมาชิกและเข้าสู่ระบบด้วยบัญชีโซเชียลมีเดีย
  • Regenerate Thumbnails ปลั๊กอินปรับรูปให้เหมาะสม
  • Unlimited Sidebars Woosidebars สร้างและทำ Sidebar หลากหลายสไตล์
  • WooCommerce ปลั๊กอินทำเว็บไซต์ให้มีระบบตระกร้าสินค้า E-Commerce
  • YITH WooCommerce Wishlist ทำหน้าที่ชื่นชอบสินค้าได้ดี

UX Builder ฟังก์ชั่นที่โดดเด่นสำหรับการสร้างเว็บไซต์ ด้วย Element

ภายใน UX Builder ของ Flatsome ประกอบด้วยสองส่วนด้วยกันคือ Layout กับ Content ซึ่งสองส่วนนี้มีความสำคัญต่อการสร้างเลย์เอาต์หลักของหน้าเว็บไซต์และการสร้างส่วนหรือ Element ต่างๆ ในแต่ละจุดเป็นอย่างมาก นับได้ว่าเป็นฟีเจอร์ที่ทำให้ง่ายต่อการสร้างหน้าเว็บเลยทีเดียว

ส่วน Layout และ Content Function ของ Flatsome
  • ส่วน Layout Function จะเป็นส่วนหลักในการสร้างส่วนที่จะทำให้เว็บไซต์สมบูรณ์ด้วยหน้าตาโครงสร้างที่สวยงาม อีกประการหนึ่งที่สำคัญเลยก็คือ สามารถจัดวางโครงสร้างให้เป็นมิตรกับ Google อีกด้วยที่เราเรียกว่าการทำโครงสร้างของ SEO เช่น Section, Grid, Slider, Block, Widget area ซึ่งเมื่อมีการกำหนดข้อมูลจากส่วนนี้ก่อนแล้ว จะทำให้ง่ายต่อการนำส่วนของ Content เข้ามาใส่ใน Elemnet ที่ต้องการเป็นอย่างมาก
  • ส่วน Content Function เป็นส่วนที่มีความสำคัญและจำเป็นไม่แพ้กัน แต่ส่วนนี้จะเน้นฟังก์ชั่นที่มีการโต้ตอบและ Interactive ที่มากกว่า กล่าวคือมีส่วนที่สามารถ Costomize ส่วนต่างๆ และดึงฟังก์ชันการทำงานที่กำหนดไว้แล้วในระบบของ WordPress มาใช้ได้อย่างยืดหยุ่น อีกทั้งยังสามารถกำหนดค่า HTML หรือ CSS เพิ่มเติมได้อีกด้วย

ตัวอย่างการใช้งานแต่ละส่วน

Row เป็นส่วนของการวางเลเอาท์เพื่อจัดโครงสร้างของเนื้อหาต่างๆ ภายในเว็บไซต์

การจัด Row ใน Flatsome

ซึ่งเราสามารถตั้งค่าแบบละเอียดได้ เช่น Padding, Radius, Style

การกำหนดค่า Element

Blog Post เป็นการสร้าง Blog Layout ซึ่งดึงข้อมูลจาก WordPress มาแสดง

Blog Post Layout

ส่วนนี้สามารถกำหนดการตั้งค่าแบบละเอียดได้ ประเภทของบล็อกเราสามารถกำหนดให้เป็น Slider, Row Masonry ได้ และการตั้งค่าอื่น เช่นกำหนดสไตล์ และตั้งค่าเมื่อมีการ Hover รวมถึงในการตั้งให้ส่วนของ Blog นี้มี Animation ได้อีกด้วย

การแสดงผลจาก Blog Post

การกำหนด Responsive ของหน้าเว็บไซต์

เว็บไซต์ที่ Build โดยธีม Flatsome จะสามารถกำหนด Layout ของ Device ต่างๆ ได้ด้วยการสลับโหมดเป็น Mobile หรือ Tablet (รูปภาพ) โดยจะมีการแสดงผลที่ลดขนาดลงเป็นไซส์ของมือถือเพื่อการจัดทำแบบ Mobile Preview อีกด้วย ส่วนนี้มีความสะดวกมากในการจัดทำเว็บไซต์ และไม่มีความซับซ้อนมากเพราะว่าระบบได้จัดทำ Responsive ให้อัตโนมัติแล้ว หากแต่ยังไม่พอใจกับ Mobile Layout แบบ Default ก็สามารถ Customize เองทีละจุดได้อีกด้วย

การกำหนด Responsive ของหน้าเว็บไซต์

การใช้งานส่วน Theme Options ตัวสร้างส่วนหัวและตัวแก้ไขส่วนหน้า ที่ใช้งานบน WordPress แบบการปรับแต่งแบบ Realtime

การปรับแต่งส่วนต่างๆ ของธีมนั้น จะนำส่วน Theme Option มาขมวดไว้ที่ “ปรับแต่ง” (ตามภาพ) สามารถที่จะปรับแต่งได้หลากหลายแบบละเอียด เช่น Header, Preset, Style, Layout, ฯลฯ ซึ่งในส่วนนี้ก็เป็นอีกส่วนที่สำคัญมากๆ ในที่นี้จะเป็นการแนะนำในส่วนฟีเจอร์สำคัญของการปรับแต่งว่ามีอะไรบ้าง ซึ่งสามารถทดลองใช้งานปรับแต่งได้ตามต้องการ แบบละเอียด หรือว่าจะเพิ่มในส่วน CSS ก็รองรับการทำงานในส่วนนี้เช่นกัน

การปรับแต่ง Theme Option Flatsome

ซึ่งฟังก์ชั่นการทำงานก็จะเป็นลักษณะ Navigation สามารถกำหนดได้แต่ละส่วนอย่างเป็นระบบ ซึ่งจะมีแยกย่อยลงไปในแต่ละหัวข้ออีก

แถบเครื่องมือการใช้งานปรับแต่ง Theme Option

การเซต Layout เราสามารถกำหนดได้โดยทั่วไปก็คือ Full width, Boxed, Framed ซึ่งใน Full Width สามารถกำหนดขนาดของการแสดงผลเว็บไซต์บน Desktop ได้และสามารถกำหนดโทนได้เช่นกันในส่วนนี้

การกำหนด Layout Website

Presets Header จะสามารถกำหนด รูปแบบการจัดวางของตำแหน่งโลโก้และเมนูของเว็บไซต์ รวมถึง Top Menu ที่เป็นอีก Section หนึ่งที่แยกออกมาในพื้นที่บนสุดของเว็บไซต์

Header Presets

ลงลึกเข้าไปในการสร้างส่วนหัว ก็จะมีด้วยกัน 3 ส่วนก็คือ

1. Device Bar สามารถกำหนดได้ทั้ง Desktop / Mobile & Tablet

2 วิตเจตที่ใช้งาน สามารถลากวางได้ตามตำแหน่งที่ต้องการ จุดนี้จะสามารถนำไปวางได้ 3 Section คือ Top Header Area, Header Area, Header Bottom

3. วิตเจตที่ไม่ได้ใช้งาน จุดนี้สามารถลากมาวาง หรือลากไปใส่ได้ตามแต่ความต้องการ

Header Builder

การกำหนดสไตล์ สี แบบอักษรหลัก และสร้างหน้าเว็บไซต์

การกำหนดสไตล์ สี แบบอักษรหลัก

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

Main Colors

การกำหนดแบบอักษร Default Font และ Google Font เราสามารถกำหนดแบบตัวอักษรของเว็บไซต์ให้มีเอกลักษณ์ได้เช่นเดียวกันโดยการกำหนดตัวหนา ตัวปกติ หรืออักษร Heading และอักษรสำหรับ Menu

สาระสำคัญของการกำหนด Display ฟอนต์แบบ Swap การกำหนดแบบนี้เป็นอีกหนึ่งความสำคัญของการทำ Preload ให้เว็บนั้นเร็วขึ้น เพราะจะว่าไปการที่เว็บทำการ Load Font ให้แสดงขึ้นมาก็จะทำให้เว็บไซต์ช้าได้เช่นเดียวกัน ดังนั้น การกำหนด font-display type เป็น swap นั้นก็คือการที่ระบบภายในเว็บไซต์จะนำค่า Font ที่เป็นค่าเริ่มต้นหรือ Default font มาแสดงก่อนที่จะนำฟอนต์ที่เป็น CSS ที่เราทำการเซตไว้มาแสดง เช่น จาก Google font ที่ใช้งานแบบ CDN เพราะนี่คือการโหลดล่วงหน้าทำให้มันทำงานได้เร็วขึ้น

Typography

ฟังก์ชันการปรับแต่งของ Flatsome Theme Options

Blog

Blog Flatsome

ฟังก์ชันที่โดดเด่นคือมีการทำเลเอาท์ของ Blog ไว้ให้สำหรับคนที่ต้องการสร้างเว็บในรูปแบบต่างๆ เป็นแบบ Sidebar หรือแบบ No Sidebar ก็ทำได้ และส่วนนี้จะสามารถตั้งค่า Post Layout ให้เป็นแบบ Inline หรือแบบ Column ก็ได้ ทั้งยังรวมไปถึงการกำหนด Heading, เนื้อหา, Excerpts ได้อีกด้วย

Blog Homepage Header

Share

Share

ถือเป็น Option อีกอย่างหนึ่งที่มาพร้อมกับตัวธีมเลย ถือเป็นฟีเจอร์ที่กำหนดการแชร์ไปยังช่องทาง Social ต่างได้ทันที

Share icon style

Notifications

Notification

เป็น Option ที่สามารถเปิดใช้งาน Cookie Notice ได้ อีกทั้งยัง Customize เองได้อีกด้วย

Cookie Nitice

การกำหนดลักษณะเฉพาะเพิ่มเติมของเว็บไซต์ในส่วนของ CSS

กำหนดจากส่วนการปรับแต่ง ซึ่งส่วนนี้จะเป็นการตั้งค่า CSS อย่างอิสระโดยการเรียกใช้ Class สำหรับการทำงานของแต่ละส่วนที่เราต้องการได้ จากการปรับแต่งโค๊ด

Custom CSS

กำหนดจาก Flatsome Advanced เป็นการกำหนดแต่ละส่วนแบบละเอียด โดยแยกแต่ละช่องให้มีการทำงานเป็นส่วนๆอย่างชัดเจน ซึ่งอันที่จริงสามารถกำหนดได้จากในส่วนของการปรับแต่งได้เช่นกัน ( Customize )

Custom CSS in Flatsome Advanced

การสร้าง Footer

สามารถสร้างผ่านการปรับแต่ง หรือ UX Blocks ได้ ซึ่งเป็นการกำหนด Block ที่ทาง Flatsome ได้มีให้แล้ว การนำไปใช้ก็มีประสิทธิภาพเช่นกัน เพราะการทำงานจะเหมือนเป็น Template เมื่อแก้ไขเสร็จและทำการ Update แล้ว หน้าที่เรียกใช้ Block นี้ก็จะเปลี่ยนแปลงตามไปด้วย มีความนิยมใช้กันในการสร้าง Footer เป็นอย่างมาก

Custom Footer

การใช้งาน Flatsome Advanced Mode

ส่วนนี้ก็เป็นอีกส่วนหนึ่งที่มีความสำคัญในการสร้างเว็บไซต์ ไม่ว่าจะเป็นเรื่องของการทำ Performance การกำหนดค่า Scripts ต่างๆ การจัดทำ API และ Integrate รวมไปถึงการ Backup ข้อมูลของเว็บไซต์ เป็นต้น เราจะมาดูฟังก์ชันในแต่ละโหมดกันว่าทำงานอย่างไรบ้าง

Flatsome Advanced Mode
  • Global Settings การกำหนดค่าสคริปต์การแสดงผลต่างๆ ในส่วน Header, Footer, Body และสามารถทำการแสดงผลได้หลาย Device
  • Custom CSS เป็นส่วนที่บอกไว้ก่อนหน้านี้ ซึ่งสามารถวางสคริปต์ทีเป็น CSS กำหนดค่าแต่ละส่วนทั้งหมดได้จากจุดนี้
  • Performance การตั้งค่าเพื่อผลลัพธ์ของการทำงานโดยรวมของหน้าเว็บไซต์ ใน Flatsome ก็มีฟังก์ชั่นให้ Setup กันแบบละเอียดเช่นกัน ทั้งในเรื่องของการปรับความเร็วเพื่อให้สอดคล้องกับหลักการ Core Web Vitals ของ Google อีกด้วย
  • Site Loader เป็นการตั้งให้เว็บไซต์มีการแสดงผลของ Logo site ก่อนที่จะมีการแสดงผลหน้าเว็บไซต์จริง ตอนที่เข้าเว็บไซต์  หรือ หน้า Site ทุกหน้า
  • Site Search ตั้งค่าการค้นหาบนเว็บไซต์ ที่มากขึ้นกวว่าเดิม
  • Instagram การตั้งค่า Instagram และเชื่อมโยงกับ Facebook รวมไปถึง Business Account
  • Google APIs การติดตั้ง Google Maps โดยกำหนดค่า API ที่ได้รับจาก Google ที่ส่วนนี้
  • Maintenance Mode การตั้งค่าโหมดบำรุงรักษาเมื่อเว็บไซต์อยู่ในสถานะกำลังจัดทำหรือปรับปรุงเว็บไซต์
  • 404 Page การกำหนด Block เพื่อทำหน้า 404 สามารถปรับแต่งได้โดยการเชื่อมโยงกับ Block ที่สร้างไว้
  • Portfolio ตั้งค่าให้ใช้งานเว็บ Portfolio และ ปรับ Option ของพอร์ตโฟลิโอเพิ่มเติม
  • Mobile กำหนดการใช้งานเว็บไซต์แบบ Parallax บนมือถือ
  • Integrations กำหนดให้สามารถใช้งาน Studio และอื่นๆ ที่เกี่ยวข้องได้
  • Updates การตั้งค่าการอัพเดทของระบบ
  • Backup and Import การสำรองข้อมูลเว็บไซต์ และการ Import ข้อมูลการใช้งาน

การใช้งาน Flatsome Studio ในการสร้างหน้าเพจที่แสนง่ายดาย

การใช้งาน Flatsome Studio

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

ข้อดีและคุณสมบัติที่หลากหลายใน Studio ในมุมที่โดดเด่น มีดังนี้

  • ลากและวางอินเทอร์เฟซสำหรับการสร้างเนื้อหาที่ง่าย
  • โมดูลและเทมเพลตสวยงามดูเป็นมืออาชีพ
  • การจัดวางเป็นโครงสร้างที่ดี ทั้งยังสามารถเพิ่มประสิทธิภาพ SEO
  • เป็นเทมเพลตสำเร็จรูป เหมาะสำหรับผู้เริ่มต้นใช้งานสามารถนำมาใช้ควบคู่กันได้ระหว่าง Studio กับ การสร้างเองแบบ Customize
Flatsome Studio Build Page

เจาะลึกแต่ละฟังก์ชั่นสำคัญเพื่อการสร้างหน้าเพจที่สวยงาม

  • Blog Post บล็อกโพสต์เป็นหนึ่งในหน้าที่สำคัญที่สุดบนเว็บไซต์ คือสิ่งที่ผู้คนอ่านเพื่อหาข้อมูลเพิ่มเติมเกี่ยวกับคุณและธุรกิจของคุณ นอกจากนี้ยังเป็นโอกาสสำหรับคุณในการแบ่งปันเรื่องราวของคุณและเชื่อมต่อกับผู้อ่าน ซึ่ง Flatsome ทำระบบการจัดการ Blog อย่างง่ายดายให้แสดงผลแบบเรียบง่ายและดูดี
  • Row & Column เป็นเครื่องมือที่เรียบง่ายแต่ทรงพลังสำหรับการสร้างเพจที่สวยงาม องค์ประกอบแถวและคอลัมน์สามารถใช้ได้หลายวิธี เช่น เพื่อสร้างตารางของรูปภาพ ข้อความ หรือวิดีโอ และอื่นๆ อีกมากมาย ซึ่งเค้าก็มีให้ใช้กันอย่างเต็มรูปแบบ
  • เพิ่มความน่าสนใจให้กับ Section และแบนเนอร์ด้วย Shape Dividers ส่วนนี้เป็นเอกลักษณ์ที่สำคัญจุดนึงของธีมนี้ ซึ่งทำให้ผู้ใช้รู้สึกถึงความเป็นสัดส่วนและดูดี ความโค้งให้ความรู้สึกที่สมูธและพรีเมียม สามารถปรับแต่งได้จากสไตล์ของ Shape ที่ Flatsome ได้มีให้ ถ้าได้ลองใช้แล้วจะติดใจ
Shape Dividers
Shape Dividers Option

การใช้งาน Section และการหนดการทำงานแบบ Parallax and Animation Interactive UX Blocks กับการอัพเดทการเปลี่ยนแปลง ทำงานจากจุดเดียว

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

Parallax and Animation Interactive
ที่มา https://www.interaction-design.org/literature/article/parallax-web-design-the-earth-may-not-move-for-us-but-the-web-can

เราสามารถกำหนดการใช้งาน Parallax ได้อย่างสวยงามบนฟังก์ชั่นของ Layout ถ้าอยากเพิ่มมิติของการทำเว็บไซต์ให้ดูมี Dynamic ที่สวยงาม อย่าลืมทดลองใช้ฟังก์ชั่นนี้กันนะ

Parallax Setup

สรุป

ธีม Flatsome ถูกออกแบบมาเพื่อแก้ปัญหาสำหรับผู้ที่ต้องการทำเว็บไซต์ได้อย่างรวดเร็ว แต่ไม่มีความรู้ด้านการเขียนโปรแกรม หรือ Coding ใดๆ เลย ธีมนี้ถ้าไม่ได้พูดถึงเรื่องการกำหนด CSS เพิ่มเติมขึ้นมา ก็ถือว่าธีมนี้สามารถใช้งานได้ดีในระบดับ Hi-End เลยทีเดียว เพราะการสร้างส่วนต่างๆ ของเว็บไซต์ขึ้นมานั้น ไม่มีความจำเป็นเลยที่จะต้องมีการกำหนด CSS เพิ่มอีก เพราะว่าในฟังก์ชั่นของธีมนี้มีระบบการ Setup สี ตัวอักษร และปุ่ม ที่พร้อมหมดทุกอย่างแล้ว

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

เรามีคอร์สสอนทำเว็บด้วยนะ ถ้าใครสนใจลองดูคอร์สเรียนได้นะ

Leave a Reply

Your email address will not be published.