Domes Pharma blocks for Elementor

A practical guide to the 36 blocks the plugin adds to the Elementor editor: what each one does, what it looks like in every variant, and which setting to reach for.

Every screenshot in this guide is a real capture of the blocks rendering on the site — not a mockup.

What these blocks are

The plugin adds its own category to the Elementor widget panel, named Dômes Pharma. Blocks in that category do things ordinary Elementor widgets cannot:

• They read your content. The product blocks pull titles, images, ranges and species straight from the product records, so a change made once in Products reaches every page that shows that product.
• They already match the brand. Colours, corner radii and fonts come from the brand settings. You do not re-enter a hex code on each page, and changing the brand colour updates every block at once.
• They carry behaviour. Filtering, tabs, modals, accordions, veterinary access control and form handling are built in.

Adding a block to a page

1. Open the page and click Edit with Elementor.
2. Click the grid icon at the top left of the panel to show the widget list.
3. Scroll to the Dômes Pharma category, or type DP in the search box — every block in the set is named DP – ….
4. Drag the block into the page, or into an existing section.
5. Fill in the Content tab on the left. The preview updates as you type.
6. Click Publish (or Update).

Most blocks are full-width by design. Drop them into a section with a single column. Putting a catalog or a slider inside a narrow column fights the block's own responsive grid.

Content, Style, Advanced

Every block has the same three tabs. What belongs in each one:

Sections and backgrounds

To give a section a background that follows the brand, add a CSS class in Elementor → Advanced → CSS Classes and leave the section's own background colour empty:

The brand colours are also available in every Elementor colour picker, under the Global group, prefixed with DP –.

A note on field labels

Building a product page

A product page is a WordPress Product record (menu Products) laid out in Elementor with four blocks, in this order. Each one reads the product record, so most fields fill themselves.

1. Create the product in Products → Add new: title, short description, featured image (the pack shot), and the Range, Solutions and Species taxonomies. This is the data every block reuses.
2. Edit with Elementor and add DP – Product sheet — the card at the top with the pack shot, the claim and the key information.
3. Add DP – Order Now underneath it, so the buying path sits immediately under the product identity.
4. Add DP – Product details — the tabbed block holding indications, directions, composition, documents.
5. In a second section, add DP – Related products.

DP – Product sheet

The identity card at the top of a product page: breadcrumbs, claim, pack shot, active ingredient, key information, species badges and range logo.

What fills itself

Four switches, all on by default, make the block follow the product record instead of the block's own fields:

Switch	What it pulls in
Gamme automatique auto_brand_name	The range chosen on the product. Turn it off to pick a range by hand in Range name.
Logo de gamme automatique auto_range_logo	The logo saved on the range, shown top right. Off, you upload one in Logo de gamme.
Product image auto_product_image	The product's featured image. Off, you choose another image.
Automatic breadcrumbs auto_breadcrumbs	Home → Products → range → this product. Off, you type each entry by hand.

What you type

Field	Use	Default
Badge eyebrow	The small tag above the title — a claim, a format, a status.	Product tagline
Product title	Shown instead of the record title if you need a display name.	Product name
Short description	Two lines under the title. Keep it to one sentence.	—
Active ingredient label / Active ingredient	Rendered as one line, e.g. Active: cross-linked hyaluronic acid.	Active:
Key information highlights	Repeater of one-line bullets. Three to five reads best.	—
Animal logo animal_logos	One or more species from the Species taxonomy; shown as icon badges.	—
Box contents label / Box contents	What is inside the pack — e.g. 1 × 10 mL bottle.	Box contents:
Logo secondaire (haut gauche)	A second logo opposite the range logo — a technology mark, a certification.	—

DP – Order Now

A single Order now button that opens a two-step modal: first who the visitor is, then the right list of sellers for them. Pet owners are sent to retail partners, veterinary professionals to authorized distributors.

Filling the seller lists

Each row of Revendeurs (pet owners) and Distributeurs (veterinary) has a Source:

Other settings worth knowing

Field	Use	Default
Alignment	Left, centre, right, or Pleine largeur (full-width button).	Left
Ancre d'ouverture	The modal opens by itself when the URL ends with this anchor, e.g. /product/…/#ordernow. Useful for links from a campaign or a newsletter.	ordernow
Formats	Links the sheets of the same product in different volumes. Each row is a label (3 mL) and the link to that sheet.	—
Note (per seller)	Shown under the name. A seller with no link becomes non-clickable — use it for "call to order".	—
Mention affichée sous la liste	Legal line under the owner list, e.g. Requires a prescription through a veterinarian.	—

DP – Product details

The tabbed block under the product sheet. One row of the Sections repeater is one tab: you name the tab, then choose how its content is laid out.

The five section layouts

DP – Related products

The row of product cards that closes a product page.

DP – Product catalog (filters on the left)

The full catalog page: a column of filters on the left, a search box, a live result count, and a grid of product cards. All filtering happens in the browser — no page reload.

Field	Use	Default
Category (range)	Limits the catalog to one range. The facets then recalculate on those products only. Empty = the whole catalog.	Whole catalog
Facettes affichées	Which filter groups appear, among Solutions, Gammes and Espèces, and in which order.	All three
Masquer les termes sans produit	Hides filter entries that would return nothing.	On
Nombre de produits affichés	-1 shows everything — the right value, since filtering is client-side.	-1
Tri	Manual order, title A→Z, or newest first.	Ordre manuel
Champ de recherche / description courte / icônes d'espèces	Three switches for what the cards and the header show.	All on

A facet that everything matches filters nothing. If every product carries the same single Solution, that facet is just noise in the sidebar. Either add finer terms, or drop the facet from Facettes affichées.

On a phone

The wording of both buttons is in Libellés → Bouton filtres (mobile) and Fermer (mobile).

DP – Product grid

The older catalog layout: dropdown filters across the top rather than a facet column. Use it when you want a compact product list inside a page that already has a lot going on.

DP – New arrivals

A row of product cards for a home page or a landing page — the newest products, or a hand-picked selection.

DP – Categories

A grid of categories — ranges, solutions or species — in nine designs. The block normally fills itself from a taxonomy, so a new range appears on the home page without anyone editing it.

Where the content comes from

With Source on Une taxonomie produit (the default), each card is built from a term:

• the description written in the field reserved for the grid, otherwise the term's own description;
• the link to the range page if one exists, otherwise the term archive;
• the term logo;
• the colour set in Products → Range colours, used for the top rule or the tile fill;
• the product count, if Afficher le nombre de produits is on.

Field	Use	Default
Taxonomie	Gammes, Solutions or Espèces.	Gammes
Limiter à certains termes	Keeps only the terms you pick — and the order you pick them in is respected. Empty = all.	All
Masquer les catégories sans produit	Hides empty terms.	On
Tri / Sens du tri	By name, product count or slug; ascending or descending. Ignored when you have picked terms by hand.	Name, ascending
Source → Saisie manuelle	Switches to a repeater where you type each card: title, description, image, link, badge, accent colour.	—

The nine designs

All nine are shown below with identical content, so the difference is the design and nothing else.

Sizing the grid

The block does not think in fixed columns but in Cartes par rangée (maximum). With fewer categories than that maximum, the grid tightens and centres instead of stretching two cards across the whole screen; an incomplete last row stays centred too.

The ceiling on a single card's width is Largeur maximale d'une carte, in the Style tab. That is what stops two cards becoming banners on a wide screen: raise it for a wider grid, lower it to tighten.

DP – Categories (list, accordion, rail)

The same data as the block above, in three presentations designed for pages that must stay short. It reads the same taxonomies and offers the same manual mode.

DP – Areas of expertise bar

The band of ranges that overlaps the bottom of the hero on the home page.

Placement — the part that makes it work

Content

The Gammes à afficher repeater takes one range per row, chosen from the Ranges taxonomy. Title, description, link and dot colour come from the range; each has an override field for the rare case where the home page needs different wording. The optional intro panel on the left holds a sentence and a link.

DP – Quick links

A row of two to four shortcuts — find your rep, book a session, open the resource library.

DP – Home hero

The opening block of a home page or a landing page: a strong photograph, an overline, a title with one highlighted phrase, a paragraph, a button, and a small floating badge over the picture.

Field	Use	Default
Titre principal + Texte mis en avant	Type the whole title in the first field, then repeat in the second the words that should take the accent colour. They must match exactly.	—
Balise du titre	Leave on H1 on a home page: it is the page's main heading.	H1
Hauteur du bloc	On Grand visuel plein cadre this drives the hero height directly.	—
Largeur du bloc texte	Full-visual layout only: how wide the text panel is over the photo.	—
Chevauchement du panneau	How far the text panel rides over the photo.	—
Petit badge photo	The floating label on the picture — an argument, a launch, a claim. Leave both fields empty to remove it.	—
Ajustement de la photo	Couverture crops to fill; Contenir shows the whole image with bands. Use Contain for a pack shot, Cover for a photograph.	Couverture

DP – Slider

A carousel in four quite different designs. Scrolling is the browser's own, so swipe and trackpad work without any library, and the block stays readable if JavaScript fails.

One slide, one row

Each row of Liste des slides holds an image, a badge, an overline, a title, a text, two buttons, an accent colour, plus Auteur du verbatim and Fonction de l'auteur used by the Quote design. Fields a design does not use are simply ignored — you can keep one set of slides and switch designs to compare.

Navigation

DP – Media banner + call to action

A visual, an argument, a few key points and one or two buttons — the block for "download the catalog", "book a session", "discover the range".

DP – Range showcase

A two-panel presentation — text on one side, image on the other — for the top of a range page.

DP – Key figures

Two to six numbers, counting up as they come into view.

DP – Info cards

Three short cards, each an icon, a sentence with one highlighted phrase, and a link. Used under a hero as a reassurance row.

Each card splits its sentence into three fields — Texte avant la partie colorée, Texte mis en avant, Texte après la partie colorée — so the emphasis lands on the right words without any HTML. A colour chosen on an individual card wins over the palette in both modes.

DP – Pebbles (image + text)

Alternating rows of a shaped image and a paragraph — an "about us" or "our values" page.

DP – Image + Text + Icon

A single image tile with a title, a short text and an icon over it, optionally clickable in full. A compact teaser for a grid of two or three.

The Style tab carries a full background control for the veil over the photo — leave it on the brand tint unless the image needs more contrast — plus Minimum height, which is what keeps several tiles in a row the same size. Image fit offers Cover, Contain, Fill and None, with horizontal and vertical framing positions.

DP – Title + Text

The section heading used throughout the site: a title, an optional rule, and a paragraph.

The rule is switched by Afficher le filet sous le titre; its colour, thickness and width are in the Style tab, along with the alignment and the gap between title and text.

DP – Blog posts

A list of the latest posts, in two layouts. It reads WordPress posts — nothing to retype.

DP – Featured article

A single article, highlighted. Either it follows a real post, or you type everything by hand for a page that has no post behind it.

DP – Events

Congresses, webinars and training dates. Three display formats sharing one list of events.

Each event row holds a Type d'événement tag, a title, a free-text Date / heure, a description, a desktop image and an optional mobile image, plus a button whose colour can be overridden per event.

DP – Content blocks

The same three layouts as Events, for content that is not dated: protocols, handouts, videos, downloads.

The difference with Events is the fields: instead of a date, each row has an Étiquette and an Information complémentaire — typically the format and the weight, PDF · 2 pages.

DP – Video

A video in the brand frame, with a poster image and a play button.

DP – Buttons with lists

A row of buttons; clicking one reveals its own panel of content and downloadable files. Useful for "by species", "by indication", "by presentation".

Each row of Choix is one button. It holds an intro sentence, a rich-text list, an internal layout (Une colonne or Deux colonnes) and up to ten files. Set Nombre de fichiers first — the file fields appear as you raise it.

DP – Team and KOL

The people page: leadership, technical veterinarians and key opinion leaders, each with a photo, a short bio and a longer one that unfolds.

DP – Contact cards

The territory manager finder: cards for each contact, and a ZIP code search that narrows them to the right person.

DP – Where to find us

The company address block: postal address, phone, opening hours, pharmacovigilance contact and a map.

Phone, opening hours and the pharmacovigilance notice each have their own switch, so a subsidiary that does not publish one of them simply turns it off. The map is generated from Adresse pour la carte; paste a Google Maps iframe src into URL d'intégration personnalisée only if you need a specific view.

DP – Distributors

The public directory of distributors, fed by the same central registry the Order Now block uses.

Nothing is typed into the block except the title, the description, the link wording and an optional footnote: each distributor's name, logo, website and contact details come from Products → Distributors. Afficher e-mail et téléphone decides whether contact details are published.

DP – Form

A contact form built field by field, with GDPR consent and an optional newsletter opt-in.

Building the fields

Each row of Fields is one field:

DP – Newsletter

A sign-up block in four designs, from a discreet inline bar to a full photographic banner.

Subscribers are listed and exportable from the Newsletter menu in the admin.

DP – Vet Vault login

Sign-in and account request for veterinary professionals, in three layouts for three different placements.

DP – Resource library

The Vet Vault library: documents, videos, links and tools, filterable by category, searchable, and lockable per item.

DP – Continuing education

A course catalog with two filter axes — topic and format — plus duration, RACE credits and presenter on every card.

Each course row carries a Thème and a Format — both free text that become the two filter rows, so reuse the exact same wording across courses — plus a visual, a summary, the presenter, the duration, the credits, a comma-separated species list, a link and a corner badge.

DP – Questionnaire

A training questionnaire: optional video, participant details, questions, a pass mark, a certificate and an email of the results. The most configurable block of the set.

Writing the questions

The sections, in order

All blocks at a glance

Every block the plugin adds, what it is for, and how many design variants it offers.

Choosing between blocks that look alike

Habits worth keeping

• Leave Style fields empty. They already follow the brand; a hex code typed by hand freezes that block in the old colour when the brand changes.
• Let the blocks read your data. Ranges, species, product images and counts come from the product records and the taxonomies. Typing them into a block creates a second source of truth that will drift.
• Fill singular and plural separately wherever both fields exist, so one product never reads "1 products".
• Check tablet width. Most layout surprises appear between 700 and 1000 px, not on a phone.
• Give every image a purpose. Designs that crop to fill — Categories Média and Overlay, hero Couverture — need photographs, not logos on transparent backgrounds.

Domes Pharma Elementor blocks — user guide. Screenshots captured from the site itself; they will match what you see in the editor as long as the plugin version matches.