Styling the widgets

Last updated Oct 3, 20263 min read

The WPM Fields widgets are styled with Elementor's own controls on the Style tab: typography, colors, spacing, borders and shadows. Each style section targets one part of the widget's markup. Fonts, colors and spacing otherwise come from your theme.

Control names are Elementor's: Typography, Color, Background color, Padding, Margin, Border, Border radius, Box shadow, Alignment, Width, Aspect ratio, Columns and Gap. Padding, margin, border radius, width, alignment, columns and gap are responsive (set per device).

Widget	Style section	Controls	Targets
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	images inside the field
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	excerpt, field and date lines
	Field label	Typography, Color	`.wpmcf-c-grid__label`
	Button	Typography, Color, Background color, Padding, Border, Border radius	`.wpmcf-c-grid__button` (card buttons and 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	table header cells
	Cards	the same	`.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	the same	`.wpmcf-form__submit`

The Aspect ratio control offers Original, 1:1, 4:3, 3:2, 16:9 and 3:4; a chosen ratio crops the image to fit (object-fit: cover).

The plugin's stylesheet

The widgets load a small stylesheet that only does layout:

Post grid, gallery and repeater grid: a CSS grid with --wpmcf-c-columns columns (default 3) and a --wpmcf-c-gap gap (default 1.5rem; the repeater list uses 1rem). The Columns and Gap controls set these two custom properties on the layout element, so you can also set them in your own CSS: .my-grid .wpmcf-c-grid { --wpmcf-c-columns: 2; }.
Images fill the width of their cell. The repeater table has a light bottom border per cell.
The card is a column of items; the card button gets a thin border, a 4 px radius and inherits the text color until you style it.
Editor hints are drawn as a dashed box.

The stylesheet is loaded only on pages that use a Repeater, Field gallery or Post grid widget. The Field widget needs none. The Data table list and the Field form load their own styles.

Classes you can target in your own CSS

Widget	Classes
Field	`.wpmcf-c-field`, `.wpmcf-c-field__value`, `.wpmcf-c-field__affix`
Repeater	`.wpmcf-c-rows` (`--list`, `--grid`, `--table`), `.wpmcf-c-rows__row` (with `data-layout`), `.wpmcf-c-rows__item` (with `data-field`), `.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` (date), `.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`
Editor hints	`.wpmcf-c-hint`

The printed values of the field types use their own classes (wpmcf-gallery, wpmcf-flexible, wpmcf-repeater); see Output, formats and escaping.

Troubleshooting

My style changes do nothing. Elementor writes the style controls as selectors inside the widget wrapper; a theme rule with a higher specificity can win. Inspect the element and target the classes above.
Columns or Gap have no effect. They set --wpmcf-c-columns and --wpmcf-c-gap on the layout element; a custom rule that sets grid-template-columns directly overrides them.
The widget looks unstyled in a cached page. Make sure your optimization plugin does not remove the plugin's builders-front stylesheet.

Was this page helpful?

Still stuck? Contact support

Styling the widgets

Style sections per widget

The plugin's stylesheet

Classes you can target in your own CSS

Troubleshooting