www.wysiwygwebbuilder.com

Posted: **Fri Apr 24, 2026 2:23 pm**

Hello to all and hope you are all well, I am trying to replicate a web page of the company I am working, and so far I made it, until the web portfolio page, where I am getting stucked, very frustrated, strugling with something that probably it´s not possible the way it was created on other software, this specific portfolio. Eventhough I´ve beeing helped in some code from AI css and js, I want to try more before I quit, so I am looking for an advice on this, would you be kind enough to elucidate me on this subject? The portfolio page I am trying to replicate is this https://www.guru-invest.pt/obras-portfolio.html, and my strugle is to control the "viewport" Window (layoutgrid) to have a fixed width and height in a way that the slideshow/lightgallery/fancy gallery, get centered and cropped nicelly, to an easier workflow, because with css and js I made it, but only see it, in preview mode, wich does not help me the visual design view workflow, inside wysiwyg web builder. Probably this is not the right direction and professionals in this area can tell me another possible way because ther´s a lot of places to put code.. class styles, object html, page html, html object, and truly I am not still very aware how is the best workflow, I am confused also lack of experience on my side...so Thanks in advance and if I am doing something wrong, posting here please acept my apologies and guide me to where I should do this the right way. Best Regards.
Eduardo Gregório

Posted: **Fri Apr 24, 2026 3:24 pm**

The URL is blocked on my computer for security reasons.
Do you have another example of what you are trying to do?

Posted: **Mon Apr 27, 2026 4:54 pm**

Hello Mr Pablo,"The URL is blocked on my computer for security reasons." Yes I noticed that I need to renew SSL subscription and I am going to do that soon, but because it was still working I forgot to do it, and in Mozilla firefox still works ....well sorry for that,
I want to send you here what I am trying to acomplish this project but how can I do it? can I paste it here?
Thank you in advance...
Eduardo Gregório<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TrabalhosExecutados</title>
<meta name="generator" content="WYSIWYG Web Builder 21 - https://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="teste.css" rel="stylesheet">
<link href="Obras.css" rel="stylesheet">
<script src="jquery-3.7.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="lightgallery/lg-transitions.css">
<link rel="stylesheet" href="lightgallery/lightgallery.min.css">
<script src="lightgallery/lightgallery.min.js"></script>
<script src="lightgallery/lg-autoplay.min.js"></script>
<script src="lightgallery/lg-fullscreen.min.js"></script>
<script src="lightgallery/lg-rotate.min.js"></script>
<script src="lightgallery/lg-share.min.js"></script>
<script src="lightgallery/lg-thumbnail.min.js"></script>
<script src="lightgallery/lg-video.min.js"></script>
<script src="lightgallery/lg-zoom.min.js"></script>
<script src="lightgallery/lightgallery.min_has_videofix!.js"></script>
<script src="wwb21.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event)
{
lightGallery(document.getElementById("SlideShow"), {selector:'a',plugins:[lgThumbnail], licenseKey:'0000-0000-000-0000'});
TimerStartTimer1();
lightGallery(document.getElementById("SlideShow1"), {selector:'a',plugins:[lgThumbnail], licenseKey:'0000-0000-000-0000'});
lightGallery(document.getElementById("SlideShow2"), {selector:'a',plugins:[lgThumbnail], licenseKey:'0000-0000-000-0000'});
lightGallery(document.getElementById("SlideShow3"), {selector:'a',plugins:[lgThumbnail], licenseKey:'0000-0000-000-0000'});
lightGallery(document.getElementById("SlideShow5"), {selector:'a',plugins:[lgThumbnail], licenseKey:'0000-0000-000-0000'});
});
</script>
<style>
#wb_Trabalhos_em_Curso {
display: none;
}
#LayoutGrid1 {
align-items: flex-end !important;
justify-content: flex-end !important;
text-align: right !important;
}
</style>

<style>
/* Grid item */
.grid-item {
background-color: #f0f0f0;
padding: 30px;
text-align: center;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.3s ease;
}

/* Active item background only */
.grid-item.active {
background-color: #FF8C00;
}

/* Text colors */
.grid-item.active .item-text,
.grid-item.active .item-text * {
color: #fff !important;
}

.grid-item .item-text,
.grid-item .item-text * {
color: #777 !important;
}

/* Text animation */
.item-text {
display: inline-block;
transition: transform 0.3s ease, color 0.3s ease;
}

.grid-item:hover .item-text {
transform: translateX(10px);
}
</style>

<style>
.gallery-window {
display: block;
margin: 0 auto;
text-align: center;
}

.gallery-window li {
list-style: none;
display: flex;
justify-content: center;
}

.gallery-window img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}

.col-1, .col-2 {
display: flex;
flex-direction: column;
align-items: center;
}

</style>
</head>
<body>
<script>
var wb_Timer1;
function TimerStartTimer1()
{
wb_Timer1 = setInterval(function()
{
var event = null;
ShowObjectWithEffect('loaderlayer', 0, 'fade', 500);
}, 1000);
}
function TimerStopTimer1()
{
clearInterval(wb_Timer1);
}
</script>
<div id="loaderlayer" style="position:fixed;text-align:center;visibility:hidden;left:0;top:0;right:0;bottom:0;z-index:24;">
<div id="loaderlayer_Container" style="width:1920px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<div id="stickylayer" style="position:fixed;text-align:center;left:50%;margin-left:-102px;top:50%;margin-top:-74px;width:205px;height:149px;z-index:1;">
<div id="stickylayer_Container" style="width:205px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">
<div id="wb_Image4" style="position:absolute;left:70px;top:42px;width:64px;height:64px;z-index:0;">
<img src="images/preloader.gif" id="Image4" alt="" width="64" height="64"></div>
</div>
</div>
</div>
</div>
<div id="wb_imagemheadgrid">
<div id="imagemheadgrid">
<div class="col-1">
</div>
</div>
</div>
<div id="wb_Conhecagrid">
<div id="Conhecagrid">
<div class="col-1">
<div id="wb_Section1" style="display:flex;width:100%;z-index:3;" class="card h3">
<div id="Section1-card-body">
<div id="Section1-card-item0">CONHEÇA OS NOSSOS TRABALHOS</div>
<hr id="Section1-card-item1">
<div id="Section1-card-item2" class="h4">Dedique alguns instantes a percorrer a galeria de imagens. Conheça alguns dos nossos trabalhos já realizados e em curso.<br>Comece hoje mesmo a pensar no seu novo projeto.<br></div>
<div id="Section1-card-item3">CLIQUE NUMA DAS GALERIAS ABAIXO</div>
</div>
</div>
</div>
</div>
</div>
<div id="wb_event-grid" class="event-grid">
<div id="event-grid">
<div class="row">
<div class="col-1 grid-item">
<div id="wb_ObrasConcluidas" class="item-text" onclick="ShowObjectWithEffect('loaderlayer', 1, 'fade', 500);ShowObjectWithEffect('wb_Obras_Concluidas', 1, 'fade', 500);ShowObjectWithEffect('wb_Trabalhos_em_Curso', 0, 'fade', 500);return false;">
<span style="color:#808080;font-family:Raleway;font-size:27px;">OBRAS CONCLUÍDAS</span>
</div>
</div>
<div class="col-2 grid-item">
<div id="wb_Trabalhos" class="item-text" onclick="ShowObjectWithEffect('loaderlayer', 1, 'fade', 500);ShowObjectWithEffect('wb_Trabalhos_em_Curso', 1, 'fade', 500);ShowObjectWithEffect('wb_Obras_Concluidas', 0, 'fade', 500);return false;">
<span style="color:#696969;font-family:Raleway;font-size:27px;">TRABALHOS EM CURSO</span>
</div>
</div>
</div>
</div>
</div>
<div id="wb_Obras_Concluidas">
<div id="Obras_Concluidas">
<div class="row">
<div class="col-1">
<div class="Obras_concluidas">

<ul id="SlideShow" class="gallery-window" style="z-index:6;">
<li><a href="images/Cumeada_SB_Messines01.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines01.jpg" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines02.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines02.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines03.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines03.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines04.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines04.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines05.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines05.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines06.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines06.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines07.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines07.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines08.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines08.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines09.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines09.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines10.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines10.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines11.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines11.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines12.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines12.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines13.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines13.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines14.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines14.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines15.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines15.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines16.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines16.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines17.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines17.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines18.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines18.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines19.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines19.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines20.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines20.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines21.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines21.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines22.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines22.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines23.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines23.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines24.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines24.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines25.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines25.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines26.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines26.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines27.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines27.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines28.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines28.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines29.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines29.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines30.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines30.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines31.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines31.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines32.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines32.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Cumeada_SB_Messines33.jpg" data-rel="SlideShow"><img class="image" width="800" height="600" src="images/Cumeada_SB_Messines33.jpg" style="display:none;" alt="" title=""></a></li>
</ul></div>
<a id="Button1" href="https://player.vimeo.com/video/73478483 ... fullscreen" target="_blank" style="display:block;width: 100%;;height:24px;z-index:7;"></a>
<div id="wb_Text5">
<span style="color:#DAA520;font-family:Raleway;font-size:27px;">Construção de Moradia . Cumeada</span><span style="color:#808080;font-family:Raleway;font-size:16px;"><br>SÃO BARTOLOMEU DE MESSINES</span>
</div>
</div>
<div class="col-2">
<div class="Obras_concluidas"><ul id="SlideShow1" class="gallery-window" style="z-index:9;">
<li><a href="images/Pechão_OLHÃO1.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO1.jpg" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO02.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO02.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO03.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO03.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO04.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO04.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO05.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO05.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO06.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO06.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO07.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO07.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO08.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO08.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO09.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO09.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO10.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO10.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO11.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO11.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO12.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO12.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO13.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO13.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO14.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO14.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO15.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO15.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO16.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO16.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO17.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO17.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO18.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO18.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO19.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO19.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO20.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO20.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO21.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO21.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO22.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO22.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO23.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO23.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO24.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO24.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO25.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO25.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO26.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO26.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO27.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO27.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO28.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO28.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO29.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO29.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO30.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO30.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO31.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO31.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO32.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO32.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO33.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO33.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO34.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO34.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO35.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO35.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO36.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO36.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO37.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO37.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO38.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO38.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO39.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO39.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO40.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO40.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO41.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO41.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO42.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO42.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO43.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO43.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO44.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO44.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO45.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO45.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO46.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO46.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO47.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO47.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO48.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO48.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO49.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO49.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO50.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO50.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO51.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO51.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO53.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO53.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/Pechão_OLHÃO54.jpg" data-rel="SlideShow1"><img class="image" width="800" height="600" src="images/Pechão_OLHÃO54.jpg" style="display:none;" alt="" title=""></a></li>
</ul></div>

<a id="Button3" href="https://player.vimeo.com/video/73478517 ... fullscreen" target="_blank" style="display:block;width: 100%;;height:24px;z-index:10;"></a>
<div id="wb_Text6">
<span style="color:#DAA520;font-family:Raleway;font-size:27px;">Construção de Moradia . Pechão</span><span style="color:#808080;font-family:Raleway;font-size:16px;"><br>OLHÃO</span>
</div>
</div>
</div>
</div>
</div>
<div id="wb_Trabalhos_em_Curso">
<div id="Trabalhos_em_Curso">
<div class="row">
<div class="col-1">
<Div class="Trabalhos_em_curso"><ul id="SlideShow2" style="z-index:12;">
<li><a href="images/SitioCarrascalinho01.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho01.jpg" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho02.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho02.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho03.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho03.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho04.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho04.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho05.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho05.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho06.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho06.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho07.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho07.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho08.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho08.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho09.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho09.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho10.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho10.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/SitioCarrascalinho11.jpg" data-rel="SlideShow2"><img class="image" width="1200" height="900" src="images/SitioCarrascalinho11.jpg" style="display:none;" alt="" title=""></a></li>
</ul></Div>
<a id="Button2" href="https://player.vimeo.com/video/73478483 ... fullscreen" target="_blank" style="display:block;width: 100%;;height:24px;z-index:13;"></a>
<div id="wb_Text3">
<span style="color:#DAA520;font-family:Raleway;font-size:27px;">Construção de Moradia . Cumeada</span><span style="color:#000000;font-family:Arial;font-size:16px;"><br></span><span style="color:#808080;font-family:Raleway;font-size:16px;">SÃO BARTOLOMEU DE MESSINES</span>
</div>
<div class="Obras_concluidas">

<ul id="SlideShow5" class="gallery-window" style="z-index:15;">
<li><a href="images/mato-serr_carv_01.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_01.jpg" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_02.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_02.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_03.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_03.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_04.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_04.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_05.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_05.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_06.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_06.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_07.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_07.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_08.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_08.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/mato-serr_carv_09.jpg" data-rel="SlideShow5"><img class="image" width="900" height="1200" src="images/mato-serr_carv_09.jpg" style="display:none;" alt="" title=""></a></li>
</ul></div>
<div id="wb_Text7">
<span style="color:#DAA520;font-family:Raleway;font-size:27px;">Construção de Moradia . Cumeada</span><span style="color:#808080;font-family:Raleway;font-size:16px;"><br>SÃO BARTOLOMEU DE MESSINES</span>
</div>
<a id="Button5" href="https://player.vimeo.com/video/73478483 ... fullscreen" target="_blank" style="display:block;width: 100%;;height:24px;z-index:17;"></a>
</div>
<div class="col-2">
<Div class="Trabalhos_em_curso"><ul id="SlideShow3" style="z-index:18;">
<li><a href="images/vilarinha01.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha01.jpg" alt="" title=""></a></li>
<li><a href="images/vilarinha02.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha02.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha03.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha03.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha04.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha04.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha05.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha05.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha06.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha06.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha07.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha07.jpg" style="display:none;" alt="" title=""></a></li>
<li><a href="images/vilarinha08.jpg" data-rel="SlideShow3"><img class="image" width="1200" height="900" src="images/vilarinha08.jpg" style="display:none;" alt="" title=""></a></li>
</ul></Div>
<a id="Button4" href="https://player.vimeo.com/video/73478517 ... fullscreen" target="_blank" style="display:block;width: 100%;;height:24px;z-index:19;"></a>
<div id="wb_Text4">
<span style="color:#DAA520;font-family:Raleway;font-size:27px;">Construção de Moradia . Pechão</span><span style="color:#000000;font-family:Arial;font-size:16px;"><br></span><span style="color:#808080;font-family:Raleway;font-size:16px;">OLHÃO</span>
</div>

</div>
</div>
</div>
</div>
<div id="wb_LayoutGrid3">
<div id="LayoutGrid3-overlay"></div>
<div id="LayoutGrid3">
<div class="row">
<div class="col-1">
<div id="wb_IconButton1" style="display:inline-block;width:273px;height:67px;z-index:22;">
<a class="ui-button ui-corner-all" id="IconButton1" href="mailto:geral@guru-invest.pt" onmouseover="AnimateCss('wb_IconButton1', 'focus-in', 0, 1500);return false;" style="width:100%;height:100%;">Contacte-nos</a>
</div>
</div>
</div>
</div>
</div>

<div id="Html1" style="position:absolute;left:1951px;top:1460px;width:100px;height:100px;z-index:31">
</div>

<div id="Html2" style="position:absolute;left:1993px;top:2273px;width:100px;height:100px;z-index:32">
</div>
<style>
.Obras_concluidas,
.Trabalhos_em_curso {
height: 200px !important; /* <-- adjust this */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
const items = document.querySelectorAll(".grid-item");

// Set first item as active on load
if (items.length > 0) {
items[0].classList.add("active");
}

items.forEach(function(item){
item.addEventListener("click", function(){
// Remove active from all
items.forEach(i => i.classList.remove("active"));
// Add active to clicked
item.classList.add("active");
});
});
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {

const galleries = ["SlideShow","SlideShow1","SlideShow2","SlideShow3","SlideShow4","SlideShow5"];

galleries.forEach(function(id){
const el = document.getElementById(id);
if(el){
lightGallery(el, {
selector: 'a',
plugins: [lgThumbnail],
licenseKey: '0000-0000-000-0000'
});
}
});

TimerStartTimer1();
});
</script></body>
</html>

Posted: **Mon Apr 27, 2026 5:06 pm**

Just posting the html doesn't help what is needed is a "Demo" .wbs project please see the following
How do I share my project to get help? on how to do this. By doing this it can then be opened in the software and see what your trying to do.

Posted: **Thu Apr 30, 2026 3:22 pm**

Hello to all and hope you are all well, I think for now you can acess my attempt to replicate this design of Photo Gallery with Filter on my website https://www.guru-invest.pt/obras-portfolio.html, and enlighten me if it´s possible to achieve this fully reflected in the Design View in WYSIWYG Web Builder, because custom CSS/JS layout changes in preview, I know it will do, but the workflow for this it´s not as simple as a normal PhotoGallery. Basicaly what I am trying to achieve it´s a PhotoGallery for portfolio of :Work in progress and Done work(the filter) and each thumbnail as video and fotos for each project nested.
Thanks in advance for your help

Eduardo Gregório

Posted: **Thu Apr 30, 2026 3:29 pm**

Did you try the built-in filter of the Photo Gallery?

Demo:
https://www.wysiwygwebbuilder.com/suppo ... ilter.html

Related tutorial:
https://www.wysiwygwebbuilder.com/photogallery.html

Posted: **Tue May 05, 2026 11:26 am**

I did tried with photoGalery but, I can´t create with it, several lightbox gallerys with nested photos, to separate Works in progress and works done as portfolios...wich is what I need. https://www.guru-invest.pt/obras-portfolio.html, but maybe it´s possible I just did´nt found the way to achieve it...

Posted: **Tue May 05, 2026 11:33 am**

The built-in gallery also support lightboxes.

Your example site does the same as the built-in gallery.
Which specific feature are you missing?

Posted: **Tue May 05, 2026 12:05 pm**

I am looking for each thumbnail to be a Unite gallery...with nested photos and video...but I can´t find how.... even when I choose inside of the block the options Gallery mode...LightBoxGallery..I still don´t achieve this goal....I have tried already with css and js and I achieved something like that, I have showed on the web site..

Posted: **Tue May 05, 2026 12:58 pm**

What do you mean by "nested photos and video"?

Here is an example of lightbox gallery:
https://www.wysiwygwebbuilder.com/suppo ... llery.html

www.wysiwygwebbuilder.com

Trying to replicate a portfolio web page in wysiwyg web builder21..

Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..

Re: Trying to replicate a portfolio web page in wysiwyg web builder21..