บทเรียนทั้งหมด
Purchase

WP Grid Builder  มีส่วนให้ใช้สำหรับ Oxygen Builder แล้ว !
เพิ่ม 2 Elements ใหม่ได้แก่ : Grid & Facet

wp grid builder

Facet Elements จะทำงานร่วมกับ Easy Posts, Repeater และ Product Lists (Woocommerce)

ไม่ใช่แค่เราสามารถเพิ่ม Filters Search จาก WP Grid Builder ให้กับ Elements พวกนี้ได้เพียงอย่างเดียว เรายังสามารถจัดรูปแบบ Filter Search ได้โดยตรงด้วย Oxygen Builder :

เคล็ดลับที่ 1

ถ้าคุณเพิ่ม Grid ใน Section Element หรือ Div Element ให้กำหนดความกว้างไว้ 100% ทุกครั้ง

width 100 in elements

เคล็ดลับที่ 2

เมื่อคุณเพิ่ม Easy Posts ( หรือ Repeater ) แล้วจะเห็นแท็บการตั้งค่าแบบนี้

easy posts and repeater

ถ้าเราเพิ่ม Facet Element แล้ว หลังจากนั้นให้เชื่อมโยงไปหา Easy Posts ( หรือ Repeater ) แล้วแท็บ WP Grid Builder จะถูกเพิ่มเข้ามา :

easy posts 2

แล้วจะเห็น 2 ตัวเลือกในการตั้งค่า

oxygen setting

เปิดใช้งาน Hide Pagination ถ้าเราเพิ่ม "Load More" ใน Grid ของเรา
เปิดใช้งาน Fading Animation ถ้าคุณต้องการให้มี Fade Effect เมื่อเราคลิกบน Filter

หมายเหตุเกี่ยวกับแอนิเมชั่น

โค้ดสำหรับแอนิเมชั่นแบบกำหนดเองที่ด้านล่าง สามารถใช้งานได้กับวิธีนี้

เคล็ดลับที่ 3

นั่นไม่ใช่ "Loading Spinner" ที่เราสร้าง Grid บน EasyPosts หรือ Repeater ขึ้นมาเพียงอย่างเดียว แต่เราสามารถแก้ไข หรือสร้างมันขึ้นมาเองได้ด้วย
นี่คือตัวอย่างง่าย ๆ ในการเขียน CSS :

.wpgb-enabled.wpgb-loading {
    position: relative;
}

.wpgb-enabled.wpgb-loading:after {
    content: "⏳";
    font-size: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


นี่คงเป็นบทความที่ดีในการใช้ WP Grid Builder ตอนนี้เราก็จะมีเครื่องมือให้ใช้ บน Easy Posts หรือ Repeater บน Oxygen Builder แล้ว.

รวมบทความเทคนิคการใช้งาน Oxygen Builder สำหรับคนไทย เว็บที่ดี ต้องคู่ควรกับเครื่องมือที่ดี
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram