Support & Knowledgebase

Upfront editor - styling a group of elements

Oct 5, 2017
Posted by Adam Winchester

Grouping elements is a great way to ensure that they display well in responsive mode.​

But what about styling the individual group of elements?​

At the stage, it isn’t possible to style a group in Upfront web editor, but by using Global CSS, it is.​

In this tutorial, I’ll run through the steps to identify the groups using the browser code inspector, and the apply a box and border style to a group of a Title, Image, Content and CTA button.​

  1. Firstly, let’s start by loading the Upfront editor. This is located in the top admin bar after logging into WordPress:​

2. Once the Upfront system loads, locate the “Draggable Elements” section on the left hand side of the page, and select the text, image,  text again and button, dragging these into the active region​.​

3. Drag a box around the whole lot, making sure that everything you want in the group is selected​ – then click the Group button which appears in the center of the selected area.​ (sometimes this is difficult as other elements bound the box, so in cases like this, move the elements to the side of the container, select them, and move them back as a group)

4. Once you have created the group, click the Publish or Save button and open a new tab in your browser (for this example, I’m using Google Chrome)​

5. Load up your front end of the web page and right click near to the top of the new group and click on the menu item “Inspect”​

6. Identify the top most element for the group. You do this by moving your mouse up until you are on the very top element before the overlay selector on the screen moves to a different element.​

7. Select the “id” of the element. In this case, the id of the element which I have created is: wrapper-1507161509586-1433​

8. Jump back into your Upfront editor after copying the element id​, and select Theme Settings -> Edit Global CSS​

9. In the Global CSS area, paste your element id preceded by a hash symbol “#”​

10. Then add the following code:​​​​

{
background: rgb(13,31,45);
box-sizing: border-box;
border:1px solid grey;
}

11. And you have a beautifully styled group! You can repeat this process for as many groups as you need, simply by adding the element id to the top of the CSS code as an additional element. This is done by separating the elements by a comma.

Have a question? Ask away in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *