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

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.


PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
EdGreg
 
 
Posts: 5
Joined: Tue Mar 10, 2026 1:00 pm

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

Post by EdGreg »

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
Top
User avatar
Pablo
 
Posts: 24554
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

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

Post by Pablo »

The URL is blocked on my computer for security reasons.
Do you have another example of what you are trying to do?
Top
EdGreg
 
 
Posts: 5
Joined: Tue Mar 10, 2026 1:00 pm

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

Post by EdGreg »

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&#0205;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&#0231;&#0227;o de Moradia . Cumeada</span><span style="color:#808080;font-family:Raleway;font-size:16px;"><br>S&#0195;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&#0231;&#0227;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&#0195;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&#0231;&#0227;o de Moradia . Cumeada</span><span style="color:#808080;font-family:Raleway;font-size:16px;"><br>S&#0195;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>
<!-- Add overlay to images -->
<div id="Html1" style="position:absolute;left:1951px;top:1460px;width:100px;height:100px;z-index:31">
</div>
<!-- Add overlay to images -->
<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>
Top
User avatar
BaconFries
 
 
Posts: 6274
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by BaconFries »

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.
Top
EdGreg
 
 
Posts: 5
Joined: Tue Mar 10, 2026 1:00 pm

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

Post by EdGreg »

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
Top
User avatar
Pablo
 
Posts: 24554
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

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

Post by Pablo »

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
Top
EdGreg
 
 
Posts: 5
Joined: Tue Mar 10, 2026 1:00 pm

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

Post by EdGreg »

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...
Top
User avatar
Pablo
 
Posts: 24554
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

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

Post by Pablo »

The built-in gallery also support lightboxes.

Your example site does the same as the built-in gallery.
Which specific feature are you missing?
Top
EdGreg
 
 
Posts: 5
Joined: Tue Mar 10, 2026 1:00 pm

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

Post by EdGreg »

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..
Last edited by EdGreg on Wed May 06, 2026 8:23 am, edited 1 time in total.
Top
User avatar
Pablo
 
Posts: 24554
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

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

Post by Pablo »

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

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

Return to “General Questions”