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.
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.
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.
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:
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
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.
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. ✨
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! ⛑