כדי להוסיף כפתור פעולה בתפריט הראשי, יש להיכנס ל-BeTheme Options > Header & Subheader > Extras ושם להגדיר Action Button עם כיתוב וקישור
יש להזין את המבנה הבא תחת השדה + להוסיף קישור (אפשר קישור של tel:)
<span>למידע נוסף</span>052-536-6133
או לחלופין, רק את הטלפון, ולהוסיף את האייקון של הטלפון עם קוד ה-CSS הבא:
#Top_bar .top_bar_right { position:absolute; left:0px; top:110px !important; z-index:9999; } #Top_bar.is-sticky .top_bar_right { top:70px !important; } #Top_bar .top_bar_right .action_button { display:block !important; width:200px !important; white-space:wrap; padding:10px !important; text-align:center; font-weight:bold; background-color:#2a0250 !important; border:none; /*border-radius:10px;*/ } #Top_bar .top_bar_right .action_button { font-size:24px !important; clear:both; line-height:30px; display:block; font-weight:400 !important; } #Top_bar .top_bar_right .action_button:after { content:'\e8f4'; font-family:'mfn-icons' !important; padding-left:10px; } .header-plain #Top_bar.is-sticky .action_button { line-height:30px !important; height:50px !important; }
מומלץ להסתיר בסלולר כי יש מובייל טאץ' פרימיום:
@media (max-width: 1000px) { /*-----ai---------Start Mobile-Full-Range-----------*/ #Top_bar .top_bar_right a.action_button { display:none !important; } } /*-----ai---------End Mobile-Full-Range-----------*/
קוד לכפתור מעוגל בפינה השמאלית, שנעלם בעת גלילה:
.header-transparent #Top_bar .top_bar_right { position:absolute; left:50px; top:70px; } /*Remove when scrolling*/ .header-transparent #Top_bar.is-sticky .top_bar_right { display:none !important; } #Top_bar .top_bar_right .action_button { display:block !important; width:150px !important; white-space:wrap; padding:10px !important; text-align:center; font-weight:bold; } #Top_bar .top_bar_right .action_button span { font-size:25px !important; clear:both; line-height:30px; display:block; } /*Make Circle*/ #Top_bar .top_bar_right .action_button { height:150px; border-radius:100px; padding-top:47px !important; } /*Colors*/ #Top_bar .top_bar_right .action_button { background-color:#201b6d !important; color:white; } /*Shadow*/ #Top_bar .top_bar_right .action_button { box-shadow: 5px 5px 5px rgb(0 0 0 / 0.3); }
ניתן גם להגדיר שהקישור יהיה טלפון עם קישור tel:
קוד לכפתור שקוף, עם אייקון תפור אישית:
@media (min-width: 1001px) { /*-----ai---------Start Non-Mobile-Range-----------*/ a.action_button { background-color:transparent !important; background-image:url("http://dil.aitech.co.il/wp-content/uploads/2020/12/PhoneIcon.png") !important; background-repeat:no-repeat; background-position:0% 50%; font-weight:bold; color:#585656; padding-left:40px; } a.action_button::after, a.action_button:hover::after { background-color:transparent !important; } .header-transparent #Top_bar .top_bar_right { position:absolute; left:250px; } } /*-----ai---------End Non-Mobile-Range-----------*/
קוד לכפתור לשונית, עם אייקון של Betheme, צביעת הרקע והטקסט, והתאמת גודל:
#Top_bar a.action_button { position:absolute !important; width:150px; top:65px; border-radius:0px 0px 10px 10px; background-color: #ffe5bf !important; color: #5e1f00 !important; padding-right:10px; padding-left:10px; font-weight:600; } #Top_bar .top_bar_left { width:92%; } #Top_bar a.action_button:before{ font-family: "mfn-icons"; content: 'e826'; padding-left:10px; }