Some quick observations on new site builder

gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
Hey Guys

Layout is much nicer and will be easier for people to understand.

Padding of site builder elements is more than that of default pages within a skin. To see this enable say elastic skin, look at the main index page, now create a new site builder page with the same 3-6-3 layout as homepage, add widgets and then compare the spacing (padding) between columns.


updated by @garymoncrieff: 12/22/16 11:55:59AM
brian
@brian
10 years ago
10,149 posts
gary.moncrieff:
Hey Guys

Layout is much nicer and will be easier for people to understand.

Padding of site builder elements is more than that of default pages within a skin. To see this enable say elastic skin, look at the main index page, now create a new site builder page with the same 3-6-3 layout as homepage, add widgets and then compare the spacing (padding) between columns.

Thanks Gary!

This is tricky - site builder uses the "item" class, so on some skins this gets the padding doubled while on others (where the item class has no padding) it looks correct. We do have a stub class for the site builder "item", so what I think we need to do is expose it in the Style Editor so the padding coming in from skin can be "overridden" if needed.

I will check that out.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 04/20/15 10:45:26AM
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
Another option could be to add css padding settings in the panel settings area? This in turn could lead to further css customisations via the panel and widget settings areas in long term.

In such that the custom css per widget/panel would only affect said widget/panel.
updated by @garymoncrieff: 04/20/15 10:48:39AM
brian
@brian
10 years ago
10,149 posts
gary.moncrieff:
Another option could be to add css padding settings in the panel settings area? This in turn could lead to further css customisations via the panel and widget settings areas in long term.

In such that the custom css per widget/panel would only affect said widget/panel.

We actually had custom CSS settings in the container panel settings, but removed it since we felt it took away from what SB should be (easy to use). The problem with having CSS for each container is that if you decide to change it later it can be a lot of work going back through each container and changing it - it would be better to set that style one time in the Style Editor.

If users end up wanting it though, it's definitely something we could look at adding back in.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
It is something I have used in many site builder like systems on WordPress and yes you are correct it adds a lot of overhead to the learning process, but adds a lot of flexibility. (Visual Composer is probably the most popular on the WP side) so maybe one way around this would be (and it's more work for you)

a: have the method you're proposing as default.
b: have a global setting to enable advanced css features which would turn on these areas in the panel/widget settings.
updated by @garymoncrieff: 04/20/15 11:15:23AM
michael
@michael
10 years ago
7,816 posts
Awesome feedback gary, thanks.

Liked watching the video of how Visual Composer handles its stuff. For us, perhaps a GUI way of doing it that wrote the settings to a CSS tab within the widget would provide both levels of users with a way to configure it.
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
I was just able to achieve something through site builder which I have been having trouble with coding. With this in mind it would be nice if there was a view template code button that would show the code that could be copied and pasted.

So in essence clicking this button would show the code for the entire widget.

This could be a great aid in learning how to do more complex tasks with code for users.
updated by @garymoncrieff: 04/21/15 03:00:16AM
michael
@michael
10 years ago
7,816 posts
There is. "Template Code"
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
You misunderstand, on the widget page, if there was a button to show the code that makes up the widget.
michael
@michael
10 years ago
7,816 posts
ah, gotcha. But isn't the purpose of the system to be for those that don't want to look at code? Those that know the code don't need the Site Builder system.

I can see how that can be useful though for bridging the gap for those wanting to get into development.
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
Yes that is the aim of the system indeed, but any educational mechanisms you can build in can only help and should result in freeing up support time in long term.
Strumelia
Strumelia
@strumelia
10 years ago
3,605 posts
Yes, I think it's good if you can CHOOSE to see the code, ..but by default you can work without ever 'having to' see the code.


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
brian
@brian
10 years ago
10,149 posts
I think the best solution to this is some type of "preview" mode when editing a widget - we might be able to work in a "source" type component at that time, but it would be hard as most widgets are NOT templates but direct PHP code.

However I have to agree with Michael on this that extra buttons/functions for the most part are only going to confuse users who do not understand "why" they are there (trust me - ANYTHING added beyond what is absolutely necessary is going to confuse some users) - and when they click on it they will not understand it and will come here posting questions about it.

SB is designed to be the "easy to use" side of Jamroom. For those that want to see the "code" side of things you can always dig into the templates.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
My image slideshows quit working after updating- how do i get them back or recreate them? I am not understanding how to make the image slideshow with this new system
brian
@brian
10 years ago
10,149 posts
derrickhand300:
My image slideshows quit working after updating- how do i get them back or recreate them? I am not understanding how to make the image slideshow with this new system

Go into the "Insert Images" widget and put a checkbox in the images you want to be part of the rotator.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
I had the images in the rotator set to _created_rand I had a slideshow on the home page that had 10 random images from the site
brian
@brian
10 years ago
10,149 posts
derrickhand300:
I had the images in the rotator set to _created_rand I had a slideshow on the home page that had 10 random images from the site

We don't have a way to do random images yet in the rotator - we will need to add support for that.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
this no longer seems to work in the new site builder-is that by design or just a bug with my template?
{jrConstructionKit_rotator module="jrGallery" crop="auto" order_by="_created rand" }
brian
@brian
10 years ago
10,149 posts
derrickhand300:
this no longer seems to work in the new site builder-is that by design or just a bug with my template?
{jrConstructionKit_rotator module="jrGallery" crop="auto" order_by="_created rand" }

This will not work - construction kit is part of the old Site Builder.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Thanks How do I go back to the original site builder?
brian
@brian
10 years ago
10,149 posts
derrickhand300:
Thanks How do I go back to the original site builder?

you want to:

- disable the new site builder in it's "info" tab
- enable all 4 of the original Site Builder modules


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Thanks-got it returned to normal again
I am sure this is geared to help new users which is a good thing but from my testing it looks like it forces me to learn new ways to do less which is going backwards to me
I was pretty jacked about the new site builder giving me the ability to add metatags per page but did not see that function
brian
@brian
10 years ago
10,149 posts
derrickhand300:
Thanks-got it returned to normal again
I am sure this is geared to help new users which is a good thing but from my testing it looks like it forces me to learn new ways to do less which is going backwards to me

It definitely won't be a step backwards once we have all the widgets created - we wanted to get it into the hands of users to start getting feedback. In your case, you use it very extensively - we know there's going to be features that need to be added to it, so it's not a surprise to me that it does not work for you at this time - eventually it will :)

Quote:
I was pretty jacked about the new site builder giving me the ability to add metatags per page but did not see that function

This would be part of the Meta Tag Manager module - not Site Builder - I've got it on my todo.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

updated by @brian: 04/22/15 11:53:49AM
derrickhand300
@derrickhand300
10 years ago
1,353 posts
I will be keeping an eye on it and upgrade again to test.
Just my opinion but one of the biggest improvements for new users would be a tool in site builder that allows you to change from a 1 column layout to a 1,2,3,4 column layout. For instance in the default skin I imported to everything was in one single row- videos-images pretty much everything....It took me FOREVER to get those items into a 4 column ( by columns I am referring to columns in a table of cells and not into the 12 column layout thats used by the page.

Still today I spend hours ( sometimes days) trying to figure this out - still one of the most frustrating parts of working on a page here for me anyways.

I dont know if that could even be added to the tool...but if it could you would be relieving a lot of headaches for a lot of new users
updated by @derrickhand300: 04/22/15 12:33:58PM
brian
@brian
10 years ago
10,149 posts
derrickhand300:
Still today I spend hours ( sometimes days) trying to figure this out - still one of the most frustrating parts of working on a page here for me anyways.

I dont know if that could even be added to the tool...but if it could you would be relieving a lot of headaches for a lot of new users

Actually this is supported - we just only have templates for the User Profiles module at this time. The new Site Builder allows it to work with a variety of special "widget" templates - so we can offer multiple templates for your use in creating lists and featured items - we just have to build those now :)


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Quote: ah, gotcha. But isn't the purpose of the system to be for those that don't want to look at code? Those that know the code don't need the Site Builder system.

I can see how that can be useful though for bridging the gap for those wanting to get into development.

I use the current site builder using both the editor and the code function
as an example lets say I want to upload 4 images all in a row- wrap those images in text and then add in something using jrEmbed or jrcore-include

I go into the editor- upload the images add the title/alt tags set the dimensions and the word wrap THEN I copy that "source code" and take it to the CODE tab where I can paste it and then add my functions using jrCore_include etc...sometimes I will use tyhis code as stand alone code- other times i will include it all in a template that i can call with the jr_Include..I could not even imagine trying to upload all these images-write the html for all of them and everything else associated with them AND do the template code "all in the code editor"...I mean if people do it that way- well it totally baffles me as to why? ALL the HTML you need for the code editor can be created now in the same tab in the SAME editor.

I suppose some people create the entire page as a template and insert it in a blank page...but I dont

(in shorter words "I never start off writing html from scratch...I use a WYSIWYG editor- get what i want then switch to "source code" copy that- then use it in templates
updated by @derrickhand300: 04/22/15 12:47:57PM
derrickhand300
@derrickhand300
10 years ago
1,353 posts
Quote: Actually this is supported - we just only have templates for the User Profiles module at this time. The new Site Builder allows it to work with a variety of special "widget" templates - so we can offer multiple templates for your use in creating lists and featured items - we just have to build those now :)

then I say that its going to be AWESOME
gary.moncrieff
gary.moncrieff
@garymoncrieff
10 years ago
865 posts
If widgets are mostly php code then the usefulness of this idea isn't as ground shifting as I first part. For the most part list calls will be template code. Html will be template code. Image slideshow I am not sure about.

Bit the single biggest improvement imho with this version is the auto populating of search, group by, etc fields with the available variables.

For example I am using site builder to prototype lists and then derive code from the options.

Tags