A vertical line is a great way to -- oh, you know what a vertical line does. If you're looking to create one in Weebly, you'll either need to download an app, or if you want complete control over the vertical line, this very simple tutorial.

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".
​
​On the left, under "STYLES", click on "main.less". On the right, add the CSS codes below:

/* Vertical Line */
.wsite-multicol-col {
  position: relative;
}
.vertical {
  background: #008aff;
  width: 1px;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}​

You can adjust the vertical line's color as shown below in orange:

background: #008aff;

You can adjust the vertical line's width as shown below in orange:

width: 1px;

Click "SAVE".

"Header tags", or "heading elements", are HTML tags that define the most important, to the least important, header text on your website. Yes, they're important for SEO, but at their core, they help create distinction and variety between the many header texts on your website.

This tutorial will show you how to add all h1, h2, h3, h4, h5, and h6 header tags to your Weebly site, apply unique CSS styling to each one, and adjust their styling for the desktop, tablet, and mobile versions of your website.

Note: Weebly's "Title" element is technically an h2 tag.

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".
​
​On the left, under "STYLES", click on "main.less". On the right, scroll to the bottom and add the CSS codes below:

​/* Desktop */
h1 {
  font-size: 48px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
h2 {
  font-size: 36px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
h3 {
  font-size: 28px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
h4 {
  font-size: 24px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
h5 {
  font-size: 20px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
h6 {
  font-size: 16px;
  color: #f1f1f2;
  font-weight: 300;
  line-height:1;
  margin:0 auto 10px;
  font-family: "Luckiest Guy";
}
/* Tablet */
@media screen and (max-width: 992px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 16px;
  }
  h6 {
    font-size: 14px;
  }
}
/* Mobile */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 16px;
  }
  h5 {
    font-size: 14px;
  }
  h6 {
    font-size: 12px;
  }
}​

Note: You can adjust the styling for the desktop, tablet, and mobile versions of each header tag as labeled within the CSS code above. Also, since Weebly's "Title" element is an h2 tag, you can remove the CSS codes for the h2 tag that come with your theme.

Click "SAVE".

Once you're back in the Weebly editor, you can now start adding your header tags!

To create a header tag, grab the Weebly "Embed Code" element from the left and drop it into your site. Now add the appropriate header tag to the element, and within those header tags, add your text as shown below:

​<h1>Hello, Everyone!</h1>

To change this header tag to, say, an h4 tag, simply make the following adjustment as shown below in orange:

​​<h4>Hello, Everyone!</h4>

At the moment, Weebly only allows you to change the date format of a blog post from "MM/DD/YYYY" to "DD/MM/YYYY" under "Settings>General>Site Formatting>Date Format"(know which date format your site is set to for this tutorial).

Fear not, as we'll show you how to take "2/27/19 (MM/DD/YYYY)" and change it to "February 27, 2019", or "27/2/2019 (DD/MM/YYYY)" to "27 February, 2019" by adding some code.

Note: After implementing the code for your desired date format and publishing your site, you may need to clear your browser's cache for the new date format to take effect.

Copy the jQuery code below:

// Blog Date Format
  $(".blog-post").each(function() {
    var postDate = $(this).find(".blog-date .date-text").text();
    var monthSplit = postDate.split('/').slice(0,1).join('/');
    var daySplit = postDate.split("/")[1];
    var yearSplit = postDate.split("/")[2];
    var thisPost = $(this).find(".blog-date"); 
    var months = ["January", "February", "March", "April", "May", "June","July","August","September", "October", "November", "December"]; 
    $(this).find(".blog-date .date-text").html(months[parseInt(monthSplit)-1] + " " + daySplit + ", " + yearSplit)
  });

Now in the Weebly Editor, go to "Theme>Edit HTML/CSS".

Once you're on the back-end of your theme, on the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery code you copied from above to implement your new blog date format.

Click "SAVE".

Copy the jQuery code below:

​// Blog Date Format
  $(".blog-post").each(function() {
    var postDate = $(this).find(".blog-date .date-text").text();
    var monthSplit = postDate.split('/').slice(1,2).join('/');
    var daySplit = postDate.split("/")[0];
    var yearSplit = postDate.split("/")[2];
    var thisPost = $(this).find(".blog-date"); 
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
    $(this).find(".blog-date .date-text").html(daySplit + " " + months[parseInt(monthSplit)-1] + ", " + yearSplit)
  });

​Now in the Weebly Editor, go to "Theme>Edit HTML/CSS".

Once you're on the back-end of your theme, on the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery code you copied from above to implement your new blog date format.

Click "SAVE".

If your website uses a language other than English, you can adjust the months on this line of code from the code above, regardless of your site's date format:

var months = ["January", "February", "March", "April", "May",  "June", "July", "August", "September", "October", "November", "December"];

A translation to Italian would look like this:

var months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio",  "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];

A blog post counter widget will automatically display the total number of posts your blog has.

The moment you add or remove a post and hit "Publish", the blog post counter will automatically and immediately display your blog's new total post count. You can add the blog post counter widget anywhere on your site you can add HTML code (this includes use of Weebly's "Embed Code" element).

For further customization of the widget, you'll be able to adjust, add, or remove the text that appears before and after the widget's number.

On the left, grab Weebly's "Embed Code" element, and add it to your site where you'd like the blog post counter widget to appear.

Now copy the HTML code below and paste it into the "Embed Code" element.

<div class="count"></div>

​At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS", and on the left, under "STYLES", click on "main.less".

Copy the CSS codes below, and on the right, add them to the "main.less" file, preferably near the blog's CSS codes:

​/* Blog Post Counter Widget */
.count {
  color: #008aff;
  font-size: 33px;
  line-height: 33px;
  font-family: "Luckiest Guy";
}
.count:before {
  content: "This blog has";
  margin-right: 5px;
  color: #ffffff;
}
.count:after {
  content: "posts";
  margin-left: 5px;
  color: #ffffff
}

On the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery codes below:

​​// Blog Post Counter
var url = "https://blogpostcounterwidget.weebly.com/blog";
var cool = [];

$.get(url, function(data) {

    var a = $(data).find(".blog-post").length;
    var b = $(data).find(".blog-page-nav-previous a").attr("href");

    function getMore() {
        if (a >= 1) {

            $.get(b, function(data) {

                var c = $(data).find(".blog-page-nav-previous").length;
                var d = $(data).find(".blog-page-nav-previous a").attr("href");
                cool.push(a);

                if (c == 1) {

                    b = d;
                    getMore();
                } else {

                    var a2 = $(data).find(".blog-post").length;
                    cool.push(a2);

                    var total = 0;
                    for (var i = 0; i < cool.length; i++) {
                        total += cool[i] << 0;
                    }

                    $(".count").append(total);

                }
            });

        }

    }

    getMore();

});

Within the jQuery codes you just added from the previous step, replace the orange text with the URL of your blog:

var url = "https://blogpostcounterwidget.weebly.com/blog";​

​Click "SAVE".

A recommended content widget will automatically recommend other articles on your blog at the bottom of each blog post to your visitors.

I know. We're excited too! We've been working hard and are very pleased to introduce to you a complete front-end -- Weebly native (no outside company or service used) -- recommended content widget for your Weebly blog.

Our recommended content widget will automatically recommended 4 blog posts at the bottom of every blog post on your Weebly blog. Yes, automatically! All you need to do is set the code and forget it, so let's go do that!

​At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

​On the left, under "PARTIALS", click on "blog>post.tpl".

Copy the HTML code below and add it to the bottom of the "post.tpl" file on the right as shown in the image below:

<div class="recommended">
  <h2 class="recommended-title">You Might Also Like</h2>
</div>​

Tip: Adjust the bold text to adjust your recommended content widget's title.

On the left, under "STYLES", click on "main.less".

Copy the CSS codes below, and on the right, add them to the "main.less" file, preferably near the blog's CSS codes:

/* Recommended Content Widget */
.recommended {
  display: flex;
  flex-direction: column;
}
.wsite-blog-index .recommended {
  display:none;
}
.recommended * {
  padding: 5px 0;
}
.recommended a {
  color:#008aff;
}

Download the file below.

Copy all of the jQuery codes within the file you downloaded. In the Weebly Editor, on the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery codes you copied.

Within the jQuery codes you just added from the previous step, replace the orange text with the URL of your blog:

var url = "https://recommendedwidget.weebly.com/blog";​

​Click "SAVE".

By default, the recommended content widget will automatically show 4 random blog posts at the bottom of each blog post on your blog.

It will not show the blog post the widget is being viewed on, naturally.

Once you publish a new blog post, that blog post will immediately begin to appear in your recommended content widget. There's no waiting period for it to be crawled or scraped.

At the moment, the recommended content widget it setup to display just blog titles, but if you're interested in customizing it to better fit your site's needs, you can hire us to take on this project for you!

If you've decided to move your Wordpress website to Weebly, there are 3 things you need to transfer: domain, theme, and content.

At the moment, there's currently no single button to click in Weebly that'll automatically import your Wordpress website into Weebly. This is a manual process because Weebly and Wordpress use different interfaces and files to build a website.

Below, we'll provide some quick information on transferring your Wordpress' domain, theme, and content to Weebly, but if you need help, you can hire Themezier to take on this service for you.

You need to transfer your domain to Weebly's servers. Right now, your domain is being used by Wordpress' servers.

To transfer your domain to Weebly's servers, you'll need to make 2 DNS changes in your Wordpress account. You can follow Weebly's detailed tutorial, but to summarize, in your Wordpress account: 

• Go to "Dashboard>Store>My Domains"
• Select the domain you want to transfer and click "Edit Domain>Edit DNS".
• Hover over the "A" record and click the pencil icon to edit.
• To the right of "points to", add Weebly's IP address: 199.34.228.59
• Now create a new "A" record, add your domain with "www." in front this time, then to the right of "points to", add Weebly's IP address: 199.34.228.59
• Be sure to save your changes after each edit.

Note: If your domain wasn't purchased through Wordpress, then you'll simply need to make the changes above with the company you purchased the domain from.

If you haven't already, create a Weebly account first.

For themes, you can choose one of Weebly's free themes, purchase a third-party Weebly theme, or convert your Wordpress theme to Weebly.

If you want to convert your Wordpress theme to Weebly, the theme will need to be built from scratch in Weebly.

​As mentioned above, Weebly and Wordpress use different interfaces to build a website, so a Wordpress theme that's imported into Weebly will not display correctly because the Weebly Editor can't read the Wordpress theme's files.

From here, you can either manually create your Wordpress theme in Weebly if you're knowledgeable with code, or you can hire Themezier to do it for you. Here is an example of a Wordpress theme called "Rowan" that was converted into a Weebly theme:

At the moment, Weebly doesn't offer a feature to easily import content from Wordpress to Weebly with the click of a button. So instead, you'll need to copy and paste text and images from your Wordpress site to Weebly pages:
​

• Blog Posts: To transfer Wordpress blog posts into Weebly, go to "Pages" at the top, click the "+" icon, and select "Blog Page". From here, you can create new blog posts to add content from your Wordpress blog posts too. You can also change the date of Weebly blog posts to reflect the date of your Wordpress blog posts.
• Non-Blog Pages: For any non-blog post pages on your Wordpress site, you can use Weebly's "Standard Page" by going to "Pages" at the top, click the "+" icon, and select "Standard Page".
• Store Pages: Since e-commerce on Wordpress and Weebly are 2 different animals, bringing a Wordpress e-commerce store over to Weebly must be done from scratch. To create a store in Weebly, go to "Store" at the top and then complete the store checklist to get your Weebly store up and running.

If you need a Weebly page layout to look and function like a page layout on your Wordpress site, you can hire Themezier to create a new custom page layout for your Weebly site.

If you'd prefer, you can hire Themezier to help you successfully move your Wordpress site to Weebly. We'd be happy to help you:
​

• Transfer your Wordpress domain to Weebly
• Convert your Wordpress theme to Weebly
• Move your Wordpress content to Weebly

​The cost to move a Wordpress website to Weebly depends on the size of your Wordpress site, the complexity of the Wordpress theme that needs to be converted, etc. For more information on moving your Wordpress site to Weebly, feel free to send us a message so we can discuss in detail the parameters of your project.

​Note: While much of a Wordpress website can be transferred seamlessly to Weebly, some Wordpress plugins provide features that Weebly sites currently can't. If you need help in figuring out whether Weebly can provide certain features your Wordpress site has, just send us a message!

You can add CSS to a Weebly website a number of different ways to serve your styling needs. We're going to discuss the different locations within your Weebly theme where you can add CSS codes and why one location would be more ideal than another.

Every Weebly themes comes with a main CSS file called "main.less" or "main_styles.css" (older themes). These CSS files houses your Weebly themes main CSS styling codes.

Location Benefit: Add CSS codes here when you need CSS codes to apply to every page on your Weebly site.

You can find our next CSS location by going to "Settings>SEO>Header Code". Adding CSS to the "Header Code" area requires the use of HTML "<style></style>" tags.

Location Benefit: Add CSS codes here when you need CSS codes to apply to every page on your Weebly site, but you don't want the CSS codes to apply to the site in the Weebly Editor -- only the live site.

Just like the previous location, when you click on a page in your Weebly site, and then select "SEO Settings", you'll be greeted with another "Header Code" area.

​Adding CSS to this "Header Code" area requires the use of HTML "<style></style>" tags as well.

Location Benefit: Add CSS codes here when you need CSS codes to apply to just a specific page on your site, but you don't want the CSS codes to apply to the site in the Weebly Editor -- only the live site.

In the Weebly sidebar you'll find the "Embed Code" element. If you add this element to your site, you can add CSS codes to it.

​Adding CSS to the "Embed Code" element requires the use of HTML "<style></style>" tags.

Location Benefit: Add CSS codes here when you need CSS codes to apply to just a specific page on your site. Sometimes the Weebly Editor will interpret CSS codes here, but not always.

If you go to "Theme>Edit HTML/CSS>HEADER TYPE", you'll see all the page layouts your Weebly theme currently has. You can add CSS codes within the HTML "<head></head> tags of each page layout.

​Adding CSS within the HTML "<head></head> tags requires the use of HTML "<style></style>" tags.

Location Benefit: Add CSS codes here when you need CSS codes to apply to just a specific page layout on your site.

Pagination is a blog feature that displays blog page numbers at the bottom of a blog to allow the visitor to easily navigate between blog pages. ​One of the most basic features any blog should have is pagination, but unfortunately, Weebly is slacking in this area.

​The closest thing Weebly has to blog pagination are "<<Previous" and "Forward>>" links, which, if we might add, are each located on the incorrect side of the "Blog" page.

​Fear not, as this tutorial will not only show you how to create pagination for your Weebly site, but correct the positioning of Weebly's inherent [inadequate] pagination links.

Note: Pagination is a blog feature normally reserved for back-end coding (i.e., PHP). Since Weebly doesn't allow access to a site's PHP files, the pagination in this tutorial uses front-end coding (i.e., jQuery). As a result, a slight delay may occur in loading the pagination, as the jQuery counts the total amount of pages your blog has, moreso if your blog has a lot of pages.

Also: The pagination in this tutorials only works for the main blog page. At the moment, it's not setup to work on "category" or "archive" pages, however, the widget will automatically add the "Back" and "Next" buttons for these pages.

​At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

​On the left, under "PARTIALS", click on "blog>pagination.tpl". Delete all of the coding within this file.

Now copy the HTML code below and add it to the "pagination.tpl" file on the right:

{{!
In the blog post list, the area with "previous" and "next" links that enable
the user to navigate to forward/backward in the list.
}}

<div class="pagination">
  <a class="page firstPage">First</a>
  {{#next_url}}
<div class="blog-page-nav-next">
<a href="{{next_url}}" class="blog-link">Previous</a>
</div>
  {{/next_url}}
  <a class="page previousPagePlus"></a>
  <a class="page previousPage"></a>
  <a class="page currentPage"></a>
  <a class="page nextPage"></a>
  <a class="page nextPagePlus"></a>
  {{#previous_url}}
<div class="blog-page-nav-previous">
<a href="{{previous_url}}" class="blog-link">Next</a>
</div>
  {{/previous_url}}
  <a class="page lastPage">Last</a>
</div>

On the left, under "STYLES", click on "main.less".

Copy the CSS codes below, and on the right, add them to the "main.less" file:

​/* Pagination */
.pagination {
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.pagination a {
  background: #333;
  padding: 10px 20px;
  box-sizing: border-box;
  border-top: 4px solid #333;
  border-bottom: 4px solid #333;
  display: flex;
  border-right: 1px solid #222;
  margin-bottom: 5px;
}
.blog-page-nav-previous a:last-child {
  border-right: 0;
}
.lastPage {
  border-left:1px solid #222;
}
.pagination a.currentPage,
.pagination a:hover {
  border-top:4px solid #008aff;
  color:#008aff;
}
.wsite-blog-post .pagination,
#icontent .pagination {
  display:none;
}

Copy all of the jQuery codes within the file you downloaded. In the Weebly Editor, on the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery codes you copied.

Click "SAVE".

Note: If after publishing your Weebly site, the blog pagination doesn't appear, simply clear your browser's cache.

A random post generator navigates to a random blog post when it's clicked. It's a great way for site visitors to discover posts they'd likely never stumble upon. It also helps to keep older blog posts relevant instead of being forgotten behind many pages of newer posts.

For this tutorial, we're going to install a random post generator button directly to the right of the navigation in Weebly's free theme "Cento". When it's clicked, a visitor to your site will be taken to a random post within your blog.

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

On the left, under "HEADER TYPE", select the first page layout. In this case, it's "header.html".

On the right, add the following orange HTML code to the page layout as shown below in orange:

<div class="nav-wrap">
    <div class="container">
        <div class="nav-random">
            <div class="nav desktop-nav">{menu}</div>
            <a class="random"></a>
        </div>
    </div><!-- end .container -->
</div><!-- end .nav-wrap -->

Note: Repeat this step for every additional page layout under "HEADER TYPE".

On the left, under "STYLES", click on "main.less". On the right, add the CSS codes from below:

/* Random Post Generator */
.nav-random {
    display:flex;
    align-items:center;
    justify-content:center;
}
.random {
    padding-left:15px;
    width:40px;
}
.random:after {
    content: "\f503";
    font-family: 'dashicons';
    font-size: 25px;
    color: #c4c4c4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
.random:hover:after,
#menu-button:hover {
    color:#008aff;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
@media screen and (max-width:767px) {
  .random {
    position: absolute;
    right: 5px;
    top: 0;
    padding: 10px;
    box-sizing: border-box;
    height: 50px;
    display: flex;
    align-items: center;
  }
}​

On the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function($){" code, add the jQuery codes below:

// Random Post Generator
var blogUrl = 'https://randompostgenerator.weebly.com/blog/previous/';
var number = 1 + Math.floor(Math.random() * 2);
var together = blogUrl + number;

$.get(together, function(data){
    var randomArticle = $(data).find(".blog-title a").get().sort(function() { 
        return Math.round(Math.random())-0.5;
    }).slice(0,1);

    $(".random").attr("href", randomArticle);
});

Within the jQuery code you just added from the previous step, add the URL of your blog to it as shown below in orange:

// Random Post Generator
var blogUrl = 'https://randompostgenerator.weebly.com/blog/previous/';
​...

On the left, under "ASSETS", click the "+" icon to the right of "ASSETS" and select "New Folder". Name this folder "fonts".

Once the folder is created, click the gear icon to the right of "fonts" and select "Upload File(s)...". Upload all 4 Dashicon font files from below once you've downloaded them:

Click "SAVE".

Weebly has your banner styling covered with some popular filters and a blur feature, but where's the color?

Fear not! This tutorial will show you how to change the color of the banner overlay. We'll also show you how you can apply a gradient instead of a solid color.

Go to hexcolortool.com. Add your hex color code to the input box or choose a color from the color sliders.

Once you've got your color, copy the RGBA color code provided.

In the Weebly Editor, ​at the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

​On the left, under "STYLES", click on "main.less". On the right, locate the CSS code below:

​.wsite-header-section:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: inherit;
    background: rgba(0, 0, 0, 0.2);
    content: ' ';
}​

Note: If you can't locate the banner overlay's code, then simply copy the code above and add it to your "main.less" file.

Replace the RGBA color code in the code from the previous step with the RGBA color code that you created in step 1 as shown below in orange:

​.wsite-header-section:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: inherit;
    background: rgba(251, 60, 128, 1);
    content: ' ';
}

To make your banner overlay translucent, simply adjust the RGBA color code as shown below in orange. Use any number between "0" and "1".

​.wsite-header-section:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    height: inherit;
    background: rgba(251, 60, 128, 0.9);
    content: ' ';
}

If you'd rather your banner overlay be a gradient instead of a solid color, go to angrytools.com and create your gradient.

Once you've created your gradient, copy the code provided and start with step 3 of this tutorial.