Plugin : Visual Composer ของ WordPress สำหรับจัดหน้าเว็บ (Page Builder)

คำพูดจากวีดีโอ

Plugin Visual Composer และการใช้งานเบื้องต้น

ครับ!! สวัสดีครับ วันนี้ผมจะพูดเกี่ยวกับเรื่องของ Plugin ที่ชื่อว่า Visual Composer นะครับ

คอร์สออนไลน์แนะนำ วิธีสร้างเว็บ ด้วย WordPress โดยนักรบ

Visual Composer นะครับ  ถ้าเราดูใน Themes  for  rents  มันจะขายอยู่ที่ประมาณ  28 ดอลล์ นะครับ  ถ้ารวมเป็นเงินไทยก็ประมาณเกือบพันนะครับ  Plugin Visual Composer เป็น Plugin ที่ดีมานะครับ เป็น Plugin ที่ช่วยในการจัดหน้าเพจของเรานะครับ ให้ง่ายและมีโครงสร้างที่สวยงามมากขึ้นนะครับ และยังทำรองรับ Animation รูปแบบง่ายๆ ได้ด้วย  ซึ่งสามารถทำให้ เว็บไซต์  ของเราเปลี่ยนจากรูปแบบสเตตินิ่งๆไม่มี Animation อะไรเลยนะครับ  กลายเป็นรูปแบบเว็บไซต์ ที่มีความเป็นมืออาชีพมากขึ้นนะครับ และที่สำคัญนะครับความสามารถของ Visual Composerยังรองรับรูปแบบของ mobile ไว้  ไม่ว่าจะเป็น Tablet และมือถืออีกด้วยนะครับ  และ Visual Composer เป็นปลั๊กอินในเรื่องของการจัดหน้าที่เรียกว่า Page Builder นะครับ เป็นอันดับหนึ่งของ Themes  for  rents อยู่ในโหมดของ codecanyon  และก็ขายดีมากจนเอ็นมาโตถูกหยิบยกมาเลยว่าเป็นตัวอย่างของกราฟที่มีการเจริญเติบโตอย่างดี ของปลั๊กอินใน  codecanyon เลยนะครับ ไปเปรียบเทียบกับวง Commerce  ที่มันเป็น ปลั๊กอินเกี่ยวกับ  E-Commerceที่มีคนพัฒนาเป็นบริษัทใหญ่โตนะครับ  อ่า!!! ถ้ามาดูเนื้อหาใน  codecanyon  Visual Composer ก็จะประมาณนี้นะครับ  ลองอ่านรายละเอียดนะครับว่ามีขายไปแล้วประมาณ 30,000 กว่าเซลล์นะครับ comment เป็นปลั๊กอินอันดับหนึ่งเลยนะครับ และก็มีคนใช้มาก นิยมมากและก็สามรถเป็นปลั๊กอิน Page Builder ตัวแรก  ตัวสำคัญด้วยนะครับที่ใช้ในเรื่องของฟังก์ชั่นการแก้ไขหน้าจอคอนเทนของ WordPress ผ่านทางหน้า Fonts นะครับ ซึ่งเป็นฟังก์ชั่นใหม่ของ  WordPress นะครับ

OK คราวนี้!!! ถ้าเราซื้อ Visual Composer มาแยกๆต่างหากนะครับประมาณ 28 ดอลล์  แล้วมาใช้กับ Themes เรานะครับ  ซึ่ง Themes เราอาจจะโหลดจากที่ไหนไม่รู้แหละ  โหลดฟรีหรือว่าใช้ Themes มาตรฐานนะครับ ซึ่ง Themes มาตรฐานพวกนี้ไม่ได้ออกแบบ CSS รูปร่างหน้าตาให้กับ Visual Composerฉะนั้นมันจะได้ฟังก์ชั่นการทำงานมาอย่างเดียวนะครับ แต่มันจะไม่ได้ความสวยงามของโครงสร้างของ Visual Composer ด้วยนะครับ  มันจะไม่เข้ากับ Themes มันจะแยกกัน  ถ้าคนซื้อแยกนะครับ จะต้องสามารถแก้ไข CSS เป็นเพื่อไปปรับ CSS ของ Visual Composer ให้สวยงามเข้ากับ Themes นะครับ แต่สำหรับคนที่ปรับไม่เป็นนะครับ ผมแนะนำให้ซื้อ Themes ที่ขายพร้อมกับ Visual Composer เพราะเขาจะสามรถปรับความสามารถของ Themes และก็ปลั๊กอินให้สวยงามไปในทิศทางเดียวกันเรียบร้อยแล้ว

ตัวอย่าง Themes หนึ่งที่ผมจะใช้ในการสาธิตการใช้งานของ Visual Composer นะครับ  ก็คือ Themes ที่ชื่อว่า The 7 นะครับ Themes The 7 ถูกขายเป็นอันดับท็อปๆ แล้วก็ติดอันดับมาเป็นอันดับต้นของ Themes  for  rents มาหลายสัปดาห์แล้ว  หลังจากที่ผมเล่นระบบหลังบ้านนะครับ และเรื่องของการวางคอนเท้น  Layout และก็การจัดวางนะครับ  ผมพบว่า Themes The 7 เป็น Themes ที่ฉลาดและก็เป็น Themes ที่คนเขียนถูกพัฒนามาให้ใช้งานง่าย และก็ยืดหยุ่น เรียบ  ดูดี และก็เหมาะกับองค์กร หน่วยงาน เอกชน รัฐบาล  หรือหน่วยงานที่ต้องการความเรียบง่าย เอเจนซี่อะไรต่างๆ ที่ต้องการความหรูหรามีระดับและก็เข้าใจง่าย  เรื่องเมนูของ The 7 นี้เค้าก็ล้ำยุคมากนะครับ รองรับมือถือแล้วก็แบบสไลด์ ลองเข้าไปเล่นดู ลองดูนะครับ

อ้า!! สำหรับวีดีโอนี้ผมจะสาธิตเรื่องของการใช้ Themes Visual Composer ก่อนนะครับ ในเรื่องของเวลาที่เราปลั๊กอินนะครับนำเข้ามาแล้วนะครับ ติดตั้ง Themes The 7Composer แล้วนะครับ มันก็จะให้ลงปลั๊กอินอะไรต่างๆ ไม่ว่าจะเป็นปลั๊กอินอะไรต่างๆ ที่จะอยู่ในนี้นะครับ ข้ามไปแล้วกันนะครับ เป็น Layer  Slider  Revolution เป็นแบนเนอร์สไลด์อะไรต่างๆ  ตัวที่เราติดตั้ง  Themes เรียบร้อยเราจะไปปรับค่าของ Visual Composer ไปที่ Settings แล้วก็เลือก Visual Composer ครับ ตัวนี้จะเป็นการปรับค่าของ Settings Visual Composer ครับ ถ้าเราใช้ Themes The 7 นี่มันก็จะมี content types หลายแบบมากนะครับ  เพราะว่าถ้าขึ้นด้วย dt ย่อมาจาก dreamteam ชื่อบริษัทเค้า  ทำเกี่ยวกับ content types, portfolio, testimorials, team, jogos, benefits, gallery แล้วก็ slideshow เพิ่มเติมเข้ามานะครับ  แต่ถ้าเป็น  Themes ทั่วไปหรือ Themes มาตรฐานแบบบ้านๆ พื้นๆโหลดมาจะมีแค่ post, page อาจจะมี portfolio หรือ gallery อะไรบ้างก็แล้วแต่คนเขียนนะครับ

ดีฟอร์ของ Visual Composer จะถูกติดไว้ที่ page หรือเราจะติกที่โค้ดช่วยด้วยก็ได้นะครับแล้วแต่เรา  นี่ก็เป็นการใช้งาน

ต่อไปเป็นเรื่องของ Desing Options เราสามารถปรับค่าโดยรวมของ Visual Composer เพราะว่าค่าบางค่าถูกออกแบบมาเป็น Default  อย่างเช่น ระยะห่างระหว่างบล็อกนะครับ 35 พิกเซล ถ้ารู้สึกว่ามันกว่าไปก็ปรับลดได้นะครับ Grid gutter คือ ช่องว่างระหว่างคอลัมภ์นะครับ  แล้วก็ Mobile screen width ก็คือระยะ  ถ้าสมมุติว่ามันต่ำกว่า 768 พิกเซล มือถือ หน้าจอหรืออุปกรณ์  ให้มันเปลี่ยนโครงสร้างดูสวยงามขึ้น  ปรับให้มันเรียงแบบสแตก  คือ เรียงแบบจากบนลงล่าง จากคอลัมย์ก็อาจจะเป็นแบบสแตกจากบนลงล่าง ก็แล้วแต่เราจะปรับค่าได้ สำหรับคนที่ลองเล่นก็ลองติกแล้วก็ปรับค่าได้  สำหรับคนที่เขียน CSS เก่งเราจะปรับค่าได้ในช่อง Custom CSS ก็ได้นะครับเพื่อปรับค่าต่างๆ

อันนี้คือเรื่องของการปรับลายเส้นเอ็กทีเวด

อันนี้เรื่องของ shortcodes นะครับ คือถ้าเป็นคนที่เล่น worde page สักพักก็จะพอรู้ว่า  shortcodes คืออะไรนะครับ  แต่สำหรับคนที่เพิ่งเล่นนะครับ shortcodesคือ ชุดคำสั่งง่ายๆ  อาจจะเป็นมันจะเป็น shortcodes ที่เป็นปีกกาแข็งเหมือนเราเล่นเว็ปบอดนะครับ เป็นเครื่องหมายปีกกาแข็งอะไรอย่างนี้ shortcodes ก็จะมีลักษณะคล้ายๆ แบบนั้น อ้า!!! OK เรื่องของการอธิบาย Visual Composer Settings ง่ายเรียบง่าย

คราวนี้เราจะมาดูวิธีการใช้งานง่ายๆเรียบง่ายกันดีกว่า ผมไปที่ Pages  เวลาเราติดตั้ง Themes ครั้งแรกมันจะมีโพสต์แค่นี้นะครับ มี Sample Page แล้วก็ Hello world ในโพสต์แค่นั้นเองนะครับเดี๋ยวเราลองไปที่ Edit กันดูนะครับ นี่ก็คือข้อมูลเก่าๆ ใน The 7 Pages นะครับ

OK  คราวนี้เรามาดูนะครับ พอเราเข้ามาในหน้าแก้ไข Edit Page เราจะเห็นปุ่มอยู่สองตัวซึ่งเด่นสะดุดตาเป็นสีน้ำเงิน ซึ่งแตกต่างจาก Themes อื่นๆ ถ้าเราไม่ได้ใช้จะมีปุ่มคำว่า BACKEND EDTOR แล้วก็ FRONTEND EDTOR ความหมาย คือ แก้ไขหน้าเพ็จระบบหลังบ้านเหมือนเดิม ไม่มีการเปลี่ยนแปลง  แต่ FRONTEND ก็คือ  แก้ไขระบบหน้าบ้านนะครับ  เราลองเรียนรู้วิธีการใช้งานไปอย่างคร่าวๆนะครับ ลองที่ BACKEND EDTOR ก่อนนะครับ ก่อนที่จะเริ่มมาดูตัวนี้ก่อนครับ  เมื่อก่อนมันจะมีโครงสร้างแค่นี้ครับ ตรงนี้เราจะเรียกว่า ไทนีเอ็มซีอี  เป็นตัวอีดีเตอร์ที่ worde page ดึงมาใช้ ก็ยืด หด ขยาย ได้นะครับ อันนี้ก็จะเป็น Short Cord เราเขียนเพิ่มขึ้นมา Themes ก็เขียนเพิ่มขึ้นมา  ก็จะมีแค่นี้อย่างเก่งก็จัดหน้าได้ ชิดซ้าย ชิดขวา ตรงกลาง ใส่ลิสต์นะครับ ตัวหนา  ตัวเอียงเท่านั้นเอง แต่ไม่สามารถจัดคอลัมย์ได้  แต่ถ้าเราไปลงปลั๊กอินเสริมแทนที่พวกเอ็มซีอี, ลงเทเบิลอะไรอย่างนี้ มันก็จะจัดหน้าในมือถือลำบากก็ไม่ค่อยนิยมนะครับ  ผมแนะนำให้ใช้ Visual Composerช่วยนะครับ ผมกดที่ BACKEND EDTOR ปรึ้ง!! คราวนี้มันก็จะมาแล้ว  โอโฮ!! เป็นโครงสร้าง เห็นไหมครับเริ่มเป็นโครงสร้างแล้ว  จัดคอลัมย์อะไรได้นะครับ  นี่ๆ นั่น  คราวนี้เพื่อให้เห็นชัดขึ้น เดี๋ยวผมลอง Add new page ขึ้นมาแล้วกันเป็นหน้าว่าง ๆ ไม่มีอะไรเลยแล้วก็กด BACKEND EDTOR หน้าว่างๆ จะเป็นแบบนี้ครับ เริ่มต้นคือตัวในปุ่ม ปุ่มนี้จะลิงค์ไปยังเว็บไซต์ ของเขา ปุ่มนี้เป็น Add new element คือ ส่วนประกอบทุกอย่างที่อยู่ในเว็บไซต์ เรียกรวมๆ ว่า element  ถ้าเรียกเฉพาะเจาะจง เช่น เป็นแทค P แทค A แทคพารากราฟ แทควีดีโอ แทคอะไรก็แล้วแต่ตัวจะเลือก  เรียกรวมๆว่า Add new element ถ้ากดมันขึ้นมานี่พวกนี้คือ element หมดเลยนะครับ  อันนี้คือ Templates ครับ สมมุติว่าเรา Add element เข้าไปแล้วนะครับ เป็นแถวนะครับ  และผมใส่ Text เข้าไป ผมอาจจะใส Text เป็นคำว่า Copy right ซึ่งตัวนี้ผมอาจจะเอาไว้ทุกหน้าเลย หรืออาจจะบอกว่า “สินค้าและบริการหากมีการแก้ไขโดยมิได้แจ้งล่วงหน้า” อะไรอย่างนี้ก็แล้วแต่ที่เราจะใส่ในสินค้าของเรา ซึ่งเราอาจจะใส่ในทุกหน้า ฟูดเตอร์ หรือใส่ในหน้าเพ็จก็ได้นะครับ ซึ่งเวลาที่เราจะใส่ในทุกหน้าเราจะทำการเซฟ และก็ทำการเซฟเป็น Templates ได้นะครับ ก็จะเป็นอะไรอย่างนี้นะครับ การเซฟ Templates แบบนี้เป็นลักษณ์เหมือนการ copy layout มาไว้ใน Templates  สมมุติว่าเราเปิดหน้าใหม่ขึ้นมานะครับ แล้วเราก็ทำการโหลด Templates ที่เราทำการเซฟไว้นะครับ ก็กดคลิกเข้าไปมันก็จะเพิ่มมาให้โดยอัตโนมัตินะครับ  แต่เวลาเราแก้ไขนะครับ สมมุติว่าเราทำไป 10  หน้า แต่เวลาแก้ไขเราก็ต้องตามไปแก้ไขทั้ง 10 หน้า  มันเหมือนเป็นการ copy layout มาวางไว้เฉยๆ นะครับ  มันไม่เชิงเป็น Templates 100 เปอร์เซ็นต์ วิธีการอยากได้ Templates 100 เปอร์เซ็นต์ เราต้องลงตัวเสริมของเขาชื่อว่า VC Templates นะครับ  คือ เราทำ Templates ไว้ตัวเดียวพอเราไปแก้ที่ Templates  มันจะกระทบทุกหน้าให้นะครับ ก็เป็นการช่วยให้ง่ายขึ้น นั่นก็จะเป็นตัวเสริมของเขา OK นี่ก็จะเป็นเรื่องของ Templates ง่ายๆ นะครับ

คราวนี้เรามาดูตรงปุ่มนี้นะครับ  ปุ่มเฟืองนี่เป็นเรื่องของ Custom CSS  คนเก่ง CSS  เขียน CSS มันจะเป็นการปรับแต่ง CSS เฉพาะหน้านี้หน้าเดียว ถ้าอยากให้ได้ทุกหน้าก็ต้องไปที่หน้า True settings เมื่อกี้ที่เราผ่านมาแล้วก็ใส่ CSS เข้าไปนะครับ OK ตัวนี้ก็ไปเรื่องของการบริการ คลิกไป  Frontend นะครับ  อันนี้ก็จะลบได้

คราวนี้เรามารู้จักข้างล่างก่อน  ปุ่มนี้ก็จะเป็นเหมือนข้างล่างนะครับไม่มีอะไรใส่ element ก่อนไหม หรือจะใส่ text block ก็ได้  หรือคุณจะเลือก Layout ซึ่งเป็น Layout ที่เขาออกแบบมาไว้คราวๆ เพื่อง่าย คลิกปรึบ!! มันก็จะโหลด Layout มาให้เลยอ้า!!! ประมาณนี้  สมมุติผมจะเริ่มต้นผมจะใส่ข้อมูลอย่างไรดี  ผมก็จะเริ่มต้นด้วยการใส่แถว เพื่อจัดข้อมูล แบ่งคอลัมย์ 2 คอลัมย์ 3 คอลัมย์ อย่างนี้ก็ได้นะครับ จัดคอลัมย์ผมใส่อีกคอลัมย์หนึ่งเป็นแบบนี้ก็ได้ ปุ่มเครื่องหมายนี้เอาไว้ทำอะไร ขยับตำแหน่งไง บน  ล่าง เห็นไหมครับ สลับกัน เป็นนี้ไว้จัดอลัมย์ไง ถ้าเกิดผมอยากให้ด้านนี้ตัวใหญ่ แล้วด้านนี้ตัวเล็กต้องทำไง กด Custom ไงสลับตัวเลขนิดหน่อยนี่เป็น 3 นี่เป็น 1  เอาก้อนใหญ่ไปทางซ้าย   เอาก้อนเล็กไปทางขวา กด Update ปรึ้ง!! นี่ไงสลับแล้วเห็นไหมครับ ก็ปรับคอลัมย์ได้เป็นอิสระ

นี่ปุ่มนี้เอาไว้ทำอะไรดูก็รู้ว่า copy ไงเห็นไหมครับ ทำอะไรครับลบแค่นั้นครับ เท่านั้นเอง Edite เอาไว้ทำอะไร แก้ไขใส่คราสสำหรับคนที่เขียน CSS เอ็ดวาน เอ็ดชอลมีไว้ทำไม เอาไว้ลิงค์ในหน้าเพ็จตัวเอง ความสูง ความสูงขั้นต่ำ ระยะTop margin คือ ระยะมันกับเพื่อนมันด้านบน ระยะด้านล่างกับเพื่อนด้านล่าง  full width content หรือเปล่า Animation ตัวนี้สำคัญมากที่จะทำให้เว็บไซต์ ของเราดูมีระดับมากขึ้นก็สามารถใส่ Animation เข้าไปได้  Row style  เป็นแบบไหน สไตล์เป็นเรื่องของขั้น section มีหลายแบบก็ปรับเป็น setting ได้สำหรับ Visual Composer นะครับ เป็นมาตรฐานในบางครั้งในการปรับRow style  อาจจะไม่มีเยอะเท่านี้นะครับ  Themes The 7 เขาเขียนเพิ่ม อย่างเช่นRow style  เขาเขียนเพิ่มเข้ามา OK คราวนี้มาดูอะไรที่ขาดไป ปุ่ม Frontend เราสามารถคลิกไปที่  Frontend ได้นะครับ  มันก็จะเด้งกลับมาที่ Frontend

Frontend เป็นการจัด Layout หรือจัดเนื้อหาผ่านทางหน้าเว็บไซต์ เลย เห็นไหมครับมีลักษณะคล้ายๆกับ Back Interface นิดหน่อย ใส่ Text ใส่อะไรได้ คราวนี้ก็จะเป็นหน้า Interface ที่เราคุ้นเคย  ใส่ลิงค์อะไรต่างๆ  Save มันก็จะทำการเปลี่ยนให้เลย  การ Frontend เราจะได้สเปดที่ใกล้เคียงกับความเป็นจริงมาก และจะทำให้การดีไซด์ของเราลดการ Reface ลดการ Preview ไปได้มาก  มันจะเพิ่มสปีดในการทำงานและก็ช่วยสำหรับคนที่ออกแบบไม่เก่ง จะต้องจัดบ่อยก็ใช้ตัวนี้ช่วยก็จะง่ายขึ้นมาก OK เรากลับไปที่ Backend อันนี้ก็จะเป็นวิธีต่างๆ  ในการจัดหน้าต่างๆ ตรงนี้ไม่เกี่ยวเป็นเรื่องของ Themes The ที่เขาเขียนเพิ่มขึ้นมา สำหรับเรื่องของ Text element ต่างๆ Text Block, Message Box, Facebook Like, Tweet Button, Google Button   ไปจนถึง Layer Slider จนถึงยาวไปเรื่อๆ จนถึงFancy Separators ยกเว้นตรงนี้นะครับ  ตรงนี้จะเป็นส่วนที่ Dream team ที่เขาเขียนเพิ่มขึ้นมา ก็จะมีอยู่ใน Visual Composer ซึ่งตัวนี้จะไม่ได้อยู่ในวีดีโอที่ผมจะสาธิตนะครับ ผมจะสอนเรื่องของคอนแทนหลักๆ ที่อยู่ใน  Visual Composer,  element  อะไรต่างๆ พวกนี้ แล้วพบกันใหม่นะครับในวีดีโอถัดไปที่เกี่ยวกับเรื่องของ element  ต่างๆที่เกี่ยวกับ Visual Composer ครับ  สวัสดีครับ!!!