Skip to main content

Just a quick idea on website usability; I was searching for some information about goals and how they’re set-up for the split testing. It took a bit of time to find the answer, working my way through your site. Would love to see a “search” feature on your website! It might’ve made finding the answer a bit quicker. Us marketers are pressed for time!


Seriously though, you’ve got an awesome product - pat yourselves on the back.

Cheers for the suggestion Chris!.. and thank you for your support!


Providing resources to help Unbounce users be successful with their landing page goals is something we really want to get right; We see it as a win-win opportunity for everyone. Any suggestions along these lines are very welcome.

Hi Chris,


There is a search on the blog section of the website which (at this point) contains the vast majority of our content. You can find it by scrolling about halfway down any blog post (in the sidebar).


Note - it’s a Wordpress search so not very good. If you have a phrase in mind - wrap it in quotes “” and you’ll get a much better result.


It’s likely that we might add a global search at some point as we build up the non-editorial content on the site as we grow.


Thanks for the compliment btw. Much appreciated.


Cheers

Oli

 

This was the best solution I could find. Which works as a lightbox or as a separate page. Below is the code I used for the lightbox. Then I used the lightbox html for the search button url on the navigation bar which show as a separate page. Here is how I incorporated it on the page: https://discover.unfi.com/signs/ 

 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box; 
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 24px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
    height: 800px; 
    overflow: auto;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 20px;
  text-decoration: none;
  font-size: 22px;
  color: #64534F;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
       
</style>
<body>
    <div class="scroll">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
    

    
<ul id="myUL">
<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>
<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>

<li><a href="ADD URL HERE"target="_blank">ADD TITLE YOU WANT TO SHOW HERE</a></li>

REPEAT THESE LINES AS NEEDED
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = lii].getElementsByTagName("a")t0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li i].style.display = "";
        } else {
            li i].style.display = "none";
        }
    }
}
</script>

</body>
</html>

Reply


Terms & ConditionsCookie settings