🔹

Ana Parametreler

 

 

label

 

Butonun üzerinde yazacak metin.

Ör: label=”How to Measure?”

 

template_id

 

Açılacak panelde gösterilecek Elementor template’in ID’si.

Ör: template_id=”5081″

 

 

🔹

Desktop Ayarları

 

 

position

 

Panelin açılacağı yön.

right | left | top | bottom

Varsayılan: right

 

size

 

Panelin ekranın yüzde kaçını kaplayacağı.

10–100 arası değer, yüzde olarak çalışır.

Sağ/sol → width

Üst/alt → height

Ör: size=”40″ → %40

 

align

 

Butonun hizası.

left | center | right

 

font_size

 

Butonun yazı büyüklüğü (px).

Ör: font_size=”18″

 

font_weight

 

Yazı ağırlığı (400–900).

Varsayılan: 600

 

text_color

 

Buton yazı rengi.

Ör: text_color=”#30d5c8″

 

bg_color

 

Butonun arka plan rengi.

 

border_color

 

Buton çerçeve rengi.

 

border_radius

 

Buton köşe yuvarlaklığı (px).

 

padding_x

,

padding_y

 

Buton iç boşlukları (px).

Ör: padding_x=”12″ padding_y=”6″

 

hover_text

,

hover_bg

 

Buton hover text & arka plan renkleri.

 

---

 

 

🔹

Tablet Override (opsiyonel)

 

Tablet için özel ayar yazmazsan → Desktop değerleri geçerli olur.

 

tablet_position

 

Tablet için özel panel yönü.

Ör: tablet_position=”left”

 

tablet_size

 

Tablet için panel boyutu (yüzde).

Ör: tablet_size=”60″

 

tablet_font_size

 

Tablet için buton yazı büyüklüğü.

Ör: tablet_font_size=”16″

 

---

 

 

🔹

Mobil Override (opsiyonel)

 

Mobil için özel ayar yazmazsan → tablet (yoksa desktop) kullanılır.

 

mobile_position

 

Mobil panel yönü.

Ör: mobile_position=”bottom”

 

mobile_size

 

Mobil panel boyutu (yüzde).

Ör: mobile_size=”80″

 

mobile_font_size

 

Mobilde buton yazı boyutu.

Ör: mobile_font_size=”14″

 

 

Basit kullanım

/* Buton genel */ #ch-offcanvas-328153 { text-align: left; } #ch-offcanvas-328153 .ch-offcanvas-trigger { font-size: 18px; font-weight: 600; color: #30d5c8; background: transparent; border: 1px solid transparent; border-radius: 0px; padding: 0px 0px; } #ch-offcanvas-328153 .ch-offcanvas-trigger:hover { color: #30d5c8; background: transparent; } /* Panel boyutu – desktop */ #ch-offcanvas-328153 .ch-offcanvas-panel { width: 40vw; height: 100vh; } /* Tablet için boyut + font override */ @media (max-width:1024px){ #ch-offcanvas-328153 .ch-offcanvas-panel { width: 40vw; height: 100vh; } } /* Mobil için boyut + font override */ @media (max-width:768px){ #ch-offcanvas-328153 .ch-offcanvas-panel { width: 40vw; height: 100vh; } }

 

Sağdan açılan %40 genişlik

/* Buton genel */ #ch-offcanvas-307418 { text-align: left; } #ch-offcanvas-307418 .ch-offcanvas-trigger { font-size: 18px; font-weight: 600; color: #30d5c8; background: transparent; border: 1px solid transparent; border-radius: 0px; padding: 0px 0px; } #ch-offcanvas-307418 .ch-offcanvas-trigger:hover { color: #30d5c8; background: transparent; } /* Panel boyutu – desktop */ #ch-offcanvas-307418 .ch-offcanvas-panel { width: 40vw; height: 100vh; } /* Tablet için boyut + font override */ @media (max-width:1024px){ #ch-offcanvas-307418 .ch-offcanvas-panel { width: 40vw; height: 100vh; } } /* Mobil için boyut + font override */ @media (max-width:768px){ #ch-offcanvas-307418 .ch-offcanvas-panel { width: 40vw; height: 100vh; } }

 

Tablet & Mobil full kontrol

/* Buton genel */ #ch-offcanvas-752024 { text-align: left; } #ch-offcanvas-752024 .ch-offcanvas-trigger { font-size: 18px; font-weight: 600; color: #30d5c8; background: transparent; border: 1px solid transparent; border-radius: 0px; padding: 0px 0px; } #ch-offcanvas-752024 .ch-offcanvas-trigger:hover { color: #30d5c8; background: transparent; } /* Panel boyutu – desktop */ #ch-offcanvas-752024 .ch-offcanvas-panel { width: 40vw; height: 100vh; } /* Tablet için boyut + font override */ @media (max-width:1024px){ #ch-offcanvas-752024 .ch-offcanvas-panel { width: 40vw; height: 100vh; } } /* Mobil için boyut + font override */ @media (max-width:768px){ #ch-offcanvas-752024 .ch-offcanvas-panel { width: 40vw; height: 100vh; } }

 

Kanka bundan sonra bu panelle her şeyi açabilirsin: measurement, return policy, FAQ, shipping info…

Hepsi tek shortcode ile çalışacak ve page speed’i zedelemeyecek şekilde lazy-loaded.