Quick start: Ring Builder
Build a complete, working Ring Builder in about ten minutes with one template, one widget and three assignments.
The Ring Builder is the addon's shortest path to something impressive. One template, one widget, three assignments, and you have the full three-step journey themed to match your site.
Do this before you go widget-by-widget. It gives you a working builder to compare everything else against.
Before you start
- The addon is installed and its licence is active.
- WooCommerce is active with the NivoSync integration on.
- Ring Builder is enabled in the NivoSync settings.
- You have at least one ring setting product and a synced diamond catalogue.
You can confirm the first four at a glance in NivoSync → Elementor under System status — all five dots should be green.
Step 1 — Create the template
Elementor → Templates → Add New Template. Name it something you will recognise later; Ring Builder is fine. Open it in Elementor.
Step 2 — Drop the Ring Builder widget
In the widget panel, search for Ring Builder and drag it in. It will render the diamond step: a stepper across the top, a filter row, and a grid of diamond cards.
That is the entire builder. The widget is route-aware — the same instance renders the diamond step, the settings step or the final summary depending on which URL the visitor is on.
Step 3 — Pick a skin
In Content → Builder → Skin, choose one of the five. Watch the whole preview change at once: stepper, filters, cards and all. That single control is what makes the composed page look designed rather than assembled.
Try Alexandra if you want to see the effect at its strongest — it swaps to a full dark canvas.
Step 4 — Publish and assign
Publish the template. Then go to NivoSync → Elementor and assign it to all three Ring Builder surfaces:
- Ring Builder — Diamonds step
- Ring Builder — Settings step
- Ring Builder — Complete step
Press Save assignments. All three should now read Active.
Step 5 — Walk the journey
Open /ring-builder/ on your site and go through it as a customer would:
- Diamond step. Filter the grid, then click a card's call to action. The diamond is stored in the session and you land on the settings step.
- Settings step. A banner shows the diamond you chose, with a link to change it. The grid shows settings compatible with that stone. Pick one.
- Setting page. The buy panel shows the setting, your diamond, and the two prices summed. From here the shopper adds the complete ring to the cart or books a consultation.
If any step renders the core theme instead of your design, its assignment did not save — go back to step 4.
Step 6 — Adjust what you disagree with
Now that it works, tune it. In the widget's Content tab:
- Stepper — turn it off, or rename the three steps.
- Diamond filters — a repeater where each row is one filter. Change the order by dragging, switch a filter between chips / slider / dropdown, or set a width so three filters share a row.
- Diamond cards — how many per page, what the card button does, whether the toolbar shows.
- Settings step — which filters appear, how many settings per page, whether to show the chosen-diamond banner and whether to restrict the grid to compatible settings.
- Complete step — whether the booking and add-to-cart buttons appear.
And in the Style tab: the canvas (background, padding, radius, border), the section titles, and the stepper's circles and labels per state.
When to graduate to individual widgets
The composer is deliberately opinionated: it lays the page out for you. Move to the individual widgets when you want something it does not offer — a hero between the filters and the grid, a two-column layout, your own copy blocks between sections.
Nothing is lost by starting here. The individual widgets render the same engines with the same skins; you are swapping one pre-arranged layout for your own arrangement.