How to Create a Blog on Yola

Zoran Zoran
8 minute read

In this short tutorial, we’ll show you a few simple steps that will let you create a blog with Yola. There’s no better, more economical way to drive organic traffic to your site than with blogging, and any business has the potential to benefit from it. Adding a blog to your Yola website is quick and easy. So relax, sit back, and enjoy the ride.

What Is Yola and Can You Blog With It?

Yola is a neat website builder that includes eCommerce functionalities. It’s been on the market for more than twenty years, which means an invaluable amount of experience and user feedback have gone into making the platform as efficient as possible. 

This site builder offers a variety of tools that make it easier for you to build and boost your online presence. However, there’s one thing that’s missing: native, built-in blogging functionality. There used to be a way around this problem—the platform allowed you to connect your Yola website to a Tumblr blog through a widget but that’s not possible anymore, at least not if you’re using the new Yola Sitebuilder+ editor.

But even if it was, connecting Tumblr to your Yola site was far from ideal. In a business context, Tumblr is anything but a professional blogging solution. Businesses need their own dedicated space and stand-alone blogs to get the most out of blogging. Tumblr is more of a social-network-meets-blogging platform versus a specialized blogging solution for businesses. It’s not suitable for advertising; otherwise, many companies would’ve used it for marketing purposes. When you take into account the gradual decline in Tumblr’s value and popularity since about 2013, it becomes evident that a Tumblr integration for blogging leaves a lot to be desired. 

Today, Yola completely lacks a blogging option, which is a shame, because, regardless of how big or small they are, serious businesses require a full-blown blogging tool with a modern vibe. DropInBlog fits this description perfectly. It provides you with all the necessary tools—and then some—to spread the word about your business, boost your site’s popularity, and generate more leads. So, let’s see how easy it is to integrate DropInBlog into your Yola site.

Prerequisites

Adding DropInBlog to Yola simply requires copying and pasting a few lines of code. To do this, you need a DropInBlog account and a Silver or Gold Yola subscription. Unfortunately, it’s not possible to add custom code to the Free and Bronze Yola plans, and since we integrate DropInBlog through embed codes, having at least a Silver subscription ($15.95/month) is a must. 

As for DropInBlog, you can take it for a spin for 14 days free of charge and see for yourself how convenient and powerful of a tool it can be.

Create a Blog Page

So, you have DropInBlog and Yola accounts, and you’re all set to start a new blogging chapter. 

The first thing you need to do is create a new page in Yola. You do this by clicking Pages on the left side of the navigation bar, right next to the Yola logo. When you click the round plus icon, you’ll see these options:

Yola add page DropInBlog

We thought naming the page Blog was most appropriate for our new page, but you can name it as you wish. You can keep the Display in navigation and Empty Page options unchanged. Or, keep in mind that rather than a blank page, you can select one of the pre-designed Yola templates and edit it later according to your aesthetic principles. For the sake of this tutorial, we’ll keep things simple and start with a blank page.

Adding an HTML Block

After you’ve added a new page, which you can access by clicking the Pages button, you’re ready to start building your blog page by adding a block. A block is just a container for different types of content.

Yola build block page

Clicking the plus button will take you to a page where you choose the block type you want to add. We’ll select the HTML embed option since that’s what we’re doing here: embedding HTML code.

Yola html embed block

This is what we’ve got so far:

Yola move block up and down

Keep in mind that you can relocate a block by moving it up or down, as shown in the image above.

Add the Embed Code

We’re off to a good start, and we’re ready to move forward with the next step: adding the embed code.

Once you’ve added the block, click Pages and then your blog page’s Settings:

Yola blog settings DropInBlog

Scroll down until you see the Before </body> tag section. This is where you’ll add the first snippet of HTML code from DropInBlog. 

In your browser, open a new tab, log in to your DropInBlog account, and click Code & Layout. Copy the code from Step 1 and paste it in the closing body tag section, as shown in the picture below. 

The Step 1 code looks like this:

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

Yola embed code step 1 DropInBlog

Save your changes by clicking Submit

One caveat before moving to the next section: keep in mind that your DropInBlog ID won’t look like it does the image above. The Xs are there just for illustrative purposes. Your personal DropInBlog ID is a combination of numerals and upper case letters.

Display the Blog Posts on your Page

Now, return to your blog page and select Custom HTML.

Head back to the Code & Layout page on DropInBlog, copy the code from Step 2, paste it into your Yola blog page, and click Submit

This is what the Step 2 code looks like:

<div id="dib-posts"></div>

Yola custom html DropInBlog

You need to publish your site in order to execute the code you’ve just embedded. Click the Publish button in the upper right corner and you’ll see this message from Yola:

Yola publish site blog

Based on our research, Google will index your Yola site even with a yolasite.com domain, but it’s always a much better idea to have a custom domain, especially for businesses. 

After you’ve published your site, you can either click on the link that you see in the image above (of course, for your site, it won’t be exactly the same link as shown here) or check how your live website looks from the dashboard.

Copy Your Blog URL to Your DropInBlog Account

There’s one last thing to do. Copy your blog URL:

Yola published blog link

After you’ve copied it, head back to your DropInBlog account once again, click Settings in the navigation menu, and paste the URL as shown in the image below:

DropInBlog settings

Scroll down to the Save All Changes button, click on it, and that’s it. You’re done! See, we told you that it’s an easy and quick process, didn’t we? :) 

Now, your DropInBlog account is fully connected to your Yola account. You can add new posts on DropInBlog and see them published on Yola. You have a cool website and an amazing blog; you’re well on your way to greatness.

Design Tips for Using DropInBlog With Yola

Yola offers a ton of well-designed templates, and no matter which one you choose, DropInBlog adjusts to it seamlessly. Apart from the SEO Analyzer, which is an excellent DropInBlog feature that helps you follow current SEO best practices, the ability to inherit the styles of your template is one of the most valuable assets of DropInBlog.

If you want more control over the look and feel of your blog, you can always add your own custom styling. The method to do so is similar to what we've already done here. You just need to add a new HTML embed block to your blog page and write some CSS, but this time you’ll need to put your CSS code within <style></style> tags.

For instance, if you want to change the background color, you could add something like this: <style>body {background-color:#999;}</style>. Custom CSS can make your blog look exactly the way you want.

Also, DropInBlog lets you add custom CSS directly into your DropInBlog account. To do that, you just need to go to the Code & Layout page. Under Advanced, you’ll find the Custom CSS section where you can add your custom styles.

Custom css DropInBlog

Let’s say you want to add some margin to your page; you can do that by adding the following CSS rule to the Custom CSS section: .dib-post-wrap {margin: 0 3em;}

Although these are only two examples of what you can do, the styling possibilities are indeed endless. In case you need help with anything, literally anything, please, contact us. We’ll be delighted to help.

Get started embedding a blog into your website right now

Try It For Free