How to Add and Customize Read More Break in Weebly Blog?

Each post on your Weebly blog will also appear on the blog page. You can decide the number of recent posts to show on the blog page between 1 and 25 under “Settings > Blog > Posts per page”. Assume you have last 10 posts to show on the blog page and each post having more than 600 words of lengthier content. In such scenario, the blog page will show last 10 posts each occupying lengthy space. This will result in poor user experience with almost no possibility for the users to view older post’s content.

What is Read More Break?

Since blog page plays a vital role being part of navigation, it is a good idea to keep the page attractive and “Read More Break” element helps in doing that. You can use a “Read More Break” element, when you don’t want to show all lengthy post content on the blog page. This will restrict the content and show up to the break on your blog page. Users can click on the read more link or button to read the complete blog post. This is neat way to keep your blog page clutter free and gently push users to the blog post.

How to Add Read More Break in Weebly?

Weebly editor shows drag and drop elements on the sidebar that you can insert anywhere on your site. However, when you edit a blog post in Weebly blog editor, the sidebar elements will automatically change. You will find additional blog elements that you can only use on Weebly blog page or post. You can see a “Read more Break” showing under “Basic” category of elements. Once you drag and drop the element, there will be placeholder text mentioning “Content below this line is only shown after clicking “Read More”” as shown in the below picture.

For example, add “Read more Break” after the first paragraph of all your blog posts. This helps to display only the first paragraph of posts on the blog page with an option for the users to click on “Read More” link or button to read further content of each post. Below is how the read more button may look on your Weebly blog page.

This makes the blog page more attractive within the scrollable length and show only introduction of each post. When clicking on the read more button or link, Weebly will show the complete blog post with hidden content below the break line.

Points to Note When Using Read More Break

Though it is easy to use read more break in Weebly blog, remember the following points to avoid confusion.

• “Read more Break” element will not impact the display of individual blog posts on your published site.
• The actual read more button or link will only show on the blog page both in editor as well as on published site.
• Adding more than one “Read more Break” element will not have any impact and the first element will be used for breaking the content on blog page.
• Weebly also allows you to add the read more break in blog sidebar. However, it will not have any impact on the published site.
• Weebly does not have a standard way of displaying the read more link on blog page. As you see in the above screenshot, it shows as a button while on many themes it merely adds a “Read More” text link between blog posts. Some Weebly themes show “Details” and “Read Now” links and ignore read more break you insert in blog post.

Customizing Read More Link in Weebly Blog Page

If your theme ignores read more break element then the only option is to change your theme that shows a button or text link. For text and button links, Weebly does not offer any default settings to customize the appearance. This is not good as the “Read More” link is not properly visible on some themes making the users to think the post only have a small content. Good part is that you can customize the color and alignment of the element by editing your Weebly theme files.

First, open your blog page in a new browser window. Right click on the page and select “Inspect” option to open developer tools. Check the source code to find the name of CSS class used for your “Read more” link.

As you see in the above screen, Weebly uses the following code to align the read more link on right side. In your case, it could on the left side with “text-align:left;” What you need is to modify the styles of this CSS class to customize the read more link on your Weebly blog page.

.blog-post .blog-read-more {
text-align: right;
}

Adding Custom Read More CSS in Weebly

Go to “Themes” tab and click on the “Edit HTML / CSS” button to open Weebly code editor.

Each Weebly theme uses different set of source codes, hence finding the .blog-read-more CSS class will be a difficult task. For example, some themes use _blog.less while few other themes use blog.less or partials. If you find the code, it is easy to change the left or right alignment to center and add additional styles. However, do not worry if you could not find the CSS class. Simply, go to main.less file under “Styles” section and add your CSS code at the end of the editor.

You can add CSS styles to customize the look of “Read More” link on blog page. Below is an example code to make the link within a box and align to center.

.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: 5px 5px 5px lightgrey;
border: 2px solid;
padding: 5px;
border-radius: 5px;
background: rgb(255 235 59);
}

Save the changes made on the code editor and if this is the first time you edit the code Weebly will ask you to provide a name for your theme. Enter a name and click “Save” button to close the code editor. Make sure to publish your site and check the blog page on the browser. Now, the read more text link will look like below:

You can customize the CSS to change the background color, link color, hovering color, box width, margin, padding, etc. to align the button with your blog’s layout. Also, remember the above code is to change the text link to a button. If your blog page already shows a read more button then only use the required styles like background, font size, alignment, etc. and use !important to prioritize your CSS to overwrite default styles.