Automatically Stretching an Image Vertically Via the Masterpage

[Base12]

I just started using WYSIWYG Web Builder a few days ago and I am learning the basics.

I would like to learn how to make an image, placed within the Master Page, automatically stretch in the vertical direction to fit different pages of varying length.

The images I am looking to automatically stretch vertically can be seen on the left and right side of this webpage...

https://www.mostholyplace.org/misc/test ... masterpage

They are the shadows that fade from white to transparent. By clicking on the Nav buttons, the pages can be seen getting longer or shorter with the shadows stretching accordingly. The red colored Footer follows along, which is what I want.

Unfortunately, I have to place the shadow 'fade.png' images on every page and custom size them each time.

Is there a way to create a Master Page to accomplish this task automatically?

Note that I am currently using a 'Content Placeholder' on the Master Page to raise or lower the Footer. This seems to work well; however, I am open to redesigning the Master Page to take advantage of other features in WYSIWYG if there is a better way. Maybe use a 'Flex Container/Grid'? I am not sure how those work yet. Maybe I can use a 'Gradient' or 'Shadow' instead of an image?

Here are the files...

https://www.mostholyplace.org/misc/test ... erpage.zip

Thank you for any help you can offer!

[wwonderfull]

If the page is using responsive grids and not absolute layers, then any image on a layout grid should be stretchy and responsive. You can cover the image or stretch it also inside the grid itself.

for placing image inside separately inside the grid you can learn from here
https://www.wysiwygwebbuilder.com/add_images.html

Also check templates
https://www.wysiwygwebbuilder.com/templates2024.html

[Pablo]

Maybe this will be helpful?

Demo of the master page with Layout Grids:

https://www.wysiwygwebbuilder.com/master_page.html

or

How to use Master Frames with Layout grids?

https://www.wysiwygwebbuilder.com/master_frame.html

[Base12]

Thanks Wwonderfull and Pablo for the quick response and suggestions.

I will take a look and practice on a test page.

[Base12]

** Update **

I experimented with Layout Grid, Flex Container and Flex Grid. I could not find a solution using those techniques.

I feel like Content Placeholder needs to have a few more bells and whistles to make it do what I want. I was trying to make it go inside of the Flex Grid, but it does not work. Imagine one of the Cells growing and shrinking with content. That is what I want.

Anyhow, I did find a perfect workaround. All I had to do was create a custom 'Glow' image and set it as the background for the Content Placeholder. Now, when the Content Placeholder grows vertically, the Glow image stretches accordingly.

For those interested in making your background 'glow', I have uploaded the sample project files here...

https://www.mostholyplace.org/misc/test ... rpage2.zip

The testpage can be viewed here...

https://www.mostholyplace.org/misc/test ... index.html

I updated my home page to include the new technique...

https://www.mostholyplace.org

You can see the glow effect on the left and right side of the main content. They blend into the clouds.

I am still interested in knowing if there is a better way.

[wwonderfull]

Looks like a church site.

If you looked on the templates, you may have gotten how to work with responsive grids. I checked your demo it looks like you are using absolute layout layers and stuffs, and you used a shape as a header and footer which is incorrect purpose of those objects and will have trouble as it is not mobile responsive.

I would suggest the full website design to be done using flex grids using layout grid and the design must be adjusted for that.

That is the reason WWB provides templates so you could learn and design it better. But if you have custom design in your mind yet wanting a responsive layout and not sure what to do then you can contact from below. But have to see the full design and objects to determine what would be the final grid setup for your website or it is difficult to suggest what would be most perfect layout structure for this project.

[BaconFries]

Imagine one of the Cells growing and shrinking with content. That is what I want.

Looking at what you have already done then you site is not "RWD" Responsive Web Design it is fixed/absolute and at present is not suitable for the likes of mobile design (iPads, Tablets, Cellphone) all of which use different sizes.
I would suggest that you carefully read the following urls on the use of Layout Grids, Flexgrid and Responsive Text as these are all required to meet RWD requirements. You should also look at the "Templates" as these use the likes of Layout Grids, Flexgrid in there design which should help you in how to implement these tools

An Introduction to Flex Grid
Create responsive layouts using Flex Grid

An introduction to the Layout Grid - Part 1
An introduction to the Layout Grid - Part 2

How to create Responsive Text?Responsive

Templates 2023/2024 (for WYSIWYG Web Builder 19 and newer)

[wwonderfull]

https://file.io/2iTzUefiYku7

Here is a demo of your project file. I did not do much as I am not sure what would be your design plan. I just made your layout responsive and made sure it has the glow. Be sure to check and tweak it upon your need with proper understanding.

and also check the links @baconfries has shared for more learning it will for sure give you the general idea of the design layout.

[Base12]

Looks like a church site.

Kind of. It is a little side hobby of mine to share my research with others. The site is not meant to be a commercial or advertising site. Mainly, I want it to be a repository of text and information that I slowly upload as time permits. I am too much of a novice to make anything fancy for now.

If you looked on the templates, you may have gotten how to work with responsive grids.

They are great for sure. Responsive Web Design is definitely the 'in thing' nowadays.

One of the issues I have is that my current website is really old and has the outdated 'fixed' design...

https://www.mostholyplace.com

I have to redesign it because the software I used (Serif Webplus X8) is no longer being updated and is causing me problems.

Being kind of lazy, I was just going to copy the original layout. However, the majority of opinions here is that I make it as RWD.

I checked your demo it looks like you are using absolute layout layers and stuffs, and you used a shape as a header and footer which is incorrect purpose of those objects and will have trouble as it is not mobile responsive.

I know. Guilty as charged... lol. I am so used to the old 'fixed' designs.

I would suggest the full website design to be done using flex grids using layout grid and the design must be adjusted for that.

I guess now would be the time to rethink my outdated techniques.

I will take a look at your example.

[Base12]

Looking at what you have already done then you site is not "RWD" Responsive Web Design it is fixed/absolute and at present is not suitable for the likes of mobile design (iPads, Tablets, Cellphone) all of which use different sizes.
I would suggest that you carefully read the following urls on the use of Layout Grids, Flexgrid and Responsive Text as these are all required to meet RWD requirements.

I appreciate the suggestion BaconFries. I am going see what I can do to update my old website as RWD.

[Base12]

https://file.io/2iTzUefiYku7

Here is a demo of your project file. I did not do much as I am not sure what would be your design plan. I just made your layout responsive and made sure it has the glow. Be sure to check and tweak it upon your need with proper understanding.

and also check the links @baconfries has shared for more learning it will for sure give you the general idea of the design layout.

Your example layout is wonderful. I really appreciate you taking the time to create it.

The way you made the glow effect grow and shrink both vertically and horizontally is something I did not consider before!

Time to experiment.

[wwonderfull]

Kind of. It is a little side hobby of mine to share my research with others. The site is not meant to be a commercial or advertising site. Mainly, I want it to be a repository of text and information that I slowly upload as time permits. I am too much of a novice to make anything fancy for now.

They are great for sure. Responsive Web Design is definitely the 'in thing' nowadays.

One of the issues I have is that my current website is really old and has the outdated 'fixed' design...

https://www.mostholyplace.com

I have to redesign it because the software I used (Serif Webplus X8) is no longer being updated and is causing me problems.

Being kind of lazy, I was just going to copy the original layout. However, the majority of opinions here is that I make it as RWD.

The reason we said about responsive web design is that even if you become able to create the design soon after you will have double the hardship to redesign it on responsive layout from the absolute nonresponsive framework. That is the reason we recommend the responsive design early so you do not have to rebuild the website soon again which will cost double the time.

I have checked your old site looks to have a nice design. I think with expertise even that design can be 100% duplicated in WYSIWYG Web Builder. If you need help with the framework you can contact.

[Base12]

**UPDATE **

Thanks to the advice of wwonderull and others here, I was able to create a Responsive Web Design as well as having the vertical 'gradient' features.

Here is the sample website...

https://www.mostholyplace.org/misc/test ... asterpage3

Here are the files for those interested...

https://www.mostholyplace.org/misc/test ... rpage3.zip

Note that the main website is not updated yet as of this post.

[wwonderfull]

on the "LayoutGrid" properties go to Gutter Width and write "15" it would give a bit of padding, and the text would look better. If possible, put padding on top and bottom too.

[wwonderfull]

**UPDATE **

Thanks to the advice of wwonderull and others here, I was able to create a Responsive Web Design as well as having the vertical 'gradient' features.

Here is the sample website...

https://www.mostholyplace.org/misc/test ... asterpage3

Here are the files for those interested...

https://www.mostholyplace.org/misc/test ... rpage3.zip

Note that the main website is not updated yet as of this post.

I looked on your old site and tried replicating it as I think there isn't a site on web which WYSIWYG web builder cannot replicate with proper skills.

Here is a demonstration of your site 99% original to what you had before but responsive.

The project could not be shared because of divider issues and some custom codes which you will have difficulties modifying.

Take a look HERE

Remember.... with effort anything is possible on WYSIWYG WEB BUILDER.

[Base12]

Here is a demonstration of your site 99% original to what you had before but responsive.

Whoa! That is a BIG help. I appreciate it. That is amazing.

I am literally in the middle of redesigning the Header right now and was wondering if the pictures and center title/logo should shrink with the page.

You answered that question... lol. I like the idea of 'wrapping' the long button text. Now I know what to do.

I will be posting my work tomorrow in a separate thread to see if I am heading in the right direction.

[Base12]

I will be posting my work tomorrow in a separate thread to see if I am heading in the right direction.

Here it is!

viewtopic.php?t=99297