Discussion on Overlap - High Performance WordPress Theme

Discussion on Overlap - High Performance WordPress Theme

By
Cart 1,531 sales
Recently Updated
Well Documented

Wyde supports this item

Supported

1303 comments found.

How do I turn on the front-end editor. I don’t mind having to save and refresh but I did not buy a visual builder just to use only the back-end builder. That’s a ridiculous idea and you should be up front instead of hiding that since it is going to be generally assumed you can use the front end editor when you are building wp-bakery or elementor or any of the other drag and drop builders.

We are sorry but this theme was built with the back end page builder. It includes additional content elements and features that are not compatible with the front end editor so it is disabled by default, as you can see in the product details page: https://themeforest.net/item/overlap-high-performance-wordpress-theme/15344205#item-description__theme-features

Hi there,

We are about to go live and realised we have a couple issues: 1. If you look at the website on Safari, some of the content is displayed incorrectly. You can see on the homepage as an example the 3 info boxes are stacked incorrectly and the meet our experts heading:

https://mindmoverspsychology630280121.wpcomstaging.com/

2. The upcoming group page is showing the module incorrectly with colours and not alternating and a blank space https://mindmoverspsychology630280121.wpcomstaging.com/upcoming-groups/ we copied it from here so it should look similar and we can’t work out what the difference is https://mindmoverspsychology630280121.wpcomstaging.com/child-group-therapy/

Please help, thanks in advance!

Thank you for the details!

There is a CSS conflict between the GS Portfolio for Envato Lite plugin and WPBakery Page Builder.

After deactivating that plugin, everything seems to be working fine. I don’t know what its purpose is. However, this theme comes with a built-in Portfolio. I recommend using the one from the theme instead, to make sure it will be compatible with the theme.

YESSS, thank you guys!! I wasn’t sure if I could deactivate that one but tried most of the others. Appreciate your help, you’re the best!

You are welcome :)

I’m helping my friend Nathalia who bought the theme – purchase code 29331259-13fd-45e1-a53f-21be612d1d76, and I can’t install the theme on wordpress, the message that it gives is the package cannot be installed because it doesn’t have a style sheet css. What should I do?

Sounds like that you have uploaded the incorrect theme file. You can find more details here: https://help.market.envato.com/hc/en-us/articles/202821510

If you downloaded “All files & documentation”, you will need to extract that zip file first. Then you will find the theme file “overlap.zip” in the folder “WordPress Theme”. You can find the instructions on how to install the theme in the documentation: https://wydethemes.com/overlap/documentation/#installation

Hi there,

Just wondering two things: 1. How do I add a newsletter form? I can’t see it as one of the elements

2. How do we get the team member photo to appear on the left hand side when you click in to read more? Right now, it has the white space but I can see its possible from your website https://mindmoverspsychology630280121.wpcomstaging.com/our-experts-2/

Link to website https://mindmoverspsychology630280121.wpcomstaging.com/

Thank you

Thank you, but our site is using Jetpack for protection and I don’t think we can just deactivate it as it may change a few things.

Could it be one of these? - AMP - Contact Form 7 - Envato Toolkit - Full Site Editing - GS Portfolio for Envato Lite - Gutenberg - Overlap Demo Content - Slider Revolution - WPBakery Page Builder - Wyde Core - Yoast SEO

We are sorry but the Lazy Images is included in the Jetpack plugin. You don’t need to deactivate it but you may need to disable the Lazy Images feature to make the member image show up. You can find more details here: https://jetpack.com/support/lazy-images/

Ahhh it worked, thank you!!

Wonder if you can help – on my blog single post the top navigation is hiding the blog title and part of the sidebar widget. I added padding to the post title which helps but the sidebar is still a problem. Thanks

I removed the posts title padding at the moment on the single post

I found the problem – I forgot that I made the header container wider so my logo would fit… I trimmed back and it works now – thanks.

Thank you for the details! Glad to hear it works now :)

Do you know how I can edit the submit button for contact form 7 – I want this to match my buttons in wpbakery – thanks.

The Contact Form 7 doesn’t allow adding a button from WPBakery Page Builder. You will need to replace the submit button in the form with the HTML code of the button manually.

Here are the code for the buttons in the theme:

Square:

<button type="submit" class="w-link-button"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Round:

<button type="submit" class="w-link-button round"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Rounded:

<button type="submit" class="w-link-button rounded"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Square Outline:

<button type="submit" class="w-link-button outline"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Round Outline:

<button type="submit" class="w-link-button round outline"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Rounded Outline:

<button type="submit" class="w-link-button rounded outline"><span class="w-border" /><span class="w-button-text">Send Your Message</span></button>

Square with icon:

<button type="submit" class="w-link-button w-with-icon" style="color: #fff;"><span class="w-border" /><span class="w-button-icon"><i class="sl-action-redo" /></span><span class="w-button-text">Send Your Message</span></button>

Round with icon:

<button type="submit" class="w-link-button round w-with-icon" style="color: #fff;"><span class="w-border" /><span class="w-button-icon"><i class="sl-action-redo" /></span><span class="w-button-text">Send Your Message</span></button>

Rounded with icon:

<button type="submit" class="w-link-button rounded w-with-icon" style="color: #fff;"><span class="w-border" /><span class="w-button-icon"><i class="sl-action-redo" /></span><span class="w-button-text">Send Your Message</span></button>

Do you know a way of adding login-register – the wpbakery element for this is not showing up fr me (wp meta) – I want a simple login-register no bells-whistles. Thanks

The Login link is included in the shopping cart icon in the main menu, as you can see in our demo site: https://wydethemes.com/overlap/

If you have WooCommerce plugin installed, you can enable the Shopping Cart icon under Theme Options -> Navigation to display it on your main menu.

However, if you would like to add a login/register button into the page. You can add a Link Button using WPBakery Page Builder and set the URL for that button to your login page. For example: https://www.example.com/login/

I wish to use single image element that when clicked it opens a lightbox for video – do I need anything extra like a video or video lightbox plugin? Right now If I activate the lightbox for the image I see no options for video… just the image opens in lightbox – thanks.

We are sorry but we have never tried any video plugin with this theme before.

However, you may need to customize the theme to achieve this. Here are the instructions:

1. Add the following JavaScript into Theme Options -> Advanced -> Body Content: <script> ( function( $ ) { $( window ).on( 'wyde.page.ready', function() { $( 'a[target^="lightbox"]' ).attr( 'target', '' ).lightcase( { showTitle: ( window.wyde && wyde.page && wyde.page.lightbox_title == true ), showCaption: ( window.wyde && wyde.page && wyde.page.lightbox_title == true ), showSequenceInfo: false, maxWidth: 1280, maxHeight: 720, iframe: { width : 1280, height : 720, allow : 'autoplay; fullscreen', frameborder : 0 }, video: { width : 1280, height : 720 } } ); } ); } )( jQuery ); </script> 2. Add the following PHP code into functions.php in your child theme: /** * Adds a new target option (Lightbox) to the Single Image link. */ function overlap_add_single_image_link_target() { vc_add_param( 'vc_single_image', array( 'param_name' => 'link_target', 'type' => 'dropdown', 'heading' => esc_html__( 'Link Target', 'overlap' ), 'value' => array( esc_html__( 'Same window', 'overlap' ) => '_self', esc_html__( 'New window', 'overlap' ) => '_blank', esc_html__( 'Lightbox', 'overlap' ) => 'lightbox', ), 'dependency' => array( 'element' => 'onclick', 'value' => array( 'custom_link', 'img_link_large' ) ) ) ); } add_action( 'wyde_load_shortcodes', 'overlap_add_single_image_link_target', 200 ); /** * Sets a video link to the Single Image so that it opens a video in the ligthbox. */ function overlap_set_single_image_link( $atts = array(), $tag ) { if ( 'vc_single_image' === $tag && 'lightbox' === $atts['link_target'] ) { $link = $atts['link']; if ( strpos( $link, 'youtube.com/watch' ) !== false || strpos( $link, 'youtu.be' ) !== false || strpos( $link, 'vimeo.co' ) !== false ) { $atts['link'] = overlap_get_media_preview( $link ); } } return $atts; } add_filter( 'vc_map_get_attributes', 'overlap_set_single_image_link', 10, 2 );

You can find more details on how to install and edit your child theme in the documentation: https://wydethemes.com/overlap/documentation/#child-theme

So, you will be able to set the video URL to the Single Image. Here are the instructions on how to use it:

1. In the Single Image settings window, choose “Open custom link” for the “On Click Action”.

2. Enter the video URL (MP4 video, YouTube and Vimeo) to the “Image Link”.

3. Change the “Link Target” option to “Lightbox”.

I hope this has been helpful.

Thanks for your hard work – I will try this. I was told this add-on may work – https://codecanyon.net/item/visual-composer-addon-multimedia-carousel/13080643

That worked very well – thanks! This would be nice to build into theme permanently….

Hi there,

I’m really struggling with the mobile responsiveness, the website has lots of blank spaces, alignment is off an the font is massive. Do you have tips on how to fix this?

Here is the website link- https://mindmoverspsychology630280121.wpcomstaging.com/

Thank you, Carla

Thanks for giving me these tips, very helpful! I changed everything as you said, and seems much better. Couple issues though: 1. the icon blocks under ‘what we do’ is not showing on mobile at all, I checked the settings and I don’t see why its doing this. Any ideas?

2. p for element tag works for most desktop and mobile but then when I tried it on this page https://mindmoverspsychology630280121.wpcomstaging.com/our-story_copy/ for ‘We care’ and ‘our team’ sections it looks super small on both desktop and mobile. Any thoughts on why?

Ahh I worked it out, the ‘style’ is what makes it look different for 2 above, correct? If you have any ideas on how to make that about us page better, please let me know :)

My apologies for the delayed response!

I’m not sure what exactly made it look different on mobile and desktop. However, you can set the “Font size” of the Custom Heading (e.g. 20px) to make the text bigger.

Regarding the About Us page, here are my suggestions:

1. Increase the space between the first section and the image in the second section. To achieve this, you have to change the Overlap Distance setting of the column (container of the image) from 150px to 100px.

2. Disable the Overlap option for the right column (beside the image) under ‘Not just therapy’ to have bigger gap between the text and the blue background.

3. Remove the blank row (white space) at the bottom of the page.

How do I edit in the front end editor for wp bakery – I do not see this option in the page builder? I only have classic mode enabled. It is very difficult to edit the demo pages without this.

Now I see front end editor is disabled – this is a major function of a page builder and surprised you are ok with not making this theme work with it.

We are sorry but this theme was built with the back end editor. You can click on WPBakery Page Builder button on the page edit screen to edit the page with the back end editor. You will find more details in the documentation: https://wydethemes.com/overlap/documentation/#visual-composer

The front end editor is disabled because it is not compatible with some content elements and features in this theme, as seen in the theme features on the product details: https://themeforest.net/item/overlap-high-performance-wordpress-theme/15344205#item-description__theme-features

All demo content were also built using the back end editor that is working great, faster and taking a shorter time to load so we recommend using the back end editor instead.

Hello! I’m having problems to run the Slider Revolution with no problem at my website.

At first load it charges perfect, but when it changes to next photo, it make a black space at bottom and the photo is not well included.

Since this moment, all the photos are not well loaded.

You can see it at next website’s pages: www.sergiogisbertfotografia.com https://www.sergiogisbertfotografia.com/el-estudio-fotografico-para-sesiones-de-fotos-naturales/

Can you tell me which is the problem? Do i’m not including it correctly?

Thanks and best regards.

If you disable the Transparent Header, you will have additional space at the top of the slider so that it will be taller than the screen height.

There are 2 ways to fix this issue:

1. Enable the Transparent Header under Overlap Options -> Header so that you will have transparent header menu like our demo: https://wydethemes.com/overlap/home/home-creative-agency/

2. If you would like to use a white background menu (non-transparency), you will need to decrease the slider height as below:

- On the slider edit screen, select Layout option under Module General Options.

- Scroll down to the “Decrease Module Height” section. And then enter #header into the “by Container” field so that it will decrease the slider height by the height of the header navigation, please check out this link: https://www.themepunch.com/slider-revolution/module-layout/#fullscreen

Hello there,

I tried looking in your comments but couldn’t find the answer.

1. Our site has the sticky turned ON, but when we scroll, it is transparent and we would like it white. How can we do this?

2. How do I change the height of the footer to be smaller? 3. For title areas, can we make this sentence case and bold? At the moment its capitals and won’t let me change the font to bold

Thank you! Carla

Thank you for this, number 1 worked! number 3 when I added in, it made all the body text bold which is not what I wanted. Is there a way to only have this bold for the title?

Sounds like that you just added an invalid code so that it made all the text bold. Please ensure that you also added an end tag.

As seen on the code below, it has a start tag <b> and an end tag </b>:


<b>About Us</b>

You can find more details here: https://www.w3schools.com/html/html_elements.asp

Ahh it worked, thank you! Happy Easter :)

Hi there,

we are having issues with the theme in combination of WooCommerce.

The problem is that we are missing the “pay” button on the checkout page. The button is also missing in the DOM, I checked that already.

Also if I disable the Overlap theme the button is visible!

Do you have an idea what the problem could be? Which further information do you need?

Wordpress: 5.4 WooCommerce: 4.0.1

My apologies for the delayed response!

It is working fine on our demo site which is also using WooCommerce 4.0.1 on WordPress 5.4: https://wydethemes.com/overlap/shop/

The “Place Order” button is visible and working properly on the check out page.

Which payment method are you using? Also, if you are using the third party plugin for your payment method, it might be a compatibility issue. Try to deactivate the plugins to see if it works.

If it still doesn’t work, you may need to give me your WordPress login details so I can check it. You can send a private message through the contact form on our profile page here: https://themeforest.net/user/wyde#contact

Hey there,

- I was wanting to make the logo larger in the header, but unsure how to do this. Can you please help? - Can you tell me how to make the blog style similar to this one? including the categories at the top? https://theindigoproject.com.au/blog/

Thank you, Carla

Hi there,

- You will need to add the CSS snippet below into Appearance -> Customize -> Additional CSS to make the logo bigger:

#header-logo img {
    max-height: 95%;
}

- We are sorry but that blog style is not included in this theme. Looks like it has been modified to use on that website. You will need edit the template file “index.php” to display the categories at the top and edit the CSS to change the blog style. Otherwise, you may need to use default Blog Masonry style from this theme instead. Please check out our demo: https://wydethemes.com/overlap/blog/blog-masonry/

The logo worked, thank you!!

Doesn’t seem to be working. It’s still the same border no background when hovered upon buttons.

By ghost button I meant the first button on your page: https://preview.themeforest.net/item/overlap-high-performance-wordpress-theme/full_screen_preview/15344205?_ga=2.193001583.357723962.1584946152-1374860582.1583503318

The solid background button one where the text slides to the left and arrow appears.

I’ve tried it on my local site and it seems to be working fine. If it doesn’t work on your site. You may need to give me your web address so I can check it.

can you share your support email and i’ll send you my url details

You can send a private message with the URL through the contact form on our profile page here: https://themeforest.net/user/wyde#contact

Hey there, absolutely loving your theme! I had a small questions – How can I get the cart and checkout buttons to work like the .w-ghost-button.large. Any help would be appreciated. Thanks!

My apologies for the delayed response!

Anyway, you may need to add the following CSS snippet into Appearance -> Customize -> Additional CSS to achieve this:

.menu-item-mini-cart .buttons .button {
        position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: top;
    border-width: 1px;
    background-color: transparent !important;
    font-size: 12px;
    line-height: 14px;
    min-width: 120px;
    cursor: pointer;
    padding: 8px 20px;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.menu-item-mini-cart .buttons .button:hover {
    padding: 8px 20px 8px 0;
}

.menu-item-mini-cart .buttons .button:after {
    position: absolute;
    content: '\e82a';
    font-family: 'overlap';
    opacity: 0;
    right: 16px;
    top: 50%;
    line-height: 0;
    color: inherit;
    -webkit-transition: all 0.15s, color 0s;
    transition: all 0.15s, color 0s;
    -ms-transform: translateX(40px);
    -webkit-transform: translate3d(40px, 0, 0);
    transform: translate3d(40px, 0, 0);
}

.menu-item-mini-cart .buttons .button:hover:after {
    opacity: 1;
    right: 10px;
    -ms-transform: translateX(0), translateY(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Purchase code 6926f74b-5848-4a5a-9d38-a9715c00ea6d , bought this theme in 2017 but only have uploaded and started building my website now and am being told it is unresponsive. hence taking very long to load on mobile devices . what do I do ?

First of all, please ensure that you have updated the theme and all bundled plugins to the latest update. Please check out the changelog: https://themeforest.net/item/overlap-high-performance-wordpress-theme/15344205#item-description__update-log

Also, there may be plugin conflicts on your site. If you have other plugins, try to deactivate them to see if it works.

If it doesn’t work, you may need to send me your web address so that I can check it.

Hi, I bought this theme couple years ago but have only just started working on my site and have been told that it is not responsive. In mobile devices the website is extremely slow to load and some issues on desktop as well. What do I need to do? Thank you in advance.

Thank you for the details!

Looks like you have large images on your website, specially the ones in the main slider at the top of the home page. Those images can increase the download time. When creating a slider, I suggest to resize the image before uploading to your website because the Slider Revolution will display the original image size as uploaded.

However, those images are in JPEG format. You should use a JPG format instead. Open your image with an image editor such as Photoshop, then choose “Save for web” and save it as “JPG”. Or convert them online here: https://image.online-convert.com/convert/jpeg-to-jpg

Also, here are my answers to your latest comment:

1. The latest version of the theme is 1.4.9: https://themeforest.net/item/overlap-high-performance-wordpress-theme/15344205#item-description__update-log

Also, the child theme is included in the download zip file. You can find more details in the documentation: https://wydethemes.com/overlap/documentation/#child-theme

2. I’m sorry but this theme is built with WPBakery Page Builder. We have never tried it with Elementor so we recommend using WPBakery Page Builder to make sure the theme will be working properly.

3. I suggest to install a cache and minify plugin. We are using W3 Total Cache ( https://wordpress.org/plugins/w3-total-cache/ ) on our demo site and it’s working perfectly. Also, you can use a CDN to improve your site speed.

4. It depends on how that plugin works. If it takes a long time to process, of course it can increase the load time. You may need to try it and see the result.

I hope this has been helpful.

Thanks a lot, that’s very helpful and I will correct the image sizes etc. However I was not able to update the theme at all, currently I’m running on 1.2.4 , i can see that the theme does not auto update, in fact in my hosting it says that the theme is up to date. How do I do this without losing any of the changes I’ve made ? Thank you very much in advance.

To enable the automatic update feature, you will need to install the Envato Market plugin. You can find the instructions on how to update the theme in the documentation: https://wydethemes.com/overlap/documentation/#update

After you setup that plugin, you will be able to update the theme under Appearance -> Themes on your WordPress admin. Updating the theme won’t affect your current data and settings.

However, if you’ve edited any files in the theme directly (under Appearance -> Theme Editor). The changes you’ve made to those files will be lost after updating.

Hi, my mobile-submenu doesn’t work. Can you please advise? Greetings, Anouk

Please ensure that you have updated the theme and Wyde Core plugin to the latest update. You can find the update details in the changelog: https://themeforest.net/item/overlap-high-performance-wordpress-theme/15344205#item-description__update-log

If it still doesn’t work, you may need to send me your web address so I can check it.

I have two site with this theme. I added YouTube channel videos to the home page trying the both the media player module and video module. The videos play fine on both modules. However, I have no audio on either. If I click on the YouTube player, then there is sound.

I have used the media player with YouTube videos on another page in the website and the videos play find with sound.

Can you please advise?

https://salonreddayton.com/

My apologies for the delayed response!

Anyway, all YouTube videos on your website are playing with sound and I can hear everything on my end. Try checking the audio button on the video controls and make sure it is not muted.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey