[Resolved] Different DOM structure in customizer

[Dawid]

In Cutomize I have a completely different DOM structure than when I display the page normally. What am I doing wrong?

https://www.icloud.com/iclouddrive/09aUwrWqVW1cIvi0Lc6lhcpzg#Bildschirmfoto_2022-10-31_um_11.48
https://www.icloud.com/iclouddrive/021rRLMl8sh1CG7MZzTzyj1Iw#Bildschirmfoto_2022-10-31_um_11.49

The page with the problem: https://staging-commodityboardcom-dev.kinsta.cloud/

Thanks in advance.

[Dawid]

this is the code I use to show the overview: <!– wp:latest-posts {“postsToShow”:6,”displayPostContent”:true,”displayAuthor”:true,”displayPostDate”:true,”postLayout”: “grid”,”displayFeaturedImage”:true,”addLinkToFeaturedImage”:true} /–>

[David]

Hi there,

the Customizer uses Javascript to render the preview, its what allows it to show live changes. But that requires additional HTML on the page.

Therefore its best NOT to use the developers tools for prototyping when in the Customizer.

What is the issue you’re trying to fix ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

Hi David,

in customizer the layout looks as intended, i save everything but when i view the page normally the design is gone completely. The “More” button is missing, the two column layout is gone, different fields are displayed than what I selected. All the settings I have made are not displayed, they remain saved but are not displayed.

Best regards
Dawid

[David]

Did you publish the changes you made in the Customizer ? Or is the button set to Save Draft ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

The changes are published. The button is set to Publish.

[Dawid]

In the customizer: https://www.icloud.com/iclouddrive/086e673DTXvctSzVPRsVD6v1g#Bildschirmfoto_2022-11-01_um_11.46
And in normal view: https://www.icloud.com/iclouddrive/09eR3Rh5zA8UO4JMFeI50mVFw#Bildschirmfoto_2022-11-01_um_11.47

I do not get it.

[David]

Looks like a Caching issue.
Are you using any Cache/Optimization Plugins?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

W3 Total Cache is deactivated.

[David]

Can i see the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

you can reach the page here:
https://staging-commodityboardcom-dev.kinsta.cloud

I think I have an understanding problem. There are two different pages once my home with the following code:
<!– wp:latest-posts {“postsToShow”:6,”displayPostContent”:true,”displayAuthor”:true,”displayPostDate”:true,”postLayout”: “grid”,”displayFeaturedImage”:true,”addLinkToFeaturedImage” :true} /–>

and in the customizer I see the default home.

I have now deleted my home and the problem is gone. What code can I use to display the posts overview configured in the customizer?

[David]

Ah ok.
The Themes customizer settings will only apply to the Blog page that you set in the Settings > Reading and any of the archive pages eg, a category:

https://staging-commodityboardcom-dev.kinsta.cloud/category/oil-seeds/

What other changes do you want to make to the home page ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

that has helped me a lot.
I just want to place shortcodes in one place or another on the home page.

[David]

So if you you have your Home set to show your latest posts, or an archive page, you can then use a Block Element to add content before or after the loop:

https://docs.generatepress.com/article/block-element-hook/

Here you can see the position of the Hooks:

https://docs.generatepress.com/article/hooks-visual-guide/#posts-page

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dawid]

best thanks David for the great support!

[Author]

Posts