www.wysiwygwebbuilder.com

crispy68

Description:
Change the URL of a link when a breakpoint is reached.

Features:
- Works with Buttons, Themeable Buttons, Text Links, Card Buttons, Shapes and Images.
- Multiple instances on a page (if needed?)
- No need to create 2 separate objects and hide them in breakpoints!

Note: this is ...

crispy68

New in version 1.1.0:

1. Ability to select font, color, size individually for text
2. Ability to add links to text block
3. Heading and text can be responsive in breakpoints
4. Faded text option added for 'visible' text
5. Ellipsis option can have different font, size and color

!! IMPORTANT ...

crispy68

Set the background image to fixed

crispy68

I've been using Hostinger for a while now and have had no issues with them.

crispy68

Unless there is a different way to do it, for now I copied the .js code generated for other objects doing the same animation that I wanted and manually added it to the page html. The icons now will animate the 1 time when they come into the viewport.

crispy68

I may have figured it out using scroll transitions. However, I like the idea of the 'onscrollreveal' option as I can have the animation do it only once. Is there a way with scroll transitions to have this animate only once when scrolling? Other options to make this happen?

I see there is a way to ...

crispy68

I see with many objects in the Events tab the options of 'onscrollreveal' and 'onscrollrevealpartial'. The card has this option as well but there is no way to choose any of the objects that are actually in the card itself. I have a button/icon in a card that I want to animate only once when the card ...

crispy68

Are you setting the image as the background of the entire grid? If so, set it to 'cover' to fil the entire background. Keep in mind, to see the background, you have to have content int he grid itself

crispy68

Can't you add top/bottom padding to the grid?

crispy68

Can you provide a link to the page to view?

crispy68

Couldn't you do this with grids or even flexgrid?

For example, create a layout grid that is 1x 10x 1x. Now set the max-width of this grid to -1140px (Adding the minus makes it so the background color is only this wide). If you want spacing above and below add top/bottom margin to the grid.

Inside ...

crispy68

@beth,

My mistake. Sorry about that. Not sure how I missed that. Glad to help.

crispy68

Your first image you posted looks like its a pic from the style manager which is why I mentioned it. You can still right click on an object and add padding or margin.

crispy68

I do see what you are saying. For some reason it is adding bottom padding in the select box which is causing this. The padding for the select box only adds to this. There seems to be some default padding added.

You can right click on the Select box --> Object HTML --> Custom CSS and add:

padding ...

crispy68

@Beth,

If I understand correctly, yes it was removed because adding the padding in the style manager was adding padding to the text rather than the container which is not correct so it was hidden for this reason.

Outside of doing what Pablo suggested, you will need to go to the text objects ...

crispy68

The 'main background' is the page background. This can be set in the page properties. You said you changed the color of the grid background to a lighter color. Did this not achieve what you were looking for? If you are wanting only certain columns of the grid a different color, then you could either ...

crispy68

Or do you main to put the JS files in a different subfolder?

Yes. You currently have your CSS files being put in a subfolder called CSS but not your .js files. Go to Options --> HTML --> Javascript and check the box for 'Generate external JS files for page specific scripts'. I was curious if this ...

crispy68

What happens if you change it so that .js files are in there own folder like you have with your CSS?

crispy68

Are you dragging images into the carousel or are you setting the images as the background of each slide? If you set them as the background you can then drag a text object inside to be on top of the image

crispy68

@mitch,

I'm not real sure on this and whether this can be done thru WB on its own or by having to add an additional script to see if there is a cookie/session established, if not fire the timer and then set the cookie/session so that it doesn't refire during the same session.

crispy68

That is odd. It should work in preview. I think I know. Please go to Tools --> Files and Folders and make sure the preview folder is correct. I believe it is set to preview in my folder which is why it is not working. I've corrected this in the zip folder now.

crispy68

@mitch,

Can you confirm that the path for the image 'burger-c.jpg' with ID splashLogo is correct for the image?

crispy68

@Kingsparta and @mfirlotte,

Sorry about the confusion. I think when I threw this together, I went so fast that the name of the animation snapshot is incorrect. I've fixed this now in the zip file.

If you look at the ' keyframe.jpg ' I sent it shows the name of the animation is ' transform-rotate ...

crispy68

The layer is towards the bottom of the page on the index page. You will need to scroll down. You can also find it in the object manager.

crispy68

You may want to double check that the image inside the layer 'splash' (called splashLogo) is linked to the image included with the project file. The image is called 'burger-c.jpg'.

crispy68

Ok. I've updated the demo. There should be no extension needed. For some reason I forgot to delete another page in the project that had this extension. Use the same link as before.

crispy68

hmmm... that extension should have been removed. Let me resave it and upload it again for download. I will report back here....

crispy68

No need to make extension. Did it in WB. Here is the link to the demo project file.

The 'splash' layer has the image that's shown on load. Take a look at the events for the timer.

I had to create an animation (called transform-rotate-out-zoom) to the animation editor since there wasn't one I ...

crispy68

Is THIS closer to what you are looking for?

crispy68

There could be a solution but without fully understanding what you want it's hard to offer any advice. What about my demo (besides that the image doesn't rotate or zoom) is not correct? It seems on the surface it does what you want....page loads, shows an image, fades and shows the page afterwards ...

crispy68

You never said if my example is what you are looking for (of course + zoom and rotate).

crispy68

Although this example doesn't rotate or zoom in (just fades out), is this what you are sort of after?
example

crispy68

Is the user supposed to click something, hover over something or is just supposed to happen automatically when you load the page? I'm still not clear on what you are trying to do.

crispy68

I find that using 'sticky' can sometimes be finicky. If you are simply wanting your header stuck to the top as you scroll and it is already at the top when starting, then simply set the layout grid position to "Header (fixed)"

crispy68

Your demo looks like it is sticking to me. I don't see an issue. If you are just wanting it fixed to the top, I would just set it to header - fixed.

crispy68

What do you mean exactly by rotate and zoom? Are you looking for some effect where the user hovers over the image and it rotates and zooms in? If so, you can do that by creating an event on hover.

crispy68

You need to add more content to your page. As it is, the menu is creating a longer page when you hover over the menu but the page is really not that long. Add an object way down the page to increase the actual page height beyond the browser height and your menu works.

crispy68

@Alan,

I tested it on your demo and my code definitely works. However, as suggested you need to add a 4th row in your breakpoint for best results.

Like I mentioned, the gap is created by the 3 text menus you have. They have a fixed height in the breakpoint which is causing the extra spacing. My ...

crispy68

The 3 text menus have height in the breakpoint which is adding to the spacing.

You can add some CSS to adjust that between the <head> tags:

<style>
#wb_TextMenu1,#wb_TextMenu2,#wb_TextMenu3{height:auto;}
</style>

Also, I would make the text in your right column all 1 text box versus 3.

Next ...

crispy68

If I had to guess it's because your 2nd column (the text in the darker column) is stretching taller and taller which is stretching the overall height of the flex grid. So, the text in column 1 (which is in 4 sections) is adding space to fit within the vertical space created by column 2.

I think it ...

crispy68

Thanks Alan. I appreciate the support.

crispy68

Hello WB users,

I wanted to say thanks to all the users who have purchased and downloaded extensions from my website since creating it. I also appreciate all of the user suggestions for improvements. I also thank Pablo for creating extension builder which allows for creativity in creating some ...

crispy68

Insert a layout grid and set it to 1x5x5x1. Then just add the text in the layout grid columns (2 & 3) like you currently have and add some top and bottom padding to the layout grid. Follow Pablos advice for the background image.

crispy68

@Victor,

Check your email to download the demo project file.

crispy68

@Victor,

Is this what you are after?
demo: https://webbuildertemplates.com/demo/vi ... _page.html

crispy68

The height of your photo gallery is too high causing the space. You need to reduce the height of it to remove the space below. The height of the page in the workspace is only for the workspace. It's the content on the page that determines the height of your overall page.

You will be much better ...

crispy68

Ok. Makes better sense. I have that working. Will upload demo to confirm and send you project later today when I get home.

crispy68

Just to make sure I understand, where is the page in the inline frame supposed to be seen? In the panel area? Outside of the accordion?

So, if I click on panel1 I see page 1 in the panel area? And if I click on panel2 I will see page 2? Sorry, I guess i'm not clear on what is supposed to happen ...

crispy68

It is on the "master-page". It's hidden in the default view. You can click on the 748px breakpoint and then click on the mobile menu there to open up the properties.

crispy68

the height of your page is determined by the objects on the page. There is no height usually given to the body tag. If you are wanting to set a height, then you will need to manually add the CSS code for it I believe. Why are you wanting to specify a particular height? what about possible overflow?

Search found 2686 matches