Row with 4 columns, how can I insert 4 links?

For sure.

1. Is the page you’re linking to static or in WordPress. It depends. If you move WordPress you can map urls so although the folder structure changes your urls don’t. But if you’re linking to a static page and you move that, then yes, you’d need to update your HTML to reflect the new url.

2. Yes, sure. Is your site live? Can you send me the link if it is. I’ll take a look and send through some CSS to help. If you have privacy concerns just use the Private Reply checkbox to send your site url.

3. Here is something you might try:

https://css-tricks.com/equal-height-blocks-in-rows/

You could use this plugin: https://wordpress.org/plugins/header-and-footer-scripts/ to include that bit of code in your header, just wrap it in a script tag:

<script>
var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $('.blocks').each(function() {
   $el = $(this);
   topPosition = $el.position().top;
   if (currentRowStart != topPosition) {
     // we just came to a new row.  Set all the heights on the completed row
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     // set the variables for the new row
     rowDivs.length = 0; // empty the array
     currentRowStart = topPosition;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     // another div on the current row.  Add it to the list and check if it's taller
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
  // do the last row
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });​
</script>

Each of your divs would need to have the class “blocks” for the script to work:

<div class="blocks">
<!-- Content goes here -->
</div>
<div class="blocks">
<!-- Content goes here -->
</div>
<div class="blocks">
<!-- Content goes here -->
</div>
<div class="blocks">
<!-- Content goes here -->
</div>

The link is something your theme would handle the styling of. Assuming you give those blocks a class of “blocks” you could say something like this:

.blocks a { 
color: #9db668;
text-decoration: none;
}
.blocks a:hover {
color: #9db668;
text-decoration: none;
}

Custom CSS code goes in a Custom CSS plugin or in Theme Settings somewhere if the theme offers that.

Did you try my initial suggestion for that?

<a href="http://example.com">
  <div>
     <!-- Content goes here -->
  </div>
</a>

With the extra div it would look like this:

<div class="blocks">
<a href="http://example.com">
  <div>
     <!-- Content goes here -->
  </div>
</a>
</div>

For sure. If you scroll up you’ll see the link CSS I provided. Just set the color to the same color as your text.