קודים שימושיים לאתרים וקידום ממומן

מבחר קודים לשימושי האישי, אבל אם הגעתם לכאן – אתם יכולים להשתמש בשמחה:)

תפריט עוגנים:

קישורים לאתרים

קישורים לאתרים אלופים עם קודים לאתרים:

ערוץ יוטיוב קודים שימושיים ומגניבים – תמר גרינהאוס:

https://www.youtube.com/@tamargreenhouse

קהילת LEMON לשיתוף קטעי קוד (CSS, JS, PHP) ומדריכים שימושיים בין בוני אתרים באלמנטור:

https://lmn.co.il/

ועוד הרבה:

https://digitalit.biz/gen-category/%D7%A7%D7%95%D7%93%D7%99%D7%9D/

https://mydevsnips.com/

https://dgtool.co.il/category/%d7%a7%d7%98%d7%a2%d7%99-%d7%a7%d7%95%d7%93/

https://easypress.co.il/category/code-snippets/

 

קוד CSS כללי להתחיל איתו פרוייקט אתר

לשים ברמת כל האתר.
הקוד מכיל:
1. יישור של הדף שלא יהיה גלישה לצדדים.

2. ביטול רווח בתחתית ווידג'ט עורך טקסט

3. עיצוב צבע סקרול בר – בר גלילה

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

5. משהו שאמור להשפיע על קישור עוגן של תפריט

				
					html, body{
    overflow-x: clip;
    font-size: 62.5%;
}

.elementor-text-editor p:last-of-type {
    margin: 0;
}

::-webkit-scrollbar {
    width:7px;
    background-color: darkgrey;
} 

::-webkit-scrollbar-thumb {
    background-color: #FD6E76;
    border-radius:20px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba();
    background-color: #f1f1f1;
}

selector .elementor-field-textual::placeholder {
    opacity: 1;
}

.elementor-widget-menu-anchor {
    position: absolute;
    top: -180px;
}

@media (max-width: 768px) {
    .elementor-widget-menu-anchor {
        top: -100px; /* התאימו את הערך לגובה התפריט במובייל */
    }
}
				
			

איוונטים

שליחת איוונט כאשר טופס נשלח בהצלחה | FB + GTM

הגדרת איוונט מותאם אישית בקוד JS ששולח נתונים ל datalayer בגוגל תג מנג'ר

לדוגמה: שליחת איוונט כאשר טופס נשלח בהצלחה

לקריאת המאמר של שוקי מן: 

https://www.lixfix.co.il/google-analytics-4-elementor-tracking/

הוספתי לקוד:

שולח איוונט מותאם למטא ולתג מנג'ר
צריך לערוך לפי הצורך

				
					<script>
jQuery(document).ready(function($){
    jQuery('.elementor-form').on('submit_success', (event) => {
        // דחיפת האירוע ל-dataLayer
        dataLayer.push({'event': 'Name_Of_Custom_Event'});

        // שליחת האירוע לפיקסל של Meta
        fbq('track', 'Name_Of_Custom_Event');
    });
});
</script>
				
			

שליחת איוונט כאשר טופס נשלח בהצלחה - כולל טאבולה

האופציה המועדפת:

אותו איוונט כמו קודם אבל כולל טאבולה.

לשים לב להחליף את שם האיוונט ואת ה ID

				
					<script>
(function($){
  $(function(){
    $('.elementor-form').one('submit_success', function(){
      // שליחה ל־GTM (אם מוגדר)
      if (window.dataLayer) {
        dataLayer.push({ event: 'Name_Of_Custom_Event' });
      }
      // שליחה ישירה לטאבולה פעם אחת בלבד
      if (window._tfa && !_tfa.__leadSent) {
        _tfa.push({ notify: 'event', name: 'Name_Of_Custom_Event', id: 1888862 });
        _tfa.__leadSent = true;
      }
    });
  });
})(jQuery);
</script>
				
			

שליחת איוונט כולל אנליטיקס

לוודא מראש שלא עושה בעיות

				
					<script>
jQuery(document).ready(function($){
    jQuery('.elementor-form').on('submit_success', (event) => {
        // דחיפת האירוע ל-dataLayer
        dataLayer.push({'event': 'Lead_oretzion2024'});

        // שליחת האירוע לפיקסל של Meta
        fbq('track', 'Lead_oretzion2024'); // תוכל להחליף את 'Lead' בשם האירוע המתאים

        // שליחת האירוע ישירות ל-Google Analytics
        gtag('event', 'Lead_oretzion2024');
    });
});
</script>
				
			

שליחת Pixel 3D - טאבולה + אאוטבריין

יצירת קהל על בסיס: קליקים או חשיפות
במערכות טאבולה או אאוטבריין
ושליחה לפייסבוק או גוגל

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

קישור הסבר ליצירת קהל פייסבוק באאוטבריין

גוגל: יצירת קהל במערכת גוגל אדס על בסיס תגים ספציפיים, והדבקת הערכים הרלוונטיים של קישור הרימרקטינג לקישור המצורף בקוד

קישור הסבר ליצירת קהל בגוגל במערכת טאבולה

קישור הסבר ליצירת קהל בגוגל במערכת אאוטבריין

Facebook:

				
					https://www.facebook.com/tr?id=Your_Pixel_id&ev=Your_Event_Name&noscript=1
				
			

Google:

				
					https://googleads.g.doubleclick.net/pagead/viewthroughconversion/834312108/?value=1&currency_code=ILS&label=1u5NCJXx3vcZEKyv6o0D&guid=ON
				
			

יצירת כפתור שיתוף של הפוסט או קישור מותאם אישית

לחיצה על הכפתור פותח בחירה במכשיר איפה מעוניינים לשתף (וואטסאפ, טלגרם, מייל וכו')

 

  1. שמים ווידג'ט כפתור ומשאירים את הקישור ריק (גם בלי #)

  2. נותנים ID לכפתור – share-button

  3. מעל הכפתור לשים ווידג'ט html עם הקוד הבא

בחירת טקסט וקישור מותאם אישית

				
					<script>
document.addEventListener("DOMContentLoaded", function() {
    const shareButton = document.getElementById("share-button");

    if (shareButton && navigator.share) {
        shareButton.addEventListener("click", function(event) {
            event.preventDefault();

            navigator.share({
                text: "גם אני חתמתי, אשמח לעזרתך להפיץ את העצומה של המילואימניקים:\n\nhttps://campaign.ussl.co.il/hamiluimanikim_atsuma/?utm_source=share-whatsapp"
            }).catch(error => console.log("Error sharing:", error));
        });
    }
});
</script>

				
			

בחירת טקסט ומשיכת קישור אוט' של הפוסט הנוכחי

				
					<script>
document.addEventListener("DOMContentLoaded", function() {
    const shareButton = document.getElementById("share-button");

    if (shareButton && navigator.share) {
        shareButton.addEventListener("click", function(event) {
            event.preventDefault();

            navigator.share({
                text: "גם אני חתמתי, אשמח לעזרתך להפיץ את העצומה של המילואימנקים: " + window.location.href
            }).catch(error => console.log("Error sharing:", error));
        });
    }
});
</script>

				
			

קוד לאיוונט בכפתור פופאפ – להטמיע בפופאפ

				
					<script>
(function() {
    function setupShareButton() {
        const shareButton = document.getElementById("share-button");
        
        if (shareButton && navigator.share) {
            // הסרת מאזין קודם כדי למנוע הכפלה
            shareButton.removeEventListener("click", shareHandler);
            shareButton.addEventListener("click", shareHandler);
        } else if (shareButton && !navigator.share) {
            shareButton.style.display = 'none'; // הסתר את הכפתור אם שיתוף לא נתמך
        }
    }

    function shareHandler(event) {
        event.preventDefault();

        navigator.share({
            text: "גם אני חתמתי, אשמח לעזרתך להפיץ את העצומה של המילואימניקים:\n\nhttps://campaign.ussl.co.il/hamiluimanikim_atsuma/?utm_source=share-whatsapp"
        }).catch(error => console.log("Error sharing:", error));
    }

    // נסה להגדיר את כפתור השיתוף מיד
    setupShareButton();

    // אם האלמנט עדיין לא קיים, האזן לשינויים ב-DOM
    if (!document.getElementById("share-button")) {
        const observer = new MutationObserver(function(mutations) {
            if (document.getElementById("share-button")) {
                setupShareButton();
                observer.disconnect(); // הפסק את ההאזנה לאחר שהכפתור נמצא
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
})();
</script>

				
			

לשימוש עם class (ניתן לשימוש עם יותר מכפתור אחד)

				
					<script>
(function() {
    function setupShareButtons() {
        const shareButtons = document.querySelectorAll(".share-button");
        
        shareButtons.forEach(button => {
            if (navigator.share) {
                button.removeEventListener("click", shareHandler);
                button.addEventListener("click", shareHandler);
            } else {
                button.style.display = 'none';
            }
        });
    }

    function shareHandler(event) {
        event.preventDefault();
        navigator.share({
            text: "גם אני חתמתי, אשמח לעזרתך להפיץ את העצומה של המילואימניקים:\n\nhttps://campaign.ussl.co.il/hamiluimanikim_atsuma/?utm_source=share-whatsapp"
        }).catch(error => console.log("Error sharing:", error));
    }

    setupShareButtons();

    const observer = new MutationObserver(function(mutations) {
        setupShareButtons();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();
</script>

				
			

טפסים

יישור שדות + הדגשת הטקסט בשדה הפנימי

יישור שדות טופס לימין בקוד CSS

				
					selector input {
direction: rtl;
}

selector .elementor-field-textual::placeholder {
    opacity: 1;
}
				
			

שינוי מיקום שדה הסכמה לסוף הטופס מתחת לכפתור

שדה הסכמה מתחת לכפתור

				
					.elementor-field-type-acceptance {
    order: 1;
}
				
			

הוספת וובהוק נוסף לטופס אלמנטור

במנהל הקבצים פותחים את תיקיית פלאגינים,
מקימים תקייה חדשה ומעלים אליה את קובץ ה php

מעדכנים את הקוד לפי ה FORM ID של הטופס ולפי הוובהוק המתאים שלו

הולכים בלוח בקרה לתוספים ומפעילים את התוסף החדש שיצרתם

				
					<?php
/**
 * Plugin Name: Elementor Form Webhooks by ID
 * Description: Sends data to specific webhooks based on Elementor form ID.
 * Version: 1.0
 * Author: Ranel Shulman
 * License: GPLv2 or later
 */

if ( ! defined( 'ABSPATH' ) ) exit;

add_action( 'elementor_pro/forms/new_record', 'shulman_additional_webhooks_by_form_id', 10, 2 );

function shulman_additional_webhooks_by_form_id( $record, $ajax_handler ) {
    $form_id   = $record->get_form_settings( 'form_id' );
    $form_data = $record->get_formatted_data();

    $webhooks = [
        'mediniot_article_1' => 'https://hooks.zapier.com/hooks/catch/5358278/utg6l3t/',
        // הוסף כאן טפסים נוספים בעתיד:
        // 'form_2' => 'https://your-other-webhook.url',
    ];

    if ( isset( $webhooks[ $form_id ] ) ) {
        $response = wp_remote_post( $webhooks[ $form_id ], [
            'body' => $form_data,
        ]);

        if ( is_wp_error( $response ) ) {
            $msg = 'There was a problem with the additional webhook.';
            $ajax_handler->add_error( 0, $msg );
            $ajax_handler->add_error_message( $msg );
            $ajax_handler->is_success = false;
        }
    }
}

				
			

חיבור טופס אלמנטור לגוגל שיטס

לפי ההדרכה של אלחנן לבבי – סטודיו האייל: קישור למאמר כאן

להוסיף:

שדה נסתר: e_gs_exclude

ערך: form_name, form_id

שדה נסתר: e_gs_order

ערך (סדר הופעה): תאריך, זמן, מקור הגעה, שם, טלפון, אימייל

שדה נסתר: e_gs_SheetName

ערך: שם הגיליון המבוקש (או פרמטר דינאמי כותרת פוסט)

				
					/**
 * Google app-script to utilise Elementor Pro From webhook.
 *
 * In order to enable this script, follow these steps:
 *
 * From your Google Sheet, from the "Exstensions" menu select "App Script"…
 * Paste the script from this gist into the script code editor and hit Save.
 * From the "Deploy" menu, select Deploy as web app…
 * Choose to execute the app as yourself, and allow Anyone, even anonymous to execute the script. (Note: depending on your Google Apps instance, this option may not be available. You will need to contact your Google Apps administrator, or else use a Gmail account.)
 * Now click Deploy. You may be asked to review permissions now.
 * The URL that you get will be the webhook that you can use in your elementor form, You can test this webhook in your browser first by pasting it.
 * It will say "Yepp this is the webhook URL, request received".
 * Last all you have to do is set up and Elementor Pro Form with a form name and Webhook action pointing to the URL from above.
 *
 * Update: 09/06/2022
 *  - Name the sheet: you can now add a field (could be hidden) to your form labeled "e_gs_SheetName" and set the defualt value to the name of the sheet you want to use.
 *  - Set the Order: you can now add a form field (hidden) labeled "e_gs_order" and set its defualt value to the names of the columns you want to seperated by comma in the order you want, any other colum not in that list will be added after.
 *  - Exclude Columns: you can now add a field (could be hidden) labeled "e_gs_exclude" and set its value to the names of the columns you want to exclude seperated by comma.
 */

// Change to true to enable email notifications
let emailNotification = false;
let emailAddress = "Change_to_your_Email";



// DO NOT EDIT THESE NEXT PARAMS
let isNewSheet = false;
let postedData = [];
const EXCLUDE_PROPERTY = 'e_gs_exclude';
const ORDER_PROPERTY = 'e_gs_order';
const SHEET_NAME_PROPERTY = 'e_gs_SheetName';

/**
 * this is a function that fires when the webapp receives a GET request
 * Not used but required.
 */
function doGet( e ) {
	return HtmlService.createHtmlOutput( "Yepp this is the webhook URL, request received" );
}

// Webhook Receiver - triggered with form webhook to published App URL.
function doPost( e ) {
	let params = JSON.stringify( e.parameter );
	params = JSON.parse( params );
  postedData = params;
	insertToSheet( params );

	// HTTP Response
	return HtmlService.createHtmlOutput( "post request received" );
}

/**
 * flattenObject
 * Flattens a nested object for easier use with a spreadsheet
 * @param ob
 * @returns {{}}
 */
const flattenObject = ( ob ) => {
	let toReturn = {};
	for ( let i in ob ) {
		if ( ! ob.hasOwnProperty( i ) ) {
			continue;
		}

		if ( ( typeof ob[ i ] ) !== 'object' ) {
			toReturn[ i ] = ob[ i ];
			continue;
		}

		let flatObject = flattenObject( ob[ i ] );
		for ( let x in flatObject ) {
			if ( ! flatObject.hasOwnProperty( x ) ) {
				continue;
			}
			toReturn[ i + '.' + x ] = flatObject[ x ];
		}
	}
	return toReturn;
}

/**
 * getHeaders
 * normalize headers
 * @param formSheet
 * @param keys
 * @returns {*[]}
 */
const getHeaders = ( formSheet, keys ) => {
	let headers = [];

	// retrieve existing headers
	if ( ! isNewSheet ) {
		headers = formSheet.getRange( 1, 1, 1, formSheet.getLastColumn() ).getValues()[0];
	}
  const newHeaders = keys.filter( h => ! headers.includes( h ) );
  headers = [ ...headers, ...newHeaders ];
  // maybe set order
	headers = getColumnsOrder( headers );
  // maybe exclude headers
	headers = excludeColumns( headers );
  // filter out control columns
  headers = headers.filter( header => ! [ EXCLUDE_PROPERTY, ORDER_PROPERTY, SHEET_NAME_PROPERTY ].includes( header ) );
  return headers;
};

/**
 * getValues
 * normalize values
 * @param headers
 * @param flat
 * @returns {*[]}
 */
const getValues = ( headers, flat ) => {
	const values = [];
	// push values based on headers
	headers.forEach( ( h ) => values.push( flat[ h ] ) );
	return values;
}

/**
 * insertRowData
 * inserts values to a given sheet at a given row
 * @param sheet
 * @param row
 * @param values
 * @param bold
 */
const insertRowData = ( sheet, row, values, bold = false ) => {
	const currentRow = sheet.getRange( row, 1, 1, values.length );
	currentRow.setValues( [ values ] )
		.setFontWeight( bold ? "bold" : "normal" )
		.setHorizontalAlignment( "center" );
}

/**
 * setHeaders
 * Insert headers
 * @param sheet
 * @param values
 */
const setHeaders = ( sheet, values ) => insertRowData( sheet, 1, values, true );

/**
 * setValues
 * Insert Data into Sheet
 * @param sheet
 * @param values
 */
const setValues = ( sheet, values ) => {
	const lastRow = Math.max( sheet.getLastRow(), 1 );
	sheet.insertRowAfter( lastRow );
	insertRowData( sheet, lastRow + 1, values );
}

/**
 * getFormSheet
 * Find or create sheet for form
 * @param sheetName
 * @returns Sheet
 */
const getFormSheet = ( sheetName ) => {
	const activeSheet = SpreadsheetApp.getActiveSpreadsheet();

	// create sheet if needed
	if ( activeSheet.getSheetByName( sheetName ) == null ) {
		const formSheet = activeSheet.insertSheet();
		formSheet.setName( sheetName );
		isNewSheet = true;
	}
	return activeSheet.getSheetByName( sheetName );
}

/**
 * insertToSheet
 * magic function where it all happens
 * @param data
 */
const insertToSheet = ( data ) => {
	const flat = flattenObject( data ),
		keys = Object.keys( flat ),
		formSheet = getFormSheet( getSheetName( data ) ),
		headers = getHeaders( formSheet, keys ),
		values = getValues( headers, flat );

	setHeaders( formSheet, headers );
	setValues( formSheet, values );

	if ( emailNotification ) {
		sendNotification( data, getSheetURL() );
	}
}

/**
 * getSheetName
 * get sheet name based on form field named "e_gs_SheetName" if exists or used form name
 * @param data
 * @returns string
 */
const getSheetName = ( data ) => data[SHEET_NAME_PROPERTY] || data["form_name"];

/**
 * getSheetURL
 * get sheet url as string
 * @returns string
 */
const getSheetURL = () => SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getUrl();

/**
 * stringToArray
 * split and trim comma seperated string to array
 * @param str
 * @returns {*}
 */
const stringToArray = ( str ) => str.split( "," ).map( el => el.trim() );

/**
 * getColumnsOrder
 * used to set the columns order, set this by adding a form field (hidden) named "e_gs_order"
 * and set its value to the names of the columns you want to seperated by comma in the order you want,
 * any other colum not in that field will be added after
 * @param data
 * @param headers
 * @returns {*}
 */
const getColumnsOrder = ( headers ) => {
	if ( ! postedData[ORDER_PROPERTY] ) {
		return headers;
	}
	let sortingArr = stringToArray( postedData[ORDER_PROPERTY] );
  // filter out non existing headers
  sortingArr = sortingArr.filter( h => headers.includes( h ) );
  // filterout sorted headers
  headers = headers.filter( h => ! sortingArr.includes( h ) );

  return [ ...sortingArr, ...headers ];
}
/**
 * excludeColumns
 * used to exclude columns, set this by adding a form field (hidden) named "e_gs_exclude"
 * and set its value to the names of the columns you want to exclude seperated by comma
 * @param data
 * @param headers
 * @returns {*}
 */
const excludeColumns = ( headers ) => {
	if ( ! postedData[EXCLUDE_PROPERTY] ) {
		return headers;
	}
	const columnsToExclude = stringToArray( postedData[EXCLUDE_PROPERTY] );
	return headers.filter( header => ! columnsToExclude.includes( header ) );
}

/**
 * sendNotification
 * send email notification if enabled
 * @param data
 * @param url
 */
const sendNotification = ( data, url ) => {
	MailApp.sendEmail(
		emailAddress,
		"A new Elementor Pro Forms submission has been inserted to your sheet", // mail subject
		`A new submission has been received via ${data['form_name']} form and inserted into your Google sheet at: ${url}`, //mail body
		{
			name: 'Automatic Emailer Script'
		}
	);
};
				
			

הצללת שדות וכפתור בטופס אלמנטור

יש לשנות את שמות השדות בקוד לפי השדות שרוצים לעשות להם צל.

				
					.elementor-button{
    box-shadow: 10px 0px 20px 0px #2C2C2C;
}

#form-field-name{
    box-shadow: 10px 0px 20px 0px #2C2C2C;
}

#form-field-phone{
    box-shadow: 10px 0px 20px 0px #2C2C2C;
}

#form-field-mail{
    box-shadow: 10px 0px 20px 0px #2C2C2C;
}
				
			

עיצוב כפתורי רדיו / צ'קבוקס

לשים לב לסימון: רשימה בתוך השורה

				
					selector [type="checkbox"]:checked,
selector [type="checkbox"]:not(:checked),
selector [type="radio"]:checked,
selector [type="radio"]:not(:checked){
	position: absolute;
	visibility: hidden;
}
selector .elementor-field-option label {
    border: 1px solid #fff;
    border-radius: 100px;
    background-color: #fff;
    display: block;
    padding: 10px 60px;
    margin: 0px 0;
    font-size: 18px;
    transition: 0.2s all;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
selector .elementor-field-option label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
selector input:checked ~ label {
  color: #fff !important;
  background-color: #dea5c9;
}
selector input:checked ~ label:after {
  background-color: #d384b5;
  border-color: #fff;
}
				
			

ולידציה לשדה טלפון בטופס אלמנטור

validation for phone input

קוד php להדביק בתוסף סניפט

				
					add_action('elementor_pro/forms/validation/tel', function($field, $record, $ajax_handler) {
    $value = $field['value'];
    
    // Remove all non-numeric characters except '+'
    $cleaned_value = preg_replace('/[^\d+]/', '', $value);
    
    // Validate the phone number
    if (strpos($cleaned_value, '+972') === 0) {
        if (strlen($cleaned_value) !== 13) {
            $ajax_handler->add_error($field['id'], 'מספר הטלפון שמתחיל ב-+972 חייב להכיל 13 ספרות.');
        }
    } elseif (strpos($cleaned_value, '972') === 0) {
        if (strlen($cleaned_value) !== 12) {
            $ajax_handler->add_error($field['id'], 'מספר הטלפון שמתחיל ב-972 חייב להכיל 12 ספרות.');
        }
    } elseif (strpos($cleaned_value, '05') === 0) {
        if (strlen($cleaned_value) !== 10) {
            $ajax_handler->add_error($field['id'], 'מספר הטלפון שמתחיל ב-05 חייב להכיל 10 ספרות.');
        }
    } else {
        $ajax_handler->add_error($field['id'], 'מספר הטלפון חייב להתחיל ב-05, 972 או +972.');
    }
}, 10, 3);

// Add JavaScript validation
add_action('elementor/frontend/after_enqueue_scripts', function() {
    wp_add_inline_script('elementor-frontend', "
    jQuery(document).ready(function($) {
        elementorFrontend.hooks.addAction('frontend/element_ready/form.default', function($scope) {
            var $form = $scope.find('.elementor-form');
            var $phoneInput = $form.find('input[type=\"tel\"]');

            $phoneInput.on('keypress', function(e) {
                var charCode = e.which ? e.which : e.keyCode;
                var char = String.fromCharCode(charCode);
                if (!/[\d+]/.test(char) || (char === '+' && this.value.includes('+'))) {
                    e.preventDefault();
                }
            });

            $phoneInput.on('blur', function() {
                var phone = $(this).val();
                var validationResult = validatePhone(phone);
                if (validationResult.isValid) {
                    $(this).css('border', '1px solid #D3D3D3');
                    removePhoneError($(this));
                } else {
                    $(this).css('border', '2px solid red');
                    showPhoneError($(this), validationResult.message);
                }
            });

            function validatePhone(phone) {
                var cleanedPhone = phone.replace(/[^\d+]/g, '');
                if (cleanedPhone.startsWith('+972')) {
                    if (cleanedPhone.length === 13) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 13) {
                        return { isValid: false, message: 'היי, חסר לך ' + (13 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-+972.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 13) + ' ספרות מיותרות במספר המתחיל ב-+972.' };
                    }
                } else if (cleanedPhone.startsWith('972')) {
                    if (cleanedPhone.length === 12) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 12) {
                        return { isValid: false, message: 'היי, חסר לך ' + (12 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-972.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 12) + ' ספרות מיותרות במספר המתחיל ב-972.' };
                    }
                } else if (cleanedPhone.startsWith('05')) {
                    if (cleanedPhone.length === 10) {
                        return { isValid: true };
                    } else if (cleanedPhone.length < 10) {
                        return { isValid: false, message: 'היי, חסר לך ' + (10 - cleanedPhone.length) + ' ספרות במספר המתחיל ב-05.' };
                    } else {
                        return { isValid: false, message: 'היי, יש לך ' + (cleanedPhone.length - 10) + ' ספרות מיותרות במספר המתחיל ב-05.' };
                    }
                } else {
                    return { isValid: false, message: 'מספר הטלפון חייב להתחיל ב-05, 972 או +972.' };
                }
            }

            function showPhoneError($input, message) {
                removePhoneError($input);
                var $errorDiv = $('<div>', {
                    class: 'elementor-message elementor-message-danger',
                    html: message,
                    css: {
                        marginTop: '5px'
                    }
                });
                $input.parent().append($errorDiv);
            }

            function removePhoneError($input) {
                $input.parent().find('.elementor-message-danger').remove();
            }
        });
    });
    ");
});

				
			

עיצוב טקסטים CSS

הוספת רווח ב HTML

כאשר רוצים להוסיף רווח בווידג'ט שמקש רווח לא עובד בו

				
					&nbsp;
				
			

הבלטת טקסט עם רקע מסביב

מכניסים את הקוד לתוך ווידג'ט כותרת ומכניסים את המילה בין תגיות ה span שרוצים לשים
דוגמה למילה המסר שרוצים להבליט

				
					.class-bold-word1{
  padding: 0.5vw 1vw;
    border-radius: 0.2em;
    margin: 0em 0.1em;
    display: inline-block;
    transform: rotate(2deg);
    background-color: #FF6C74;
    color: white;
}
				
			

הבלטת טקסט עם קו תחתון

מכניסים את הקוד לתוך ווידג'ט כותרת ומכניסים את המילה בין תגיות ה span שרוצים לשים
דוגמה למילה המסר שרוצים להבליט

				
					.class-bold-word3{
  background: linear-gradient(180deg, #0000 60%, #FF6C74 60%, #FF6C74 85%,  #0000 80%);
}
				
			

הבלטת טקסט עם רקע חלול

מכניסים את הקוד לתוך ווידג'ט כותרת ומכניסים את המילה בין תגיות ה span שרוצים לשים
דוגמה למילה המסר שרוצים להבליט

				
					.class-bold-word2{
    -webkit-text-stroke-width: .1vw;
  -webkit-text-stroke-color: #FF6C74;
  color: rgba(0,0,0,0);
}
				
			

קיצור טקסט ארוך ב CSS

החלפת טקסט בשלוש נקודות כאשר כמות הטקסט גדולה מידי.

מוגדר בקוד:
התאמת אורך הטקסט ל- עד 3 שורות.

להגדיר ב css class של הוודיג'ט את הקלאס שבקוד.

				
					.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Change this line if you want. In this case it trimmed the text to 3 lines. */
  overflow: hidden;
}

.line-clamp--four {
  -webkit-line-clamp: 4; /* Trimmed the second tile to four lines. */
}
				
			

עיצוב קישורים - לינקים

שינוי צבע לינקים במעבר עכבר

שינוי צבע לינקים במעבר עכבר – בתוך ווידג'ט ספציפי

הולך למתקדם, נותן CSS Class
נגיד עכשיו נתתי text-links
ואז במתקדם זורק קוד CSS ומשנה את הקודים של הצבע הראשי והצבע במעבר עכבר

שינוי צבע לינקים בווידגט
				
					.text-links a {
  color: #F8C957;
  text-decoration: none;
  transition: color 0s ease-in-out;
}
.text-links a:hover {
  color: #16163f;
}
				
			

הפיכת טקסט לקישור בקוד HTML

הפיכת טקסט לקישור בקוד HTML
				
					<a href="פה נכנס הקישור"> פה נכנס הטקסט שיופיע בפועל </a>
				
			

עיצוב ווידג'טים

התאמת CSS למובייל

כאשר משתמשים בקוד CSS ורוצים להוסיף התאמה למובייל

				
					@media only screen and (max-width: 400px) {

//כאן נכנס הקוד שרוצים להתאים למובייל
//בד"כ העתקה של הקוד הרגיל של גרסת דסקטופ

}
				
			

הצגת או הסתרת ווידג'ט לפי UTM

שמים את הסקריפט באלמנטור קודים בHEAD בעמוד שרוצים
מגדירים מה יהיה ה UTM (לפי זה לשנות גם בקוד)

ושמים בקלאס של הווידג'ט: show-on-utm

 

כרגע הקוד מוגדר על utm_campaign = with price

				
					<script>
document.addEventListener('DOMContentLoaded', function() {
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    // בדיקה אם הפרמטר utm_campaign הוא 'with-price'
    if (getUrlParameter('utm_campaign') === 'with-price') {
        document.querySelectorAll('.show-on-utm').forEach(function(el) {
            el.style.display = 'block'; // מציג את התמונה
        });
    } else {
        document.querySelectorAll('.show-on-utm').forEach(function(el) {
            el.style.display = 'none'; // מסתיר את התמונה
        });
    }
});
</script>
				
			

עיצוב וידג'ט קרוסלת המלצות

צבע שונה לכל כרטיסייה

				
					/* כרטיסיות זוגיות */
.elementor-widget-testimonial-carousel .swiper-slide:nth-child(even) .elementor-testimonial {
    background-color: #2C917D; /* רקע ירוק כהה */
    color: #FFFFFF !important; /* טקסט לבן */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* צל */
}

/* כרטיסיות אי-זוגיות */
.elementor-widget-testimonial-carousel .swiper-slide:nth-child(odd) .elementor-testimonial {
    background-color: #F9F7F7; /* רקע אפור בהיר */
    color: #2E3A59 !important; /* טקסט כהה */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* צל */
}

/* עיצוב כללי */
.elementor-widget-testimonial-carousel .elementor-testimonial {
    padding: 30px; /* ריווח פנימי */
    border-radius: 10px; /* פינות מעוגלות */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* מעבר חלק */
    display: flex; /* מבטיח יישור אלמנטים פנימיים */
    flex-direction: column; /* כל האלמנטים בטור */
    justify-content: space-between; /* מבטיח ריווח אחיד */
    height: 100%; /* התאמת גובה */
}

/* קביעת גובה אחיד לכל הכרטיסיות */
.elementor-widget-testimonial-carousel .swiper-slide {
    display: flex; /* שימוש ב-Flexbox */
    align-items: stretch; /* יישור אלמנטים פנימיים */
}

.elementor-widget-testimonial-carousel .swiper-slide .elementor-testimonial {
    flex-grow: 1; /* מבטיח שכל הכרטיסיות ימלאו את הגובה */
}

/* צבע כללי לטקסט */
.elementor-widget-testimonial-carousel .swiper-slide .elementor-testimonial {
    color: inherit !important; /* כל הטקסט יורש צבע */
}

/* התאמת צבע לשם הממליץ */
.elementor-widget-testimonial-carousel .elementor-testimonial__cite .elementor-testimonial__name {
    color: inherit !important; /* התאמה לצבע הכללי */
}

/* התאמת צבע לתואר הממליץ */
.elementor-widget-testimonial-carousel .elementor-testimonial__cite .elementor-testimonial__title {
    color: inherit !important; /* התאמה לצבע הכללי */
}

/* עיצוב הכותרת והטקסט */
.elementor-widget-testimonial-carousel .elementor-testimonial__text,
.elementor-widget-testimonial-carousel .elementor-testimonial__cite {
    color: inherit !important; /* ירושה של הצבע */
}

/* הוספת רווח בתחתית הכרטיסייה */
.elementor-widget-testimonial-carousel .elementor-testimonial::after {
    content: ""; /* יוצר אלמנט ריק */
    display: block; /* מציג את האלמנט */
    flex-grow: 1; /* מאפשר לו למלא את הרווח שנותר */
}

				
			

אנימציית כפתור וואטסאפ צף

אנימציית כפתור של כפיר בקיש.

הורדת הטמפלייט כאן

לשים בפוטר ולהחליף מספר טלפון.

המאמר המלא באתר של כפיר דיגיטל

הקוד מצד שמאל.

				
					selector .elementor-widget-container:before,
selector .elementor-widget-container:after{
      content: ' ';
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
      left:0px;
      bottom: 0px;
      background-color: #61d466;
      border-radius: 50%;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-name: whatsapp-animation-lmn;
      animation-delay: .2s;
      animation-timing-function: ease-out;
}
selector .elementor-widget-container:after{
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      margin:-5px;
      animation-delay: 0.5s;
}
@keyframes whatsapp-animation-lmn {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}
				
			

הפיכת תמונה SVG למפרידון צורה

צריך להעלות את הקובץ לאתר ולשנות את הקישור של הקובץ בקוד

  • קרדיט: חיים בניסטי
				
					selector{
    -webkit-mask-image: url(/wp-content/uploads/2023/01/file.svg);
    mask-image: url(/wp-content/uploads/2023/01/file.svg);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mask-size: 100%;
    -webkit-mask-size: 100%;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;
}
				
			

שינוי מיקום חיצי ניווט

שינוי מיקום החיצים של הניווט בווידג'ט קרוסלת תמונות – אלמנטור

מובייל ודסקטופ

				
					/* עיצוב רגיל למחשבים */
.fa-chevron-circle-right:before {
    position: relative;
    left: -13em;
    bottom: 1em;
    background-color: #fff;
    border-radius: 2em;
}

.fa-chevron-circle-left:before {
    visibility: hidden;
}

/* עיצוב למובייל */
@media (max-width: 768px) {
    .fa-chevron-circle-right:before {
        position: relative;
        left: -5em; /* לדוגמה, משנים את המיקום למובייל */
        bottom: 0.5em;
        background-color: #fff;
        border-radius: 2em;
    }

    .fa-chevron-circle-left:before {
        visibility: visible; /* במובייל נניח שהחץ השמאלי יהיה גלוי */
        position: relative;
        right: -5em; /* לדוגמה, משנים את המיקום למובייל */
        bottom: 0.5em;
        background-color: #fff;
        border-radius: 2em;
    }
}
				
			

שינוי צבע SVG

				
					selector:hover  *{
    fill: #1F2036;
}

selector * {
    transition: .3s;

}
				
			

פילטר צבע - ווידג'ט תיבת אייקון

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

				
					.gray .elementor-widget-container {
    display: flex;
    align-items: center;
}

.gray .elementor-widget-container .elementor-icon-box-icon svg,
.gray .elementor-widget-container .elementor-icon-box-title a {
    filter: grayscale(100%);
    color: gray;
    transition: filter 0.3s ease-in-out, color 0.3s ease-in-out;
}

.gray .elementor-widget-container:hover .elementor-icon-box-icon svg,
.gray .elementor-widget-container:hover .elementor-icon-box-title a {
    filter: grayscale(0%);
    color: #fff;
}
				
			

הנפשות אייקונים ואנימציות

הנפשת אייקון שנמצא בתוך תיבת אייקון

הנפשת אייקון בעזרת קוד CSS להוסיף לתיבת האייקון.

הנפשה של תנועת עלה ברוח.

אם רוצים רק לאייקון אחד אז להוסיף Class ייחודי. או selector

				
					.elementor-icon-box-icon {
  animation: coolBreeze 7s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes coolBreeze {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(5px, -5px) rotate(5deg);
  }
  25% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  40% {
    transform: translate(4px, -4px) rotate(4deg);
  }
  60% {
    transform: translate(-4px, 3px) rotate(-3deg);
  }
  80% {
    transform: translate(3px, -3px) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

				
			

אנימציה קרוסלת תמונות

תמונות בגובה אחיד ובקצב אחיד
יש להגדיר מהירות טעינה 0
והפעלה כמה שרוצים נגיד 5000
בנוסף – יש בקוד צבע אפור אחיד לכל התמונות שמתחלף לצבע המקורי במעבר עכבר

				
					selector .swiper-wrapper {
    transition-timing-function: linear;
}

selector > figure  {
    transition-timing-function: linear;
}
.elementor-image-carousel img {
   height: 200px; 
   object-fit: cover;
}

img.swiper-slide-image {
    filter: saturate(0);
    transition: .3s;
}

img.swiper-slide-image:hover {
    filter: saturate(1);
}
				
			

ווקומרס

עיצוב כמות הוספה לסל

מחולק לקוד PHP בתבנית Function
+ קוד JAVA בווידג'ט HTML בדף
+ קוד CSS בווידג'ט

PHP

				
					// הגדרת ערכי ברירת מחדל לכמות
add_filter('woocommerce_quantity_input_args', 'custom_quantity_input_args', 10, 2);
function custom_quantity_input_args($args, $product) {
    $args['input_value'] = 1;  // ערך התחלתי
    $args['max_value']   = 100; // ערך מקסימלי
    $args['min_value']   = 1;   // ערך מינימלי
    $args['step']        = 1;   // גודל הצעד
    return $args;
}

// הוספת כפתורי פלוס ומינוס
add_action('woocommerce_before_quantity_input_field', 'add_quantity_minus_button');
add_action('woocommerce_after_quantity_input_field', 'add_quantity_plus_button');

function add_quantity_minus_button() {
    echo '<button type="button" class="minus">-</button>';
}

function add_quantity_plus_button() {
    echo '<button type="button" class="plus">+</button>';
}

add_filter('woocommerce_cart_item_quantity', 'update_cart_item_quantity', 10, 3);
function update_cart_item_quantity($product_quantity, $cart_item_key, $cart_item) {
    $product_quantity = sprintf('<input type="number" class="input-text qty text" name="cart[%s][qty]" value="%s" aria-label="Product quantity" min="1" max="100" step="1" placeholder="1" inputmode="numeric" autocomplete="off" />', $cart_item_key, $cart_item['quantity']);
    return $product_quantity;
}

				
			

JAVA

				
					jQuery(document).ready(function($) {
    function updateQuantityButtons() {
        $('form.cart, form.variations_form').off('click', 'button.plus, button.minus').on('click', 'button.plus, button.minus', function(e) {
            e.preventDefault();
            var qty = $(this).closest('.quantity').find('.qty');
            var val = parseFloat(qty.val());
            var max = parseFloat(qty.attr('max')) || 99;
            var min = parseFloat(qty.attr('min')) || 1;
            var step = parseFloat(qty.attr('step')) || 1;

            if ($(this).is('.plus')) {
                qty.val(Math.min(max, val + step));
            } else {
                qty.val(Math.max(min, val - step));
            }

            qty.trigger('change');
        });
    }

    // הגדרת ערכי ברירת מחדל לשדה הכמות
    $('input.qty').attr('placeholder', '1');
    $('input.qty').each(function() {
        if (!$(this).attr('max')) {
            $(this).attr('max', '99');
        }
    });

    // טיפול בשינוי ווריאציות
    $('form.variations_form')
        .on('show_variation', function(event, variation) {
            $(this).find('input.qty').show().prop('disabled', false);
            updateQuantityButtons();
        })
        .on('hide_variation', function() {
            $(this).find('input.qty').hide().prop('disabled', true).val(1);
        });

    // פונקציה לטיפול בכפתורי הפלוס והמינוס בסל הקניות
    function updateCartQuantityButtons() {
        $('.woocommerce-cart-form').off('click', 'button.plus, button.minus').on('click', 'button.plus, button.minus', function(e) {
            e.preventDefault();

            // מציאת שדה הכמות
            var qty = $(this).closest('.quantity').find('.qty');
            var val = parseFloat(qty.val()) || 0;
            var max = parseFloat(qty.attr('max')) || 9999; // ערך מקסימלי ברירת מחדל
            var min = parseFloat(qty.attr('min')) || 1; // ערך מינימלי ברירת מחדל
            var step = parseFloat(qty.attr('step')) || 1; // שלב קפיצה

            // עדכון הערך לפי לחיצה על פלוס או מינוס
            if ($(this).hasClass('plus')) {
                qty.val(Math.min(max, val + step));
            } else if ($(this).hasClass('minus')) {
                qty.val(Math.max(min, val - step));
            }

            // טריגר לעדכון הערך בשדה (בלי לעדכן את הסל אוטומטית)
            qty.trigger('change');
        });
    }

    // פונקציה חדשה לעדכון ערכי הכמות בעמוד העגלה
    function updateCartQuantityValues() {
        $('.woocommerce-cart-form .quantity .qty').each(function() {
            var $input = $(this);
            var itemKey = $input.attr('name').match(/cart\[(.*?)\]/)[1];
            var quantity = $('input[name="cart[' + itemKey + '][qty]"]').val();
            $input.val(quantity);
        });
    }

    // הפעלה ראשונית של הפונקציות
    updateQuantityButtons();
    updateCartQuantityButtons();

    // הפעל את הפונקציה החדשה כשהעמוד נטען
    if ($('body').hasClass('woocommerce-cart')) {
        updateCartQuantityValues();
    }

    // עדכון הכפתורים והערכים לאחר עדכון AJAX של הסל
    $(document.body).on('updated_cart_totals', function() {
        updateCartQuantityButtons();
        updateCartQuantityValues();
    });
});

				
			

CSS

				
					.woocommerce div.quantity {
    display: flex;
    align-items: center;
    border: 2px solid #6b6537;
    border-radius: 30px;
    overflow: hidden;
    max-width: 130px;
    background-color: white;
}

.woocommerce div.quantity button.plus,
.woocommerce div.quantity button.minus {
    background-color: transparent;
    border: none;
    padding: 0 10px;
    font-size: 22px;
    color: #6b6537;
    cursor: pointer;
	position: relative;
}

.woocommerce div.quantity button.plus {
    top: -4.5px; /* מעלה את הפלוס ב-2 פיקסלים */
}

.woocommerce-cart-form div.quantity button.plus{
	top: 1px;
}

.woocommerce div.quantity input.qty {
    text-align: center;
    font-size: 16px;
    border: none;
    width: 50px;
    height: 40px;
    -moz-appearance: textfield;
}

.woocommerce div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.qty {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.added_to_cart.wc-forward {
    background-color: var(--e-global-color-accent);
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    line-height: var(--e-global-typography-secondary-line-height);
    fill: var(--e-global-color-41ad6d6);
    color: var(--e-global-color-41ad6d6);
    border-radius: 52px 52px 52px 52px;
    padding: 5% 14% 6% 15%;
	margin-top: 15px;
}

.added_to_cart.wc-forward:hover {
    background-color: var(--e-global-color-41ad6d6);
    color: var(--e-global-color-accent);
}

/* שינוי צבע כפתור במוצר עם ווריאציה */
button.single_add_to_cart_button.elementor-button.button.alt.disabled.wc-variation-selection-needed {
	background-color: #d1a33f; /* צבע רקע */
    color: #3b4482; /* צבע טקסט */
}

button.single_add_to_cart_button.elementor-button.button.alt.disabled.wc-variation-selection-needed:hover {
	background-color: #3b4482; /* צבע רקע בעת מעבר עכבר */
	 color: white; /* צבע טקסט */
}

/* שינוי צבע כפתור בזמן טעינה של מוצר לסל */
.single_add_to_cart_button.loading,
.elementor-button.loading {
    background-color: #5a5b27 !important; /* החלף ב-צבע לפי בחירתך */
}

/* רקע שקוף לטבלת הווריאציות - עם ספציפיות גבוהה יותר */
.woocommerce table.variations,
table.variations {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid olive !important;
}

/* גם כל תא בטבלה צריך להיות שקוף */
.woocommerce table.variations td,
.woocommerce table.variations th,
table.variations td,
table.variations th {
    background: transparent !important;
    background-color: transparent !important;
    border-color: olive !important;
}

/* עיצוב הטקסט בטבלת הווריאציות */
.woocommerce table.variations label,
.woocommerce table.variations select,
table.variations label,
table.variations select {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 36px !important;
}