Need help creating a puzzle with links!

[roygore]

Hello all,
I am re building and converting my websites from Serif WebPlus to WYSIWYG web builder.

I'm having a problem creating a puzzle in which each piece has text and a link to another website page on the same site. The site I am trying to replicate is: https://www.tringconnections.org.uk/ - see the heart shaped puzzle at the bottom.

I have tried creating the heart shaped puzzle in several different ways:
1- created each piece as a 'Rollover Image' added the text, then positioned each piece in it's appropriate position and 'linked' all the pieces together as one image. This achieves what I'm after but the image will not center in the viewer's window and if I put the linked image into a Layer or Layout Grid, the image breaks into it's individual pieces.
2- converted the whole puzzle to a picture then overlayed the text, but I can't attach the links to the individual pieces of the puzzle.
3- I've tried putting the image into a Layer, a Layout Grid, a Flex Container and a Flex Grid but nothing seems to work.

Of course, I need the puzzle to be responsive but I am happy to adjust as necessary in different Break Points.

Does anyone have any ideas how to achieve this?

Unfortunately, I can't find an upload to share my .wbs file, so can't show my work so far.

All help will be greatly appreciated. I've spent several days on this problem now and I don't have much hair left!!


Roy

[WWBman]

Have you tried the Image Map? (Insert > Image > Image Map).
Using the existing image you can create linkable hotspots.

[Pablo]

If you use absolute/fixed layout (like in Serif WebPlus) then you have full control over the layout so you can position elements anywhere you like.
If you use flexible/floating layout (with layout grid or flexbox) then the layout is controlled by the grid.

With a flexgrid you can define a grid where the images will be layed out as in your example.
To center the grid you can set a max width.

Or you can use a floating layer for puzzle where the elements have absolute positions. In that case you can use breakpoint to adjust the layout for smaller screens,

[MGD4me]

I had a brief look at the website, and it appears that the heart shaped 'puzzle' is a single image. I cannot click on any of the individual puzzle pieces... only the text labels are clickable?

If that's the case, this should be easy to replicate.

[roygore]

Thanks everyone for your replies and suggestions.

Yes, my original puzzle just had links attached to the text in each piece of the puzzle. But I would like to improve on that and attach a link to the actual puzzle shape as well as the text.

As a new comer to WWB I'm still learning the all the features and tricks of using WWB. WWB has an abundance of features and functionality and your help is greatly appreciated by someone new to WWB tying to learn and find his way around all the world of WWB.

I will have a go at each of the suggestions and let you know how I get on.


Thank you.

Roy

By the way, is there a way to upload files to a post to demonstrate problems, etc.?

[Pablo]

By the way, is there a way to upload files to a post to demonstrate problems, etc.?

See this related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[roygore]

Thanks Pablo for the link about sharing wwb files on posts.

I've tried implementing the ImageMap solution offered by WWBMan as it seems straight forward.

I've used a .png image of the heart shaped puzzle and added Polygon shapes to cover each piece of the puzzle. When I Preview the page, it all looks good however the Polygon shapes are not holding their position - ie they have shifted slightly down and to the right. They do however, appear to work.

Next, I added a link to one of the pieces and tested by Previewing the page. When WWB starts to Generate the html output' , WWB freezes with a window showing 'initializing'. The only way I can get out of this is to go into 'Task Master' and force WWB to close.

Am I doing something wrong or is there a problem in WWB?

This is a very elegant solution so really want to get it to work.

Help!

[roygore]

Further to my post:

I've put the ImageMap inside a Layout Grid - is this wrong??

Roy

[Pablo]

Unfortunately, HTML image maps are not responsive because the coordinates use absolute positions. So, image maps only work in a fixed layout.

[roygore]

Thanks Pablo,

1- Should I put the puzzle inside a Layer or some other envelope or just leave it to stand alone on the page and adjust it in each Breakpoint?

2- When I take the puzzle out of the Layout Grid and put it into a Layer, I don't get the freezing problem. However, I can't seem to get it to center on the page. Any idea why the Layout Grid should cause a problem with adding links to the puzzle pieces?

Thank you for your help.

[Pablo]

1. For a fixed layout with breakpoints you do not have to use layers.
2. In the page properties you can set the alignment of the page. Note that this is only for fixed layouts.

[crispy68]

If you are creating a floating layout using layout grids, then why not use a full width floating layer where the alignment of the floating layer is set to center? This gives you the 'fixed' layout you need but still allows the rest of your site to be flexible.

[wwonderfull]

Puzzle link. Nice...
I had done that in the past



Use a puzzle heart image (svg image format recommended) and place some text and link them to menu easy.
And the animation is just to illustrate that you can trigger it through page transition or any event you prefer.

[roygore]

It's Monday morning and I'm back at it!

I think I have now managed to sort out the problem I had with getting the image to center in the viewers browser window. In the Breakpoints Manager, I had the 'Active breakpoints' set to "smaller than the device width" rather than "larger than the device width". No doubt a silly beginners error!!

After setting the breakpoints correctly and adjusting the heart hotspots in each breakpoint it all appears to be working as required.

Now on to the next challenge - how to display pdf documents on a page, then how to create an application form with lots of data entries. But I'll start another post if I need help with either of these.

I want to thank all of you for your responses and suggestions helping a beginner sort out and learn how to use WWB.

I can't thank you enough.

Roy

[wwonderfull]

To have a pdf in your website you can use an extension which is (PDF Object) you can download it from here

http://www.wysiwygwebbuilder.com/pdfobject.html

And for the from you can use Form Wizard

http://www.wysiwygwebbuilder.com/form_wizard.html

If you need more help regarding anything for making more Customized form in website, just ask me I will make a tutorial for you on the tutorials section.

[roygore]

Thanks wwonderful,

I will let you know how I get on.

Roy

[wwonderfull]

Thanks wwonderful,

I will let you know how I get on.

Roy

You'r most welcome ...

[roygore]

wwonderfull,

"If you need more help regarding anything for making more Customized form in website, just ask me I will make a tutorial for you on the tutorials section."

Yes please, it would be very helpful to have a full tutorial to learn from.

Roy

[wwonderfull]

Yes please, it would be very helpful to have a full tutorial to learn from.
Roy

I will make a good tutorial and will try to make in under 24 hour time.
You will be able to see it in this link below (24 hours)
https://www.wysiwygwebbuilder.com/forum ... m.php?f=26
As long as I posses the knowledge on the subject anything else you want to learn I would love to help.
Your Welcome.

[roygore]

Thanks wwonderfull,

That's great I will look out for the tutorial.

Thanks also for the offer of future help and guidance.

Roy

[wwonderfull]

I'm back with your help I was thinking to make a big tutorial but it will become too complex to grasp. I do not know what kind of data you want users to fill the form with by your users it would have been good if you told me what information's did you want from the users. I made this personally just for you.

1. Put some labels name them accordingly and also put some edit boxes now the comment box is a text area remember you can find these tools in "Form" You can use a form area or a layout grid both can be used as a form for layout grid go to properties and then click on form and check it then go to advanced setting.

After you have set up the the hole structure now comes the validation part. For you personally I would recommend HTML5 Validation because there are some critical settings in bootstrap which may problem you if you miss out those values which most basic users won't understand and it takes a lot of effort to understand. So for now validation set to HTML5.

See this carefully and you will understand everything easily...


When that is set now comes the form data part if you want the form data to get emailed to you then follow this method if you want GMAIL to give you the email other wise you get an smtp service when you rent web server that also has smtp like of info@yourwebsitename.com and for Gmail users it's directly their email.

For more information on how to get form data emailed to your gmail and how to enable gmail smtp check this post https://www.wysiwygwebbuilder.com/forum ... 26&t=89814

If you want the form data to go to a .csv file in your own web hosted ftp server which is easy and also which can be opened in excel-sheet then follow this:


And if you face any problem creating the form then please at FIRST! give a demo .wbs file to me so I can check what you have done.

Thank You.

[roygore]

Good morning wwonderfull,

Thank you for your time and effort in creating something just to help me. I really appreciate it.

As I mentioned in a previous post, I am redeveloping my old websites into WWB. The form which I want to recreate can be found here: https://www.tringconnections.org.uk/add_your.html . The idea is that people fill in the form, then all the data is emailed to me and I enter their club details onto the website which will then appear under one of the categories in the heart puzzle on the home page.

Do you have an email that I can send my .wbs file so you can see my efforts so far?

Thanks
Roy

[wwonderfull]

As I have already given you the instructions on how you can get the data emailed in this tutorial link.
This will most likely do the work perfectly.
https://www.wysiwygwebbuilder.com/forum ... 26&t=89814

The form Part if you have any other problem only then you can separately make a .wbs file upload it and share a link.

[roygore]

A final thank you to everyone for your generous assistance in helping me to resolve my problems with the heart shaped puzzle and links. It all now appears to work as required.

Without people like you, new people like me (ie learners) would no doubt struggle to learn all the features available in WWB.

I now turn my attention to getting a large form working properly but I will raise another post for that if required. The form I want to recreate in WWB can be seen here: https://www.tringconnections.org.uk/add_your.html . wwonderful - I have sent you an email regarding the form.

Thank you all.
Roy

[wwonderfull]

The form I want to recreate in WWB can be seen here: https://www.tringconnections.org.uk/add_your.html .

May be this is what you are looking for. I made a prototype in WWB.



If you need any help then come to live chat it will be quick https://go.crisp.chat/chat/embed/?websi ... abc687036d

[roygore]

Brilliant! That looks great! Thank you.

Any way you can send me the .wwb file with the form please so I can see how you created it? Email is: roy.gore@rlgconsulting.co.uk

I created a simple form for testing and learning using a layout grid - not as good as yours. I can't get the check boxes and their associated text to remain next to each other - ie the box and the text separate in different breakpoints. Is there a way to make the boxes and their text remain attached in breakpoints - ie when I resize the screen? Using the layout makes the form responsive but the boxes and their text is treated separately.

I am also currently reading posts and trying to work out how to setup email correctly. I've read your posts and the 'Creating a Form' tutorial plus others, but am still not confident. I assume that if I tick the Form Processing box in the form settings and fill in my email address along with the other fields, that the form data will be sent to that my email address when the Submit button is pressed. I have also set the 'File Extension' to php in the page properties. Is that all I have to do?

Thanks again for your form.
Roy

[roygore]

Further to my last post:

I have also setup a 'Success' page and a 'Fail' page which I linked to in the Form settings.

Not really sure what the 'Message' field is really for?

Roy

[wwonderfull]

I created a simple form for testing and learning using a layout grid - not as good as yours. I can't get the check boxes and their associated text to remain next to each other - ie the box and the text separate in different breakpoints. Is there a way to make the boxes and their text remain attached in breakpoints - ie when I resize the screen? Using the layout makes the form responsive but the boxes and their text is treated separately.

This example I gave was done in a form layer not a layout grid I will also give an example how it may look in layout grid.

I am also currently reading posts and trying to work out how to setup email correctly. I've read your posts and the 'Creating a Form' tutorial plus others, but am still not confident. I assume that if I tick the Form Processing box in the form settings and fill in my email address along with the other fields, that the form data will be sent to that my email address when the Submit button is pressed. I have also set the 'File Extension' to php in the page properties. Is that all I have to do?

[wwonderfull]

This is the layout grid version
Desktop view


Mobile view