Walkthrough: how to create a social profile card

This is the whole thing done, in order, with nothing skipped. We will build a card for a speaker called Alex Morgan, publish it two different ways — by hand and automatically — and check the result on the front end.

The card we are building is the one in most of the screenshots in this documentation, so you can compare as you go.

Before you start #

• The plugin is installed and active. If not, see Installing the plugin.
• You have a profile picture in your media library. Optional — the card falls back to the initials of the name, which looks perfectly good.

Part 1 — Create the card #

Go to Profile Cards → All Cards.

You have two choices. If you want the plugin to fill the card in for you, click Generate My Card and follow the wizard — then come back to part 3 of this page.

To build it by hand, which is what this walkthrough does, click Add Profile Card.

You land on an empty card with a randomly chosen preset. That is deliberate: the card is never a blank slate, and you can see the shape of it before deciding anything.

Part 2 — Fill it in #

Step 1: the Display tab #

You are on it already.

1. Give it an Internal title. Something you will recognise in the list: Alex Morgan — speaker. Visitors never see this.
2. Leave Display on Manual. We will change it in part 4.
3. Leave Hide the plugin badge on Yes, which is the default and means no credit line under the buttons.

Nothing else is on this tab yet. That is expected — the other options belong to the display type you pick, and you have not picked one yet.

Step 2: the Profile panel #

Click the Profile & Links tab. You are on the Profile panel.

1. Display name — Alex Morgan.
2. Role or tagline — Speaker & Writer.
3. Bio — I speak about design systems and help small teams ship faster. Here is where you can find me, book me, or listen to something I recorded this week.
4. Profile image — click Select and choose a square picture. If you skip it, the card shows AM in a coloured circle instead.
5. Profile image shape — Circle is the default and is right for most cards.
6. Profile image size — leave on Default.

The live preview down the side updates as you type. Use it: it is the fastest way to judge a change without saving.

Step 3: the Social links #

Scroll down to the Social links panel on the same tab.

1. Button style — Button. Full-width buttons with icons and names, which read best on a phone.
2. Icon size — Default.
3. Open the first row and press Add social link three more times, so you have four rows.
4. Fill them in: the icon from the picker, the address, and the button text. Four is a good number for a card — LinkedIn, X, Instagram and GitHub is what we use here.

Each button takes its network’s own brand colour unless you set Primary color yourself. Leave it empty and you get recognisable icons for free.

Drag the handle on the left of a row to reorder. You can also focus a handle and hold Alt with the arrow keys.

NoteThe free version keeps 3 links. Adding a fourth on the free version is refused with a notice and the card keeps three. Pro removes the ceiling.

Step 4: the Custom blocks #

Scroll to Custom blocks. Leave Button style on Button for now.

Add four blocks. Here is what we are building and why:

Block	Settings	Why
Add divider	Title Get in touch, Text style UPPERCASE, Alignment Left	Splits the card into two readable halves. Eight buttons without a divider is a list; eight buttons with one is a card.
Add custom link	Icon store, address your shop, text My design templates	Something that is actually yours.
Add Email	Icon mail, address hello@alexmorgan.example.com, text Email me about speaking	The most-pressed button on most cards.
Add custom link	Icon calendar, address your booking page, text Book me for your event	Scheduled, in a moment.

Open each block and you will also see the two fields every block shares: Icon and Image. An image is used instead of the icon while it is set, so you can try both without losing either.

Give the last block a schedule #

With Book me for your event open, set When to show it to Schedule appearance, and set Show from to a date a week from now.

Save. The row now carries a Scheduled badge, and the button does not appear on the front end until that date arrives — and you will not have to remember to remove it afterwards.

Everything about this is in Scheduling a block.

Step 5: the Customize tab #

Click Customize. You land on Presets.

Click through the presets until one looks right. Each is drawn as two overlapping circles — the card colour behind, the accent colour in front — so you can see the pair rather than a single colour.

Or build a palette #

Click Create my style and answer five questions.

For this card: Writing & publishing, Be contacted, Navy, Soft gradient, No image.

You see the palette before anything changes. Not happy? Try another keeps your answers and rolls a different set. Happy? Use these colours.

The text colours and the colour around the page are worked out for you, so the result is readable even when you have no idea what you are doing. Full detail in Create my style.

Shape it #

Scroll down to Style.

• Layout — Vertical.
• Maximum card width — try calc(100% - 32px). On a phone that stops the card touching the edges of the screen without capping it on a desktop.
• Shadow — Default, or Bigger if the card is meant to sit above the page rather than in it.
• Shape — Rounded.
• Spacing — Default. If the card is slightly too tall for a phone, Smaller is the first thing to try.

The colours here are PRO. On the free version they come from the preset or the generator, which is a working palette — you simply choose a palette rather than typing hex codes.

The header #

Scroll to Header.

• Show cover — on. This is the band of colour above the picture, and it is most of what makes a card look finished.
• Cover size — try 160 for a taller band.
• Style — Normal. Try Compact if the card is long.
• Space between header and buttons — Default.

Step 6: Save #

Press Save Profile Card, top right. A green notice says Profile card saved.

Part 3 — Publish it by hand #

This is what Manual display means: you decide where it goes.

1. Copy the shortcode from the top of the editor, next to the title. It looks like [spcad_card id="548"].
2. Open the page you want the card on.
3. Add a Shortcode block and paste it in.
4. Save, then view the page.

Or, in the block editor, search the inserter for Profile Card — it is in the Widgets category — and choose your card from the dropdown. Or, with Elementor, drag in the Profile Card widget from the general category.

All three approaches are in Where to publish a card.

Part 4 — Publish it automatically #

Now change your mind about where the card lives. Go back to Display and pick Automatic. A second field appears: Display type.

As a popup #

Display type	Display as popup
Where to display	Entire website — or Posts on Pro, which is nearly always the better choice
Popup trigger	Appear immediately on free; After timeout with eight seconds on Pro
Don’t show on these URLs	Your checkout, your account pages, anything you would rather not interrupt

Save and open any page of the site. The card appears over it.

CarefulSet Don’t show on these URLs before you set a popup live. Partial URLs work and * is a wildcard, so */checkout/* covers every checkout page. And check there is only one card set to Automatic — two will both try to appear.

Inside the content #

Change Display type to Display inside the content, then set Content location to At the bottom of the post content. Save.

The card is now inserted into every post at the bottom, with no modal and no separate address.

This is the quietest of the four display types, and the one to choose if your site already has enough popups from other plugins.

Part 5 — A second person #

Back on All Cards, press Clone on Alex Morgan’s card.

The copy has every setting, including the blocks and the schedule. Change what you need — the display name, the picture, the links — and you have a second card without retyping anything. Then set its display type independently: one manual and one a bio page is a perfectly ordinary arrangement.

Each card is one display type, so the same person appearing in two places means two cards. Cloning is how you avoid the typing.