Building a Travel Blog with Airtable

Travelista Club

Photo by Hunter Harritt on Unsplash.

Homepage

As website is heavily focussed on travel articles and not much else – hey have a pretty massive amount of content to publish and the homepage loop is reserved just for the latest posts.

How its made…

Airconnex Hero

We used a hero image at the top of the page to really emphasize what the site is about and get the visitor visually engaged. Its also a chance to prominently display the 'write for us' link that allows writers to contribute and keeps the site able to continuously churn out articles.

For the background image, we used the Unsplash Library button in Airconnex to find royalty free travel images.

Airconnex Loop

Below the fold is just a pretty big loop of the most recent articles. This is a pretty standard loop style with the image above. Notably we used the excerpt option on the text to make all the rows the same height (creating a grid effect).

The search option is also switched on which allows visitors to search for articles containing specific keywords, and a load more button at the bottom of the loops will let visitors browse through past articles.

Category Listing

This blog was exported from an existing wordpress site, with the articles and their metadata being sent to Airtable.

Being a global travel blog, they are categorized by country.

How its made…

Airconnex Loop

This page is just a loop of all the countries in an Airtable, with the image as background.

For the images, we just added the name of the country to an Unsplash 'Source' URL. This allowed us to pull the URL for beautiful images of every country to use in the loop, and also in the hero block of the country page.

Each one links to a dynamic page for the country. Worth noting is that in this case, the page url is 'best-places-for-backpackers' as this was the URL structure put forward by the SEO team as the search term they were targeting. The dynamic value is the name of the country.

The result is a URL that's very descriptive and (arguably) positive for Search Engines.

Category Page

From the Category Listing, each country links to a dynamic page which has all data for the Country (name, images, etc) available as click / paste values. These are used to create a page template which will then work for any of the dynamic urls.

How its made…

Airconnex Hero

The hero is configured to use dynamic values from the page (in this case, its showing 'Italy'). Dynamic pages work like a template, so we just had to build one page which will then work with any of the dynamic urls. It only took about 15 minutes to build out the entire Country / Category system.

Airconnex Loop

With thousands of articles (and more coming in the near future) it would be very labor intensive to setup a 'linked' field from the Articles to the Countries table. Instead we just used a keyword (text) filter that only shows articles in the loop that contain the name of the country in the title or keywords.

So, for this page (italy) the loop of Articles is being filtered to only show the ones with 'Italy' in the keywords…

From the loop, each article links to another **dynamic page** with the URL 'guides' and the dynamic value being the Title of the article. Again this is done to improve the topical relevance of the URLs / pages for SEO

Article

In our case, the articles are being written by hundreds of different writers who are sourced both through the 'write for us' page and also externally. The writing is actually done through a 'central' system (also built with Airconnex) which handles the content production for multiple blogs from a single portal.

The articles are contained in a central Airtable base linked to multiple blogs.



Although this doesn't really affect the page layout, its interesting to note as I'm not sure this would be possible with many other 'nocode' web builders.

How its made…

Airconnex Hero

As usual we added a Hero block to give the visitor a big, visually appealing entry to the page before breaking into a wall of text.

Airconnex Text Block

The text block is used for showing large blocks of text (eg Articles) and can also contain rich text and HTML elements. Using the Airconnex Editor you can even embed images from Airtable into your articles within the text (similar to the old WordPress editor experience).

You can export WordPress Posts to Airtable, and use this block to display them.

Airconnex Single Record

To show the writers information we used the Single Row block. This block has the same features as the loop, but it used for showing a single item rather than multiple. It's most commonly used on dynamic pages, where you can map values from the page to the block.

Contact Us

How its made…

x