Widget'ları biçimlendirme

Son güncelleme 3 Eki 20263 dk okuma

WPM Fields widget'ları Elementor'ın kendi kontrolleriyle, Style sekmesinde biçimlendirilir: tipografi, renkler, boşluklar, kenarlıklar ve gölgeler. Her stil bölümü, widget işaretlemesinin bir parçasını hedefler. Yazı tipleri, renkler ve boşluklar aksi halde temanızdan gelir.

Kontrol adları Elementor'a aittir: Typography, Color, Background color, Padding, Margin, Border, Border radius, Box shadow, Alignment, Width, Aspect ratio, Columns ve Gap. Padding, margin, border radius, width, alignment, columns ve gap duyarlıdır (cihaz başına ayarlanır).

Widget	Stil bölümü	Kontroller	Hedefler
Field (free)	Field	Alignment, Margin	`.wpmcf-c-field`
	Value	Typography, Color	`.wpmcf-c-field__value`
	Before and after	Typography, Color	`.wpmcf-c-field__affix`
	Image	Width, Border radius, Border, Box shadow	alanın içindeki görseller
Repeater	Layout	Columns, Gap	`.wpmcf-c-rows`
	Row	Background color, Padding, Border, Border radius, Box shadow	`.wpmcf-c-rows__row`
	Label	Typography, Color	`.wpmcf-c-rows__label`
	Value	Typography, Color	`.wpmcf-c-rows__value`
Field gallery	Layout	Columns, Gap	`.wpmcf-c-gallery`
	Image	Aspect ratio, Border radius, Border, Box shadow	`.wpmcf-c-gallery__img`
	Caption	Typography, Color, Alignment	`.wpmcf-c-gallery__caption`
Post grid	Layout	Columns, Gap	`.wpmcf-c-grid`
	Card	Background color, Padding, Border, Border radius, Box shadow, Alignment	`.wpmcf-c-grid__card`
	Image	Aspect ratio, Border radius	`.wpmcf-c-grid__image img`
	Title	Typography, Color, Margin	`.wpmcf-c-grid__title`
	Text	Typography, Color, Margin	özet, alan ve tarih satırları
	Field label	Typography, Color	`.wpmcf-c-grid__label`
	Button	Typography, Color, Background color, Padding, Border, Border radius	`.wpmcf-c-grid__button` (kart düğmeleri ve Load more)
	Pagination	Typography, Color, Margin, Alignment	`.wpmcf-c-grid__pagination`
Data table list	List	Typography, Color	`.wpmcf-rows`
	Header cells	Typography, Color, Background color, Padding, Border, Border radius	tablo başlık hücreleri
	Cards	aynısı	`.wpmcf-rows__card`
Field form	Form	Typography, Color	`.wpmcf-form`
	Labels	Typography, Color	`.wpmcf-form__label`
	Inputs	Typography, Color, Background color, Padding, Border, Border radius	`.wpmcf-form__input`
	Submit button	aynısı	`.wpmcf-form__submit`

Görsel için Aspect ratio kontrolü Original, 1:1, 4:3, 3:2, 16:9 ve 3:4 seçeneklerini sunar; seçilen oran görseli sığdırmak için kırpar (object-fit: cover).

Eklentinin stil dosyası

Widget'lar yalnızca düzeni belirleyen küçük bir stil dosyası yükler:

Post grid, galeri ve repeater ızgarası: --wpmcf-c-columns sütunlu (varsayılan 3) ve --wpmcf-c-gap boşluklu (varsayılan 1.5rem; repeater listesi 1rem kullanır) bir CSS ızgarası. Columns ve Gap kontrolleri bu iki özel özelliği düzen öğesine yazar; bunları kendi CSS'inizde de ayarlayabilirsiniz: .my-grid .wpmcf-c-grid { --wpmcf-c-columns: 2; }.
Görseller hücrelerinin genişliğini doldurur. Repeater tablosunun her hücresinde açık renkli bir alt kenarlık vardır.
Kart, öğelerden oluşan bir sütundur; kart düğmesi siz biçimlendirene kadar ince bir kenarlık ve 4 px yarıçap alır, metin rengini devralır.
Düzenleyici ipuçları kesik çizgili bir kutu olarak çizilir.

Stil dosyası yalnızca bir Repeater, Field gallery veya Post grid widget'ı kullanan sayfalarda yüklenir. Field widget'ı buna ihtiyaç duymaz. Data table list ve Field form kendi stillerini yükler.

Kendi CSS'inizde hedefleyebileceğiniz sınıflar

Widget	Sınıflar
Field	`.wpmcf-c-field`, `.wpmcf-c-field__value`, `.wpmcf-c-field__affix`
Repeater	`.wpmcf-c-rows` (`--list`, `--grid`, `--table`), `.wpmcf-c-rows__row` (`data-layout` ile), `.wpmcf-c-rows__item` (`data-field` ile), `.wpmcf-c-rows__label`, `.wpmcf-c-rows__value`, `.wpmcf-c-rows__empty`
Field gallery	`.wpmcf-c-gallery`, `.wpmcf-c-gallery__item`, `.wpmcf-c-gallery__img`, `.wpmcf-c-gallery__caption`
Post grid	`.wpmcf-c-grid-wrap`, `.wpmcf-c-grid`, `.wpmcf-c-grid__card`, `.wpmcf-c-grid__image`, `.wpmcf-c-grid__title`, `.wpmcf-c-grid__text`, `.wpmcf-c-grid__meta` (tarih), `.wpmcf-c-grid__field`, `.wpmcf-c-grid__label`, `.wpmcf-c-grid__button`, `.wpmcf-c-grid__more`, `.wpmcf-c-grid__load-more`, `.wpmcf-c-grid__pagination`, `.wpmcf-c-grid__empty`
Düzenleyici ipuçları	`.wpmcf-c-hint`

Alan türlerinin yazdırılan değerleri kendi sınıflarını kullanır (wpmcf-gallery, wpmcf-flexible, wpmcf-repeater); bkz. Çıktı, biçimler ve kaçışlama.

Sorun giderme

Stil değişikliklerim hiçbir şey yapmıyor. Elementor stil kontrollerini widget sarmalayıcısının içinde seçiciler olarak yazar; daha yüksek özgüllüğe sahip bir tema kuralı üstün gelebilir. Öğeyi inceleyin ve yukarıdaki sınıfları hedefleyin.
Columns veya Gap etkisiz. Bunlar düzen öğesinde --wpmcf-c-columns ve --wpmcf-c-gap değerlerini ayarlar; grid-template-columns değerini doğrudan ayarlayan özel bir kural bunları geçersiz kılar.
Widget önbelleğe alınmış bir sayfada stilsiz görünüyor. Optimizasyon eklentinizin eklentinin builders-front stil dosyasını kaldırmadığından emin olun.

Bu sayfa yardımcı oldu mu?

Hâlâ takıldınız mı? Destek ile iletişime geçin

Widget'ları biçimlendirme

Widget başına stil bölümleri

Eklentinin stil dosyası

Kendi CSS'inizde hedefleyebileceğiniz sınıflar

Sorun giderme