How to Create a Blog on Swipe Pages

Dave Dave
3 minute read

In this guide we’ll show you how to add a fully functioning blog to your Swipe Pages landing page by adding just a few lines of code.

Swipe Pages is a tool for creating elegant landing pages. But what if you want to add blogging functionality? Swipe Pages comes with a good selection of modules for adding static content... but DropInBlog can extend your landing page functionality with a full featured blog.

Prerequisites

You’ll need to create a DropInBlog account, which you can do for free with a 14-day trial.  You’ll also need a Swipe Pages account and a landing page. 

Adding an Embed Module

Navigate to your Swipe Pages dashboard and select the landing page you’d like to edit. Choose a place for your blog section to appear and use the inline UI to add a Section, or a Row, to that area.

Adding a section or row UI in Swipe Pages

After setting up your section or row a large plus icon will appear, clicking it will allow you to add a module to this area. Select HTML Code from the list of modules in the left sidebar.

HTML Code module

Within this module is where you’ll be adding your DropInBlog embed code.

Embedding Your Blog

Open a new browser window, head on over to your DropInBlog account, and select Code & Layout from the main navigation. In the Blog Code steps, copy the code shown in Step 1 and Step 2. It looks something like this:

<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>
<div id="dib-posts"></div>

Switch back to your Swipe Pages landing page and paste the DropInBlog embed code into the HTML Code text area. Once you’ve added the code hit the Save button in the top right corner of your Swipe Pages browser window.

Code pasted into HTML Code module

Connecting Swipe Pages to DropInBlog

Next head back over to DropInBlog and select Settings from the main navigation. Locate the Blog URL field and add your Swipe Pages landing page URL. You can find your landing page URL in the Edit URL option in Swipe Pages (which is located under the arrow icon in the top right corner). Hit Save All Changes in the DropInBlog settings and switch back to your Swipe Pages editing view.

Publishing Your Blog Enriched Landing Page

To publish your landing page with these new changes click the Save button in the top right corner and then Publish. Use the Preview button to check out your new and fully functioning blog. ✨

Demo of the final blog page

Tips for using Swipe Pages

Swipe Pages has a variety of different template designs, and DropInBlog will inherit the styles of those templates automatically. 

However, if you want to add more custom styling you can use standard CSS to adjust the presentation. Use a new HTML Code module to add CSS within the <style>…</style> tags to begin customizing the design of your blog.

If you still need some assistance with getting set up please do get in touch and we’ll be more than happy to help out! ⛑

Get started embedding a blog into your website right now

Try It For Free