הירשמו לקבלת עדכונים

הזינו את המייל שלכם
וקבלו עדכונים חודשיים לתיבת הדואר שלכם

Text Effect

אפקטים מגניבים לפונטים ב-CSS בלבד

במדריך הבא אשתף אתכם בכמה אפקטים מגניבים שאפשר לעשות לפונטים באמצעות CSS בלבד, יאלה מתחילים! אפקט גרדיאנט גרדיאנט selector { color: mix(#fff, #e91e63, 85%); font-size:

עיצוב כפתור העלאת קובץ בטפסי אלמנטור

עיצוב כפתור העלאת קובץ בטפסי אלמנטור
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

שדה ההעלאה פופולרי מאוד באתרים רבים להעלאת קבצים ע”י המשתמשים כמו קורות חיים, מסמכים, תמונות ועוד.
הקוד הבא יהפוך את שדה ההעלאה לכפתור העלאה אטרקטיבי יותר כולל אייקון:

הדביקו את שלושת הקודים הבאים אחד אחרי השני בתוך קובץ functions.php בתבנית הבת שלכם.

תוכלו לשנות את הצבעים כרצונם באיזור ה <style>, ואל תשכחו להפעיל את האפשרות של תמיכה ב-Font Awesome 4 במסך ההגדרות של וורדפרס.

add_action( 'wp_head', function (){
    ?>

מיד לאחר מכן נוסיף את השורה הבאה:

<?php
});

ומיד אחריה את הקוד הבא:

add_filter( 'elementor_pro/forms/render/item/upload', function ( $item, $item_index, $form ) {
    $item['field_type'] = 'file';

    return $item;
}, 10, 3 );

add_action( 'elementor_pro/forms/render_field/file', function ( $item, $item_index, $form ) {

   /**
    * Uncomment this if you really want the upload icon on the field.
     * Better best practice is to replace font-awesome part with SVG
    */
   // wp_enqueue_style( 'font-awesome' );

   $form->add_render_attribute( 'input' . $item_index, 'class', 'file-input elementor-upload-field' );
   $form->add_render_attribute( 'input' . $item_index, 'type', 'file', true );

   if ( ! empty( $item['allow_multiple_upload'] ) ) {
      $form->add_render_attribute( 'input' . $item_index, 'multiple', 'multiple' );
      $form->add_render_attribute( 'input' . $item_index, 'name', $form->get_attribute_name( $item ) . '[]', true );
   }

   if ( ! empty( $item['file_sizes'] ) ) {
      $form->add_render_attribute(
         'input' . $item_index,
         [
            'data-maxsize' => $item['file_sizes'],
            'data-maxsize-message' => __( 'This file exceeds the maximum allowed size.', 'elementor-pro' ),
         ]
      );
   }

   echo '<input ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>';
   echo '';

}, 10, 3 );

שימו לב – Post SMTP built-in email logger תומך בצורה מושלמת בטפסים של אלמנטור.

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

מפתח וורדפרס עם ניסיון של חמש שנים בפיתוח תוספים ותבניות לוורדפרס. היה לי העונג לעבוד מפרוייקטים קטנים עד לפרוייקטים גדולים לחברות הגדולות במשק. . מפתח התוספים Postman SMTP ו-Metrics Query.

מדריכים באותו נושא:

בואו נדבר על זה

0 0 דרג
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
תגובות בגוף המאמר
צפה בכל התגובות
0
נשמח לשמוע מה אתה חושב, הגב כאן...x
()
x
דילוג לתוכן
קראו את הפוסט הקודם:
עיצוב הודעות השגיאה בטפסי אלמנטור
עיצוב הודעות השגיאה בטפסי אלמנטור

אלמנטור הוא אחד מבוני הדפים הפופולריים ביותר בעולם, עם למעלה מ- 4 מיליון התקנות פעילות לתוסף החינמי הזמין במאגר התוספים של וורדפרס.גילוי נאות - הייתה

סגור