קוד מותאם
Custom codeהוספת קוד ל-head או ל-body של עמודים נבחרים: תגיות סטטיסטיקה ואימות, פיקסלים, עיצובים וסקריפטים.
שלושה קטעי קוד שהוגדרו ב-PeleAddons > קוד מותאם משנים את העמוד הזה. תנאי התצוגה של כל אחד מהם מגבילים אותו לעמוד הזה בלבד, כך ששאר האתר לא מושפע. כל קטע מוצג למטה עם ההסבר והקוד שלו.
<head> עיצוב של קופסה<head> נתונים מובנים</body> סקריפט שכותב טקסטקטע הקוד הראשון מוסיף תגית <style> לראש העמוד. הקופסה שלמטה היא קונטיינר רגיל של Elementor, שקיבל רק את מחלקת ה-CSS cc-demo-styled (מתקדם > מחלקות CSS). הרקע, הפינות, הצל והתווית בפינה מגיעים כולם מקטע הקוד.
בלי קטע הקוד היא הייתה קונטיינר לבן ופשוט. כך אפשר לעצב חלקים באתר עם CSS משלכם, גם כשהעיצוב חוזר בכמה עמודים.
<style id="cc-demo-style">
/* A plain Elementor container with the CSS class cc-demo-styled gets its whole look from here. */
.cc-demo-styled.e-con {
position: relative;
overflow: hidden;
padding: 48px 44px;
border-radius: 28px;
background-color: #4a2fd1;
background-image:
radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
radial-gradient(80% 120% at 0% 100%, rgba(255, 92, 138, 0.45), transparent 55%),
linear-gradient(135deg, #6c47ff 0%, #4a2fd1 55%, #23186b 100%);
box-shadow:
0 32px 64px -24px rgba(35, 24, 107, 0.6),
0 12px 24px -12px rgba(35, 24, 107, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cc-demo-styled.e-con::before {
content: "";
position: absolute;
inset-block-start: -80px;
inset-inline-start: -60px;
inline-size: 240px;
block-size: 240px;
border-radius: 50%;
border: 28px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.cc-demo-styled.e-con::after {
content: "<style> inside <head>";
position: absolute;
inset-block-start: 18px;
inset-inline-end: 18px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font: 600 12px/1.2 ui-monospace, Consolas, monospace;
direction: ltr;
}
.cc-demo-styled.e-con .elementor-heading-title {
color: #fff;
}
.cc-demo-styled.e-con .elementor-widget-text-editor {
color: rgba(255, 255, 255, 0.88);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.cc-demo-styled.e-con:hover {
transform: translateY(-4px);
box-shadow:
0 40px 72px -24px rgba(35, 24, 107, 0.65),
0 16px 28px -12px rgba(35, 24, 107, 0.45);
}
}
@media (max-width: 767px) {
.cc-demo-styled.e-con {
padding: 64px 22px 32px;
}
}
</style>קטע הקוד השני מודפס לפני סגירת </body>, אחרי כל תוכן העמוד. הוא מוצא את התיבה שלמטה וכותב לתוכה טקסט, עם השעה והתאריך שבהם רץ. אם התיבה נשארת אפורה, קטע הקוד כבוי או שהעמוד מוצג במצב בטוח.
<script>
( function () {
var box = document.getElementById( 'cc-demo-script-box' );
if ( ! box ) {
return;
}
var now = new Date();
var two = function ( n ) {
return ( n < 10 ? '0' : '' ) + n;
};
// Latin parts in their own elements, so the Hebrew sentence keeps its order.
var part = function ( tag, text ) {
var el = document.createElement( tag );
el.dir = 'ltr';
el.textContent = text;
return el;
};
var title = document.createElement( 'strong' );
title.textContent = 'הטקסט הזה נכתב על ידי קטע קוד';
var line = document.createElement( 'span' );
line.append(
'הסקריפט רץ בסוף העמוד, לפני ',
part( 'code', '</body>' ),
', והוסיף את הטקסט בשעה ',
part( 'bdi', two( now.getHours() ) + ':' + two( now.getMinutes() ) ),
' בתאריך ',
part( 'bdi', two( now.getDate() ) + '/' + two( now.getMonth() + 1 ) + '/' + now.getFullYear() ),
'.'
);
box.replaceChildren( title, line );
box.classList.add( 'is-filled' );
} )();
</script>קטע הקוד השלישי מוסיף לראש העמוד בלוק JSON-LD שמתאר למנועי החיפוש עסק לדוגמה: שם, טלפון, כתובת ושעות פתיחה. גולשים לא רואים אותו, ולכן העמוד עצמו מציע כפתור שקורא את הבלוק ומציג אותו.
<head>, מיד אחרי <body> או לפני </body>), מספר סדר ותנאי תצוגה.?pele-safe-mode=1 לכתובת. גולשים רגילים לא מושפעים מזה.