38356 comments found.
Hello Salient Support
Its amazing theme and work you have made but im facing problem with slow loading on my home page and i dont know why its show white page with text then theme show up and that look bad for user experience may you help to know why and how can i fix that..
My Website: https://devoart.co/Thanks
Hey Devoart,
Are you referring to the grey boxes where your images are prior to them loading? https://ibb.co/S6jDrwV
If so, that’s occurring from the lazy loading option on one of your performance plugins. If you’re using lite speed cache, you should be able to disable that in the media settings within that plugin.
Kind regards,
Hi ThemeNectar! Trying to display a long vertical image that seamlessly connects/continues across several rows. The image is divided into equal parts and placed as the background images of the descending rows. This requires each row to display the background image in full, that is, showing the top and bottom so that they can connect with the following (and previous) background row images. How can row height be set to the background image height to ensure the image is displayed in full? Thanks,
Hey webspacedesignuk!
Are you overlaying content inside of the rows onto of the images? If so, there is no good way to accomplish this using that method. If you don’t have any content which will be sitting on top of the image, you could use “Single image” elements inside of the rows instead of setting the images as a backgrounds.
If you could share the page URL/images so that I can take a look at your intended goal that would also be helpful for further advice.
Kind regards,
Thanks for the response. The vertical background image is a valley with a river passing through. This spans 5-rows if equally divided. The width needs to equal the browser and the full height of the images need to be displayed so that each background image row align. The intention was to overlay text and cloud elements on certain rows. What would be a suitable method to have a continuous background image on a single page?
Hey webspacedesignuk,
You could set the full image as a background on a single row, and then use inner rows to hold the overlaid content like so: https://ibb.co/pQYnhzR
Each of the inner rows could then set top/bottom % based padding (between 10% – 20%) to give adequate spacing.
Kind regards,
Thanks again for the prompt response. I initially tried this method but the inner row text elements quickly lose their position (relative to the background) when scaled across devices, as does the height (and therefore background image height) of the single main row. Keeping text positioned above certain background image sections is essential for legibility. A great example of what we’re trying to create would be: bit.ly/3xk1qw7
Any insight as to how this can be created, whether that’s with the use of separate media elements or a single background image would be appreciated.
Hey webspacedesignuk, If you split the image up into different pieces, the changing height of the content within each section based on the device will still end up creating issues with the image aligning to each beginning/end of the sibling images.
That shortened URL for the example is not working from my end – can you verify that it’s accurate so that I can better understand the design you’re trying to replicate?
The example site linked below illustrates the functionality we are trying to create. That is a seamless background image, composed of several media elements or a single image (shown in full height) with text that remains somewhat in place across various browser sizes. https://blueheart.patagonia.com/truth/
Hey webspacedesignuk, The “torn edges” style that they’re using on the images helps to make this effect much easier to connect to each other. Essentially, they have a bunch of images which are all absolutely positioned inside of each row set to display behind the content. Some of the images are also utilizing parallax scrolling to move them at different speeds. Additionally, they are swapping some of the images for mobile only to alter the design based on the viewport sizing.
Salient does offer the ability to absolutely position inner rows. So in a nutshell, the technique would look like the following: https://ibb.co/YP1gz2b
The parent rows would also need to be set to have their overflow to “visible” to allow the images to break out of the row area all overlap with each other: https://ibb.co/qJwsVjZ
Overall, it’s bit of an advanced technique which would require knowledge of CSS positioning, but can be accomplished with Salient.
Hi ThemeNectar, really appreciate the recommendations given. I’ve replicated the page (for testing purposes) with the suggested method. The pages look and function identically to the example site provided https://ibb.co/9t2FRJ3 (when not scaled) but then display the several issues in the following circumstances:
1) When the browser is zoomed out beyond 90% the image element lose position relative to one another. Example and comparison here (33% browser zoom): https://ibb.co/Kxw69sp
2) When viewed across various devices (responsiveness) images don’t retain their position. I’ve used the top and bottom padding of inner rows to align images. Example and comparison here (mobile): https://ibb.co/WvJhhWF
Hey webspacedesignuk,
The sizing values for the image width, row positioning and row padding all will need to make use of responsive units I.e. vw/vh/%
px based values won’t work well with this type of arrangement. Ensure that the images also have their “max width” set to “none”.
Even with responsive units for the positing/sizing, you’ll still likely need to use different values For the mobile viewport, which you can do by switching to the phone icon on those fields: https://ibb.co/mz11STj
Kind regards,
“max width” worked perfect—thanks for all the suggestions.
The only persisting issue is when I target a row using row id (anchor links), content above this row won’t load and everything below is out of position. A page refresh results in content displaying correctly. Example (as i don’t have a live url): domain.com/example/#rowid will direct and load the page “example” with “rowid” at the top of the browser, as expected. However the user cannot scroll up and view any content above this row, and when scrolled down other page element will be out of position. Any ideas on how this could be solved?
You’re welcome webspacedesignuk 
Because there’s no known issue with anchor links causing those sorts of scrolling issues, I would need to see the actual page in order to help your troubleshoot it. Can you kindly place the page on a staging server?
Hello there! I’m wondering if there is a way to make the social media icons in the footer area any larger than what they currently are. Thank you!
Hey mhstanton81!
You can alter that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
body #footer-outer i {
font-size: 32px;
}
Kind regards,
I hope you’re well. At https://www.joy.net/ I want to make it so that the mobile menu navigation is only displayed on mobile devices, and that the text logo will be not displayed on mobile devices (it’s already not displayed for desktop). What’s the CSS I need to add / modify? Thank you.
Hey marcfest,
I hope you’re doing good as well
You can accomplish that with the following snippet:
@media only screen and (min-width: 1px) and (max-width: 999px) {
body #header-outer #top nav {
display: block!important;
padding-top: 20px;
}
#header-outer #top .col.span_3 #logo {
display: none;
}
}
Cheers
It works perfectly on mobile in horizontal orientation, but vertically it looks like this: https://www.dropbox.com/s/t8bc6ihp68dr58d/2022-06-04_07-34-19.png?dl=0 – If the menu is too much text to fit vertically, it would be OK if the mobile version uses that mobile menu navigation thingy instead of displaying the text. Thank you again!
Hey marcfest,
You can alter the originally provided snippet to be as follows: https://pastebin.com/kX9qb5Kb
Cheers
It works perfectly except for two small things on mobile. Please see the red arrows at this screenshot: https://www.dropbox.com/s/oxhxxl7q9pptmqj/2022-06-05_08-03-51.png?dl=0 – Thanks for your patience
Hey marcfest, kindly try removing the previous snippet and use this instead: https://pastebin.com/qKGGvnvg if that doesn’t give you the desired result, please open a ticket on the support forum in regards so that we can take a closer look at the backend settings to assist.
Cheers
It’s perfect. Thank you
You’re welcome, marcfest
Hi ThemeNectar! I’ve a strange bug problem: after mozilla firefox browser update (version 101.0 64bit) the fonts (raleway) used on the sites are small, thin and even changing the style remain the same … why? Those from mozzilla say it depends on how the site was built, which is an internal thing … possible? Do you have feedback?
Hey thebugbear!
I haven’t been able to replicate that locally when testing with the same version of Firefox – here’s raleway displaying correctly at the specified 16px: https://ibb.co/HtRvNXL
Cam you please share your URL in regards so that I can take a look?
Thanks in advance
hi,
I have salient’s lazy loading on, do you recommend turning it off on WP Rocket?
See my settings here for WP rocket https://imgur.com/a/Y9n7vt4
Thanks
Hey toolbox101,
Salient does not currently offer lazy loading for videos, so if you’re using that aspect you could just disable the Salient lazy loading option. But yes, in general you should only have one performance option enabled for a specific task. Overlapping any tasks could result in unexpected rendering.
Kind regards,
I like Salient’s lazy loading and i turned off the Lazy loading on WP rocket for images only. However, my question is… how do i skip the site logos and any main navigation images form lazy loading because these are above the fold. Both for desktop and mobile. Wp rocket has exclude option. I want to keep your lazy loading because i find it much better then the one in Wp rocket.
Thanks
Hey toolbox101,
Salient does not apply lazy loading to the header navigation bar logo or header navigation icons by default because it’s above the fold – can you share page URL where you’re seeing that occur?
Good afternoon. I have a question about PageSpeed Insights. Why in the version for the computer he shows super results 96-97. And in the mobile version, there are only 65. And the biggest mistake is “Remove render-blocking resources.” Why does the W3 Total Cashe plug-in close all these errors in the desktop version, but they remain in the mobile version? Maybe some more settings need to be made? Also it shows error in mobile version for “First Contentful Paint (3G)”
Hey again MiraSmurkov,
Optimizing for a high mobile page score is significantly harder than desktop due to how Google has updated their grading – They run the mobile testing on throttled network connection speeds to test against slow conditions. Getting an “A” on mobile requires more advanced performance features that only premium plugins offer at the moment such as WPRocket/Nitropack etc. That being said, we’re including many new performance related items in the next release to make high mobile scoring much easier
I understood you. Have you tested Salient with WPRocket/Nitropack? Can you share the correct settings for these services?
Hey MiraSmurkov, The two key items that will make the big difference is delaying JS execution, and generating critical CSS. Both plugins offer those settings to enable.
Kind regards,
Good afternoon. Salient hasn’t had any updates for over half a year. Should we expect something interesting in the near future?
Hey MiraSmurkov,
That’s not accurate – there has been a handful of releases this year for fixes and new features. The last update was 2 weeks ago: http://themenectar.com/changelogs/salient.htmlHowever, yes, we’re in the process of beta testing the next big release as mentioned at the top of the changelog. We’re hopeful that it will be officially released later this month
Kind regards,
Of course, I know about interim updates, but they just fix some bugs more often. We are all waiting for something new global every six months from your team. By the way, a question. Your next release is 14.1. Previously, you had either *.5 or *.0. So this update will not be so major?
Hey MiraSmurkov, The beta opt-in notice had the incorrect future version – that’s now been updated
hi, how we set 6 or 8 product show in same ROW in shop (woocommerce)
I don’t special page design. Default shop page is have 6-8 product in one row with your theme?
Hey sinayes,
In the Salient options panel > WooCommerce tab, you can set your column number for the shop pages: https://ibb.co/Tqs1J1K The maximum columns is currently 6 – anything higher than that would require some CSS.
Kind regards,
pre sale question : Essential Grid Supported ??
Hey Bleugatti,
I’m unaware of any conflicts with that plugin.
Kind regards,
Can I make a modal with a gravity form shortcode displayed?
Hey redkahl, Salient doesn’t provide a built-in modal system. You could use a plugin such as https://wordpress.org/plugins/popup-maker/ to achieve that.
Kind regards,
HI there,
I have created # links in my menu. The problem is that i have to click on the arrow icon to open dropdown and if i click in the menu item nothing happens.
this is troublesome for mobile users. Can i fix this somehow?
thank you
Hey nikosff,
In the Salient options > Header navigation > off canvas menu tab, you can change this functionality with the option titled “Off Canvas Menu Dropdown Behavior”.
Kind regards,
This is a superb versatile theme, thank you!
You’re very welcome, nikosff
Hey there, is salient compatible with WP 6.0? Cheers.
Hey born-design,
Yes it is – ThemeForest just has not updated their version list yet for us to select that in the item description.
Kind regards,
Hi – wondering why the Montserrat letter “A” shows up differently on Chrome on a Mac? All other browsers look fine.
screenshot: https://henkinschultz.com/wp-content/uploads/2022/05/A.png link: https://henkinschultz.com/2022/05/bat-out-of-hell-the-musical-is-coming-to-las-vegas-london/
Here is a post from Github regarding the issue too. https://github.com/google/fonts/issues/2602Hey henkinschultz,
I can’t observe that occurring from my end on Mac Chrome Version 102.0.5005.61 https://ibb.co/F6t4ghM However, it does look like a glyph issue. Have you tried to disable all of your performance optimization settings yet? The google font Request looks different than what Salient would normally load and might be altered from your siteground optimization.
Kind regards,
Thank you! For anyone else with the issue – Disable “Web Fonts Optimization” under SG Optimizer > General.
Glad I could help, henkinschultz
Cheers
hi https://ldflstudio.com/proyectos/ any idea why is showing the images stretched out?? thanks.
Hey dimage,
It looks as though the image sizes for the portfolio don’t exist on your server. Have you tried to run the https://wordpress.org/plugins/regenerate-thumbnails/ plugin yet?
Kind regards,
hi I all ready did but still not doing it correctly.
if that can’t be sorted, how can i adjust the boxes to a 600×400 layout for example, and not squared? thanks again
Hey dimage,
600×400 is the default image size for the portfolio when the masonry option is not in use. Because that’s not working on your end I would need to take a closer look at the backend to see what’s going on a bit closer. Please open a ticket on the support forum in regards
I manage to sorted out, thanks.
Hello, if we loads many products (3-400) using the wc carousel widget this dramatically slowdown the site. How can be solved? is it possibile to lazy load cards? looks like it preloads everything.
thank you
Hey plasticadv,
You can lazy load the carousel images with the theme option “Lazy Load Shop Images”, which is located in the Salient options > WooCommerce > general tab. However, the DOM elements for each carousel item will still exist – which is a lot. I would not recommend placing hundreds of items in a carousel instance because of that.
I am interested in this template and that is why I would like to know if it is compatible for blogger.com if I buy it I can get the xml files.
Hey bnjmedios,
Salient is available exclusively as a WordPress theme. Unfortunately, it work with blogger.com
Kind regards,
Hi again, one more questions please.
How can I make the carousel pass the “Does not use passive listeners to improve scrolling performance” test? I know this is now an issue with WordPress.
But is there a hack or a workaround for this?
What if we disable the touch/swipe option for mobile and let the carousel flip by next and previews buttons only?
Will that work?
Thanks
Hey toolbox101,
You would need to modify the core JS files, which I wouldn’t recommend since doing so will also not improve any noticeable results in page speed testing – it will only clear that warning.
You could also look into performance plugins which delay JS execution until user interaction. That would technically make the page “pass” that specific test as well.
hi, I’m trying to translate the vertical sticky content with WPML (advanced editor) and it’s doesn’t work. All the rest it’s ok but this new feature doesn’t work.
Could you chek it please?
Hey dimecris,
We’ll be adding that field into the WPML config file in the next release. If you’d like early access, feel free reach out via the contact form on my author page in regards.
Cheers
Hello. In your theme is there just 1 Single Product Template? i just see 1 “Template” with scrolling images. thank you
Hey feco84,
Salient offers multiple single product layouts:
Dual Column images: https://themenectar.com/salient/ecommerce-robust/product/face-wash-2/
Sticky Single column images: https://themenectar.com/salient/ecommerce-ultimate/product/st-louis-beanie/
Slider Images: https://themenectar.com/salient/ecommerce-creative/product/alexandria-shirt/
Kind regards,
