Streaming live at 10am (PST)

Adding Hidden Text box over existing elements


#1

I want to add a large window of explanatory text underneath my description section that I have built to go with a lightbox portfolio component. I have watched the "show and hide text" button tutorial several times.

I have already built my portfolio site, so I'm not sure how I create the "Hidden Text" box and port the info into it. It would have to be on top of elements already there...which I don't think would work. How can I do this?


#2

Hi @Bradford_Parker, thanks for the post. So you are trying to put the picture in a show and hide on click? Is that correct? Which button or link you want to be the click trigger?

Could you share the site read-only link: https://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link ?

See the posting guidelines here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Looking forward to your response !

Regards,
Dave


#3

https://preview.webflow.com/preview/bkp-ux-portfolio?preview=a591ce3d6ab4fc81bff059e47a160906

What the deal is, after I built the site and populated the six different light boxes, I realized I needed more explanatory text for each project. I typed the text into a word file, and was going to cut and paste the text into a Hidden text box which could then be activated as described in the tutorial. However, I am stumped about how I can construct the hidden text box elements on the page, when there are already elements occupying the same space where I need to put it. How do I do this? Or did I just screw it up royally by not doing it as I was building the site the first time?
Do you understand that?


#4

Hi @Bradford_Parker, thanks for the update. When I took a look at the site, I can see you have elements on your page, but not all on the same space, you have a description text block, then a lightbox link below that.

When you click on the show hide button, do you want to have the text show above the lightbox thumbnail that is shown on the page and push the lightbox thumbnail down, or below it the thumbnail and push content down below that, or do you want a text box to hover over the lightbox thumbnail?


#5

Hi Cyberdave,
I original intent was to have the 'show and hide' button just below the description text block, and to have the hidden text ABOVE the Lightbox thumbnail, pushing the lightbox thumbnail down.

If you have an easier idea, I am open to it!


#6

Hi @Bradford_Parker, thanks for the update. I think that having the text push down might make the user have to scroll back up to view the text. I have some suggestions for you.

Could I clarify one thing though, the text you want to show, for example, look at the screenshot below and the text that is highlighted. This is the text you want to first hide, and then show, correct?


#7

Cyberdave,
No, it is much much more text than that...up to a half page. It is much more detail than the Description section. You suggested going to the Lightbox when I had trouble making the slider work for my images, so I am open to using another design pattern for this component if you have a better idea! smile


#8

Hi @Bradford_Parker, thanks for the update, where is this text you mention, I guess that is what has got me a little confused, I was unable to find that long text you speak of, is that added yet?

What I try to do, is to experiment by having all the items, and then playing with different layouts to see what fits and works the best smile

Regards,
Dave


#9

I have not added it yet, due to the fact I could not figure out how to build the text block to put it in...since I would have to add elements ON TOP OF what is already there! I am probably wrong, and there IS a way to do it, but I don't know how.

Here is an example of one of the text blocks I want to add:

Problem Statement:
The original Web Admin tool for TelePresence had a non-intuitive spreadsheet-like interface. It had no hierarchical structure to make the most important things immediately visible. Command-line interfaces were the only way to access many functions, causing a high cognitive load for users. In addition, first time setup of a system, as well as troubleshooting a system, required reading manual documentation with no interactive testing feedback.

Goal:
Create an easy to use Web-based tool for installers and field engineers to set up and troubleshoot TelePresence room systems in the field. Tool must be fully mobile enabled. Goal was to enable this large-scale room system to be installed in a day.

Solution:
Extensively interviewed key users of admin systems, including admins, installers, and field engineers to determine the issues, pain points, and opportunities for optimization for the new design. Created an HTML5 application usable on laptops, tablets, and smartphones. A responsive layout meant a system could be monitored just using a smartphone. A wizard-like interface provided exact step-by-step instructions for first time setup…leading the installer through the validation test process. The same tests could be accessed through the Hardware troubleshooting section, which field engineers use to drill down and identify problems with the system. Response from customers has been excellent, and systems have been consistently able to be installed in LESS than a day.


#10

Hi @Bradford_Parker, thanks, gotcha smile I will continue to take a look at this smile


#11

Thanks a lot man!! I appreciate you helping me out as I am discovering the methods of working with this amazing tool.


#12

Any progress to report Cyberdave? Looking for a solutions...


#13

Hi @Bradford_Parker, here is a suggestion how to create layout and the interaction for the click to show and hide text.

I hope this helps !


#14

Wow Dave, that is perfect! Thanks so much for the detailed instructions.
I feel like I understand Webflow a lot better after watching this! The problem with most of the canned tutorials is they are too fast paced, too small in size (I can't read the buttons on the video) and are for a generic solution...which may not be appropriate. Webflow is a wonderful tool, but some of the structural paradigms can be hard to discover (like THIS one!)

You da man, Dave!! Thanks again Laughing


#15

Hi @Bradford_Parker, thanks for the update ! I can understand your feedback on the video tutorials. Those are really not designed to solve every situation, but I get the point wink

There are new videos coming soon which will help things, and you can always send us your feedback direct to support@webflow.com -- It really does helps a lot !

Our mission is to keep on improving the docs and videos, and you will see improvements for those !


#16

Dave, been trying to follow your video closely, watching it several times, and I am running into problems. The button interactions behavior is not working as you showed, When I click it, the button expands to full column width, then doesn't execute the link to the Hidden Textbut I am unable to figure out where I went wrong. The Hidden Text looks fine. please help!!!


#17

CyberDave, I desperately need your help on this!!
I followed all the methods you recommended, then meticulously combed over all the structure and interactions to match what you said on the YouTube video. The text and everything looks great, but:

THE BUTTONS ARE NOT WORKING!!! I have a phone interview at 2:30pm PST today, and I need this to be working. Please please please help me troubleshoot this. It MUST be something simple that I missed, because I watched your video multiple times and tried to follow it religiously. Please help man!!!! confounded


#18

Hi @Bradford_Parker,

You have a few things to fix on the setup. See my followup video:

I hope this helps !

Regards,
Dave


#19

Great tips Dave! I will do them right away smiley

Brad


#20

Dave, I am ready to pull my hair out!!! I have re-played the video about a dozen times, stopping after each instruction, and making the changes on the Designer before playing the next instruction. The static images/text looks fine, but when I try to preview it, two things happen.
1. The Read More button has disappeared

  1. The Read More buttons and Lightbox thumb images for a couple the Lightbox Section disappeared. It is crazy!! I'm sure it is just a few simple things, but I have gone over and over this and can't find what I did wrong! Can I just hire you to help me fix this? I have a number of job interviews that are depending on me being able to show my portfolio scream