how can I best create a tiled navigation structure

Hi,

I want to create a tiled navigation strcture where for each 'tile' there is an image with a heading above and a bit of text below and the whole thing links to another page. I want these 'tiles' to be 3 to a row.
How can I best achieve this with upfront.
Example of a similar thing is here near the bottom of the page:
http://www.clearspringacupuncture.co.uk

Thanks,

  • Sajid

    Hi @tofuwarrior,

    Hope you are doing good today :slight_smile:

    You can create this layout with combination of three elements text, image and button respectively.

    In text element you can add heading, then image with link and then button with link under it. Also, you can group these elements by selecting and then add one link to all of the items.

    Hope that help! Feel free to post a reply if you need further assistance :slight_smile:

    Cheers, Sajid

  • tofuwarrior

    Hi,

    I have created these elements and grouped them but when i add styles I can't alter the margin/padding of the elements so that they close up together.
    Have a look at the home page, I have done one tile and attempted to add custom css, you can see the red color is applied but padding/margin cannot be reduced. I have this problem with other elements in the page also.

    Ideally I would want simply to add a class to the container so I can add css into the global css rather than duplicating styles for every element.

    Also- how can I easily copy and paste a group in the upfront editor?

    Thanks,

    Paul

  • Nastia

    Hello Paul, I hope you are doing well today!

    Also- how can I easily copy and paste a group in the upfront editor?

    In a group you will have to copy each element separately. To do this, un-group the elements, right click on an element -> Clone

    You can enable a grid layout by clicking on the Grid button, like it's shown in the attached screenshot, that will help to position the elements close one to another.

    The CSS code:
    margin-bottom:0.1em;
    It's making the distance beetween the image and text a little bigger. You can use the following CSS code:

    /* Title H4 */
    .upfront #wrapper-1454161157398-1950 {
        margin-bottom: -6%;}
    
    /*  Text Element */
    .upfront #text-object-1428626607806-1696 {
      margin-bottom: -9%;
        margin-top: -6%;}
    
    /*Button*/
    .upfront #wrapper-1454161157406-1553 {
       margin-top: -9%;}

    I hope this helps! If there is anything else you need, please, let us know.

    Cheers,
    Nastia

  • Sajid

    Hi @tofuwarrior,

    Hope you are doing good today :slight_smile:

    There are some classes that can be used but there is no option add custom classes.

    However, we have something better for this. What you can do here is create a new custom style from green gear icon of element > CSS Styles & Anchors > Add New style, name this new style add the custom CSS code and save changes.

    Now you can use this style with any element of Upfront simply click on green gear icon > CSS Styles & Anchors and select the newly created custom style there as seen in attached screenshot.

    Note: I did not save any changes on your website.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Cheers, Sajid

  • tofuwarrior

    Hi,

    Have to confess I am getting a bit frustrated here.
    The css you suggested doesn't do anything even when the items are grouped.
    Also I don't understand why I can't just target h4 rather than using these wierd ids that don't have any semantics in them.
    I have duplicated the elements as you suggested but then when I try to group one 'tile' together into a group it always selects across to the next column selecting more than one column. If I then group this the act of grouping then forces the elements of the 3rd 'tile' down the page and messes up the layout and I then have to spend ages manually repositioning.
    This is very simple with normal css and html yet is taking me hours of messing around.
    I am at my wits end.
    Can you make this work and give me a walk through of the steps you took so I can see how this should be done in upfront.
    This implementation needs two rows of tiles.
    Thanks,

    Paul
    I need to create this structure in lots of places in the site and I don't want to spend days fighting it on every page. Also - need ot get this live soon, we have a business launch and this delay is holding thigns up. I thought upfront was supposed to make things easier but this is a nightmare to achieve what should be very simple.
    I've laid out one row

  • Sajid

    Hi Paul,

    Hope you are doing good today :slight_smile:

    I am sorry and can understand the frustration. We are always here to help in whatever way possible.

    You can use just h4 to style the headers but Nastia gave you unique ID of that element so it does not effect on other headers with h4 on your site.

    However using Ufpront you can also set basic styling including colors, typography, font size, line height, borders, padding etc writing any code (sounds good ?).

    To change this click on text element, click on gear icon (you will be prompted while editing, select edit or create new preset if you don't want to apply changes to this element only) as seen in attached screenshot.

    Can you make this work and give me a walk through of the steps you took so I can see how this should be done in upfront.
    This implementation needs two rows of tiles.
    Thanks,

    Yes, I come up with a gif animation for you while creating this structure on my own test site (please enlarge to see the animation). Sorry there were upload size limit issue, however, I have uploaded it to my own server, you can check it here:
    http://jwebsol.com/wpmu/wp-content/uploads/2016/02/makingServicesSectionUF.gif

    I need to create this structure in lots of places in the site and I don't want to spend days fighting it on every page. Also - need ot get this live soon, we have a business launch and this delay is holding thigns up. I thought upfront was supposed to make things easier but this is a nightmare to achieve what should be very simple.
    I've laid out one row

    Yes, you can save a global region and load that region including the content on any page of your website using Upfront (you can see this in animation too).

    Hop that helps! Feel free to post a reply if you need further assistance, happy to help :slight_smile:
    Cheers, Sajid

  • tofuwarrior

    hi,

    I implemented the suggestions and had to give up and focus on other business issues.

    Issues with the solution:

    I have set up a layer of tiles your way in a global region.
    Look at http://www.courtyardcliniccardiff.co.uk

    1- Try it in a narrow window, the blocks don't tile at all, the headings float, then the images etc It is completely lacking in responsiveness. This is why I was trying to group each 'tile' so they tiled as a group but upfront won't let me do it. Are you able to provide a solution that works or is it not possible?

    2- the suggestion to use a global region doesn't work, it just duplicates the content on page 2 but when you edit it on page 2 of course it also edits on page 1. What I need is the tiled structure in multiple places with different content for a similar example look at http://www.clearspringacupuncture.co.uk, on the home page and on several other pages there are 'tiled' navigation structures with different content. I need to achieve this kind of thing.

    Can you please advise how I can achieve what I want with upfront.

    Many Thanks,

    Paul

  • Sajid

    Hi @tofuwarrior,
    Hope you are doing good today :slight_smile:

    I am really sorry about terrible delay on this ticket. We are getting influx of new threads that affected our response time. We are trying our best to overcome this situation and get back to our members as soon as possible.

    1- Try it in a narrow window, the blocks don't tile at all, the headings float, then the images etc It is completely lacking in responsiveness. This is why I was trying to group each 'tile' so they tiled as a group but upfront won't let me do it. Are you able to provide a solution that works or is it not possible?

    Yes, I can see the issue now and could replicate it on my own website too. In this case you must group Title, Image and call to action button element so they staid connected on mobile screens.

    2- the suggestion to use a global region doesn't work, it just duplicates the content on page 2 but when you edit it on page 2 of course it also edits on page 1. What I need is the tiled structure in multiple places with different content for a similar example look at http://www.clearspringacupuncture.co.uk, on the home page and on several other pages there are 'tiled' navigation structures with different content. I need to achieve this kind of thing.

    I am afraid, right now you can not edit and make the changes in global region by loading the template on other pages.

    We are working on templates and preset that can be saved and later can be loaded on different pages. Using these templates on other pages you can freely edit the content without affecting the original templates. I am sorry, I am unable to provide ETA of when exactly it will be released though.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:
    Cheers, Sajid

  • tofuwarrior

    Could you read the preceding threads before replying.

    The only reason to use a global region was because that was what your colleague suggested which was a completely inappropriate solution.

    If you read the thread so you properly understand what I am trying to achieve you will be able to answer properly.

    What is happening is that you guys are rushing, you are not reading and understanding properly and are posting 'solutions' that then don't solve the problem, this is wasting both your and my time.

    re 1- I know I should group them but if you look at my earlier posts, upfront won't let me select and group these elements in this way, every time I try to do it on the first tile it selects elements in the next one across so the grouping doesn't work.

    re 2 - re: global region .
    I don't need a global region, it was your colleagues suggestion. What I want to do is have a set of reusable styles that I can apply to these 'tiled' blocks so I don't have to manually create the same styles on every page (just like standard css can do anyway), I cannot understand why upfront won't let me do this very simple thing as it is the whole point of css. It seems like Upfront is undermining the basis of css.
    I am an experienced web developer, I am quite capable of coding this but upfront seems not to want to let me do this kind fo basic stuff.

    Could you properly read and digest the problem, look at my example and provide a solution that actually works, not just knock out an answer which is what is repeatedly happening. Having waited 8 days for a reply after previously receiving solutions that are incorrect I think this is a reasonable request.

    Thankyou.

  • tofuwarrior

    Still no reply guys, you have replied to other newer tickets but not this'd main problem affecting me and by far the longest standing ticket.
    IM getting very tired of having to post to remind you guys to even reply.
    Is it really ok to post non solutions to a problem, have multi-day delays in responses and still propose no solutions?
    I'm close to just ditching wpmudev and finding a decent standard template to work with, this is jusdiculous.
    If you want to keep our business then reply, if not,Feel free to keep ignoring these requests.

  • Sajid

    Hi @@tofuwarrior,
    Hope you are doing good today :slight_smile:

    I am sorry for confusion going on here. I originally tested the grouping of different elements and that worked for me at first. But after bit of troubleshooting I could replicate this grouping issue on your website as well as on my own website. Its a sporadic issue, sometimes gruoping works and sometimes don't that is why it were hard to reproduce.

    Therefore I am marking it as confirmed bug and notifying our developer to fix this issue. Meanwhile I come up with a workaround for you. The grouping is not working when there are multiple same elements in one row. I broke the elements in multiple row, grouped them and then repositioned them again where they were. I know its not ideal but should work meanwhile we figure out what exactly is causing this issue and release a fix.

    Here is what I did, added text in first row, then image in second row, then text again in third row and then button on fourth and final row. Now grouped all these rows together. Then repeated the same steps for other tiled elements and when done repositioned grouped elements in one row like how we did it earlier.

    Also, I checked on mobile they looks great and stack group elements separately as seen in attached screenshot.

    For other issue regarding styles. We already have built in presets (default styles) for each elements. You can edit those presets/styles or create new one. Let me explain with steps how you can edit existing style of an element or create new styles. I can see you already have created some presets for text element.

    Of course you can add your own custom CSS code for each element by clicking on "Edit Preset CSS" for individual elements and styles.

    If you have something common that you want to apply to all html elements for example headers on your website, then you can add that that custom CSS in global CSS section of upfront in Upfront > Theme Settings > add custom CSS rules.

    Again, apologies for confusion and hope its clear now. Also, its recommended to start separate ticket for separate issues to avoid confusion in future.

    Take care and have a nice weekend :slight_smile:
    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.