Forum Replies Created
-
Posts
-
Bespoke Ecommerce for a phone case retailer here in the UK.
place4acase – iPhone and Samsung Galaxy phone cases
place4acase are suppliers and retailers of high quality phone cases for iphone and samsung galaxy devices. The company is based in the UK and are able to sell and distribute throughout the world. They work with artists to provide unique phone case designs available in matte, glossy and reinforced options.
The site is based on a modified version of Enfold with WooCommerce. We also use the excellent WooCommerce Extra Product Options Plugin from Code Canyon
The site also uses The Smash Baloon Instragram Feed Plugin.
The following modifications have been made:
-Changed the product page layout with CSS so the thumbnails are beside the image rather than next to it
-Moved the single product image over and made it larger so it is displayed more prominently
-custom header and menu structure with mobile first design
-product pages tweaked with sidebars removed and widget based filters for navigationThe site scores up to 95/100 in mobile speed testing and up to 100/100 on desktops
(Note that ther is currently a bug in the new PayPal plugin causing the mini cart JS to load on every page. This does reduce scores to 85/100 until the new release – This post was created 04/08/2022)Think Jarvis uses an optimised performance stack for Enfold that includes
– 500 lines of code in functions.php
– font pre-loads
– lazyloading images
– baspoke ht access settings
– 8 core VPS server shared with other optimised sites only
– Caching
– Image compression and WebP generation
– Lazy Load JS on top of Enfolds HTML option so that the Instagram Feed is Lazy Loaded
– Critical CSS generator
– Bespoke Enfold settingsLet me know if you have any feedback :)
I am also experiencing this with a handful of my Enfold sites. I think there is a probelm in Enfold relating to this.
I also experience the following problem as well – This is a different cause.
I have 50 Enfold licenses and the download limit in quick succession with Theme Forest is set at 20. its a pain when trying to bulk update sites because it wont let you do more once you hit the limit.Best practice with any WordPress site is to install a child theme.
Otherwise you will need a plugin to do this.
You can either write your own plugin or use one like the example below from the wordpress plugin library – Sorry I just reworded this bit. It didnt make sense.You can download a plugin like this one instead: WP Headers and Footers
If you use the built in Enfold Cookie popups – You must put your Google Tag Manager code into the Google Services Box in the Enfold Control Panel. Otherwise the cookie popups just wont work.
If not you can just add everything using the plugin instead but this wont be compliant with GDPR because it will load unconditionally on every page.
use the plugin to add your Body tag script on all pages in the body of the aritcle.
Otherwise you can use the code below to insert the snipped from the functions.php file in your child theme or a custom plugin that mimics the functions file.
// Add Google Tag code which is supposed to be placed after opening body tag. add_action( 'wp_body_open', 'tj_add_custom_body_open_code' ); function tj_add_custom_body_open_code() { echo ' INSERT YOUR GOOGLE BODY TAG HERE '; }Just seen this post.
I have assumed you have uploaded your custom font into Enfold via the import section in the Enfold Control Panel. I have also assumed that you have then changed the font settings under General settings to match your newly uploaded fonts which will appear at the bottom of the dropdown lists.
Have you checked the font and typography settings under general styling in the Enfold Control Panel?
Have you also checked the advanced styling settings in the Enfold Control Panel to check that you have not specified font overrides?
If you are using a critical css generator or a css optimisation plugin like WP-Rocket you will need to clear the cache and regenerate your critical css files. @import is normally used in a stylesheet somewhere. You may still have a reference to the font somewhere in your settings. If you are using WP-Rocket you will also need to check the font preload settings and check you are not preloading a font you are no longer using.
Otherwise you may be using a plugin that uses Google fonts by default. You will need to check what css file the @import is in. Most plugins have the option to set the font based on the theme rather than specifying a font from Google.
I hope this helps.
@newmediologo
I’ve not got any specifically for artists. When you say artist – Do you mean a painter or graphic designer – Or do you mean a musician.Enfold can be made to look however you want it to look. It is a theme that includes a complex page builder. So it should be suitable for your needs.
If you wanted – The client could find a theme that they like and you could make Enfold look exactly the same as it – But with the flexibility and reliability of Enfold.
Big thanks to Arno Weterings who is the author of Arnoweterings speed and performance optimisation for Enfold
Arno and I have been speaking regularly about Enfold Speed and Performance for the past few years. He forwarded me an enquiry from the website owner in need of assistance optimising a self built Enfold site.
Ligety Weibrecht Ski Camp Mt Hood Oregon USA
The site had some major configuration issues – using Cloud Flare DNS which was incompatible with their hosting providers Varnish Cache. I removed Cloud Flare and several premium plugins saving the customer over $150 per year in licenses.
Conducted a full site review and performance analysis
Removed Cloud Flare and reset the DNS back to Dream Host
Fixed a compatibility problem with Caching so Varnish Cache worked properly
Updated and licensed Enfold (over 2 years out of date!)
Upgraded to the latest Paypal payments plugin
Redrew the logo so a higher res copy could be used
Deactivated several unused or incorrectly configured plugins
Rebuilt every page on the site using Enfold best practice
Added over 500 lines of code to functions.php to optimise Enfold and WordPress
Ran a database optimisation
Added WebP
Removed Enfold auto generated image sizes and added new ones for srcset
Added social share imagery
Added missing H1 tag and intro paragraph to home page
Tidied up WooCommerce pages
Removed redundant custom css and functions.php codeThe Results
The site now runs extremely well and no longer lags through WP-Admin. It was almost unusable with server timeouts and disconnect errors when I started.The site scores up to 97/100 in Google Web Vitals mobile speed testing
As a UK based business I’d like to extend my thanks to Gary at Ligety Weibrecht who has been extremely trusting of me to get this work done properly and legitimately remotely. The company is based over the other side of the pond in the USA.
Worked perfectly thank you.
Hi Ismael,
THank for your the info. I’ll take a look and see if I can tweak the function.
I suddenly realised I raised this ticket twice. Sorry.
Gunter has sent me a solution using a new function to disable Srcset per element. Because I have some good image compression it has resulted in no change to the site speed and performance testing. Really pleased.
@Günter
Thank you for this. Does exactly what I needed it to.
On https://www.place4acase.com launched today – The Full Width Easy Slider on the home page no longer uses Srcset.
Because I have uploaded a compressed image and use EWWW to produce a WebP version and further compress the Jpg version there is no impact on speed and performance. 95/100 under lab testing.
Really pleased with the outcome thankyou.
I’ll enable this feature on a few of the other sites that use the same element on the home page.
Thanks Guenni007.
Sorry an oversight on my part. I didnt look at the tags properly its obviously a apache mod_headers not a html tag!
I’ll try this out on a couple of sites.
Thanks for confirming :)@guenni007
Nice work on this.I see warnings in Web Vitals about this under best practice.
Did you just insert this code into the header on every page?
THP Studio.
Agree the continued work of the team has been fantastic!
I hope it continues because Enfold still stands up as a fantastic platform to build sites on (not to mention the 50+ sites I have running it!)
THP Studio
Very simillar points raised. Thank you for highlighting your previous post.Your point about the Tabs and hiding them is an interesting one. I personally dislike the WooCommerce page layout and feel the tabs should be full width below the product image and summary. This is like Amazon and most other sites.
I have a site in progress that I will share once live that uses the official Woocommerce vertical accordion / vertical tabs plugin. It makes a massive difference to the page layout. I have been able to massively simplify the layout on a customers site.
Changed the order of the elements – Moving the short description downwards.
Thanks Rikard,
If anyone finds this thread via google – On the note of having a second menu in the header area. There is a solution on the documentation using a widget area
But it would be great to have a solution built in to Enfold that uses actual wordpress headers instead of a widget.Technically this would work:
https://kriesi.at/documentation/enfold/example-of-stacked-logo-menu-and-widgets/
And include a menu widget in this area. Not sure if this would give full mega menu capabilities or not though without trialing it.Another launch a few weeks ago for Cherish Keepsakes
CherishKeepsakes Memorial Jewellery Maker Derbyshire UKCherish Keepsakes make sentimental jewellery that can include DNA items like loved ones ashes, breast milk, hair, wedding flowers and pet fur. The memorial items are cast in UV stable resin in a range of colours and designs.
The owner created the logo in Canva so we converted it from an SVG into an EPS and AI file for more portable use.
The font from the logo was also recovered, purchased and used as a custom font on the website.Built on an optimised version of Enfold with WooCommerce. The site uses Paypal to take payments. We included Trust Index Review Aggregation servie to display reviews from their other selling platforms on the site and Smash Balloons Instagram Plugin as a live gallery of work.
The site includes modifications to WooCommerce:
-Add widget to main menu area so search bar is available on desktops
-Add a widget to the top of the product page so search can be added to mobile pages
-Modified search so it only searches products and includes SKUs
-Changed the breakpoint so the sidebar disappears on tablets
-Seperate the categories from the main shop loop for better navigationPagespeed and Web Vitals
The home page under testing scores up to 99/100 in Google Web Vitals mobile device testing and 100/100 on desktops.
This is the fastest WooCommerce website we have launched and this is largely down to the way the images are displayed (no slider).The Think Jarvis optimised web framework includes some extra optimisation:
– VPS hosting with maximum resource allocation from IONOS
– Unique modifications to .htaccess and functions.php
– Caching plugin
– Additional image thumbnail generation
– WebP image generation and compression
– Login screen moved and password protected to prevent brute force attacks
– Jetpack Brute Force Protection
– Advanced contact form spam protection without using Google Recaptcha@envatotastic9
Nice to see another British website on the Enfold Showcase. Nice job!A little bit of advice – Your cookie policy / pop-up implimentation is not GDPR compliant.
As far as I can see your Facebook Pixel and Google Analytics cookies load on page and there is no option to opt in or out from the pop-up. Users must explicitly opt-in to this from your cookie pop-up.
Enfold’s built in tools can do everything apart from record consent. Generally recording consent is a premium feature for cookie plugins but means Enfold can meet most of the requirements of GDPR if you are not worried about recording consent.You can add both Facebook and Googla Analytics tags into the Enfold Control Panel under Google Services. You can then re-word the cookie popup to cover tracking cookies rather than Google Specifically.
I hope this helps.Otherwise I’d recommend going for a full compliance and using a plugin that includes recording consent.
This also helps improve site speed because the tracking scripts do not run until the user opts in.
Thanks Mike / Steve,
Really appreciate the fast response.
I’ll try the fixed code when I am next working on the clients site.Thanks for highlighting the issue with Safari and Caching its been a pain to deal with when some of my clients dont own laptops. Safari on Tablet (older versions in particular) has some serious issues with checking cache age thats for sure! Normally on mobiles a swipe down action in the browser will do the job but not every time.
Its something to do with the combination of options selected within the slider.
Found it!
Use first slides caption as permanent captionIf you turn this on the button links stop working in version 5.0.
Try that on your test server. You can now see the button is working on my example site.
Please can you add this to the bug fix list for version 5.1
It seems to only be a problem if it is the first element on the page.
You could see the issue on the link I sent over though right? Its not possible to click the button.
@Rickard
Really sorry I cant leave the link active for much longer If you try the private data link I sent and the link has been removed it is because the client has woken up for the day.I can leave it active for a few hours more just yet.
@Rikard
I can reproduce this issue.
Buttons on Easy Slider and Full Width Easy Slider are not working.The link address is there but the element is not clickable.
Hi Gunter,
I think what you are suggesting should solve the problem
As per guenni’s screen shot above.
Making it so the font size specified in the special heading (and all headings) only apply to the screen size specified would make sense – instead of becoming the new default size.
Then all other screen sizes are the default size as set by the theme OR as set in the new typography settings.New Size options
As a pro feature I would probably use extra percentage based sizes however scale from desktop to mobiles is not uniform so percentages never seem to work too well vs px sizes. The percentages are based on screen width desktop is 16:9 and mobiles are 9:16. So percentage driven often means the fonts are too small on mobiles when they scale down. I normally use px values for each screen size because of this.I wouldnt complain if there were more options. A Pro users being able to type in a figure and unit would be preferred as an extension to the existing options – better for developers than more dropdown options.
Thanks @Guenni007
The issue is simple when you set the sizes you expect it to only affect those screen sizes and the “Default” for all other screen sizes should be the theme default OR the styles specified in the new Enfold > General Styling > Typography tab. The logic isn’t right at the moment.
This is a new change in the most recent versions of Enfold. The problem only started to occur when I moved to the latest version.
It used to work as expected but now as Guenni007 has pointed out the Default size is now the desktop size which is really silly.
@Rikard
Do you have enough to understand the issue here?I just want to add – I have over 50 Enfold licenses / sites with another 15 in progress and in about half of the cases I did not specify font sizes for the smaller screens. This means I will have to go through every heading on every page and explicitly state font sizes – Its going to take an extremely long time and is caused by a recent change in the logic.
I can see the problem.
It thinks the menu is a six column and a three column when they are infact two columns and one columns. You can see it in the screenshots in the previous post.
It automatically sets an offset based on what I assume is how close the item is to the edge of the screen to prevent it shooting off:
All of the mega menus are Right aligned by default. So I have changed the ones causing problems to left aligned using the following code:
I must add, this wont work on smaller screens – So must be media query driven. Otherwise a wide menu will shoot off the page to the right.
@media screen and (min-width:1441px) { #header #menu-item-87 .avia_mega_div { left: 0px !important; right: auto !important; } }Hi Ismael,
Thanks for taking a look. I have screenshot the issue and highlighted the automated code that is causing the issue.Its affecting every site that has a mega menu when ran on a standard 1920px wide monitor. But the break point where the problem occurs varies depending on the length of the menu. It is auto-calculating an offset somewhere but it is getting it wrong.
When you jump down to 720p (1366px) it is fine. It is just HD desktops.This did not occur until one of the 3 latest versions of Enfold. I think it was 4.9.2.1 where this first started happening.
Take a look at the screen shots and let me know what you think.
Here is a new site we developed for UK Cyber Security Ltd
Cyber Essentials and IASME Governance Provider East MidlandsUK Cyber Security Ltd is a Cyber Security and IT Management company based in Swadlincote, Derbyshire, UK. They are a Cyber Essentials and IASME Governance Certification Body, offering a range of IT security services including penetration testing and network scanning.
The company had lost the original copy of their logo so we recovered their logo and fonts ready for use on their new website.
Built on an optimised version of Enfold with WooCommerce and TakePayments integration. The site includes a bespoke quote generator built using Cost Calculator WordPress purchased from Theme Forest / Code Canyon.
The site includes modifications to WooCommerce:
-Add widget to main menu area so search bar is available on desktops
-Add a widget to the top of the product page so search can be added to mobile pages
-Modified search so it only searches products and includes SKUs
-Changed the breakpoint so the sidebar disappears on tablets
-Seperate the categories from the main shop loop for better navigationPagespeed and Web Vitals
The home page under testing scores up to 93/100 in Google Web Vitals mobile device testing and 100/100 on desktops.
This is because the quote generator loads some files on every page a small tradeoff for extra functionality.The Think Jarvis optimised web framework includes some extra optimisation:
– VPS hosting with maximum resource allocation from IONOS
– Unique modifications to .htaccess and functions.php
– Caching plugin
– Additional image thumbnail generation
– WebP image generation and compression
– Login screen moved and password protected to prevent brute force attacks
– Jetpack Brute Force Protection
– Advanced contact form spam protection without using Google Recaptcha
