Elementor make column clickable

הירשם עכשיו!
  • הוסף לסימניות
  • #1
אני רוצה להוסיף קישור לעמודה שלימה באלמנטור.

מחפשת תחליף לתוסף המצוין הזה,
(כי הוא לא התעדכן שנתיים)
wordpress.org

Make Column Clickable for Elementor

Make entire columns, sections and containers clickable in Elementor — improve navigation and user experience with just one link.
wordpress.org wordpress.org

או לחילופין קוד js שעובד.
(לפי המאמר פה זה לא עבד: https://isotropic.co/how-to-make-columns-clickable-in-elementor/)

תודה
 
  • הוסף לסימניות
  • #2
זה כלול בתוסף: Elementor Addon Elements
תעשו את החישוב שלכם אם אתם צריכים תוסף שלם בשביל פונקציה אחת.
 
  • הוסף לסימניות
  • #3
1. התוסף מצויין (תוספים שעושים משהו מאוד ספציפי לא חייבים עדכונים)
2. תגררי וודג'ט html איפה שהוא בעמודה, מיקום מוחלט, זי אינדקס גבוהה, וב- html תכניסי קוד בסגנון הזה
<a href="https://www.prog.co.il" > <div style="height:500px;"> </div> </a>
 
  • הוסף לסימניות
  • #4
נכתב ע"י roni ravitz:
2. תגררי וודג'ט html איפה שהוא בעמודה, מיקום מוחלט, זי אינדקס גבוהה, וב- html תכניסי קוד בסגנון הזה
<a href="https://www.prog.co.il" > <div style="height:500px;"> </div> </a>
לחצ/י כדי להרחיב...
מבדיקה מהירה עולה כי קיים צורך להגדיר רוחב:
CSS: 
position: absolute;
z-index: 9999;
width: 100%;
 
נערך לאחרונה ב:
  • הוסף לסימניות
  • #5
  • הוסף לסימניות
  • #7
  • הוסף לסימניות
  • #9
נכתב ע"י חגית קרמר:
רק עדיין לא מצאתי דרך לקבוע גובה אוטומטי לפי העמודה.
במקום זה:
לחצ/י כדי להרחיב...
תתני לווידג'ט קלאס (נגיד my class)
ובתוך ה-html
HTML: 
<a   href="https://www.prog.co.il" >
    <div style="height:100%;">
         </div>
</a>
<style>
    .my-class {
    height: 100%
}
.my-class .elementor-widget-container{
    height: 100%
}
</style>
 
  • הוסף לסימניות
  • #11
אוקיי, הצלחתי לתת גובה מלא לכל הקוד של הלינק הבעיה היא שאם את רוצה לשים ווידג'טים שם הם דוחפים את הווידג'ט של ה-HTML ואז הווידג'טים האחרים לא לחיצים אני מאמין שאת מעוניינת בדברים בתוך העמודה נכון? אם את רוצה עמודה לחיצה ריקה יש לי פתרון :cool:
 
  • הוסף לסימניות
  • #13
אכן אם עושים מיקום מוחלט כל העמודה נהיית קליקבלית עם ווידג'טים :D
 
  • הוסף לסימניות
  • #16
זה רספונסיבי אוטומטי!
אז ככה מה שעשיתי:
נתתי לעמודה class (במתקדם) אחרי זה בווידג'ט html לקחתי את הקלאס של העמודה ונתתי לו קישור ו-style של 100vh לקלאס שנתתי במתקדם בעצם זה נראה כך:
HTML: 
    <a class="elementor-element elementor-element-edit-mode
          elementor-element-517c34b
          elementor-element--toggle-edit-tools
          elementor-column
          elementor-top-column ui-resizable cool" href="https://leah-photography.co.il"
       ></a>
        <style>
              .cool {
                height: 100vh;  
     
                }
   
   
        </style>
אפשר לראות את זה עובד כאן
 
נערך לאחרונה ב:
  • הוסף לסימניות
  • #17
בסוף פשוט הוספתי וידג'ט כפתור לעמודה,
רקע שקוף ברגיל ובמעבר,
וקצת css לכפתור:
קוד: 
selector{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    z-index: 99 !important;
}

selector .elementor-button{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    z-index: 99 !important;
}

כמובן שזה רספונסיבי אוטומטית.
 
  • הוסף לסימניות
  • #18
אפשר גם להוסיף בתכונות data-href עם הערך של הURL

לאחר מכן להוסיף js בסוף העמוד (לפני סגירת הbody)
JavaScript: 
jQuery(document).ready(function($){
    $(body).on('click', '[data-href]', function(){
        const href = $(this).data('href');
        if(href){
            window.location.href(href);
        }
    })
})
 

פרוגבוט

תוכן שיווקי
פרסומת
עליך להתחבר או להירשם כדי להשיב כאן.
למעלה