Okay, I went to the Icon shortcode and added this to the top of my post:
[toc title=“Table of Contents” type=“left”] [toc_item title=“1. Introduction” page=“1”] [toc_item title=“2. More Information” page=“2”] [toc_item title=“3. Even More Information” page=“3”] [/toc]
How do I break the post from here on? (page 1, page 2, etc) What shortcode do I need to add at the parts of the post where I want to break?
Hey @juanajaafar,
It was mentioned in the documentation. To break the content, use the <!--nextpage--> code of WordPress in the Text Editor.
Hope that helps.
Hi. Yes, I’ve added that but now the page numbers appear right at the end of the post below the suggested post thumbnails.
Is there a way for me to move the page numbers at the end of the last paragraph of a page, above the suggested post thumbnails?
Hello @juanajaafar,
Do you want to display the page links like this?
If that is the case, please add this JS code in the X > Theme Options > Global JS (http://prntscr.com/evswzb)
(function($){
$(".single .page-links").insertBefore('#jp-relatedposts');
})(jQuery);
And the space below the image is coming from your section padding. Please set the padding to 0.
We would love to know if this has worked for you. Thank you.
Hi. Thanx a lot, this helps! But also new problems:
First: There a code that appears above the page numbers, and only on page 4:
[/cs_text][/cs_element_column][/cs_element_row][/cs_element_section]
I checked the post and that code isn’t on my post text.
Also: I only have 4 pages, but the page list below shows 5 pages. When I click on it, it takes me to a page with no body text.
Hey @juanajaafar,
The TOC shortcode is best used with the default WP editor. It was never intended for use inside with any element built with Cornerstone. I would highly recommend that if you want to break down a post into several pages, you may use the default WP editor instead.
Hope this explains it briefly.
Hi. I’m really confused. Your colleague @christian_y said “Please use native features of our products instead”. This is why I’m using ToC to break the post.
I just need help on how to remove the code on page 4 which I’ve attached above. Hope you can help with this.
I’m not now going to move my post from Cornerstone to WordPress editor. So can you propose what options I have to create breaks in my post, using Cornerstone.
Hi @juanajaafar,
They are both correct, but allow me to explain what’s the issue 
If you’re planning to just divide a text content then please use standard Wordpress editor, but if you wish to use the builder then don’t divide the text content, but the sections.
What I’m saying is, don’t just place multiple <!--nextpage--> on same text content, in the same section if you plan using it in the builder. Example
[section]
[text]hello worlds[text]
[section]
[section]
[text]hello worlds <!--nextpage-->[text]
[section]
[section]
[text]hello worlds <!--nextpage-->[text]
[section]
The purpose of <!--nextpage--> in the builder is not just to split content, but to correctly split sections from each other. Else, the layout will break especially the shortcode, that’s why you’re getting a shortcode at the end since it’s not properly divided. Example,
page 1
[section]
[text]hello worlds
page 2
[text]
[section]
The TOC is just a shortcode that allows navigation linked to pagination but it’s not a requirement. You can add pagination without it. But make sure to implement <!--nextpage--> properly in the builder. The layout could also have hidden sections meant for other devices, so please properly decide where and when to use <!--nextpage--> within the builder.
Thanks!
I have done as per your suggestion above:
Section 1 is Page 1, Section 2 is Page 2 and so on. At the end of each Section, I add the
nextpage code. Here’s what happened:
Page 1 is good. But when I click to Page 2, it doesn’t go to Section 2. Instead, I see this. An empty text with only this code:
I only see the correct Page 2 when I click Page 3. But then on Page 4, I see that code again.
The above problem doesn’t occur when all the text are in one Section, and I insert the nextpage codes there. EXCEPT, on Page 4 where this code appears (as I’ve noted earlier above).
Hi @juanajaafar,
In that case, would you mind providing the testing URL and admin login credentials in the secure note? I like to test it as well. And make sure the amount of <!--nextpage--> in single page is one less from what expected amount of pagination. Like if it’s 4 pages then there should be only 3 <!--nextpage-->.
Thanks!
Hi. I’ve just dropped the secure note above. Thanx, looking forward to get some help.
Hi Juana,
Thanks for sharing with us your login details. You probably hate me with what I’m going to say next… because I’ll be the third person to tell you this… but I would recommend that you use the default Wordpress edit just for this long post. To be more accurate, use Gutenberg.
Now, I’m recommending that you do it just for this post because it’s a special case - because it’s using the Table of Contents shortcode. For future posts that won’t be using the said shortcode, you can continue using Cornerstone. For existing posts, you can continue using Cornerstone for them.
Using Gutenberg won’t break the design. This post will follow the design (the look and feel) of the other posts, so consistency is retained.
And with Gutenberg (or the Wordpress default editor), the TOC shortcode is guaranteed to work. As @RueNel, @christian_y and @Rad has pointed out, this shortcode doesn’t work best with Cornerstone and that is easily demonstrated by the current issue.
I have created this post https://www.juanajaafar.net/wp-admin/post.php?post=10869&action=edit and it works. You just need to fill it with the correct content.
I hope this approach works for you. In my opinion, while it’s definitely desired to use Cornerstone in all cases, this special case is better with the default Editor, and it works.
Hi. First of all, thank you so much for helping set up the WordPress page. I really appreciate it. I wouldn’t have known where to even start.
I’m working on it right now and things look okay. I have a few questions:
How do set headers within the text (using the WP block) to H5. Currently, the options are only H2-4.
How do I set font colour as colour is not an option in WP’s paragraph block.
I want to add a content band into this WP post. How do I use Cornerstone’s shortcode on their blocks? I’ve tried using their shortcode block, but it doesn’t work. Here’s what I added:
[content_band style=“color: #333;” bg_color="#434343" border=“all” inner_container=“true”]
Text
Hi @juanajaafar,
You’re always welcome!
You can use directly Custom HTML element or convert headline element to block:
https://screencast-o-matic.com/watch/cq6n6cul3i
Paragraph content will inherit your theme content font color. No need to set it unless you what this specific content on certain colors. To do that, click the 3 dot icon that says MORE OPTIONS > Choose SHOW BLOCK SETTINGS > Under Advance > Additional CSS CLASS: Add a class where your font color is define. For example, you can add redfont. Then on Theme Options > Global CSS define the color like this:
.redfont{
color:red;
}
What you shared is incomplete. Here’s the list of complete shortcode:
http://demo.theme.co/integrity-1/shortcodes/
Please make sure to copy the complete shortcode to avoid structure issues.
Hope this helps.
Hey there. This is really helpful. I’ve made the adjustments but stuck at these:
<h5 style="text-align: justify;">Surat untuk orang kita</h5>
[content_band style="color: #ffffff;" bg_color="#434343" style="text-align: justify;" border="all" inner_container="true"]
Hi @juanajaafar,
1.) That is correct. Justify is not much visible on short text. See the description here.
2.) Because you have 2 style in it. Should be like this:
[content_band bg_color="#434343" style="color: #ffffff; text-align: justify;" border="all" inner_container="true"]
Hope this helps.
Hi there. Thanx.
Re Question 2, I added the shortcode you provided but now I’ve lost the side margins 
Hi @juanajaafar,
You can add a class pam to your shortcode,
e.g.
[content_band bg_color="#434343" style="color: #ffffff; text-align: justify;" border="all" inner_container="true" class="pam"]
This will give padding to your content band on all sides. You can learn more about this Spacing Helpers Classes here.
My advice for you though since you’re now using Gutenberg (for posts) and Cornerstone (for pages), please stop using that content band shortcode and utilize the native features.
For example that white text color on gray background-color, you can easily do that with Gutenberg text block.
Much more with Cornerstone.
Block Editor Handbook (Gutenberg)
Cornerstone Elements
Hope it helps,
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.