Difference between HTML Snippets & Smart Componenets?

Ask beginners questions and share ideas with your peers.

Though the entire Community Forum is moderated and maintained by the Pinegrow Team, it is not guaranteed that your Topic will receive a reply from a Pinegrow Team staff member.

Greetings… I did search prior to asking but I can’t seem to find out what the main differences are. They seems to do basically the same thing and I apologize for my ignorance if this is a bad/stupid/lazy question to be asking…

Cheers,
Billie

BTW, What I am trying to do is get a section of both the HTML AND just the applicable CSS from the pages’ style-sheets and then insert this into a new page.

The old way I would do this manually is copy and paste the just sections HTML and then manually track down the CSS for just the copied section, make any needed changes to conflicting ID or Style selector names and then paste the HTML and CSS to it’s respective file(s).

Cheers,
Billie

1 Like

I am trying Snippets functionality but it seems it only copies the HTML to new pages (or projects, in my case). Is there a way to also bring the element snippet style to the new page?

image

I have followed the documentation

Hi @red-rosefields,
Right now there is no way to bring the CSS into your snippet library. My best use scenario is to save any snippet specific CSS to a separate file that can be duplicated in any new project.
Components on the other hand can have associated resources - including CSS and JS.
Hope this helps,
Bob

Thanks Rob.
I just tried using components. I created a component out of a interaction blueprint slider that I customized. Then over the new project I called that component. It keeps showign me what it looks like the main html structure, but nothing more.
Here, the component.

And here. That component I called over the new project.

Don’t know what I am doing wrong.
Any other hint would be much appreciated.
My idea is to create a set of components that I can use throughout new projects.
Thanks

Hi @red-rosefields,
For components to carry over any non-inline CSS (or JS) you need to add the stylesheet to the Components resources. You can do this by right-clicking the file in the Project panel. This will bring up a context menu. Select “Add to resources…”


When you activate the Components in the new project it should ask if you want to copy the resources to the new project. If not, from the Components menu you can select “Add/Update resources from libraries…”

You will then have to link the stylesheet to any pages where you want to use the component, so I would give it an original name - like “component-styles.css”.
Hope this helps!
Bob

1 Like

Great! Thanks a lot Bob!! have a good day.