How to replicate design

[Matt_J]

I’m looking at replicating a Figma design for a pricing table, with a button and a contact card to the side, shown here -

I’ve been having some issues with the pre-set tables in SiteJet and would really appreciate some advice on how I could accurately recreate this design.

I was thinking of creating a single card, or container and populating it with different headers, text elements and buttons. Would that be a good starting point or are there any similar elements in any of the templates I could transfer over and tweak?

[Kalisperakichris]

Hey @Matt!

The best way to recreate that layout in Sitejet is to use a two-column container:

• In the left column, build the pricing “table” using stacked rows made of text elements (not the table element — it’s harder to style).
• In the right column, create a simple card with a heading, paragraph, and a button (“Contact us”).

This approach gives you full styling control and is mobile-friendly.
Let me know if you need a more precise assistance - happy to help!

[Matt_J]

Thanks @Kalisperakichris !

I’ve managed to get the basics in there but I’m having trouble with some of the styling. Is there a way I can set a border bottom, without having an entire element bordered fully? This isn’t a visible feature in the element border settings.

Because this is built with multiple text elements, is there a way to apply changes to multiple elements at once. I’ve been having issues with this.

[Kalisperakichris]

Hey @Matt_J — great work getting the structure in place! You’re really close. Let’s tackle those styling questions:

---

Add a Bottom Border Without Full Element Borders

You’re right — Sitejet’s visual border settings don’t expose per-side control, but you can easily add just a bottom border using custom styles:

1. Select the text element (or row) you want to style.
2. Scroll to the Custom Style field in the sidebar.
3. Add this CSS:

css

border-bottom: 1px solid #ccc;

(Feel free to change the color or thickness.)

This will add only a bottom line, without affecting the other sides.

Apply Styles to Multiple Text Elements at Once

To keep your workflow smooth and consistent, use a shared class across all pricing rows:

1. Select one of your row text elements.
2. In the right sidebar, under Classes, add something like:
   pricing-row
3. Do the same for all relevant rows.
4. Then in Global Styles or the project CSS, add:

css

.pricing-row {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

This way, you can update the look of all rows in one go — and keep things DRY (Don’t Repeat Yourself ).

[Matt_J]

@Kalisperakichris

border-bottom: 1px solid #ccc;

If I right click the element I want to style and select edit CSS, it opens this on the right hand side. Is this where I need to add the changes, and do I need to apply a class to all of the elements before adding CSS in there?

I’m not sure if there’s anywhere else I can add in small snippets of CSS. I couldn’t find the “Custom Style field”.

[Kalisperakichris]

Hey team, @Andre👋 — quick question on communication:

If someone wants to continue a build-related conversation 1:1 (e.g. via email or direct message), is that okay under community guidelines? Or should all support and collaboration stay within the thread so others can benefit too?

Just want to make sure I’m keeping things above board — thanks!

[Kalisperakichris]

Hey @Matt_J — great! You’re right where you need to be.

Here’s exactly how to add CSS classes the right way in Sitejet:

---

How to Add a Class to an Element

1. Click on the element you want to style (like one of your pricing rows).
2. Go to the right-hand Style panel (like in your screenshot).
3. Scroll down to “ID & Class”.
   
   
4. In the CSS classes field:

• Type your class name (e.g. pricing-row)
• Then press Enter/Return to apply it.

Tip: You can apply multiple classes to an element by typing them one at a time and pressing Enter after each.

---

What Not to Do

• Don’t just type the name without pressing Enter — it won’t apply.
• Don’t include the . when typing a class (just type pricing-row, not .pricing-row).
• Avoid using spaces or special characters in class names.

---

Once you’ve added the class to all relevant elements, just go to your Global CSS panel and drop this in:

css

.pricing-row {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

That’s it!

This will apply the bottom border and spacing to **all** elements with that class. Super efficient for keeping things consistent!

---Just a couple of important tips before you dive into the CSS panel:

⚠️ Don’t Edit Template Code (Yellow-Wrapped Sections)
You’ll see some sections in the CSS editor already marked with yellow labels (like .ed-element.preset-*).
These are template or preset styles added by Sitejet — don’t touch or change those unless you’re 100% sure what you’re doing.

✳️ Instead, always add your own CSS separately, either at the very bottom of the panel or in a new space above the templates — this keeps things clean and safe.

✅ Add Your Custom CSS Like This:
css

/* Matt's Pricing Row Styling */
.pricing-row {
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
Make sure you've added the pricing-row class to the elements you want (as explained earlier), and you're good to go!

[Andre]

@Kalisperakichris

If someone wants to continue a build-related conversation 1:1 (e.g. via email or direct message), is that okay under community guidelines? Or should all support and collaboration stay within the thread so others can benefit too?

Just want to make sure I’m keeping things above board — thanks!

Hey mate,
that is very thoughtful of you. There are no restrictions about contacting a user and continue. Personally, I love to have a solution presented in the thread, of course. But if you or the other person decide to help via DMs, go ahead

In the end, it would just be lovely to have a solution in case another user comes up with the same issue.

[Kalisperakichris]

Thanks so much, @Andre — really appreciate the thoughtful answer!
I’ll reach out directly to continue the conversation and help keep things moving.

Just in case anyone else wants to connect or collaborate on Sitejet-related builds, feel free to drop me a quick note at:
sitejetprojects [at] gmail [dot] com (just replace the brackets).

Once we land on a solution, I’ll share it back here so it can help others too.

Let’s keep the spirit of this community growing — the more we share, the better we all build.