Mix & Match Elements/embed combine?

I am trying to get my (little) brain round how to achieve the following using regions/elements & custom presets

I have not been using upfront for long.

I am so used to just customing any site build with css as I require I am slowly getting my head round presets and adding my own css.

But I am (embarassingly) a little stuck on how to achieve my screen grab - screen1.

I want 2 different coloured boxes side by side.
In box one I would like an image beside some text & in box 2 I would just like some text.

If I add a region - this gives me a full width area - I can then add 2 text areas - which is fine.
So I can then add a custom preset to the 2 text areas to colour/style these as required.

But what I cannot figure out is how or what to add element/widget??-and then have an image beside some text .

Steps tried so far

1. Region added and named
2. 2 text boxes added side by side (I know these are for text - so what do I add to have text & an image?? in one area - so these can sit on top of a colored area)
3. Custom preset added to the 2 text boxes to add a background colour & to style the text.

If I use a text element & an image element side by side - how do I group these or add these to something so I can style the background of them.

Screen2 is what I have managed so far

If I could just figure out how to add something that lets me style this and then have text beside an image - I'll be a happy camper!

Any help for the resident newbie (i.e idiot!) most appreciated,

  • Jude
    • DEV MAN

    Hey @kiaran

    Hope you are keeping fine :slight_smile:

    Actually I really don't think you are as newbie as you think and I've seen a lot here, trust me :smiley:.

    Also for your issue the way forward would be to add a container, set a background. Then add a text element to the right and an image to the left. This would be slightly different to what you are doing with text elements now

    Also looks like the support token has expired. If you can disable and enable it once again I can set this up for you in a template and you can then edit / replace text or images. Let me know if that works.


  • daisybee
    • Design Lord, Child of Thor

    Awww shucks! your just being nice :grinning:

    Slowly getting there keep taking 2 steps forward and one step back!

    I'll enable this now - you can see what I have added on the front page.

    That would be amazing for me to see how this is laidout/added so I can have text/images beside each other but also have a style background they site on.

    You are a superstar!

  • daisybee
    • Design Lord, Child of Thor


    I have no idea how it appeared but when I was editing a text box - a little icon for an image appeared as if by magic - but I cannot get it back?

    If I can add an image into a text box - that would be another step forward.

  • Michael Bissett
    • Recruit

    Hey daisybee, Michael here! :slight_smile:

    I've taken the liberty of recording a quick screencast for this, to help illustrate how your layout could be accomplished:


    In the video, I drag select the elements to start grouping them together, and after grouping them together, I click on the grouped area to present the toolbar where the settings icon appears.

    Let me know if this helps, please! :slight_smile:

    Kind Regards,

  • daisybee
    • Design Lord, Child of Thor

    Hi Michael

    Thats brilliant thank you!! - can I then apply a custom preset to this so I can round the corners?.

    I had no idea I could group items together - I am learning something new every day right now.

    Thank you for your help & time

  • Michael Bissett
    • Recruit

    Hey @kiaran,

    For groups, only the background color & the padding can be adjusted, the idea of allowing presets to be created for them, though, is an interesting one (or alternatively, having border controls for groups, which would probably be more appropriate), I can bring that idea up to our designers. :slight_smile:

    Kind Regards,

  • daisybee
    • Design Lord, Child of Thor

    HI Michael

    Thank you very much. So right now I would need to code this into a text widget and then I can add my preset to that (like I have done now) - really appreciate you looking at this and getting back to me and I think being able to add a preset to a group (now I know about these) - would be a great idea.

    Have a good day!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.