How to create sections with image backgrounds within a region

See http://grasshopperinc.com/. I am remaking that site into wp using UF. I have the header and slider made, and the left text below the slider, but how do I create the 3 right side sections with a background image and a button in each? Is there a draggable element for that? I don't see anything that will do that, or can that only be custom coded with the code element? And if it has to be custom coded, how do we get the button in there? I know all this can be custom coded, but I was assuming the point of UF was limitless customization without having to code it. Please advise.

  • Milan

    Hello @robphat,

    I hope you are having well today and thanks for asking us. :slight_smile:

    Yes you are right, upfront is meant to provide limitless customization possibilities and so it does provide but some cases are too complex which can't taken in account at time of building different elements. But I think feature of sectionized layout is nice one and I'll make sure this reaches to our developer's attention. :slight_smile:

    But for now please follow these steps to render three section on page with background image and button in it. ( You guessed right we need to use custom code element in this case. )

    #1) Create new region.
    #2) Place text element on left side of region, ( when you first place it, it will occupy whole region space but don't worry as soon as you paste another code element next to it, upfront will adjust both elements spacing. :slight_smile:
    #3) Add new custom code element on right side of region and select "Custom Code" option.
    #4) Enter this markupu in the html tab of code element.

    <div class="section-with-background">
        <button class="ButtonClass">This is my awesome button</button>
    </div>

    #5) Next to html tab, you'll see css tab, enter below styling rules in it please.

    /* Your styles here */
    .section-with-background{
        background: url(../images/cta-landscaping.jpg) no-repeat center center;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .ButtonClass{
        /* Your styles for button */
    }

    You'll need to change background property's image url to image url which you want to refer

    #6) Save changes and you are ready with one custom code element which you can use as reference for other. But wait Do you know you can clone element very easily with upfront ? If yes then please clone this code element and place others accordingly. If not then please refer attached screenshot. :slight_smile:

    I hope this helps you.

    Please ping us back if you need help with anything else. :slight_smile:

    Cheers and Have a fantastic day,
    Milan Savaliya

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.