WordPress איך עושים התחלפות המלצות בצורה אנכית ולא אופקית?

TWIN-A · 19/6/22

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

ש. וייסבלום · 19/6/22

אולי יעזור לך

היופי שבקוד פתוח – להשתמש בקודים קיימים שאחרים כתבו כדי ליצור משהו חדש משלך ⋆ האתר של אלרון

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

elrons.co.il

TWIN-A · 19/6/22

נכתב ע"י ש. וייסבלום:
אולי יעזור לך

היופי שבקוד פתוח – להשתמש בקודים קיימים שאחרים כתבו כדי ליצור משהו חדש משלך ⋆ האתר של אלרון

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

elrons.co.il

אשמח להסבר איך אני משתמשת בקוד הזה,
אם אני לא כותבת קוד..

אוכל גם להשתמש בווידג'ט הרגיל של ההמלצות רק צריכה שהוא יתחלף בצורה אנכית ולא אופקית..

ראובן ליבוביץ · 19/6/22

לא ניסיתי,
אבל אולי הווידג'ט של ג'ט vatrtical timeline יעזור פה?
לכתוב את ההמלצות בבועות שם, אולי זה אפילו דינמי שוב, לא ניסיתי
בהצלחה!

TWIN-A · 19/6/22

נכתב ע"י ראובן ליבוביץ:
לא ניסיתי,
אבל אולי הווידג'ט של ג'ט vatrtical timeline יעזור פה?
לכתוב את ההמלצות בבועות שם, אולי זה אפילו דינמי שוב, לא ניסיתי
בהצלחה!

חשבתי על זה,
הבעיה שאין שם הגבלה על תצוגה ואז זה ארוך ללא הגבלה, כאילו גלילה אינסופית...

ראובן ליבוביץ · 19/6/22

אולי ליסטינג עם סליידר?

shraga0 · 19/6/22

נכתב ע"י TWIN-A:
אשמח להסבר איך אני משתמשת בקוד הזה,
אם אני לא כותבת קוד..

אוכל גם להשתמש בווידג'ט הרגיל של ההמלצות רק צריכה שהוא יתחלף בצורה אנכית ולא אופקית..

כמה שלבים:
1. תוסיפו אלמנט בשם html לדף, בהגדרות האלמנט בלשונית "תוכן" תוסיפו את התוכן הזה:

HTML:

<h1></h1>
<div class="feedback-messages-container">
  <ul class="feedback-messages">
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">תודה על הטיפ, עוקבת ומחכה לבאים בתור... מעניין ממש ועשוי בחן רב!</div>
        <div class="from">@lilachys</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">תודה על הטיפ, ממש עזרת לי!</div>
        <div class="from">@miss_rachel3</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">כך פעם שמותחים פונט, מעצב, במקום כלשהו מת.</div>
        <div class="from">@ellaperrystudioyaar</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">אני אשלח את זה לכל המורות שלי שדורשות רווח כפול בכל העבודות</div>
        <div class="from">@__.alma.__0</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">תודה על הטיפ, עוקבת ומחכה לבאים בתור... מעניין ממש ועשוי בחן רב!</div>
        <div class="from">@lilachys</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">עכשיו עובדת על קורות חיים, וזה ממש מתאים כדי לחשוב על ארגון טוב של הדף! תודה</div>
        <div class="from">@tamardahan</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">אחלה יסודות של עיצוב גרפי..</div>
        <div class="from">@ayeletbarnoy</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">אלרון, אתה פשוט ענק!! קודם כל תענוג, לקרוא את הפוסט ובטח ובטח את הטיפים על הפונטים. מחכה לבא בתור</div>
        <div class="from">@rachelm.studio</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">איזו תבונה רגשית... ברמה עליונה. מדהים כמה אור אתה מכניס לאותיות (אגב "עברית" כי תמיד יש מעבר). נהנת ממך</div>
        <div class="from">@shaniasor</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">אלרון, אתה פשוט ענק!! קודם כל תענוג, לקרוא את הפוסט ובטח ובטח את הטיפים על הפונטים. מחכה לבא בתור</div>
        <div class="from">@michal_motai</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">הטיפים שלך פשוט אדיריםםםםם</div>
        <div class="from">@sapir__benda</div>
      </div>
    </li>
    <li>
      <div class="avatar"><img src="https://i.pravatar.cc/300
  " alt=""></div>
      <div class="bubble">
        <div class="text">אוי לא! אפשר עוד? אני לא רוצה שזה ייגמר.
        <div class="from">@rom.ozer</div>
      </div>
    </li>
  </ul>
</div>

<div align="center">
  <div class="dots-wrap">
    <span class="dots-cont">
      <span class="dot dot-1"></span>
      <span class="dot dot-2"></span>
      <span class="dot dot-3"></span>
    </span>
  </div>
</div>

2. בלשונית "מתקדם" בהגדרות האלמנט בהגדרה האחרונה css מותאם, תוסיפו את התוכן הבא:

CSS:

body {
     font-family: 'FtMonopol 1.05', sans-serif;
     direction: rtl;
     line-height: 1.3;
     font-size: 1em;
}
 h1 {
     margin: 100px 0 0;
     text-align: center;
     color: #444;
}
 .tagline {
     margin: 10px 0 0;
     text-align: center;
}
 .tagline, .tagline a {
     color: #aaa;
     text-decoration: none;
}
 .feedback-messages-container {
     position: relative;
}
 .feedback-messages-container:before {
     content: '';
     top: 0;
     left: 0;
     right: 0;
     height: 2.5em;
     position: absolute;
     display: block;
     background: linear-gradient(0deg, transparent, #fff);
}
 ul.feedback-messages {
     width: 22em;
     padding: 0;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     flex-flow: column-reverse;
}
 ul.feedback-messages li {
     list-style-type: none;
     padding: 0 0 1em;
     margin: 0;
     transition: background-color 0.5s;
     display: inline-flex;
     align-items: end;
}
 ul.feedback-messages li.odd .bubble {
     background: #ffccd3;
}
 ul.feedback-messages li .avatar {
     border-radius: 100%;
     overflow: hidden;
     margin: 0 0 0 0.5em;
     width: 40%;
     max-width: 10em;
     flex-grow: 1;
}
 ul.feedback-messages li .avatar img {
     display: block;
     max-width: 100%;
     height: auto;
}
 ul.feedback-messages li .bubble {
     background: #ffebed;
     color: #804d57;
     padding: 1.5em 1.6em;
     border-radius: 1.3em;
     width: 100%;
}
 ul.feedback-messages li .bubble .from {
     margin-top: 0.5em;
     font-weight: 400;
     font-size: 0.7em;
     direction: ltr;
}
 .dots-wrap {
     margin-top: 0;
     background: #ffccd3;
     color: #875a63;
     padding: 1.5em 2.5em;
     border-radius: 2em;
     display: inline-block;
     text-align: center;
}
 .dots-wrap.light {
     background: #ffebed;
}
 .dots-cont {
     display: block;
     text-align: center;
     line-height: 0;
}
 .dots-cont .dot {
     display: inline-block;
     border-radius: 50%;
     width: 0.6em;
     height: 0.6em;
     background: #875a63;
     margin: 0px 0.1em;
     animation: jump 1s infinite;
}
 .dots-cont .dot-1 {
     animation-delay: 100ms;
}
 .dots-cont .dot-2 {
     animation-delay: 200ms;
}
 .dots-cont .dot-3 {
     animation-delay: 300ms;
}
 @keyframes jump {
     0% {
         transform: translateY(0);
    }
     20% {
         transform: translateY(-0.4em);
    }
     40% {
         transform: translateY(0);
    }
}

3. בממשק הניהול של וורדפרס, בכרטיסיה של אלמנטור, ביחרו ב>ניהול קודים>חדש, מיקום: ביחרו ב/body (בסוף) ,הוסיפו את התוכן הבא וליחצו על "פרסום", שם תבחרו ב"כל האתר" או בעמוד הספציפי שאתם רוצים שהקוד ירוץ (שהתגובות יופיעו):

JavaScript:

<script>
var x = 0,
    container = jQuery('.feedback-messages'),
    items = container.find('li'),
    containerHeight = 0,
    numberVisible = 3,
    intervalSec = 4000;

if(!container.find('li:first').hasClass("first")){
  container.find('li:first').addClass("first");
}

items.each(function(){
  if(x < numberVisible){
    containerHeight = containerHeight + jQuery(this).outerHeight();
    x++;
  }
});

container.css({ height: containerHeight, overflow: "hidden" });

var isOdd = true;

items.each(function(){
  jQuery(this).css('visibility', 'hidden');
});
jQuery('.dots-wrap').hide();
 
function vertCycle() {
  jQuery('.dots-wrap').hide();
 
 
  setTimeout(function(){
    jQuery('.dots-wrap').fadeIn();
  }, intervalSec/3);
 
  container.find('li:first').animate({ marginBottom: 0+"px" }, 500, function(){
    container.find('li:last').remove(); 
    isOdd = !isOdd;
  
  
    // adds last item to be the first item
    var freshItem = container.find('li:last').html();
    height = container.find('li:last').outerHeight();
    container.prepend('<li>'+freshItem+'</li>');
    if(isOdd) container.find('li:first').addClass('odd');
    container.find('li:first').css('marginBottom', 0-height+"px" );
    jQuery('.dots-wrap').toggleClass('light');
    freshItem = '';
    // container.find('li:first').addClass("first");
  });
}

if(intervalSec < 700){
  intervalSec = 700;
}
vertCycle();
var init = setInterval("vertCycle()",intervalSec);

// container.hover(function(){
//   clearInterval(init);
// }, function(){
//   init = setInterval("vertCycle()",intervalSec);
// });
</script>

4. תערכו את האלמנט html בהתאם לתוכן שאתם רוצים.

TWIN-A · 20/6/22

נכתב ע"י shraga0: