How to Use Embed Code Element in Weebly?
“Embed Code” is one of the important elements in Weebly site editor classified under “Basic” category. It is used to embed any HTML, CSS or JavaScript code to add additional functionalities to your site like newsletter subscription, call to action, custom buttons, etc. There are multiple ways to use embed code element and it is necessary for all Weebly users to understand to make the site loading fast.
Components of Functions
Adding new functions or modifying the existing feature needs three components:
- Adding CSS
- Adding Scripts
- Adding HTML
Some widgets may have only HTML code while other features may need complicated CSS and JavaScript. Since Weebly uses WYSIWYG site editor, you can see the result of an embedded HTML/CSS codes on the editor without publishing the site.
Using Standalone Embed Code Element
Smaller widgets with simple HTML and CSS code can be directly inserted on the page using embed code element. This is generally referred as inline styling and the result can be immediately seen on site editor without the need of publishing the site. For example, the output can be immediately seen when you add the HTML table code inside embed code element.
Using standalone embed code element is not recommended when you have scripts and larger CSS codes.
Page Level Features
Pasting huge amount of code inside embed code element will drastically reduce the page loading speed. Also the functionality may not work as expected as all parts of codes are placed inside body of the HTML page. It is highly recommended to place the code in the following manner:
- HTML codes inside body of the page using embed code element
- CSS into the header of the page using “Header Code” section of the page
- Scripts just before the closing of body using “Footer Code” section of the page
Most of the time, you will have a widget only to be added on a particular page but having huge CSS and scripts. In such scenarios, segregate the code into HTML, CSS and JavaScript and paste the codes inside embed code element, header code section and footer code section respectively.
Weebly site editor may not execute the code pasted on header and footer code section on the screen. You need to publish the page to see the result of the code.
Site Level Features
Similar to page level features certain times you may need to add features effective at site level. For example, you want to add a custom button on different pages of your site. In this case, the required HTML part needs to be embedded on different pages using embed code element. The common CSS and the scripts can be added in the following manners:
- Paste the CSS and scripts under header and footer code section of the site settings respectively.
- Paste the CSS in “main_style.css” file or upload the CSS files and link them under header code section of the site settings.
- Upload script files and link them under footer code section of the site settings.
Weebly site editor will execute the code pasted in “main_style.css” file on the screen, but the scripts uploaded will not run on the editor. You need to publish the page to see the result of the code.
Complete Page Structure
The page structure should be like below for fast loading, hence embed the codes as explained above in appropriate places.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> Linked external CSS under header code section uploaded in code editor Embed CSS within <style>…</style> tags </head> <body> . . . Embed HTML code using embed code element. . . . Linked external scripts under footer code section uploaded in code editor Embed scripts using <script>…</script> tags. </body> </html> |
Customizing Options for Embed Code Element
Clicking on the embed code element will show you only one option for positioning as shown below.
Weebly Embed Code Element
Basically you don’t need to use separate code within the widget for aligning. Use the positioning options to align the widget left, center or right.
Important Points to Remember Before Using Embed Code Element
Though embed code element offers unlimited opportunities there are certain risks in using it heavily on your Weebly site.
- Sometimes it may affect other default Weebly functionalities. Generally jQuery scripts may conflict with other default scripts on Weebly.
- Weebly support will not help on issues caused by the custom code embedded on your site due to vast scope of the troubleshooting.
- Each piece of embedded code on your site will directly affect the page loading speed. This in turns will impact the search engine ranking and user experience.
Hence, use embed code element at your own risk without expecting any support from Weebly even you are a business plan user.
“Embed Code” element was previously referred as “Custom HTML” element.
2 Comments
Leave your reply.