Trends may ebb and flow, but there are a few fundamental pillars of great websites that don’t change.

Many businesses feel the need to chase after new tools, faster frameworks, and the latest bells and whistles. In reality, businesses can avoid costly, frequent optimizations and ensure their website’s success by focusing on three strategic elements: (1) customer-centered design, (2) clarity, and (3) consistency.

Read more here:

I love to travel. We recently visited the beautiful country of Argentina 🇦🇷Because I’m a native South American, many people assumed I speak Spanish based on how I look, but sadly, I don’t. I’m not sure who was more confused… me by the long strings of Spanish the locals would rattle off to me, or them by my confused stares when I had no clue what they tried to tell me!

That experience inspired my blog this week on ADA compliance. I’ve had a number of people contact me recently asking for help with making their website ADA compliant.

It may sound small, but ADA Compliance is actually a big deal. More and more companies are getting warnings, and some threatened with lawsuits.

To see if your website is ADA compliant and to learn why it should be, check out this week’s blog:

As a Certified NationBuilder Architect, one of the most common requests I hear from my NationBuilder clients is, “Can I integrate NationBuilder with WordPress?” The answer is absolutely yes, you can.

While NationBuilder and WordPress are two different softwares, there are a variety of reasons why anyone would want to use them together:

  • You have a brand new website on WordPress and don’t have the budget to move it all over to NationBuilder;
  • You’re interested in the tools and functionality offered by NationBuilder, but want to use WordPress as your CMS and front end;
  • You want to try NationBuilder out, but aren’t ready to commit to migrating everything over just yet.

Using the NationBuilder API

I recently worked on a client website where myself and a Certified NationBuilder Developer hooked forms on a client’s WordPress website up to their NationBuilder account. These forms were used to register new users, and to leave feedback. Once a user filled out the form, our application sent the form data over to the client’s NationBuilder account.

nationbuilder, nationbuilder wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress, nationbuilder with wordpress
A form on a WordPress website that is linked to a NationBuilder environment using the API


nationbuilder, nationbuilder wordpress, nationbuilder with wordpress, nationbuilder and wordpress, nationbuilder worpress api, nationbuilder api, hook nationbuilder to wordpress
The form information was submitted successfully to the NationBuilder environment.

Without having to migrate their entire WordPress website over to NationBuilder, we allowed the client to easily collect data into their NationBuilder environment.

There are two common ways to display NationBuilder blog post images on other pages of your NationBuilder website.

In my first example, our Recent news section needs to show an image from the post in the left column, and the title/excerpt in the right column.

nationbuilder blog, nationbuilder image attachment, nationbuilder featured image, blog post image, nationbuilder post image, nationbuilder images from blog

In this situation, we need to call the post’s image separately from the excerpt and title. To do this, I added the following code to my “_blog_latest.html” file (if you’re confused about this, please reference the NationBuilder documentation here for showing content from one page on another).

 <div class="col-md-5 col-small-12">
     {% for attachment in post.attachments limit:1 %}  
          <img src= "{{attachment.url}}">
{% endfor %}          

The above code will tell NationBuilder to find the post’s attached image (this is key) and display it in the left column. To attach an image to a post, you need to upload the image as a File in the post’s Dashboard, thereby attaching it to the post. Simply adding the image into the body of the post will not work!

The second example is much easier. In this design, the website’s blog landing page needs a design where an image from the body of the blog post will appear above the excerpt. To accomplish this, we need to upload our image to the “Files” section and then add the image to the “Before the Fold” section of the post’s content. Below is the code you’ll need for this to work.

nationbuilder blog landing page, images to blog page, featured images nationbuilder, nationbuilder attached images

<div class="page-excerpt padbottom" id="blog-post-page-{{ }}">
      <h3><a href="{{ post.url }}">{{ post.headline }}</a></h3>
      <div class="excerpt">
        {{ post.blog_post.content }}
      {% if post.blog_post.is_extended? %}
        <span class='read-more'><a href='{{ post.url }}'>Read more</a></span>
        {% endif %} 
    {% endfor %}

Notice the difference. Instead of calling the separate blog.attachment, we’re instead just pulling the excerpt content, which will include the image since it’s above the fold.

<div class="excerpt">
        {{ post.blog_post.content }}

We threw this design together last week for a client’s website, and I thought I’d share it here. It uses CSS3 Keyframes to animate the background color, and we added some jQuery from CountUp.js to animate the numbers counting up.

Take a look at the code below and feel free to copy and use in your own projects.

See the Pen Keyframes and CountUp by Design4 Marketing (@Design4) on CodePen.