More advanced support docs + other feedback

Community resources Product feedback
1

We are evaluating Webflow as a rapid development tool. My initial feedback I see others share: it would be really nice if there was the option for it to generate Bootstrap compatible code, in part because of all the elements available for Bootstrap.

I really like how your product naturally feels like Photoshop, so the gui was very easy to pick-up. However, for users who understand the structure and usually work in a text editor, some things like changing the default link style, are not obvious.

Better text-based documentation targeting advance users would be nice. I found the videos very painful to listen too, as the was a lot of unnecessary information and they were quite repetitive. Great for beginners, but frustrating for more advanced users. For example, I would like to have been able to check documentation to understand how to answer the row question I asked separately.

There is a lot of promise in your product, hope this feedback helps.

1 Like
2

Thanks for the feedback Julie! We actually just started to build out our documentation so it’s good to hear feedback on the subject. We are working on making tutorial videos really short as well so they focus on specific topics.

As for Bootstrap compatibility, you can add bootstrap to the exported site no problem, but it may be more code than you want (vs if the Webflow site was built on bootstrap). We’re considering having options in the future where you can choose which framework you want to start with…but that’s further down the road.

3

Having the choice of frameworks at the start would be an extremely helpful feature. With Bootstrap being the most prevalent responsive framework, I expect you would find a lot of interest.

The challenge with video tutorials is that you often want to combine several support docs to solve a single problem, and it can be a lot faster to just quickly look up the how-to without opening a video, hoping it has your answer and then waiting for the small piece you actually need. I know videos are great because they actually show users how to do things, but it would be nice to have the text-based option.

For example, here a list of the little questions I was looking to answer. I don’t have time to sift through a bunch of videos that seem to promise the answer, but then are too generic and just answer part of the question.

  • buttons: how to change so they match the designer’s specific style, how to add spacing between buttons, why are they side / by side … how can you get them to behave
  • default link styles: how to change colour, remove underline? how to set hover & other attributes?
  • menu: how to control when it collapses in different views
  • text blocks: how to better control collapse for tablet view?
  • media object: where are these? how to add them to site?

Instead of figuring out where to find the answers, I’ve decided to switch to Layoutit to frame things then have our team work in code for the rest.

I’ve been trying out both programs and the usability on yours is far superior for template development and I can’t stress how useful it is to have Photoshop-like paradigms. The nav tab feels a lot like layers and it’s really intuitive to manipulate an object through this avenue. However, at the end of the day we need code I we can export and install on our CMS and with the importance of Google’s PageSpeed ranking, using two frameworks doesn’t make sense.

4

Drop a button into a project, click on it, go to style and style it however you want it. Spacing between buttons that are side-by-side can be changed using margins.

Click your link and style it. For advanced options in Typography (like underline) click on Advanced text on Typography Panel in Style menu. To change hover/pressed status effects once you click an object on top of the style menu there is a “None” button. Once you click on it you will be able to change the hover status.

If we are speaking of the menu drop-down or slide-left/right from the NavBar Widget you can only set it to appear globally in “this particular way”. So far. I hope this one will be changed because I’d really like to have different approach on this one too. If you are not happy with the way it works you can always build your own navigation menu and play with interactions to show/hide the menu panel you design.

I don’t understand this one… Text blocks are simple divs. You can set their widths using % so they fit your requirements of width on different devices. You can also use columns for placing objects. The advantage on columns is that you can always change their behaviour on different devices too. The only thing I really miss in columns is the ability to change the collapse on tablet view. @danro!

In the Add Panel.

1 Like
5

Thanks for the guidance, @bartekkustra! I’ll see what I can do about the column settings :slight_smile:

1 Like
6

That would be best if we could simply set the behaviour of the columns like eg. I have 3 columns and I want the first one to appear as 100% width and the other to as 50% next to each other below the first one. Or 50%+50% and 100% below. This kind of UI would be the best solution in my honest opinion. I’m sure you will work it out :))

7

Thanks for the help!

Buttons: Thanks, that helped.

Links: I can set a style for specific links, but unlike the heading and paragraph settings, which have All H2 Headings as an example that I can style, it seems like this isn’t possible for links. For example, I’d like to set text-decoration: none for all links in the template.

Nav: Yes, I was talking about the NavBar Widget. I can work with this limitation, as we have our own menu code libraries that ties into our cms, but it makes testing on other devices clunky.

Text blocks: Here I would like to have better control over the @media css. I see now how to do some of this, but am not sure how to change the content based on media type (less text in an area that has a testimonial.)

Media objects: By this I meant Twitter bootstrap type media object (css below), which has a thumbnail image and text block to the right. There are little details, like setting the first-child margin already there and it would be nice to have a drag-and-drop media object in Webflow.

Bootstrap media object code:
.media,
.media-body {
overflow: hidden;
zoom: 1;
}

.media,
.media .media {
margin-top: 15px;
}

.media:first-child {
margin-top: 0;
}

.media-object {
display: block;
}

.media-heading {
margin: 0 0 5px;
}

.media > .pull-left {
margin-right: 10px;
}

.media > .pull-right {
margin-left: 10px;
}

.media-list {
padding-left: 0;
list-style: none;
}

8

Hey @juliedev we’ll be working on more advanced selectors - like selecting the <a> tag or any other tag and styling it for the whole site as well as .media > .pull-right type selectors. Thanks for your patience on that front!