Pro 1.2 issues: LayerSlider, text elements, footers, and more

Hi there!

First off, I will say upfront that I have only been using Wordpress and Pro for a little over a month and so it is entirely possible I am missing something here. I updated to Pro 1.2 today and while I love most of the changes, I am having some serious issues with it as well. Here are a few of the things I have run into while trying to update my elements to the V2 versions.

  1. Classic LayerSlider:
    a. I have LayerSlider in a section at the top of my homepage. With the transition to 1.2 and Classic LayerSlider is now not visible in the preview window of the editor. It is still visible when I visit my site and the section is still listed in the editor. Any ideas how to make this show up again in preview?
    [b. The Layerslider also overlays some text on the page now, so elements that are in a separate section are not visible.] - 1.b I was able to resolve through tweaking some of the element settings.

  2. Text Elements:
    a. When using the new text elements, the preview text stays static in a massive font size and does not respond to the font size slider. However, when saved and the site is viewed, the text is the size that I have chosen in the editor. This prevents any serious design from being done in the editor.

  3. Footers:
    a. I am still designing my site and so I have been happily using the Under Construction plug-in. However, if I have a custom footer set as my global footer, then that foot actually shows up at the top of my Under Construction page overlaying my content.

  4. Classic Map:
    a. The classic map element used to be a reasonably sized band from edge-to-edge on my page which I set up and used as a design element.

So far I have tried clearing the cache from the WordPress dashboard and Bluehost (although I don’t have their CDN enabled). The only other cache I can think of would be JetPack with Photon image optimization, but I can’t find any option to clear that. I have also tried reinstalling Pro, but that didn’t do anything either. So I am at a loss. The unfortunate thing is that I haven’t gotten a backup service set up yet, so I can’t roll back to the previous version. This honestly isn’t a huge deal because it wouldn’t be too hard to rebuild everything from scratch if I needed to as a lot of what I’ve created was to play with the ins and outs of Pro with only a couple of pages being ready for release before this happened. But all that to say, a fresh install would not rock my world if that is the only way to get things back up and running.

I would greatly appreciate any help that anyone can offer here! Thank you in advance!

Hi @sozospokane

Issues 1 & 2 are bugs in 1.2.0 that have been fixed and will be in the upcoming maintenance release.

3. It’s likely a bug. We’ll check it out, but it might not be in this release if it requires changes to the under construction plugin

4. I’ve checked your site and I’m seeing the map full width. Could you let me know a bit more about what doesn’t seem right to you?

Thank you for getting back to me, Alexander!

It looks like Layerslider and the text box issue are both taken care of with the new release! Thank you for your quick maintenance releases.

The classic map was initially showing up with a container that made the map not span the whole width of the screen even though I had disabled containers at both the row and the element levels. I toggled both of these options off and on again and it appears to have fixed that part. The issue I am now having with the map element is that it now takes up significantly more of the screen vertically than it used too (about twice as much screen space as v1.1). When I try applying a max-height: ; style of any sort to the element, the container shrinks underneath the map and the next section and footer are obscured by the map, because the map doesn’t change height along with the container. Is this a bug or is there no way to adjust the height of the classic map element?

Also, I would transition to the new V2 map element, but when I put it in a single column row, it snaps to the left side of the column, takes up less than half of the row, and has no options for expanding its size. Is there a way to manipulate the size of this element that I am missing (i.e. min-width and max-height)? Because I love the JSON integration!

Thank you so much for your help.

Howdy @sozospokane,

Thanks for writing back and we’re so glad to hear that almost most of your issues are resolved as of this point! :slight_smile:

I have looked into the Classic Google Map Element locally, and everything appears to be in working order for me. Regarding the height change, what might have happened is due to the way the map markup works. By default, the map container works in a manner that maintains a responsive aspect ratio as you size your browser down (it is 16x9 by default). This is achieved with a little bit of CSS trickery using a bottom percentage padding for the x-map-inner element, which will automatically size the map down and maintain the aspect ratio on smaller screens. If you happened to remove some of the containers that were initially around the map, then the map would by default get larger, due to the fact that it has more space to take up, so the aspect ration will grow and maintain itself.

If you’re wanting to put a “hard height” on the Classic Google Map element, you will actually need to do so via the “Height” control for the Element itself, as the desired height needs to be output on the x-map-inner element mentioned above, not the x-map outer wrapper, which is where any inline styles would be added via the “Style” control. If you go to that “Height” control, you could add something like 350px and see that the map will maintain a steady height at all screen sizes.

You can also experiment with different percentage values, which will maintain an aspect ratio as mentioned above. For example, if you wanted to do a 4x3 aspect ratio, you would enter in 75%, because you take the height divided by the width, and then multiply that times 100. This will maintain a 4x3 aspect ratio at all screen sizes, which means it will proportionally size up and down depending on how much space it has to take up.

As for the v2 map element, by default it has a max-width on it, which is why you’re seeing it snap to the left side of the column. The options to adjust the sizing of the map are in the Frame option set at the top of the workspace. Below is a screenshot of the workspace once selecting “Frame,” and you’ll see I’ve input a value of none for my max-width control, which will allow it to go fullwidth within its container:

Those “Frame” controls can then be further utilized to style any sort of container you might want around the map like so:

When working with the v2 Elements, it is important to remember that the controls sets are broken up like this to make things more approachable. Some of the v2 Elements have a sizable amount of controls available to adjust, and seeing them all at once would make scrolling through the list very difficult. We break these controls sets down into what we call “Partials,” which are reusable blocks of styling or functionality that you’ll see across multiple elements. For example, if you were to add a v2 Video Element, you would notice it also contains a “Frame” option set to style an outer container if desired.

We have some very detailed videos in our Knowledge Base that cover this usage of “Partials” for v2 Elements. You can see those videos here if you haven’t already:

https://theme.co/apex/forum/t/pro-using-partials/213

We also have some great “Tips & Tricks” videos walking through things like flexbox, navigation, and more:

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

Just wanted to point you towards those resources if you haven’t had a chance to review them yet. :slight_smile: Hopefully this all helps to give you some guidance on how to move forward and resolves your question. If you’re still experiencing an issue, don’t hesitate to let us know so we can further look into matters for you.

Cheers!