סידור עמודות רספונסיבי באלמנטור

מי שבונה אתר עם אלמנטור מכיר כנראה את האפשרות לבחור במובייל את האופציה של "היפוך עמודות". כלומר אם היו שתי עמודות A ו B ובדסקטופ A הוצגה ראשונה ואז B, נוכל להפוך את הסדר במובייל.

במקרה של שתי עמודות זה בהחלט מספיק אבל מה קורה אם יש שלוש עמודות ויותר ונרצה לא להפוך אלא לקבוע סדר מדויק של היכן תופיע כל עמודה במובייל?

זהו צורך בסיסי בעיצוב למובייל ויש כל מיני תוספים לאמנטור שמאפשרים את זה אבל באלמנטור זה לא קיים.

באחד השיטוטים שלי ב- GitHub של אלמנטור ראיתי את קטע הקוד הבא שיסגור לכם את הפינה 🙂

function add_responsive_column_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order',
                          'bleye-elementor-extras' ),
			'type' => \Elementor\Controls_Manager::NUMBER,
			'separator' => 'before',
			'selectors' => [
				'{{WRAPPER}}' => 
              '-webkit-order: {{VALUE}}; 
              -ms-flex-order: {{VALUE}}; 
              order: {{VALUE}};',
			],
		]
	);
}
add_action( 'elementor/element/column/layout/before_section_end',
           'add_responsive_column_order', 10, 2 );

והנה התוצאה. באלמנטור תחת הגדרות פריסה של עמודה נוספה לך אפשרות לבחור את מספר העמודה.

Responsive column order
Responsive column order
0 0 דרג
דרג את הפוסט
הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הסניפטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx