June 21, 2021 at 7:20 am #1306663
Nice work! Thanks for sharing, and for using Enfold :-)
RikardJune 28, 2021 at 8:32 pm #1307817
Been a bit quiet on the social posts lately! Lots of work for existing customers but we have a couple of new launches this month:
Holding page designed for a company selling CBD oils and topical creams (all legal in the UK as a food supplement if you were wondering). The company is based in the UK and provides some of the highest quality Pure CBD oil on the market.
The holding page was set up specifically as a funnel for the companies main website (which I have not been able to persuade over to Enfold yet!). The layout has menus turned off.
Page speed is important for a landing page. The Hemp Pure Oils site scores 98/100 on mobiles on a good test run. However this varies depending on how well the server responds etc. LCP sits at 2.3 seconds on a good run but rises to 3.6 seconds on a bad run.
Some critical CSS is loaded in WP Head to improve the FCP and aid the LCP but more is required for a bigger impact.
The site uses free optimisation tools and does not use a CDN at this point in time showing just how good Enfold is as a platform for websites compared to others like DIVI and Elementor which all require more work to get a 90+ score in page speed insights.
I hope this proves useful for anyone else looking to build a fast and easy to edit landing page.June 28, 2021 at 9:33 pm #1307820
Another new site launch.
Burden Basket (HOPE Project) is a mental health support and training provider for children and young people. Alongside therapeutic counselling services, the HOPE project provides both training and support services to teachers and children. Based in Swadlincote, UK – Covering South Derbyshire, Staffordshire and Leicestershire.
Working with the company owners, the website content has been updated to contain more information about the services offered – Missing from the old website.
The site uses a custom header design and menu – Full width and equally spaced with a custom widget area for contact information.
Mobile optimised header images have been added manually by replacing the desktop sized ALB Colour Section Background image with correctly sized versions for different screen sizes.
This code is then inserted into the header via functions.php as inline critical CSS to improve FCP and LCP scores.
A calendar plugin has been used to display Eventbrite and zoom calendar entries – embedded with loading=”lazy” tags for speed.
The site passes all web vitals metrics at time of launch.
June 30, 2021 at 3:27 am #1308020
- This reply was modified 3 months ago by thinkjarvis.
Thanks for sharing, and for using Enfold. Very nice work!
RikardJuly 1, 2021 at 8:29 pm #1308397
How did you do the header? I’ve been trying to figure that out for so long! Great work!July 2, 2021 at 1:18 pm #1308492
@portalplanet By using widget area in header. You can find instructions here – https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area :)
YigitJuly 14, 2021 at 10:59 am #1310093
The menu design for Burden Basket used a combination of features from the Enfold Documentation.
Sorry for the late reply.
I used a combination of settings from the Enfold Documentation.
The logo layout is set to Logo Center, Menu Below
The logo is then re-positioned to the left using Quick CSS
Custom Widget added to header
The widget is then re-positioned to the right with Quick CSS
If you add a search widget into the customer widget area – the Ajax dropdowns still work because it is within the header area. Great for Ecommerce sites.
Justified Menu (equal spaced menu)
Colours and menu break point adjusted with Quick CSS.
Hope this helps. It took a bit of fiddling but I have a simillar design running on most of my ecommerce sites becuase it makes them look and function more like a typical ecommerce site.July 15, 2021 at 1:33 pm #1310284July 16, 2021 at 7:44 am #1310351
Looked at Burden Basket (HOPE Project) and it truly looks great for different screen sizes.
Could you please explain a bit more about the code inserted into the header via functions.php.
XavierJuly 16, 2021 at 10:20 am #1310370
Thanks. Quite a bit went in to this one from an optimisation perspective for looks and speed.
The above the fold section is an ALB color section with background image. I have set a minimum height depending on the image requirements for each screen size (Either 350px or 600px). I then applied a custom class and custom ID to each to set the height depending on the screen size. This removes issued with CLS in Google Web Vitals because the sizes are explicitly stated early.
If you view source in Google Chrome you can see the code added as critical CSS into the header. I used wp_head to add code directly into the header from functions.php.
Most of the mods come from a performance perspective:
The logo and srcset images are pre-loaded so the logo is available as early as possible.
Self hosting fonts and Adding font preload manually from functions.php just like the other critical CSS. This prevents Font Swap (Flicker) from occuring as the fonts are available right away.
To improve LCP and FCP scores you can either pre-load the background color section image in the same way as the fonts so it is available right away or add critical css in the way that I have – serving a different image size per screen size.
I use critical CSS on Burden Basket because of the minimum height applied to the ALB colour section.
To ensure the images look right on all screen sizes I have used media queries to load a different banner image per screen size on every page.
I have enfold setup to have mobile break points at 989px instead of 767px. I do this in the Enfold control panel and every column element on every page .
As the page scales down (if you resize the browser window) I have used media queries to change the menu font size and padding so that it works on screens all the way down to 989px. You can adjust the mobile breakpoint if required to lets say 1024px (for ipads) with some custom CSS. If you search the forum you’ll find this one.
Although most sites read Left to Right from a mobile design perspective – Put the first image on the left – This will mean users see picture content first in the same way people are familliar with on social media. Its good UX design to do it this way but looks a little unusual on desktops. You could always set two images and hide the first one on desktops if you prefer them the other way around on different platforms.
I hope this helps.July 16, 2021 at 10:58 pm #1310436July 17, 2021 at 5:28 am #1310472July 23, 2021 at 2:05 pm #1311881
How did you do the tab section under about page?
August 5, 2021 at 2:35 pm #1314676
- This reply was modified 2 months ago by alexmiguel.
You can refer to this post to add images to mega menu – https://kriesi.at/documentation/enfold/mega-menu/#add-images-to-mega-menu :)
YigitSeptember 1, 2021 at 4:54 am #1319272September 2, 2021 at 1:35 pm #1319512
Thanks for sharing and for using Enfold @navindesigns, very nice work :-)
RikardSeptember 2, 2021 at 2:43 pm #1319525September 4, 2021 at 4:17 am #1319699September 7, 2021 at 6:57 pm #1320008
hello! i have worked a lot and finally i have a pretty solid web thanks to enfold
Thank you!September 8, 2021 at 1:54 pm #1320106
Thanks for sharing, and for using Enfold. Very nice work :-)
RikardSeptember 12, 2021 at 11:01 am #1320571
Nice job on the site.
I see you have put in a workaround to prevent the background image loading on mobiles until the user interacts with the page.
I’d be really interested in a conversation with you about this.
The LCP score is the only part of Enfold that I have struggled to improve in Web Vitals. Currently between 0.1 and 2 seconds too high.
If you are able to share your solution in the forum and post a link here I’d really appreciate it.
You must be logged in to reply to this topic.