Elementor คือ Plugin ประเภท Page Builder ที่ใช้ในการจัด Layout หน้า Page หรือ Post (โดยมากนิยมใช้กับ Page มากกว่า) ซึ่ง Elementor เป็นหนึ่งใน Plugin ประเภท Page Builder ได้รับความนิยมมากที่สุดตัวนึงของ WordPress เนื่องจากความง่ายในการใช้งาน โดยการสร้างหน้าเว็บสามารถทำได้ง่ายแค่ลากและวาง แบ่งส่วนเนื้อหาของเว็บออกเป็น Section และใช้ Columns ในการจัดวาง Widget ต่างๆ
จากเดิมที่เป็นเพียง Page Builder แต่ว่าตั้งแต่ Elementor เวอร์ชั่น 3 เป็นต้นมา Elementor ได้พัฒนาขึ้นมาเป็น WordPress Website Builder สามารถสร้าง Header, Footer, สร้างชุดสี, เพิ่มชุดตัวอักษร การเพิ่ม Custom Icons (เวอร์ชั่น Pro) , การใส่ Custom Code (เวอร์ชั่น Pro) เช่น Google Analytics, Facebook Pixel code, จัดโครงสร้างของ Post, Page ได้จาก Elementor เอง
Elementer Free และ Pro ต่างกันอย่างไร?
Elementer Free กับ Pro ด้านพื้นฐานการใช้งานจะไม่ต่างกัน สิ่งที่ต่างก็คือตัว Pro จะมีการเพิ่ม Widgets ขึ้นมาซึ่งจะช่วยยกระดับในการออกแบบเว็บไซต์ นอกจากนี้เวอร์ชั่น Pro ยังมีส่วนที่เรียกว่า Theme Elements ซึ่งใช้ในการสร้างรูปแบบหน้าและส่วนต่างๆของเว็บไซต์ เช่น ส่วน Header, Footer หน้า Single Page, Post และในเวอร์ชั่น Pro ยังมี WooCommerce Widgets สำหรับสร้างเว็บขายของออนไลน์มาให้อีกด้วย
Elementor เวอร์ชั่น Free
Basic Widgets – 30 Widgets พื้นฐานที่จำเป็นในการสร้างเว็บไซต์
Elementer เวอร์ชั่น Pro
Pro Widgets – 29 Widgets ที่ช่วยยกระดับในการออกแบบเว็บไซต์
Theme Elements – ใช้สร้างและปรับแต่งธีม สามารถสร้าง Headers, Footers, 404 Page หน้า Single Page, Post และอื่นๆ โดยส่วนนี้เอาไว้ใช้กับ Hello Elementor Theme เป็นธีมฟรีที่ออกแบบโดย Elementor โดยตรง ซึ่งแน่นอนว่าเข้ากันได้กับ Elementor Page Builder ได้อย่างสมบูรณ์และน้ำหนักเบา
WooCommerce Widgets – 19 Widgets สำหรับออกแบบและปรับแต่งหน้าเว็บไซต์จาก Plugin WooCommerce เพื่อประสบการณ์การช็อปปิ้งออนไลน์ที่สมบูรณ์แบบ
เริ่มเข้าสู่การสร้างหน้า Page หรือ Post ด้วย Elementor
ในที่นี้จะขอแนะนำการสร้าง Page เพราะโดยปกติแล้วจะใช้ Elementor ในการสร้างหน้า Page มากกว่าสร้าง Post โดยใน EP1 นี้จะขอแนะนำภาพรวมของ Plugin ส่วนต่างๆของหน้า Edit with Elementor ส่วนการใช้งาน Widget นั้นจะขอแนะนำใน EP ถัดๆไป
หลังบ้านเลือกที่เมนู Pages -> Add New เพื่อสร้างหน้า Page
ที่ช่อง Add title ใส่ชื่อ title ที่ต้องการ ในที่นี้จะเป็นชื่อที่ใช้เป็น url เช่น www.yourname.com/page title ดังนั้นควรใช้เป็นภาษาอังกฤษ ต่อมาตรง Template ที่เมนูด้านขวาให้เลือกเป็น Elementor Full Width เพื่อให้มี Page มีขนาดเต็มหน้าจอและไม่มีส่วน Sidebar จากนั้นคลิกที่ปุ่ม Edit with Elementor เพื่อเข้าสู่หน้าของ Page Builder Elementor
ก็จะเข้าสู่หน้าของ Page Builder Elementor จะสังเกตว่ามี Header, Footer มาให้เลย ซึ่งถ้าเราต้องการทำหน้า Page ที่ไม่ต้องการให้ส่วนของ Header, Footer ปรากฏ เช่น Landing Page หรือหน้าโปรโมทอื่น ตอนเลือก Template ที่เมนูด้านขวาให้เลือกเป็น Elementor Canvas
แถบเครื่องมือทางด้านซ้ายจะเป็น Widget ทั้งหมดที่สามารถใช้ได้ ให้สังเกตกลุ่มที่เขียนว่า Basic จะเป็น Widget ที่มาพร้อม Elementor Free ส่วนกลุ่มที่เขียนว่า Pro จะเป็น Widget ที่มาพร้อม Elementor Pro
ด้านบนสุดของเครื่องมือทางด้านซ้ายที่มีคำว่า Elementor นั้น หมายเลข 1. icon ทางซ้ายที่เป็นรูปเส้น 5 เส้น จะเป็นปุ่มสำหรับเข้า Site Setting สำหรับใช้กำหนดรูปแบบของเว็บไซต์ เช่นสี ตัวอักษร ปุ่มต่างๆ เพื่อเวลาที่เราใช้งาน Widget ต่างๆจะได้ไม่ต้องมากำหนดค่าเหล่านี้ซ้ำๆ อีก
ส่วนหมายเลข 2 ที่เป็นไอคอนรูปสี่เหลี่ยมเล็กๆ ปุ่มนี้เป็นปุ่มที่ไม่ว่าจะเข้าไปตั้งค่าที่ไหน ก็กดเพื่อกลับมาที่หนัา Widget
ด้านล่างสุดของเครื่องมือทางด้านซ้ายจะมีปุ่มไอคอนอยู่ 6 ปุ่ม ทำหน้าที่ต่างๆดังนี้
1. Settings – เป็นการตั้งค่า Page Setting สามารถใส่ชื่อ Page, Featured Image รวมถึงกำหนด Page Layout ได้ ซึ่ง Page Layout นี่จะเป็นการตั้งค่าเดียวกับ Template ก่อนที่จะกดที่ Edit with Elementor
2. Navigator – เมื่อกดจะมี กล่อง Navigator ขึ้นมา จะแสดงว่าหน้านั้นๆมีอะไรอยู่บ้าง ทั้ง Section, Column, Widget ซึ่ง กล่อง Navigator นี่เองยังมีประโยชน์ในการใช้กดเพื่อไปที่ Section, Column หรือ Widget ที่บางทีถ้าเรามีการกำหนด Margin, Padding แล้ว Section หรือ Column ไปซ้อนกันอยู่ อาจจะทำให้กดเข้าไปที่ส่วนนั้นๆโดยตรงได้ไม่ถนัดนัก การกดจากกล่อง Navigator ก็จะทำได้ง่ายกว่า
3. History – จะเป็นส่วนที่แสดงสิ่งที่เราสร้างและแก้ไขหน้า Page Builder Elementor ทั้งหมด ซึ่งตรงนี้ถ้ามีการแก้ไขอะไรที่ผิดพลาดเราสามารถกดย้อยขั้นตอนจากตรงนี้ได้
4. Responsive Mode – ส่วนนี้กดเพื่อแสดงตัวอย่างหน้าเว็บในขนาดต่างๆ โดยจะมีแถบไอคอนขึ้นมาที่ด้านบนของหน้าจอ สามารถกดเลือกได้จากไอคอน Desktop Tablet Mobile หรือจะใส่เป็นตัวเลขพิกเซล Width x Height ก็ได้
5. Preview Changes – กดเพื่อแสดงหน้าดังกล่าวบนเว็บจริงจากเซฟล่าสุด
6. Update – กดเพื่อบันทึกการสร้างหรือแก้ไขหน้าดังกล่าว
EP1 นี้จะเป็นการแนะนำเบื้องต้นเกี่ยวกับ Plugin Page Builder Elementor ส่วนใน EP ต่อไปจะเป็นการแนะนำการใช้ Widget ต่างๆในการสร้างหน้า Page
