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

Elementor มีทั้งเวอร์ชั่นฟรีและเวอร์ชั่นเสียเงิน เวอร์ชั่นเสียเงินคือ Pro จะต่างกันตรงที่มี Widget มากกว่า ส่วนเวอร์ชั่นฟรีสามารถดาวน์โหลดได้ที่ Dashboard ตรงเมนู Plugins ได้เลย สามารถทดลองเล่นก่อนได้ และการที่จะใช้เวอร์ชั่น Pro นั้นเราต้องติดตั้งตัวเวอร์ชั่นฟรีไว้ในเครื่องด้วย จากนั้นก็ค่อยซื้อเวอร์ชั่น Pro มาติดตั้งคู่กันและใส่รหัส License เพื่อรับการอัพเดต (อัพเดตได้ 1 ปีและต่ออายุในราคาแค่ 50%)

การใช้งาน Elementor Pro

เมื่อเราติดตั้งปลั๊กอินแล้ว เวลาที่เราต้องการจะแก้ไข Page ต่างๆ จะมีปุ่ม Edit with Elementor ดังภาพสำหรับให้เราใช้งาน Elementor page builder ได้เลย

Elementor Pro Widgets 1

โดยปกติแล้วหน้าที่จะใช้ Page Builder ส่วนใหญ่เราจะใช้หน้าที่เป็น Fullwidth หรือ No sidebar เพื่อแสดงแบบเต็มความกว้างไม่ต้องมี sidebar  อีกตัวเลือกหนึ่งที่จะมีเพิ่มเข้ามาใน Page template ก็คือ Elementor Canvas คือหน้าเปล่าๆ โล่งๆ ขาวๆ ไม่มีอะไรเลย ทั้งหมดเราจะเป็นคนออกแบบเอง คล้ายๆ กับหน้า Landing Page นั่นเองค่ะ ซึ่ง Elementor เขาจะมี Nav Menu widget มาให้เราสร้างเมนูด้วย โดยเราควรทำการเลือก Page Template ที่ต้องการก่อนเพื่อการแสดงผลที่ถูกต้อง เลือกแล้วกด Save Draft ก่อนนะคะ แล้วค่อยคลิก Edit with Elementor

Elementor Pro Widgets 2

ให้เราเลือกเทมเพลตที่ต้องการก่อน แล้วคลิก Save Draft แล้วค่อย Edit with Elementor ก็จะเจอกับหน้าแบบด้านล่างนี้ ในตัวอย่างเราเลือกเป้นแบบ Fullwidth นะคะ แต่ละธีมจะต่างกัน แต่ถ้าใช้ Elementor Canvas จะโล่งๆ ไม่มีแม้กระทั่งเมนูข้างบน

Elementor Pro Widgets 3

เราจะเจอกับ page หน้าตาแบบด้านบน ด้านซ้ายมือของเราจะเป็นกล่องเครื่องมือของ Elementor ซึ่งตรง ELEMENTS นั่นก็คือ Widgets ที่เราสามารถนำมาใช้งานได้นั่นเอง ส่วนด้านขวาก็จะเป็นหน้าเว็บที่เราจะทำการแก้ไขแบบ Live สามารถคลิกที่ปุ่ม ADD NEW SECTION เพื่อทำการเพิ่มเซคชั่นใหม่เข้าไป โดยจะมีให้เราเลือกเลยว่าเราต้องการจะแบ่งเป็บแบบกี่คอลัมน์

Elementor Pro Widgets 4

โดยเรายังสามารถที่จะเลื่อนเพื่อปรับขนาดคอลัมน์ได้อย่างอิสระอีกด้วย

Elementor Pro Widgets 5

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

Elementor Pro Widgets 6

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

Elementor Pro Widgets 7

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

Elementor Pro Widgets 8

Layout ไว้สำหรับตั้งค่าเกี่ยวกับการแสดงผล เช่น กำหนดให้แสดงขนาดเท่าขนาดแสดงเนื้อหาปกติ หรือ Stretch ยืดออกเต็มหน้า กำหนดระยะห่างระหว่างแต่ละคอลัมน์ใน section กำหนดความสูงของ section เป็นต้น

Elementor Pro Widgets 9

Style ไว้สำหรับกำหนดเกี่ยวการตกแต่งใส่สีสัน เช่น พื้นหลัง ขอบ ตัวแบ่งแต่ละ section หรือที่เรียกว่า Shape Divider

Elementor Pro Widgets 10

ยกตัวอย่างที่เห็นเป็นที่นิยมอยู่และเราสามารถทำได้ง่ายๆ ด้วย Elementor ก็คือ Background Gardient คือพื้นหลังแบบไล่สี

Elementor Pro Widgets 11

ส่วน Shape Divider นั้นก็เก๋ไม่ใช่เล่น เรามักจะเห็นบ่อยๆ ในหลายๆ เว็บ เช่นการแบ่งแต่ละส่วนเป็นแนวเฉียง ตัวอย่างด้านล่างเราทำเหนือกว่านั้นด้วยการแบ่งเป็นรูปแนวภูเขาเลยทีเดียว ผสมกับพื้นหลังแบบไล่สี Backgroud gardient ด้านบนก็แปลกตาดี

Elementor Pro Widgets 12
Elementor Pro Widgets 13
Shape Divider แบบต่างๆ

Advanced  อันนี้ไว้สำหรับตั้งค่าเกี่ยวกับ Padding, Margin ระยะห่างต่างๆ รวมไปถึง Z-index และ Animation อยากให้อะไรวิ่งมาแบบไหนก็ลองเล่นกันดู รวมไปถึงการตั้งค่า Responsive คือการกำหนดให้ซ่อนหรือแสดง section ในหขนาดหน้าจอไหนบ้าง และ Custom CSS สำหรับคนที่ยังไม่พอใจ แต่ง CSS เสริมได้

Elementor Pro Widgets 14

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

Elementor Pro Widgets 15

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

Elementor Pro Widgets 16

เราสามารถตั้งค่า Elementor ให้สามารถใช้กับ Post ก็ได้ หรือแม้กระทั่ง post type อื่นๆ ด้วยการไปที่เมนู Elementor > Settings ใน Dashboard

Elementor Pro Widgets 17

การเพิ่ม Widget ในคอลัมน์

เราสามารถลาก widget ใดๆ ก็ตาม จากกล่อง Elements ด้านซ้ายมือมาวางในคอลัมน์ที่ต้องการ สังเกตถ้าขึ้นเส้นสีฟ้าตรงไหน แสดงว่ามันจะลงตรงนั้นแหละ

Elementor Pro Widgets 18

แถบเมนูด้านซ้ายก็จะกลายเป็นตัวตั้งค่าสำหรับ widget นั้น เมื่อเราคลิกที่ widget ไหน มันก็จะมีตั้งค่าแบบนี้ทุกตัวที่เราลากไปวาง ซึ่งการตั้งค่าของ widget นี้จะมีด้วยกัน 3 แท็บเสมอ ก็คือ Content, Style, Advanced

Elementor Pro Widgets 19

การตั้งค่า Widget นั้นก็จะมี 3 แท็บคล้ายๆ กับการตั้งค่าของ Section อีกเช่นกัน

Content จะเป็นการตั้งค่าเกี่ยวกับเนื้อหา แล้วแต่ว่าเราใช้ widget อะไร ถ้าเราแทรกรูปมันก็จะเป็นตัวตั้งค่าเกี่ยวกับรูป เป็นต้น

Style เป็นการตั้งค่าในเรื่องของดีไซน์ สีสันต่างๆ ของ widget ที่เราแทรก

Advanced เป็นการตั้งค่าพิเศษ โดยจะมีคล้ายๆ กันคือพวก Padding, Margin ไว้สำหรับกำหนดระยะห่างต่างๆ Z-index อันนี้ช่วยให้เราตั้งค่า widget ของเราให้มีความเหลื่อมล้ำกันได้โดยไม่ต้องแตะโค้ดเลย การตั้งค่าเกี่ยวกับ Animation สำหรับใครที่ชอบให้มีอะไรเลื่อนไปเลื่อนมา Backgound พวกพื้นหลัง Border ขอบ Responsive การตั้งค่าว่าจะให้แสดงหรือไม่แสดงบนหน้าจอต่างๆ และ Custom CSS สำหรับคนที่รู้ css ก็สามารถที่จะปรับแต่งเพิ่มเติมได้ นับว่ายืดหยุ่นมากเลยทีเดียว

เมื่อทำการปรับแต่งจนพอใจแล้ว หากต้องการกลับไปที่หน้ารวม widget หรือหน้า ELEMENTS อีกรอบ ก็ให้คลิกที่ปุ่มในรูปนะคะ

Elementor Pro Widgets 20

เรายังสามารถที่จะดูแบบหน้าจอต่างขนาดกันได้ด้วยการคลิกที่ปุ่มรูปหน้าจอแล้วเลือกขนาดระหว่าง Desktop, Tablet หรือ Mobile ระบบก็จะพรีวิวในแบบต่างๆ ให้

Elementor Pro Widgets 21

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

Elementor Pro Widgets 22

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

Elementor Pro Widgets 23

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

Elementor Pro Widgets 24

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

Elementor Pro Widgets 25

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

Elementor Pro Widgets 26

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

Elementor Pro Widgets 27

หลังจากนั้นเวลาที่เราต้องการจะใช้เทมเพลตเดิม ก็เพียงคลิกที่ปุ่ม ADD TEMPLATE แล้วเลือกที่แท็บ My template แทนการเลือกเทมเพลตสำเร็จรูปจาก Predesigned Template ที่เขาได้สร้างไว้ให้ ก็จะเจอกับเทมเพลตที่เราสร้างไว้แล้วให้เลือก ​Insert มาใช้งานได้เลย

Elementor Pro Widgets 28

นอกจากนี้ยังสามารถที่จะ Export/Import template จากคนอื่นมาใช้ได้ คือการแบ่งปันกัน ซึ่งเทมเพลตที่เราสร้างไว้นี้สามารถไป Export ออกมาได้จากเมนู Elementor > My Library ใน Dashboard

Elementor Pro Widgets 29

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

Elementor Pro Widgets 30

การกลับไปยังหน้า Dashboard สามารถทำได้โดยการคลิกที่ปุ่มเมนูมุมบนซ้ายและคลิกที่ Back to Dashboard

Elementor Pro Widgets 31

Elementor Widgets

มาทำความรู้จักกับ Widgets ทั้งหมดของ Elementor กันดีกว่าว่ามีอะไรบ้าง จะได้นึกภาพออกว่าเราจะสร้างหน้าเว็บเพจแบบไหนได้บ้าง

Column

Elementor Pro Widgets 32

นอกจากการแบ่งคอลัมน์จากเซคชั่นปกติแล้ว เรายังมี Column widget ที่สามารถลากไปวางในคอลัมน์ได้อีกด้วย เรียกได้ว่าเป็น column ซ้อน column คอลัมน์เซปชั่นกันเลยทีเดียว โดยคอลัมน์ที่นำไปวางนี้จะมี Section ครอบไว้โดยอัตโนมัติ เท่ากับว่าเรามี section ซ้อนใน column และ column อยู่ใน section อีกที งงล่ะสิ

Elementor Pro Widgets 33

วิธีการนี้ทำให้เราสามารถที่จะสร้างคอลัมน์เนื้อหาที่ซับซ้อนแตกต่างกันได้ เช่นตัวอย่างด้านล่าง เราได้ทำการแบ่งเซคชั่นในตอนแรกเป็น 2 column คือซ้ายและขวา จากนั้นทำการลาก Column widget ไปใส่ในคอลัมน์ด้านซ้ายซึ่งมันจะมี Section ครอบอัตโนมัติ เราจึงสามารถที่จะทำการ Duplicate Section นั้นได้ แล้วทำการลบลอลัมน์ออกไปตัวนึง เพื่อให้ได้รูปแบบตามที่เราต้องการ ลองดูกันค่ะ

Elementor Pro Widgets 34
ลักษณะเลย์เอ้าท์ที่ต้องการ

Heading

Elementor Pro Widgets 35

ใส่ Heading ใช้สำหรับอันไหนที่เราต้องการเน้นหรือทำให้เป็นตัวหลัก เพราะมันจะเป็นแท็ก H1, H2,H3 แล้วแต่เราจะตั้ง​ ซึ่งมีผลกับ SEO ด้วยนะ สามารถแต่งสี เติมเงา ใส่ Animation ก็ได้เช่นกัน

Elementor Pro Widgets 36

Image

Elementor Pro Widgets 37

ใส่รูปภาพ สามารถกำหนดความโปร่งแสง ขนาด animation เงา กรอบ ได้หมด

Elementor Pro Widgets 38

Text Editor
Elementor Pro Widgets 39

สำหรับใส่ข้อความเป็นพารากราฟทั่วไป

Elementor Pro Widgets 40

Video

Elementor Pro Widgets 41

สำหรับใส่วิดีโอ สามารถตั้งค่าต่างๆ ของยูทูปได้ สามารถกำหนดภาพที่เราต้องการแทนวิดีโอและเล่นใน Lightbox (popup) ได้

Elementor Pro Widgets 42

Button

Elementor Pro Widgets 43

สร้างปุ่ม

Elementor Pro Widgets 44

Divider

Elementor Pro Widgets 45



ไม้กั้น แล้วแต่เราจะไปกั้นอะไร ปรับแต่งตามใจชอบค่ะ ใส่ animation ให้มันไหลเข้ามาก็สวยไปอีกแบบ ลองเล่นดู ยังนิยมอยู่

Elementor Pro Widgets 46

Spacer

Elementor Pro Widgets 47

ตัวนี้ไม่มีอะไรมาก เป็นแค่ไว้ใส่พื้นที่ว่างๆ เข้าไป เพื่อคั่นแต่ละ widget หากเราต้องการให้มันห่างกันแค่ไหนก็ตั้งค่าได้เลย

Elementor Pro Widgets 48

Google Maps

Elementor Pro Widgets 49

สำหรับใส่แผนที่ Google Maps

Elementor Pro Widgets 50

Icon

สำหรับใส่ Icon จะมีไอคอนของ FontAwesome ให้เลือก

Elementor Pro Widgets 51

General Element

อันนี้เวอร์ชั่นฟรีก็มีให้ใช้เช่นเดียวกัน เป็น widget ที่เหมาะสำหรับการนำมาใช้เขียนบทความทั่วไป

Image Box

Elementor Pro Widgets 52

เป็น widget ที่มากันเป็นเซ็ตคือทั้ง Image, Heading, Text Editor ให้เราแทรกภาพและเปลี่ยนข้อความได้เลย

Elementor Pro Widgets 53

Icon Box

Elementor Pro Widgets 54

คล้ายๆ Image Box แต่ตัวนี้จะมี Icon ให้เลือกแทน

Elementor Pro Widgets 55

Image Gallery

Elementor Pro Widgets 56

สำหรับการแทรกรูปภาพเป็นแกลลอรี่เหมือนของ WordPress เอง แต่เพราะใช้ Elementor ก็จะมี Lightbox และกำหนดพวก Animation ได้

Elementor Pro Widgets 57

Image Carousel

Elementor Pro Widgets 58

สำหรับสร้างตัวเลื่อนภาพ ประยุกต์ใช้กับพวกโลโก้ของแบรนด์ต่างๆ ก็ได้

Elementor Pro Widgets 59

Icon List

Elementor Pro Widgets 60

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

Elementor Pro Widgets 61
Elementor Pro Widgets 62

Counter

Elementor Pro Widgets 63

สำหรับแสดงเลขนับจำนวน โดยเลขนี้จะมี animation คือมันจะวิ่งจาก 0 ไปยังจำนวนที่เราตั้งไว้

Elementor Pro Widgets 64

Progress Bar

Elementor Pro Widgets 65

แสดงสถานะการทำงาน หรือบางคนอาจจะใช้เป็น Skill bar ก็ได้

Elementor Pro Widgets 66

Testimonial

Elementor Pro Widgets 67

แสดงคำชมจากลูกค้า

Elementor Pro Widgets 68
Elementor Pro Widgets 69

Tabs

Elementor Pro Widgets 70

แสดงข้อมูลหลายชุดที่เปิดปิดแบบ tab

Elementor Pro Widgets 71

Accordion

Elementor Pro Widgets 72

แสดงข้อมูลหลายชุดที่เปิดปิดแบบ accordion

Elementor Pro Widgets 73

Toggle

Elementor Pro Widgets 74

แสดงข้อมูลหลายชุดที่เปิดปิดแบบ toggle

Elementor Pro Widgets 75

Social Icon

Elementor Pro Widgets 76

แสดง social icon แล้วเราก็ใส่ลิงค์ได้ ตัวนี้มี social เยอะมากๆ

Elementor Pro Widgets 77

Alert

Elementor Pro Widgets 78

แสดงกล่อง alert ที่สามารถกดปิดได้

Elementor Pro Widgets 79

Soundcloud

Elementor Pro Widgets 80

แสดงเพลงจาก Soundcloud

Elementor Pro Widgets 81

Shortcode

สำหรับใส่ shortcode

Elementor Pro Widgets 82

HTML

Elementor Pro Widgets 83

สำหรับแทรกโค้ด HTML

Elementor Pro Widgets 84

Anchor

Elementor Pro Widgets 85

สำหรับใส่ id ทำลิงค์เชื่อมโยงมายังจุดที่มี id นี้อยู่ เพื่อลิงค์มายังจุดที่สร้าง anchor ไว้

Elementor Pro Widgets 86

Sidebar

Elementor Pro Widgets 87

แทรก sidebar ลงไปในบริเวณที่ไม่จำเป็นต้องเป็น sidebar ก็ได้ วิธีนี้ทำให้เราสามารถใช้ widget ตรงไหนก็ได้

Elementor Pro Widgets 88

 Pro Element

Widgets สำหรับเวอร์ชั่น Pro เท่านั้น

Posts

Elementor Pro Widgets 89

สำหรับดึงโพสมาแสดง สามารถแสดงแบบการ์ดได้ ดึงโพสปกติและ Custom Post Type ได้

Elementor Pro Widgets 90
Elementor Pro Widgets 91

Portfolio

คล้ายๆ กับ Posts แต่ดึงมาเฉพาะรูปภาพและจะเป็นลิงค์ไปเปิดหน้านั้นๆ แทน สามารถใช้กับธีมที่มี Post type แบบ Portfolio หรือจะดึง post type อื่นก็ได้

Elementor Pro Widgets 92

Slider

Elementor Pro Widgets 93

ใช้สำหรับใส่สไลด์ สามารถใส่ข้อความ ภาพพื้นหลัง ปุ่มกด กำหนด animation หลายอย่างค่ะ

Elementor Pro Widgets 94
Elementor Pro Widgets 95

Form

Elementor Pro Widgets 96

ใช้สำหรับสร้างฟอร์ม

Elementor Pro Widgets 97

Login

Elementor Pro Widgets 98

ใช้สำหรับใส่ฟอร์มล็อกอินโดยเฉพาะ สามารถปรับแต่งได้

Elementor Pro Widgets 99

Nav Menu

Elementor Pro Widgets 100

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

Elementor Pro Widgets 101
Elementor Pro Widgets 102

Animation Headline

Elementor Pro Widgets 103

เป็น heading แบบที่มี Animation เพื่อเพิ่มความโดดเด่นสะดุดตาสำหรับคำที่ต้องการเน้นเป็นพิเศษ มีตัวเลือก animation หลายแบบ

Elementor Pro Widgets 104
Elementor Pro Widgets 105

Price List

Elementor Pro Widgets 106

ใช้สำหรับทำป้ายราคาสินค้าและรายละเอียด เช่น เมนูอาหาร

Elementor Pro Widgets 107

Pricing Table

ใช้สำหรับทำตารางเปรียบเทียบราคา สำเทคนิคการปรับแต่งนั้นให้ลองอ่านจากโพสของ Elementor โพสนี้ดูค่ะ

Elementor Pro Widgets 108

Flip Box

สร้างกล่องข้อความแบบพลิกได้

Elementor Pro Widgets 109

Media Carousel

Elementor Pro Widgets 110

คล้ายๆ สไลด์แต่เป็นแบบรูปภาพหรือวิดีโอก็ได้มาเรียงต่อกันคลิกเลื่อนไปมาได้ มีเอฟเฟคและตั้งค่า Overlay ได้หลายแบบมากๆ


Testimonial Carousel

Elementor Pro Widgets 111

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

Elementor Pro Widgets 112

Countdown

Elementor Pro Widgets 113

สร้างตัวนับเวลาถอยหลัง

Elementor Pro Widgets 114

Share Buttons

สร้างปุ่มแชร์

Elementor Pro Widgets 115
Elementor Pro Widgets 116

Blockquote

กล่องคำพูดที่สามารถแชร์ไปยัง Twitter ได้

Elementor Pro Widgets 117
Elementor Pro Widgets 118

Facebook Buttons

ปุ่ม Like และ Share ของ Facebook

Elementor Pro Widgets 119

Facebook Comments

Elementor Pro Widgets 120

ใส่ Facebook Comments

Elementor Pro Widgets 121

Facebook Embed

Elementor Pro Widgets 122

แทรก Post, Comment, หรือ Video จาก Facebook ก็ได้

Elementor Pro Widgets 123
Elementor Pro Widgets 124

Facebook Page

Elementor Pro Widgets 125

แทรก Facebook Page โดยสามารถกำหนดให้แสดงเป็น Timeline, Message, หรือ Event ก็ได้

Elementor Pro Widgets 126

Template

Elementor Pro Widgets 127

แทรกเทมเพลตที่เราได้สร้างและบันทึกไว้


Page Builder Theme

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

Astra

เคลมว่าเป็นธีมที่เบาและเร็วสุดๆ ไม่ใช้ Jquery เลย และขนาดเล็กกว่า 50kb โหลดเร็วภายใน 0.5 วินาที ธีมนี้ได้รับคำชมจากนักพัฒนาปลั๊กอินเจ๋งๆ หลายตัวของ WordPress และเจ้าตัวเองก็ทำปลั๊กอินที่ประสบความสำเร็จหลายตัวเช่นกัน มีทั้งเวอร์ชั่นฟรีและเสียเงิน

Elementor Pro Widgets 128

Download

OceanWP

เป็นอีกธีมที่เราเคยใช้และก็ชอบหน้าตามากๆ มีทั้งเวอร์ชั่นฟรีและ Pro เช่นกัน ตัว Pro นั้นจะเป็น Core Extention Bundle ที่นอกจากจะปลดล็อกลิมิตของตัวฟรีแล้ว ยังมี widget ของ Elementor อีกหลายตัวที่น่าใช้ ซึ่งบางทีเราไม่จำเป็นต้องซื้อตัว Elementor Pro ก็ได้ อย่างเช่นตัว Posts widgets นั้นเขาก็มีมาให้ด้วย เป็นอีกทางเลือกนึง แต่ก็อย่างว่า ตัว Elementor Pro นั้นก็ออกฟังชั่นเสริมมายั่วยวนอยู่ตลอด ใครพอแค่ไหนก็แค่นั้นค่ะ เงินเรา ตัว OceanWP นี่เราไม่ต้องซื้อเป็นตัว Core Extention Bundle ก็ได้นะ ซื้อแยกเฉพาะฟีเจอร์ที่เราต้องการก็ได้ แต่ราคาก็ไม่ได้ต่างกันมาก ทำมาเพื่อให้เราตัดสินใจซื้อตัว Core Extention Bundle ง่ายขึ้นมากกว่า 555

Elementor Pro Widgets 129

Download

GeneratePress

เจ้านี้เห็นมานาน ค่อนข้างเป็นที่นิยมเรื่องความเรียบง่ายและเบาเหมือนกัน แต่ก่อนจะนิยมใช้กับคนที่ใช้ Beaver Builder เพราะตัวธีมของ Beaver Builder นั้นค่อนข้างแพง พอมี Elementor ขึ้นมา ธีมนี้จึงได้รับความนิยมมากขึ้นเป็นพิเศษ ด้วยคุณสมบัติที่นอกจากความเบาแล้ว ยังสามารถปรับแต่งได้หลากหลายมากๆ จะเปิดปิด แทรกเพิ่มตรงไหนได้หมด เหมาะกับนักพัฒนาเอาไปทำต่อมากเช่นกัน GeneratePress มีทั้งฟรีและ Premium ตัว GP Premium นี่แหละที่ปรับแต่งได้เยอะมากๆ

Elementor Pro Widgets 130

Download

Elementor Add-on

ปลั๊กอินเสริมนอกค่ายที่น่าสนใจสำหรับ Elementor มีหลายตัว แม้แต่ใน WordPress เองที่เป็น addon ฟรีก็มีคนทำไว้เยอะมาก เพียงแค่เสริช Elementor ในเมนู Plugins ก็จะมี addon ต่างๆ แสดงมาเยอะแล้ว ทีนี้ลองดูปลั๊กอินที่คนนิยมใช้กันบ้าง

AnyWhere Elementor

ปลั๊กอินนี้เป็นปลั๊กอินที่เจ๋งมาก โดยปกติถ้าเราเขียนธีมเองไม่เป็น การที่จะสร้างเทมเพลตเพื่อดึงเอาข้อมูลพวกต่างๆ มาประกอบเป็นหน้าเว็บแบบอัตโนมัตินั้นแทบจะเป็นไปไม่ได้เลย เช่น หน้า Single post จะต้องมี Title, Content, Meta, Author, Categories, Tags และอีกหลายอย่าง หากเราใช้ Elementor อย่างเดียวก็อาจจะรำคาญกับการต้องมานั่งแก้ไขทีละหน้า หรือหากทำเว็บให้ลูกค้า การที่จะให้ลูกค้ามาแก้ไขเทมเพลตทีละหน้ายิ่งเป็นเรื่องที่ไม่สมควร หรือถ้าเราเขียนธีมเอง เวลาอยากเปลี่ยนดีไซน์ก็ต้องมานั่งแก้ใหม่ ปลั๊กอินนี้จึงเป็นปลั๊กอินที่มาตอบโจทย์ตรงนี้ (แว่วๆ ว่ากำลังพัฒนา) สามารถทำงานกับ Custom Post Type ได้ เป็นการอุดช่องว่างที่ Elementor ยังไม่สามารถทำได้ในปัจจุบัน จะเป็นตัวที่คล้ายๆ กับ Themer ของ Beaver Builder ที่นักพัฒนาชอบใช้กันค่ะ เพราะมันยืดหยุ่นในจดนี้นั่นเอง ถึงจะเป็น Dev แต่นานๆ ไปก็ขี้เกียจนะ ถ้าเครื่องมือมันจะช่วยซะขนาดนี้ ปลั๊กอินนี้มีเวอร์ชั่นฟรีด้วย ยังไงก็ลองโหลดทดลองกันดู

Elementor Pro Widgets 131

Elementor Extra

เนื่องจากปลั๊กอิน Elementor นั้นเปิดให้นักพัฒนาทั่วไปพัฒนาส่วนเสริมต่างๆ ได้ อังนั้นนี่ก็เป็นอีกหนึ่งนักพัฒนาที่เขาทำ Widgets เสริมพิเศษสำหรับ Elementor ให้มีลูกเล่นหลากหลายขึ้น และมีเติมเรื่อยๆ

Elementor Pro Widgets 132

JetBlock

ปลั๊กอินนี้คือเจ๋ง เป็นปลั๊กอินที่สร้าง Post widget แนว Magazine ที่สวยมากๆ ไม่ซ้ำซากจำเจ สามารถใช้กับพวกเว็บข่าวได้เลย

Elementor Pro Widgets 133

PopBox for Elementor

ตัวนี้ฟรี โหลดจากหลังบ้านได้เลย ใช้สร้าง Popup ง่ายๆ

Addons for Elementor 

มีทั้งฟรีและ Pro เพิ่ม Widget มาให้เล่นหลายตัวเลย คือถ้าเราไม่ใช้ Elementor Pro ก็ได้นะ แต่เราอาจจะต้องหาปลั๊กอินฟรีมาเสริมหลายตัวหน่อย 555

Header Footer Elementor

ปลั๊กอินที่ไว้ใช้สำหรับสร้าง Header และ Footer เพื่อที่จะสามารถนำมาใช้กับหน้าแต่ละหน้าได้ โดยเฉพาะในกรณีที่เราใช้ Elementor Canvas เพื่อสร้างออกแบบหน้าเว็บขึ้นเองจากหน้าโล่งๆ เราก็อาจจะต้องการเพิ่ม Header ด้านบน และ Footer ด้านล่างที่ออกแบบไว้แล้วโดยอัตโนมัติ

ปลั๊กอินนี้สนับสนุนเฉพาะธีม Astra, OceanWP, GeneratePress, Genesis, Beaver Builder Theme เท่านั้น ซึ่งธีมพวกนี้เป็นธีมที่สร้างมาแบบเบาๆ โล่งๆ เพื่อใช้กับ Page Builder โดยเฉพาะ

Elementor Pro Widgets
บทสรุป
เนื่องจากเตยทำเว็บที่เน้นไปทางบทความหรือเป็น Knowleage เสียส่วนใหญ่ จึงพยายามที่จะหลีกเลี่ยงที่จะใช้ Page Builder อยู่เสมอ เพราะเราไม่อยากที่จะพึ่งพาดีไซน์จากปลั๊กอินเสริมมากเกินไป เพราะอย่างที่รู้ว่าปลั๊กอิน WordPress นั้นต้องทำการอัพเดตอยู่เรื่อยๆ และแต่ละครั้งก็สามารถที่จะเกิดอาการตีกันได้เสมอ ดังนั้นเตยจึงจะใช้ Page Builder กับหน้าที่เป็น Landing Page เท่านั้น กระนั้นก็ตาม Elementor ก็ยังเป็นปลั๊กอินที่ยั่วยวนชวนให้ใช้อยู่ตลอดเวลา เพราะลูกเล่นต่างๆ ที่พัฒนาเพิ่มเติมเข้ามาเสมอ มีการอัพเดตอย่างต่อเนื่องบ่อยมากๆ และยังเป็นปลั๊กอินที่ค่อนข้างเร็วถ้าเทียบกับ Premium ตัวอื่นๆ หน้าตาที่ตอนแรกดูจืดๆ กลับทำให้เรารู้สึกว่าทำให้เข้าใจและใช้งานได้ง่าย เราจึงไม่แปลกใจที่ Elementor ได้รับความนิยมอย่างรวดเร็วทั้งจากหน้าใหม่และหน้าเก่าที่ย้ายมาจากปลั๊กอินตัวอื่นๆ ความคาดหวังในอนาคตก็คือการสนับสนุนในเรื่องของการสร้างเทมเพลตอัตโนมัติเพื่อใช้ในธีม เช่น หน้า Single post, Archive หรือ Custom Post Type ก็จะสมบูรณ์มากยิ่งขึ้น ซึ่งเราก็รอดูว่า Elementor จะทำออกมาในรูปแบบไหน จะรวมในตัวเดียวหรือทำเป็นปลั๊กอินเสริมแยกอีกตัวเหมือน Beaver Builder Themer ที่ค่อนข้างยืดหยุ่นดีมากเลยทีเดียว
Design Quality
Customizability
Feature Availability
Easy to use
Flexibility
ข้อดี
เบา
ใช้งานง่าย
ไม่ทิ้ง Shortcode เมื่อไม่ใช้งาน
มีปลั๊กอินอื่นๆ เสริมเยอะมาก
พัฒนาอัพเดตบ่อยมาก
มีเทมเพลตสำเร็จรูปเยอะ และสามารถสร้างเองพร้อมทั้ง Export/Import ได้
ลูกเล่นและการปรับแต่งเยอะแยะยืดหยุ่นมาก
ข้อเสีย
ยังไม่สามารถสร้าง Dynamic template เองได้ ต้องสร้างทีละหน้าๆ ไป
4.5
คะแนน