When importing web pages into Bootstrap Studio, I encounter an issue in the editor where some objects are invisible but display correctly in the page preview. Below are more details about the problem:
Issue Details:
Bootstrap Studio Editor:
Some objects are not visible within the Bootstrap Studio editor, making precise editing and design challenging.
Preview Mode:
Despite invisibility in the editor, the objects display correctly in the web page preview.
Steps I’ve Taken:
Bootstrap Studio Update:
I’ve ensured that I’m using the latest version of Bootstrap Studio to rule out issues with outdated versions.
Application Restart:
I’ve restarted Bootstrap Studio to ensure it’s not a temporary rendering issue in the editor.
Cache Cleanup:
I attempted to clear the Bootstrap Studio cache to eliminate potential outdated or corrupted data.
Verification of View Settings:
I checked the view settings in the editor to make sure there are no adjustments affecting the visibility of elements.
Virtually impossible to guess what this might be without seeing your bsdesign file.
Is it only images that are not visible, or other components? If it’s just images, it’s probably something specific to the images themselves.
Have you tried opening the “invisible” images in an image editing program (like Photoshop) to confirm they are visible, and then re-saving them? Or how about using BSS’s built-in image optimization tool to convert the image to a webp format?
I imported a Bootstrap template from this link into Bootstrap Studio. The template is in code format, not bsdesign. While the components are visible in the preview, some images and elements are not displaying within the Bootstrap Studio editor.
The template uses a later version of AOS. You will have to find each instance of AOS and use (update the animate options) the internal controls that Bootstrap Studio uses to get them to appear while editing in Bootstrap Studio. You can delete the AOS css and js if you imported those. Also you can remove it from the main.js intialization as Bootstrap Studio AOS version is intialized for you.
They won’t work as you expect, not even because of the preloader.
These website templates use slightly customized coding, for example:
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#testimonials">Testimonials</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>
<li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
In short, if you test the model exported by BSS, without making many modifications to all the code, hmlt, css and js, many of the functions will not be present on the published website.
One of the errors you will notice is the menu icon not working correctly on the mobile version of the site.
I recommend that you edit these models in VSCode.
Example of a model imported, without modification, into Bootstrap Studio.
