Trying to Create About / Team Profiles that can be easily edited in future

[Dana_A]

Hi

I am trying to create a very simple about / team profile, image left, name and short bio right.

Whenever I use the preset in SJ, the rounded image wraps the text around the image. We don’t want that.

Whenever I try to build it using a container, and then an element with image one side, text box the other, it is backwards, image right, text left - when I try to move it (it being the image) it disappears completely.

So then I tried with just columns (which I was hoping were like grid in webfl) it’ll add but then when I try to style the image to be circular it makes it oval or just doesn’t work.

Honestly what I am trying to create is so simple. I feel like SJ should be able to do this without me having to hand write code.

Here is an image of what I am trying to create (I mean the picture might be too big, but that is an issue too, when I try to resize it, it either doesn’t work or it makes it oval)

This has to be possible?

[Kalisperakichris]

Hey Dana, just a quick note — I managed to get it working in Sitejet without writing code!

Here’s how I did it:

1. Add a 2-column layout
Left column = for the image, right column = for name and bio.

2. In the left column:

• Add a container
• Set the container’s width and height (e.g. 150x150px)
• Go to Style → Border radius: 50%
• Set overflow: hidden
• Then set the image as a background inside that container
  • Use background-size: cover and background-position: center

This way, the image stays round, fills the space nicely, and doesn’t distort or shift around.

Happy to share more if needed — feel free to DM me! Also tagging the community team in case they have suggestions too

[Barbara_Bichler]

You can insert sections with different column styles. You find these in the columns area, I recon (not sittingin on my computer right now). It is definitely easily possible with SJ.

[Dana_A]

Thank you I am going to try this.

And I beg everyones forgiveness in advance, I am not a total novice in web builders but I am very impatient and easily frustrated when things don’t appear to makes sense.

Also I have what might be a stupid question, do you see in your example where the “drop content here” or “+Add element” text appears above the image, why does it do that when using presets and how do I get rid of it?

[Dana_A]

Thank you @Barbara_Bichler I will try the solutions in this thread.

I really appreciate everyone’s help

[Dana_A]

@Kalisperakichris & @Barbara_Bichler

Forgive me I have a few more stupid questions.

1. Why is the transparent background of my image showing through? Is this an aspect ratio thing? File type PNG v SVG? Or sizing issue. I have been trying to mess around with it in SJ but its not correcting.

2. Trying to close the gap between the image and the text in the columns. I am trying to use custom padding / margins is this the right place? Or should I be using “gap”

3. and does anyone know why, when adding custom padding the image suddenly jumps to the right
   

   

[Kalisperakichris]

Hey there!

You’re not asking stupid questions at all — these are super common issues, especially when you’re just getting started.

As you can see in the preview there is nothing there!

Feel free to reach out whenever you need we all get better day by day through problem solving!!!