How to design or layout faster


#1

Hello Wapplerfriends and @wappler_ambassadors I’m inviting you to share ideas how the process for designing wappler bootstrap layouts could be improved.

I’ve found some interesting ways and want to share what I like of these websites:

Shoelace

There is an interesting concept how the 12-columns will be handled. Its snapping and shows in a funny way how the layouts are shown on different screens.

http://shoelace.io/

Scripteden

You will find alot of pre ready components which you can change to your own needs.

Gridbox

FREE : You can design your template with premade components like pricing table, tables, signup, login forms, video headers, testimonials, portfolio or gallery and many more.

FREE, Advanced, not online: Lavish

Create Bootstrap Theme from Picture

Bootstrap Magic

Quickly customize your Bootstrap theme


Pixfort Demo

Quickly start with Template or custom Sections and choose your elements. Very nice and fast to work


https://pixfort.com/demo

Bootstrap Design Tools for specific elements

http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/

Its my favourite and changing an element can be done inline, which shows the propperties of it, like APP Connect on right side. Changing column width can be done with + and - which is quite good!

Wappler is great no question! But maybe not a bad idea to hunt for the next best feature and idea! I’m not sure what would be a good way to improve the design aspects from Wappler. But maybe you have an idea!

Additional helpful FREE / Opensource resources:

Froala

https://www.froala.com/design-blocks (Github Sources, Free Bootstrap Elements like :slight_smile:

  • Call to action
  • Contacts Contents
  • Features
  • Footers
  • Forms
  • Headers
  • Pricings
  • Teams
  • Testimonials

GetFuelux Formbuilder

http://getfuelux.com/formbuilder.html
Useful for Drag&Drop Form Builder


Drag and Drop design way to arrange elements on Pages
#2

Great research Freddy! I was coincidentally also investigating possibilities for making Wappler visual editing more easier.

I liked a lot the shoelace for the grid editing, but it is bootstrap 3 based and in bootstrap4 you are not that much limited by the 12 columns so the rows/cold editing has to be different.

As for the theming we already have theme manager in the planning for applying global styling and making design systems easier.


#3

i actually see no issue with the way wappler handle this.
its easy and fast.

only wish we can have more freedom when moving elements in app structure


#4

Wowwww thanks @Freddy_Blockchain


#5

Hi George! I would like to share post I published few days ago - in answer to Freddy question about FlexiLayout software - about some very cool visual feature found in Flexilayout that could be implemented in Wappler, the Wappler way of course :smile:

Hi Freddy. FlexiLayout (FL) is a DW extension from XtendStudio (Since 2005) FL is a design tool no data management, it started basic and became a very complete tool with many useful visual features like:

  • Parallax background fx,
  • Gradient background color
  • Color picker
  • Web Fonts
  • Hover fx
  • and more.

And version 3 is very helpful with Predefined block of content and elements (see picture) structured by categories:

content_blocks
content_blocks.png417×659 8.79 KB

And when you navigate trough a category you see a list of different layout or dispositions with a preview for each one:

contact
contact.jpg1103×476 39.5 KB

pricing_table
pricing_table.jpg1010×473 44.7 KB

testimonials
testimonials.jpg992×529 46.5 KB

And they grouped all standard elements (container, row etc.) grouped in a menu:

elements
elements.jpg263×963 27.8 KB

So this is a very good tool to speed up the design part.

The only complain I would have is that it is very tricky to try to adjust each elements for different medias screen because when you change the padding or margin values for a specific screen size it randomly screw the one for other size, so you have to resize many times.
And one big problem is FL produce proprietary code.

Here is a website I built for a client: http://www.ravspec.net
Built entirely with FL.

It is a short overview but it gives a pretty idea of things that could be implemented into Wappler :slight_smile:


#6

That is exactly the missing part of Wappler! What can I say! Woow! And what about this:


#7

Well, we already have such tools in Wappler. The “add element” feature in Wappler is available right on your page, where you insert elements, so you don’t have to click in some panels to find them. Also the insert element feature suggests only the suitable elements for the current selection:

The Container/Row presets can be found in the properties panel, as soon as you add them (column or row):


#8

Yes I see this, now Wappler handle the menu categories a lot better than before. More straightforward. Maybe it is because i am so used to design with FL that I find it faster to work with, but I have the feeling FL need less navigation and clicking than wappler. Like I said, it is probably me lol

Still there are features that are very well done and useful in FL and other visual tools (See my post and Freddy post above) you will see many great visuals elements and tools that could be integrated into Wappler specially if you want Wappler to be attractive and appealing to visual designers who are actually using apps like FlexiLayout, Wix, Webflow etc.


#9

Yes you should keep up @Webjack357 - Wappler grows massively each week :slight_smile: no time for rest :slight_smile:


#10

My 2 cents - if wappler worked like Blocs I would be very happy, I tried the demo and it is so easy to use and intuitive - check it out and please consider something like this for Wappler.


#11

@Webjack357 That looks like a beautiful extension, their offerings look really nice but it seems they stopped with CC 2015? Are they still in business or updating their extensions?


#12

Good question as I was asking myself what is happening with ExtendStudio, in fact they do still provide support for all their products and they still provide updates and they sent a new template for Word Press few week ago (to work with their WordPress visual builder) but they have not develop new product or major updates since 2017.


#13

Thanks for the reply @Webjack357 I was just updating my post when you responded. Their stuff and site looks really nice, shame if they stopped with CC 2015 (the last version listed on their site).


#14

Welcome Grabriel. I agree with you and it is sad when such a good company/products stop doing business, but at least they did not stop their costumers support.

Fortunately Wappler is here :grinning:


#15

That true and very commendable.