I am trying to create a shortcode based on some elements that I have put together on a test page.
It’s a couple of sections, some text, and a button.
I got the source code for these elements and placed them into my shortcode creator.
The shortcode works perfectly when used in the same page that the elements were originally created, but lose formatting when used in any other page.
I believe this to be an issue with the long IDs given to the div tags that seem to be page specific.
I don’t currently have any pages live with this content, so I can’t provide any URL to you.
Turns out, I can’t paste the code in here, as it will break just like it does on the other pages….
<div class=”sh-column sh-column-036b21919ccb0148da32dd410cd028a9 fw-col-xs-12 fw-col-sm-2″>
<div class=”sh-column sh-column-7787c12cd272c610e7d5afd73290e7be fw-col-xs-12 fw-col-sm-8 sh-column-shadow”>
<div id=”heading-5858d2e7409e85bc5bde12348ab769ec” class=”sh-heading”>
<h3 class=”sh-heading-content size-l text-center”>Recommended</h3>
<div id=”divider-a4c614744daa3c17319cd91521886638″ class=”sh-divider sh-divider-center sh-divider-content-none”>
<div id=”text-block-7241c6081a6eae2b4d1baaad3d45b7e4″ class=”sh-text-block”>
<p style=”text-align: center;”>For pre-license education products and courses, StateRequirement recommends:</p>
<div id=”button-9a15e9340cb51fcfa3608d64705de5c0″ class=”sh-button-container sh-button-style-1″>
Kaplan Education Company</span></div>
<div class=”sh-column sh-column-aff6ef00cd140748feae3f6b42dc3a70 fw-col-xs-12 fw-col-sm-2″>
I hope you are well today and thank you for your question.
Yes you are right it seems unique IDs and specific stylesheet issue.
To resolve it I need to access your site so please share me your site URL when it will be accessible.
I have made this page live, but would like to take it down as quickly as possible.
Thank you for your help.
I can see on your shared site that it contains the ID as shown in the attached screenshot so please make sure you use same IDs on other pages.
I’m not sure what you mean by “use same IDs on other pages”.
Essentially, when I use the shortcode to create the CTA, it will only work correctly on the page that the CTA was built on. Using the shortcode on other pages will insert the elements with no formatting like they are missing all of the CSS.
I don’t create the long IDs. They are automatically created whenever I use the elements and I don’t know how to remove them or make them work on any other page.
Actually how you are developing the shortcode is wrong and you can’t just create it by copying HTML code.
You have to create IDs dynamically and load CSS code only on the pages where you have used that shortcode.
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Besides short codes, can you tell me any other way to create a quick way to implement changes over several pages at a time, by making one change in a centralized location?
What type of changes do you want to make?
Only styling related changes or any other?