Hi,

You’ll want to make sure you are using header style 1 – https://wpexplorer-themes.com/total/docs/header-styles/ – and remove your custom design edits that have been added to set the menu up as it is now. I actually just mentioned this in your latest comment.

- AJ

Hi Neil,

To keep the image aspect ration simply set a max width then enter 9999 for the height, this will basically tell the image resizing script to shrink to the desired width instead of hard-cropping the image so it will keep it’s original proportion.

In terms of the image sizes it really depends on what you want. I prefer to have larger images that will look good on retina devices by default and if people want to save them to their computer for reference they are larger. However, I understand if your server isn’t very fast you may want to slim down the images. But instead you could consider just using a CDN to load the images to speed them up . I personally use and highly recommend CloudFlare for this.

One thing to mention also is a “bad score” is useless, look at your actual waterfall. Its possible cropping your images to a different size is only increasing site speed by 0.1 second and so it may not be worth the hassle or the loss of quality. The only important thing is actual loading time.

It’s also possible to make bigger increases in site speed by changing image formats such as changing png’s to optimized jpegs.

Image resizing alone is not the only answer, especially if your images are already under 1000×1000.

- AJ

Hi AJ,

Didn’t see this reply from you for some reason, but thanks for the advice on JPEG optimization.

I purchased a plugin from Short Pixel and used it to great effect from the image optimization perspective.

Regarding the speed tests, I retested and now the main issues are with the following:

247.6KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

The beast is still the wc-ajax get_refreshed_fragments though.

Reading through several issues people have had with WooCommerce ajax I don’t know if it is worth the trouble of trying to remove it from the main page and the rest except for shop and shop related pages as I am worried it will cause problems.

I don’t know this, but it seems like it delays the Rev Slider on both my home page and shop page where I use it.

As an aside I looked through all your tutorials on youtube which you did a great job with, but couldn’t find a Total slider tutorial to allow me the options to create what I did with the Rev Slider on the shop page here: http://bit.ly/2nV808h

I would really like to keep it to the Total theme as much as possible as it is awesome. If you had even written a paid plugin for a shop, I would have bought it and used it too.

Thanks for your help AJ. Neil

Hi Neil,

• Defering javascript can be done via plugins but it doesn’t actually speed up your site what it does is prevent issues if the script is down but since the scripts are on your same server it doesn’t matter. In fact you are already minifying your javascript, if you defer parsing it may break functions of your site.

• The WooCommerce refreshed fragments is coming of course from WooCommerce. If it’s slow generally that’s server related. You can use functions to remove it from other pages, if you do that the only that would break would be the shopping cart in your menu if you are using it since the script is used for updating your cart when products are added.

What hosting company do you use? I actually don’t do any tweaks to the theme and get good scores by default simply by having a good server and CDN.

If you are not using a managed WordPress hosting solution such as WPEngine, Flywheel, Kinsta…etc then you may want to consider a CDN such as CloudFlare (free by default, I use the 20$/month plan though) this can really help speed up your site.

Also if you aren’t using managed WP hosting and you are using a caching plugin on your site making sure that plugin is properly setup and you are using the right plugin for your server makes the biggest different in actual site speed.

I wish I had the time and resources to develop my own shop plugin! I am just 1 person here doing all the development for a massive theme, most sellers have large teams with multiple developers and multiple support staff. I am hoping to slowly grow though this year

- AJ

According to their documentation they have a shortcode available – https://wordpress.org/plugins/easy-portfolio/ – so you can either enter the shortcode in to the shortcode page builder module like this: https://cl.ly/pTPf

Or you can map a shortcode to the page builder like this: https://wpexplorer-themes.com/total/docs/vc-shortcode-mapper/

So you can access it via a new module.

One thing to keep in mind though is if your plugin is using javascript to render the grid it may not work on the page builder front-end builder if the javascript isn’t built to support the WPBakery Page Builder but it should definitely work on the live site if the plugin works right.

- AJ

Hi Neil,

The Custom CSS is just incorrect it’s not targeting the homepage. But I see the way you did it was you made the page title top border a solid color. I think the best solution would be to remove the border on the title and just add it to the header instead globally, like this:

body #site-header {
    border-bottom: 1px solid #eee;
}
body .page-header {
    border: 0;
}

Technically the border you want is to separate the header from the content so this makes a bit more sense to me as opposed to having it on the title which may not be on all pages.

- AJ

Thanks AJ.

Looking at the layout again and based on what you said regarding having it on the header instead of page, I decided to add the border to the site-header-inner instead since I also wanted to match the width of the footer, and this class seems to have worked out.

Unless you think it’s not a great idea then I will switch it.

I will respond to your other emails shortly.

Neil

I agree it’s better like that

Hi,

Sorry for the delayed response. WPBakery Page Builder is 100% optional in fact some customers do use Elementor with Total (that’s the other most popular/used builder with Total).

If you want to share the URL of your current site so I can have a look at your headers and see what you are trying to do I can give you my personal suggestions.

- AJ

Hi AJ, Any news about the feature of choosing header in page options? Thanks

HI there,

I decided against adding an extra field to the default page settings metabox because no one else has requested this and so it becomes added bloat. However, it’s very easy to do. I can give you the exact code to add to your child theme to enable this extra field on your site if needed

- AJ

Hi there,

The full-screen overlay menu has never included the search menu (the design is intended to be more minimal – this style was released over a year ago). I could look at including a search though for a future update. Do you have any ideas on how it would look?

- AJ

If that’s the case, it should be made clear in the customizer, with the mobile search menu option hidden or disabled.

I would still advocate to make it an available option. I think a simple search box with the ‘Search’ placeholder would work just fine. Just don’t add an associated Search menu item, that would be redundant and unnecessary.

It’s a simple UI/UX. Some people put it as the top, but I would prefer the bottom as I usually keep my menus short and I prefer people to go through regular menu item before they try to do a search (I’m not a huge fan of how wordpress does search).

I totally agree about hiding the option if it can’t be applied to the current settings, I do a lot of conditional checks in the customizer I must have forgotten this one

But instead of hiding the option it does make more sense to make it available in the full-screen menu, I am working on adding it now so it will be ready in Total 4.5.5.2.

Thanks again for the heads up on this! I hope you had a nice weekend,

AJ

Thank you AJ Yes I had a nice weekend

Here is the URL : https://www.wpthaiuser.com/lets-review/

Hi,

Oh hey, it’s you…I’ve seen you around before, didn’t recognize your thumbnail

I just tested on the iPhone on safari and Chrome and it’s working for me. Also tested on an iPad and didn’t have any issues. I’m not sure how to easily record the phone to show you so I also tested in crossbrowsertesting.com and it’s also working there – https://cl.ly/pWSF

Are you able to try on a different device by any chance. I can’t get the twitter share to break at all.

- AJ

Thank you AJ. Was really quick. Unfortunately not working on my phone and my ipad as well. My phone on data and ipad on wifi. So I think maybe it just me. Both of these device must sync some mystery settings behind me that I might not know lol. Some of my friends check on them phone and it seem to work like you said. I think we done here.

Thank you so much for your support and always great new update with new features everytime with always optimization in mind. I really love that.

Emily.

Ah I was using #link instead of ?link. NVM

Hi,

Instagram updated their website last month, I already added a fix for their changes in the January 11 update. Make sure to update your theme to fix the issue:

• http://wpexplorer-themes.com/total/changelog/
• http://wpexplorer-themes.com/total/docs-category/updates/

- AJ

Thank you for your replying and great support! I already fix it!

Great! Have a nice weekend

Hi,

This is called the “meta title” and it comes directly from WordPress and not the theme. The only way to alter it is using an SEO plugin (you should be using an SEO plugin with any WordPress site). I personally use and recommend WordPress SEO by Yoast, it’s the plugin most people use.

- AJ

Hi Tom,

If you recently switched to https it could be cache related, be sure to clear all your site cache.

- AJ

Ok, thanks AJ have a great weekend! -Tom

You too! Hopefully you can take some time to relax and spend time with family & friends

Yes, that’s exactly it ! More specicaly, I’m talking about the delay before the animation starts. Thanks in advance.

Yes, it’s very easy to delay the animation. Here is an example CSS:

.wpb_animate_when_almost_visible {
    animation-delay: 0.3s;
}

Simply alter the 0.3 value to the number of seconds you want to delay the animation by. And the animation-delay CSS property is supported by all major browsers.

This will target all CSS animated modules, it’s possible to also target certain modules only by giving your module a unique classname and targeting that class.

And if you want columns already have a built-in setting for this: https://cl.ly/pR6s

I have only added the setting to the columns so far as customers haven’t requested before adding it to all modules and it does ad a tad bit of extra bloat, but I may do it in the next update

This can be used when you have a row with multiple columns to add a different delay to each so they display one after the other.

- AJ

Thanks a lot for the help. I know why I’m building all my websites with your theme Great work !

Hi,

This page – http://totaltheme.wpengine.com/base/portfolio-item/flat-icon-set-design/ – I created using the WPBakery Page builder

So I inserted a Total Image module at the top and set it to display the featured image.

Then I inserted a 2 column row with some content.

Most customers for their portfolio actually just enable the media via the Customizer – https://wpexplorer-themes.com/total/docs/automatically-display-portfolio-media/ – then display the post content underneath very simple.

But you could also create a dynamic template to use with the portfolio as mentioned here: https://www.youtube.com/watch?v=eGYuBjqkj8Q

Depending what you need, you can also add extra fields to the portfolio items to display in the dynamic template either by extending the built-in metabox via a child theme – https://wpexplorer-themes.com/total/snippets/adding-fields-page-settings/ – or using a plugin like Advanced Custom Fields – https://www.advancedcustomfields.com/

Now, if you plan on renaming the Portfolio to “Case Studies” that’s perfectly fine, but so you are aware you can also add a new post type instead. Total has full support for the post types UI plugin – https://wordpress.org/plugins/custom-post-type-ui/

If you have any other questions, issues or suggestions let me know.

- AJ

Hi Thanks for the above, I think it is best I create a new post type and have done for this so I can add more details to the page. However I can create the dynamic templates and the post grid template for it, but unlike on the above video where you use customizer to select that template for single pages etc, I am not sure of where I go to register this template as the default for that post type? Can you help?

Sorry I just found that bit on article on custom fields

Hi Melissa,

- Auto cropping can be setup under Theme Panel > Image Sizes > WooCommerce

- Space between items can be customized at Appearance > Customize > WooCommerce > Shop & Archives > Gap

- To adjust the padding between price, button, etc – you would need to use custom CSS. Of course if you rather use a plugin you can use something like CSS Hero or Yellow Pencil – both which let you click on any element on the site and change it’s design via a live preview window.

- Depending what you need to customize for your shop tabs you would either need to use a plugin or child theme code. It’s very easy to modify the tabs via custom code as WooCommerce has many built-in hooks/filters.

- Not sure what you want to customize exactly on the shop sidebar.

AJ

Brilliant! Thank you for the quick reply! I’ll tackle these and get back w any questions that pop up.

Hi,

You would just add the settings to the same function. You can view all setting ID’s under total/framework/classes/post-metabox.php

my_wpex_metabox_array( $array, $nachricht ) {
    $array['header']['settings']['overlay_header']['default'] = 'on';
    $array['header']['settings']['overlay_header_style']['default'] = 'light';
    $array['header']['settings']['overlay_header_dropdown_style']['default'] = 'black';
}
add_filter( 'wpex_metabox_array', 'my_wpex_metabox_array', 40, 2 );

But generally it’s not recommended to alter the meta options. When you set defaults in the meta each time you create a new page they will be saved hard-coded into the page so you can no longer alter the “default” without manually editing each page.

If you have a mockup or want to explain what you are doing maybe I can provide a better alternative. Setting the Overlay Header to enabled for every single new page seems a bit strange to be honest.

- AJ

Hi AJ, thanx for your help. Above code produces an error, if inserted into functions child theme….anyway…I have custom post type (nachricht) with pre-defined user fields and a full-screen image (featured) on top of the content area. I need the overlay header settings in order that it looks good, but I don´t want the users to select the settings each time they post something.

The code is missing “function” before it – just like your original code. Sorry must have missed it when copying pasting.

If you have a post type where you want the Overlay Header on ALL the posts the best thing may be to do something like this guide: https://wpexplorer-themes.com/total/creating-dynamic-overlay-header/

This is just an example of course…but it would be very easy to essentially completely remove the Overlay options for your custom post type and automatically set the Overlay Header for the posts and then use the featured image or a different image for the actual overlay.

It’s an “advanced” modification if you aren’t a developer, but very easy if you are since Total has all the filters you need to dynamically set an overlay header which is much more efficient.

- AJ

Thank you AJ. I will be probably stupid…but how can I transform the ‘galleries’ page into a no link parent clickable menu?

Like this: https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/

If you added a page to the menu you will need to instead add a “Custom Link” and then replace it.

- AJ

Done it, thank you very much!

Hi,

The image has a max-width of 100% so it should always resize. Can you share the URL so I can have a look? Also are you testing in IE11 on the windows phone or Edge?

- AJ

Hi I’d rather not post the url live. Can I PM you? Im using IE11

You can submit a private ticket here – https://wpexplorer-themes.com/support/ – simply request your ticket be assigned to AJ.

IE 11 is a much older browser so most likely it is a browser bug that would need an extra tweak. Can you also let me know when you submit the ticket what version of OS your windows phone is using – thanks!

- AJ

Yes, unfortunately you can only exclude “real pages” when using the exclude function in the Under Construction function as it’s not possible to account for every possible plugin scenario. For more advanced exclusions you would need to use some code via the available filter.

Example:

add_filter( 'wpex_has_under_construction_redirect', function( $bool ) {
    if ( 'YOUR CHECK HERE' ) {
        return true;
    }
    return $bool;
} );

- AJ

Hi I tried that piece of code but it did not work?

Hi again, Ive now tried .testimonial-entry a { color: #FF0000!important;} and that seems to have worked Would this have changed it anywhere else though?

Hum…the code should work. You can see it working here: https://cl.ly/pOzh

Unless you added a custom link color some other way it should work.

Now if you want to absolutely make sure it only targets your 1 carousel you can give your carousel a custom classname like this: https://cl.ly/pPi9

- AJ

Hi,

Usually this is an issue either with a 3rd party plugin breaking things (did you try disabling plugins?) or with budget hosting plans where you need to increase your php memory limit. We have a troubleshooting guide here: https://wpexplorer-themes.com/total/docs/visual-composer-issues/

But you can also submit a private ticket with logins so we can log in and have a look for you: https://wpexplorer-themes.com/support/

- AJ