Viewing 21 posts - 1,741 through 1,761 (of 1,761 total)
  • Author
    Posts
  • #1306663

    Hi Cyborgz,

    Nice work! Thanks for sharing, and for using Enfold :-)

    Best regards,
    Rikard

    #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.

    https://www.hemppureoils.co.uk

    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.

    #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.

    https://www.burdenbasket.co.uk

    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.

    • This reply was modified 3 months ago by  thinkjarvis.
    #1308020

    Hi thinkjarvis,

    Thanks for sharing, and for using Enfold. Very nice work!

    Best regards,
    Rikard

    #1308397

    How did you do the header? I’ve been trying to figure that out for so long! Great work!

    #1308492

    Hi,

    @portalplanet By using widget area in header. You can find instructions here – https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area :)

    Cheers!
    Yigit

    #1310093

    @justin
    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

    Bonus Points
    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.

    #1310284

    Hi,

    Thanks for sharing @thinkjarvis :-)

    Best regards,
    Rikard

    #1310351

    @thinkjarvis
    Hi,
    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.
    THank you
    Xavier

    #1310370

    @kommo
    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.

    #1310436

    @thinkjarvis
    Hi.
    Thank you very much, very helpful.
    Best.

    #1310472

    Hi,

    Thanks for helping out @thinkjarvis :-)

    Best regards,
    Rikard

    #1311881

    @Barry,

    How did you do the tab section under about page?

    • This reply was modified 2 months ago by  alexmiguel.
    #1314676

    Hi @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 :)

    Best regards,
    Yigit

    #1319272

    Another new site launch – Brand Global

    #1319512

    Hi,

    Thanks for sharing and for using Enfold @navindesigns, very nice work :-)

    Best regards,
    Rikard

    #1319525
    #1319699

    Hi unicaweb,

    Thanks for sharing, and for using Enfold :-)

    Best regards,
    Rikard

    #1320008

    hello! i have worked a lot and finally i have a pretty solid web thanks to enfold

    Thank you!

    https://www.centraldecomunicacion.es/

    #1320106

    Hi PabloCirre,

    Thanks for sharing, and for using Enfold. Very nice work :-)

    Best regards,
    Rikard

    #1320571

    @pablocirre
    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.

    Thanks,

    Tom

Viewing 21 posts - 1,741 through 1,761 (of 1,761 total)

You must be logged in to reply to this topic.