คู่มือการใช้งานแก้ไขหน้า Page ด้วย Elementor WordPress วิธีใช้ง่ายๆ

คู่มือการใช้งานแก้ไขหน้า Page ด้วย Elementor WordPress วิธีใช้ง่ายๆ

1. อันดับแรก ไปยังเมนู Page เพื่อเลือกหน้า page ที่ต้องการแก้ไข

1. อันดับแรก ไปยังเมนู Page เพื่อเลือกหน้า page ที่ต้องการแก้ไข

2. จากนั้นให้คลิกไปที่ Edit with elementor เพื่อแก้ไขหรือใช้งาน Elementor Page Builder

2. จากนั้นให้คลิกไปที่ Edit with elementor เพื่อแก้ไขหรือใช้งาน Elementor Page Builder

3. เมื่อคลิกเข้าไปแล้วจะเข้ามายังหน้า Builder ของ ซึ่งจะถูกแบ่งเป็น 2 ฝั่งหลักๆ ฝั่งขวามือจะเป็นส่วนแสดงผลของแต่ละ widget ที่เลือกใช้ ส่วนซ้ายมือจะเป็นรายการ widget ทั้งหมดที่เราสามารถใช้งานได้ใน elementor

3. เมื่อคลิกเข้าไปแล้วจะเข้ามายังหน้า Builder ของ ซึ่งจะถูกแบ่งเป็น 2 ฝั่งหลักๆ ฝั่งขวามือจะเป็นส่วนแสดงผลของแต่ละ widget ที่เลือกใช้ ส่วนซ้ายมือจะเป็นรายการ widget ทั้งหมดที่เราสามารถใช้งานได้ใน elementor

1. Elementor WordPress วิธีใช้ Section

1. ปุ่ม + ที่อยู่ฝั่งขวามือนั้น เป็นปุ่มเพื่อกดให้เพิ่ม section หรือก็คือที่รู้จักในชื่อว่า Row นั่นเอง

1. ปุ่ม + ที่อยู่ฝั่งขวามือนั้น เป็นปุ่มเพื่อกดให้เพิ่ม section หรือก็คือที่รู้จักในชื่อว่า Row นั่นเอง

2. เมื่อเรากดปุ่ม + ไปแล้วก็จะสามารถเลือก layout ที่ต้องการ

เมื่อเรากดปุ่ม + ไปแล้วก็จะสามารถเลือก layout ที่ต้องการ

3. เมื่อเลือก layout ที่ต้องการได้แล้วนั้น สังเกตฝั่งซ้ายมือจะขึ้นเป็น panel ในการตั้งค่า ซึ่งส่วนนี้จะไม่ได้มีแค่ section เท่านั้นในแต่ละ widget ก็จะมี panel ในการแก้ไขแบบเดียวกันแบบนี้เลยในแต่ละ widget แต่จะแตกต่างกันที่ tabs แรก ถ้าเป็น section จะมีแท็บ Layout แต่ถ้าหาเป็น widget ก็จะเป็นแท็บ Content

เมื่อเลือก layout ที่ต้องการได้แล้วนั้น สังเกตฝั่งซ้ายมือจะขึ้นเป็น panel ในการตั้งค่า ซึ่งส่วนนี้จะไม่ได้มีแค่ section เท่านั้นในแต่ละ widget ก็จะมี panel ในการแก้ไขแบบเดียวกันแบบนี้เลยในแต่ละ widget แต่จะแตกต่างกันที่ tabs แรก ถ้าเป็น section จะมีแท็บ Layout แต่ถ้าหาเป็น widget ก็จะเป็นแท็บ Content

4. แท็บแรกก็จะมีวิธีการตั้งค่าหรือการแก้ไขแตกต่างกันไปตาม widget หรือ section นั้นโดยรายละเอียดการทำงานก็อาจต้องพึ่งการใช้งานของเราเข้าช่วยเพื่อให้กระจ่างมากขึ้น

เมื่อเลือก layout ที่ต้องการได้แล้วนั้น สังเกตฝั่งซ้ายมือจะขึ้นเป็น panel ในการตั้งค่า ซึ่งส่วนนี้จะไม่ได้มีแค่ section เท่านั้นในแต่ละ widget ก็จะมี panel ในการแก้ไขแบบเดียวกันแบบนี้เลยในแต่ละ widget แต่จะแตกต่างกันที่ tabs แรก ถ้าเป็น section จะมีแท็บ Layout แต่ถ้าหาเป็น widget ก็จะเป็นแท็บ Content

5. ส่วนรายละเอียดของแท็บที่ 2 นั้นหากเป็น section, row และ column นั้นจะมีการตั้งค่าเรื่องของ background ทั้ง background image และ background color รวมถึงลักษณะของต่างๆ ของ section, row หรือ column นั้นๆ ทั้งเรื่องของความโค้ง,สี และกรอบเป็นต้น ส่วนหากว่าเป็น widget นั้นจะเป็นลักษณะพิเศษของ widget นั้นเช่นหาเป็น widget text ก็จะมีการตั้งค่าขนาดตัวอักษรหรือหาเป็น widget image ก็มีเรื่องของขนาดความกว้างความยาวของรูปภาพมีเกี่ยวข้องแตกต่างกันไป

6. แท็บที่ 3 ส่วนนี้จะเป็นรายละเอียดที่เหมือนๆ กันทั้ง section หรือ widget คือส่วนของการตั้งค่าขั้นสูงโดยแบ่ง 3 ส่วนหลักๆ คือ Advanced, Motion Effect และ Responsive

เมื่อเลือก layout ที่ต้องการได้แล้วนั้น สังเกตฝั่งซ้ายมือจะขึ้นเป็น panel ในการตั้งค่า ซึ่งส่วนนี้จะไม่ได้มีแค่ section เท่านั้นในแต่ละ widget ก็จะมี panel ในการแก้ไขแบบเดียวกันแบบนี้เลยในแต่ละ widget แต่จะแตกต่างกันที่ tabs แรก ถ้าเป็น section จะมีแท็บ Layout แต่ถ้าหาเป็น widget ก็จะเป็นแท็บ Content

6.1 Advanced จะเป็นส่วนของการตั้งค่าในเรื่องของระยะขอบของ section หรือ widget นั้นในแต่ละฝั่งโดยที่ padding นั้นจะหมายถึงการเพิ่มระยะขอบจากในกรอบส่วน margin นั้นจะเป็นการเพิ่มระยะขอบจากนอกกรอบ โดยที่การตั้งค่าส่วนนี้สามารถแยกการตั้งค่าเป็น 3 ขนาดจอด้วยกันคือ Desktop, Tablet และ Mobile สามารถเลือกสลับการตั้งค่าได้เลย

6.2 Motion Effect แปลตรงตัวก็คือ เอฟเฟกต์การเคลื่อนไหว สามารถเลือกและดูการเคลื่อนไหวฝั่งขวามือได้เลยทันที ง่ายต่อการเลือก เอฟเฟกต์การเลื่อนไหวตามความเหมาะสมของเว็บไซต์

6.3 Responsive เป็นรายละเอียดการแสดงผลว่าเราต้องการแสดงผลแบบไหนในขนาดจอที่แตกต่างหรือเราจะเลือกซ่อนหรือแสดงในบางขนาดจอเป็นต้น

2. Elementor WordPress วิธีใช้ Widget

ส่วนมากแล้วการทำงานของเว็บไซต์ไม่ว่าจะเป็นเว็บไซต์ที่มีขนาดเล็กหรือแม้กระทั่งเว็บไซต์ที่มีขนาดใหญ่ระดับองค์กรขนาดใหญ่ก็ตาม จะมีการวนเวียนของ widget เหล่านี้เป็นหลักคือ Text, Heading, Image , Video, Gallery , Button ซึ่งก็เป็น widget ที่เหมาะแก่การเรียนรู้ของลูกค้าอย่างมากเพราะเป็นส่วนที่มีการแก้ไขหรือการอัพเดทอยู่ตลอดเวลา

2.1 Widget Text

Text หรือ ข้อความเป็น widget ในการเพิ่มข้อความหรือคำอธิบายต่างๆ โดยที่การใช้งานเบื้องต้นก็จะคล้ายๆ กับการใช้งาน Microsoft Word

2.2 Widget Heading

Heading หรือ หัวข้อ เป็น widget ที่ใช้ในการทำหัวข้อต่างๆ ของแต่ละ section หรือจะเป็นหัวข้อของแต่ละส่วนหรือ inner section

2.3 Widget Image

Image หรือ รูปภาพ เป็น widget ในการใส่รูปภาพเข้าไปโดยสามารถใช้รูปที่มีอยู่แล้วในคลังสื่อของเราหรือจะเป็นรูปใหม่ที่พึ่งจะอัพโหลดขึ้นไปใหม่ก็ได้

2.4 Widget Video

Video หรือ วิดีโอ เป็น widget ในการแสดงวิดีโอบนหน้าเพจ อาจเป็นวิดีโอที่มีอยู่แล้วในคลังสื่อหรืออาจเป็นวิดีโอจากแหล่งที่มาอื่นๆ เช่น youtube หรือ vimeo ก็เอามาใช้ได้

2.5 Widget Gallery

Gallery หรือ อัลบั้มภาพจะเป็น widget ที่ใช้ในการแสดงรูปภาพเป็นชุดและเป็นกลุ่มก้อนเดียวกันเหมาะในการใช้งานกับรูปภาพกิจกรรมหรือรูปภาพรีวิวจากลูกค้าเป็นต้น

2.6 Widget Button

Button หรือ ปุ่ม เป็น widget ในการเพิ่มปุ่มการนำทางสามารถกำหนดให้ปุ่มนำทางไปยังลิงค์ภายในหน้าเดียวกัน, เว็บเดียวกัน และ เว็บอื่นๆ ได้

3. Other

การใช้งาน Elementor นั้นง่ายเพียงลากวางหากต้องการย้ายตำแหน่งไปจากอีกที่ไปยังอีกที่ก็แค่คลิกไปที่ widget หรือ section ที่ต้องการแก้ไขหนึ่งครั้งแล้วสามารถลากไปยังตำแหน่งใหม่ที่ต้องการได้เลย หรือหากต้องการลบ section หรือ widget ออกไปก็แค่กดไปที่ x หนึ่งครั้ง section หรือ widget นั้นๆก็หายไปทันที แต่หากว่ามือเผลอไปกดโดยที่ไม่ได้ตั้งใจก็สามารถกดปุ่ม Ctrl + Z เพื่อ Undo การทำงานได้เรื่อยๆครับไม่ต้องห่วง