Kriesi.at – Premium WordPress Themes https://kriesi.at Premium Themes Thu, 31 Jan 2019 15:11:08 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.9 WordPress 5.0, Enfold 4.5.1 and our older Themes https://kriesi.at/archives/wordpress-5-0-and-enfold-4-5-1 https://kriesi.at/archives/wordpress-5-0-and-enfold-4-5-1#comments Thu, 06 Dec 2018 16:56:32 +0000 https://kriesi.at/?p=3764 WordPress 5.0 will arrive soon and with it comes a new “Block” based editor that replaces the previous default editor

So this is probably one of the most discussed topics in recent WordPress history. The introduction of the new WordPress Block editor (or Gutenberg editor as it was previously named). Some love it, some hate it, (and judging from the abysmal 2.5 star rating of the plugin, the later group is currently probably the bigger one), but no matter if you like or dislike it, it will affect you if you use WordPress in one way or another.

Here is how it affects our Enfold users, users of our other themes and also how it affects us :)

1.) Enfold Users

With the latest Enfold release to version 4.5.1 we have tried to incorporate the new editor in the same way as it was previously used. Which means when you create or edit a page or post you have the option to either use the WordPress Block Editor or you can switch to Enfolds very own Advanced Layout Builder. The Layout builder basically behaves the same way as always :)

Although with the introduction of a non-reloading backend some features definitely come in more handy now, like the undo/redo functionality :)

Other than that: When writing and editing non-template builder pages and posts you will need to learn to work with the new Block Editor. If you don’t want to do that there is a plugin that will disable the new Block editor and activate the old classic editor.

To sum it up: As Enfold user you either will need to upgrade to Enfold version 4.5.1 or install the Block Editor Disabling Plugin, if you want to run WordPress 5.0. Otherwise you won’t have proper access to Enfolds layout builder.

2.) Other Theme Users (Replete, Abundance, Choices etc)

Fore those themes you will need to make a choice. They all use an old template builder which is not very flexible and other than Enfolds Layout builder is probably also inferior to the new Block Editor. So you can either use the Block Editor and no longer use the old layout builder or install the “Disable Gutenberg” plugin and use the old one, along with our old template builder.

Apart from that: We used the new WordPress release to take a closer look at those themes and what we want to do next with them. We unfortunately came to the conclusion that it is no longer viable to maintain them at this point.

The reason for this is basically the sales model that Themeforest has chosen. Instead of the need for users to re-license the theme every year for new updates (which is quite common in the WordPress community) they decided to try and generate recurring revenue by selling “support add ons”. However those are never enough to cover the development costs of a theme that is no longer in its prime. And since all of our other themes are now 7 years or longer on the market they are quite old in internet terms ;)

So for the last few years Enfold basically covered the update costs for those themes. We think it’s time to deprecate them now, as long as they are still working and try to encourage existing users to move on to another theme of choice (preferably Enfold of course ;) )

We will keep supporting our older themes in the support forums for months to come but there won’t be any new releases or updates on Themeforest. In fact, within the next 1-2 weeks we will remove them from Themeforest altogether. So if you are running one of those themes and want to grab the latest version please do so now :)

If you have purchased one of those themes within the last 6 months and don’t want to use it because of this, feel free to request a refund on Themeforest. We will grant it, no questions asked :)

Also if you want to keep them running on your site there are a lot of third party developers out there able to help with all kind of issues and improvements. So if you need help that is beyond the scope of what our support can do we will be happy to connect you :)

3.) What it means for Kriesi Media

So since we are removing all our older themes from Themeforest and only keep Enfold we will become a “one product” company. This should free up some development (and in the far future also some support) time which our existing Enfold customer base probably appreciates :)
We have some heavy improvements planned for our very own Advanced Template Builder but for the near future our editor and the WordPress Block editor won’t merge in any significant way. So if you enjoy working with Enfold you can be assured that it will stay that way :)

 

As always, if you find any issues with the latest release feel free to open up a thread in our support forum so we can try to fix it for you and others as soon as possible :)

 

]]>
https://kriesi.at/archives/wordpress-5-0-and-enfold-4-5-1/feed 37
Enfold 4.5 – new template builder elements, more options, new demos focusing on gradients and a few words about the Gutenberg editor https://kriesi.at/archives/enfold-4-5-new-template-builder-elements-more-options-and-demos-and-a-few-words-about-the-gutenberg-editor Sat, 20 Oct 2018 13:27:14 +0000 https://kriesi.at/?p=3752 A release that highlights some of the recent improvements of Enfold

In our last few major releases we were focusing a lot on improving the theme performance wise and making it as easy as possible to be GDPR compliant. During that time we also introduced some new visual features (like gradients for example) which did not get a proper introduction due to the emphasis on usability and non visual features. We figured we should spoil you with a design oriented update between those recent usability updates and the ones we are currently preparing for the future :)

So whats new?

Quite a lot actually.

First of all we added 2 new demos (knowledgebase and agency) that show the power of aforementioned gradients and box shadows, and feature a style that is very different from our previous demos.

For sites with a lot of post based content we got additional blog list layouts. We also got a new ajax search element for the template builder that allows you to easily place an additional search field anywhere on your site. A new table of contents widget allows to show the structure of a single entry in the sidebar and allows easy navigation for the user. This should all aid you in building and structuring websites that contain a lot of posts.

In the “new element department” we got the new Icon Grid element that displays a grid of icons and allows you to show flipbox or tooltip content on hover.

Of course there is a slew of new options and improvements like extra hover effects for the masonry (with greyscale, desaturation and blur options), some additional improvements to the GDPR scripts that were introduced with the latest update, improvements to the theme updater, more animation settings for Masonry, Gallery, Icon List and other elements with predefined animations, etc etc – Feel free to check out the full changelog at the end of the entry ;)

Theme Updater

One thing that has changed, is the way theme updates are now done from the backend. We had to switch to the latest API version that Themeforest provides since earlier versions are now deprecated and no longer work reliable. Since these two API versions are not compatible this means that it will definitely be necessary to update your API credentials in your Enfold backend once you have done the update to version 4.5. We have updated our theme documentation on how to create that new “access token” that is required by Themeforest now.

Gutenberg

Some of you might have already seen that WordPress is trying to move to a new text editor called “Gutenberg”. This editor is currently available as a plugin but will – sooner or later – end up in the final Version of WordPress Core, thus replacing the current TinyMCE Texteditor.

Now that we got a relatively stable version of Gutenberg to work with, we checked in which way we can incorporate our template builder and are happy to let you know that we should be able to provide the same experience with Gutenberg that we provide now, meaning that you can switch between the Gutenberg editor and the Advanced Layout Builder whenever you like.

We will add this to one of the following smaller updates to make sure once you switch to WordPress 5.0 (which is said to be the official release of Gutenberg) everything is smooth sailing. The current release also has a compatibility script that allows you to test the Gutenberg plugin and still use our Template Builder. We just wanted to let you know that its going to be smoother than now in the future ;)

What else did we change? Here is the Changelog:

  • added: new demo: Enfold Agency
  • added: new demo: Enfold Knowledgebase
  • added: new element: Ajax Search Form
  • added: new Element: Icon Grid Element with Flipbox or Tooltip
  • added: option to chose an alternate main menu for mobile devices
  • added: box shadow for columns
  • added: compatibility with the Gutenberg WordPress Editor Plugin (once the editor is added to the WordPress core a more sophisticated solution will be applied)
  • added: option to link special headings
  • added: custom margins for color sections
  • added: a new option to enable a separate sidebar for archive pages instead of using the ‘blog sidebar’
  • added: additional blog list layouts
  • added: options to visually wrap an Animated Numbers element into a circle
  • added: Table of contents widget, which allows to automatically collect the content of a page based on the headings used
  • added: Various additional styling options for the advanced styling blocks.
  • added: new options for the timeline element to display “steps” (like: step 1: register, step 2: confirm, step 3: etc)
  • added: Text alignment option for left sidebar
  • added: Highlight column by slightly increasing its
  • added: Additional accordion styles
  • added: new sidebar styling
  • added: option to display a data privacy checkbox to registration form
  • added: filter that allows plugins to translate a footer template page
  • added: new Product snippet element to display woocommerce price as template builder element
  • added: RTL support for portfolio and masonry grids
  • added: a re-coded version of the combowidget was re-introduced to the theme
  • added: option to always load the mediaelement scripts, in case it is required for 3rd party plugins
  • added: extra hover effects for masonry images: (grayscale/desaurationt/blur)

 

  • improved: the theme updater now works with the latest Envato API version. Please not: you will need to generate a new token for updates
  • improved: added support for smoothscroll for clickable columns and cells
  • improved: contact form auto responder email can now be set and various filter names have been updated
  • improved: backend element preview
  • improved: added the option to enable/disable animations for the following elements: Masonry Entries, Masonry Gallery, Gallery, Icon List, Timeline, Icon
  • improved: added support for WP Embed for ALB pages
  • improved: classes to prev page/ next page pagination and a filter for output
  • improved: added a filter to allow 3rd party scripts to force load media element in frontend
  • improved: added support for custom post type select for magazine element
  • improved: the theme updater script
  • improved: Allow tabs to be selected using keyboard navigation only
  • improved: Events Calendar Styling rules
  • improved: Google maps values can be filtered programmatically now
  • improved: Social media buttons all link to https now
  • improved: added a filter to programmatically change the google maps overlay image
  • improved: added rel=’nofollow’ to search link to avoid duplicate content in search engines
  • improved: lightbox behaviour for WooCommerce Galleries

 

  • fixed: an issue with layerslider fullwidth/responsive mode
  • fixed: an issue with multiple image uploads in shortcode popup
  • fixed: an issue with product review display
  • fixed: an issue with disabled elements and the data privacy modal window
  • fixed: an issue with RTL comment field display
  • fixed: some small spelling errors and typos
  • fixed: an issue with sticky transparent headers on tablet sized screens
  • fixed: a PHP warning caused by the instagram caching widget
  • fixed: an issue with the Masonry Gallery Lightbox title
  • fixed: changed schema.org address to https:
  • fixed: issue with cookie consent message not accepting modified font size
  • fixed: a problem with multiple tab sections on one page
  • fixed: phone number on tablet screen size
  • fixed: a fallback image issue for slideshows
  • fixed: WPML bug not showing translated images
  • fixed: a WooCommerce shop page ordering conflict
  • fixed: Layerslider Text alignment when using RTL language
  • fixed: a protfolio grid column issue
  • fixed: an issue with the media gallery and IE11
  • fixed: empty inline background-image property for sections
  • fixed: img HTML tags syntax error for height and width
  • fixed: an empty translation string causing a PoEdit Error
  • fixed: an issue with circle images that are set to increase their size on hover
  • fixed: an issue with codeblock overwriting in ALB
  • fixed: an issue with horizontal gallery lightboxes if multiple galleries are active
  • fixed: undefined PHP notice for video element
  • fixed: added a check if the inital open tab value is valid
  • fixed: an issue with the overlay burger menu when the layout: “logo center/menu below” was selected
  • fixed: added missing link target to timeline element
  • fixed: a problem with codeblock in postcontent element
  • fixed: an issue with postboxes causing a javascript error on post saving
  • fixed: an issue with custom footers not being displayed fullwidth
  • fixed: an issue with portfolio javascript breaking on complex ALB pages
  • updated: several language files (german, spanish, hebrew)
]]>
Enfold 4.4 and the GDPR (General Data Protection Regulation) https://kriesi.at/archives/enfold-4-4-and-the-gdpr-general-data-protection-regulation https://kriesi.at/archives/enfold-4-4-and-the-gdpr-general-data-protection-regulation#comments Wed, 23 May 2018 03:53:17 +0000 https://kriesi.at/?p=3671 By now most people have probably heard about the new EU data privacy law that will come to full effect on May 25th 2018. We have adapted Enfold to make the journey to compliance a little easier for those who deal with European Visitors on their site

First things first: especially if you are European this law was very present during the last weeks and there is a good chance you already know about it. If you don’t: what exactly is the General Data Protection Regulation?

What is the GDPR?

“The General Data Protection Regulation (GDPR) is a regulation by which the EU intends to strengthen and unify data protection for all individuals from the European Union (EU). It also addresses the export of personal data outside the EU.

It aims primarily to give control back to EU citizens and residents over their personal data and to simplify the regulatory environment for international business (any company that is gathering, processing or storing the personal data of EU citizens).”

If you ended up on our site chances are good you are running your own website. If you have visitors from the EU on your site the GDPR basically requires you to adhere to European standards regarding the data of your users, otherwise you might get fined.

What do I need to do?

At the very least you need to set up a proper privacy policy on your website (WordPress 4.9.6 added the tools to do that), establish a record of processing activities and make sure that users get control over their data (they should be able to get info on what data you have about them, how you use it and if requested you also need to remove it, if that does not interfere with other lawful duties of yours) We are not going into detail here since there are a ton of fully fledged, well written articles out there that explain in detail which steps to take to be compliant.

What do I not need to do?

There are currently a lot of horror stories out there on how websites must be adapted (like all forms must come with checkboxes, all user IP addresses must be erased, all external services like Google Fonts, Video Embeds and Maps must be removed, all Cookies must be blocked and whatnot).

Non compliance will result in catastrophic fines and will end your business. We should all close our websites right now and be done with it. etc etc

We have talked to lawyers, we have visited information events and we have scoured the web for reliable resources written by people with a background in data protection or law. The gist we got from those sources:

It’s all not as bad as it sounds. Yes there is some work to do. But many of these “required changes” are highly debatable or outright wrong, and even if you don’t get everything right from the beginning: the authorities in each country are tasked to try to inform first and only if they encounter repeated violation of the law impose fines.

The key takeaway from our talks with lawyers

This might probably be the most important takeaway we got from our research. According to our lawyers you can pretty much use every feature as is if one of 2 conditions are met: legitimate interest on your side, or consent given by the visitor.

The problem with legitimate interest is that its one of those things that are not strictly defined by the law, which means its open to interpretation. The question is: when are you allowed to put your interest first and when do you need to step back and ask for permission? A question that got no general answer as we understand it, but needs to be reviewed for each case individually.

Although legitimate interest may be open to interpretation, according to our lawyers it’s usually still the better option compared to user consent. The problem with consent is that it can be revoked at any time which can cause you a lot of extra work.

So if its possible its better to argue that you need a feature for a particular business reason, inform the user on your privacy policy page about it and be done with it, instead of placing consent checkboxes and popups all over the website ;) In some cases this might not be possible, so we have added several new options to the theme that allow you to go either route, depending on what you (and your lawyers) feel is appropriate.

So what did change with Enfold 4.4

Finally we are talking about the theme :D As was discussed above, it is currently hard to tell what is allowed, what is not and what is in a legal grey area. So what we did is: allow you to choose how you want to use certain features, depending on what the legal advisors and authorities in your country tell you :)

External services

The biggest changes we applied are in regard to external services. Since external services receive user IP addresses if you use their services we have implemented ways that this only happens on user interaction.

You can now set up your instagram and facbook widget in a way that they do not send data unless the user interacts with them. Same goes for google maps where you can set up a placeholder image that is displayed until the user requests the actual map. The very same was implemented for vimeo videos and youtube. The cool thing about those features is that its not only helpful with data protection but its also in accordance with our recent efforts to improve page speed and performance scores. And it of course helps a lot with performance if external sources are only loaded on user request.

We have also implemented a font upload feature that allows you to upload google webfonts (or any fonts for that matter) to your webserver. Users have asked for the possibility to use their own custom fonts for some time now and it was a good opportunity to implement that feature ;)

Consent Checkboxes

Enfold now allows you to display checkboxes after any theme generated form, that asks for user acceptance of your privacy policy before sending the form. As mentioned earlier we do not think that this is necessary (legitimate interest vs consent), but it was requested so often, we figured we can at least provide the feature for now until there are definite rulings for sending contact, newsletter or comment forms :)

Shortcodes for your privacy policy

We also added a few shortcodes that allow the user to disable certain features on your website, in case you decide to use them without asking in the first place.

  • [av_privacy_google_tracking] – allows a user to disable google tracking in his or her browser
  • [av_privacy_google_webfonts] – allows a user to disable the use of google webfonts in his or her browser
  • [av_privacy_google_maps] – allows a user to disable the use of google maps in his or her browser
  • [av_privacy_video_embeds] – allows a user to disable video embeds in his or her browser
  • [av_privacy_link] – displays a link to the privacy policy page set in your WordPress admin panel

If you do not like the default text or language these shortcodes generate you can use your own text like this: [shortcode]YOUR OWN TEXT[/shortcode]

Cookie consent bar improvements

The cookie consent bar was also heavily improved in 2 ways.

  1. It is now possible to generate any number of call to action buttons
  2. It is now possible to display a information modal window that explains which cookies are used on your site and how they are used. It also explains why some of them can not be disabled via shortcode (of course browser disabling always works) and how to opt out of services like google analytics tracking. You can of course change that default info and set up your own modal information.

And since we are talking about cookies:

One more word about Cookies

You may notice the absence of a feature to generally disable cookies. This is a “requirement” that is also heavily discussed on the internet but since Enfold does not set any cookie that stores any personal information we decided against it. Enfold cookies do one of 3 things:

  • dismiss the cookie consent bar permanently (permanent cookie)
  • make sure that the breadcrumb navigation is displayed properly (session cookie)
  • allow a user to disable certain features like webfonts, analytics, maps or videos (permanent cookies)

As you can see none of those store any user information, so the GDPR does not apply here. We would recommend to mention that you set cookies in your privacy policy and also explain how they are used and how to disable them in the web browser, if the user really really does not want any cookies to be set, but we do not think its necessary to block them as a whole. If you think it is: there are plugins out there that can do the job.

Whats more?

Although we only had very little time since our last major update we were able to also set up a new demo for you. Since this is an update that is caused by a new law, we only considered it fitting to provide a demo for lawyers :D

 

Last but not least: a disclaimer :/

Disclaimer

We are not lawyers, so don’t take any of this as legal advice!

We wrote down what we have been told by people who are well versed in legal matters but a lot of this is subject to interpretation so make sure to consult with your lawyer if you want to be sure what to do.

Full Changelog

Since the last major update was only a month ago there is not a lot more going on than what has been discussed above. Nevertheless here is the full changelog:

  • added: new demo: Enfold Law
  • added: cookie consent bar got an improved way of adding unlimited buttons
  • added: cookie consent bar got an option to display a modal window with detailed information and the possibility to deactivate some cookies and features
  • added: custom font uploader – you can now upload and use any font you like
  • added: the facebook page widget got a “data protection” mode were it does not load the facebook javascript without user interaction
  • added: the instagram widget got a “data protection” mode were it does store all images on your own server
  • added: google maps got a “data protection” mode that allows to load the maps API only when the user clicks on a google map fallback image
  • added: shortcode that can be used in your data protection policy that allows the visitor to disable google analytics tracking
  • added: shortcode that can be used in your data protection policy that allows the visitor to disable google web fonts
  • added: shortcode that can be used in your data protection policy that allows the visitor to disable youtube and vimeo video embeds
  • added: shortcode that can be used in your data protection policy that allows the visitor to disable google map embeds
  • added: option to add a checkbox to all comment forms that asks for approval of your privacy policy before sending the form
  • added: option to add a checkbox to all contact forms that asks for approval of your privacy policy before sending the form
  • added: option to add a checkbox to all newsletter forms that asks for approval of your privacy policy before sending the form
  • added: option to add a checkbox to your login form that asks for approval of your privacy policy before logging in
  • improved: cookie management for portfolio breadcrumb navigation is deactivated if breadcrumbs are deactivated
  • fixed: an issue with safari admin menu
  • fixed: an issue with the linkpicker not displaying all posts to select
]]>
https://kriesi.at/archives/enfold-4-4-and-the-gdpr-general-data-protection-regulation/feed 78
Scoring 100/100 in Google PageSpeed Insights, GTmetrix PageSpeed and Yslow (and why you probably shouldn’t bother ;) https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow#comments Thu, 03 May 2018 10:44:14 +0000 https://kriesi.at/?p=3513 This article will teach you how to get a perfect score with Enfold and its latest performance upate to Version 4.3 on Google PageSpeed Insights and GTmetrix. It will also explain why it’s probably not a good idea to obsess over it

Don’t let yourself get fooled by the title. You should definitely care about your site performance and using those tools allows you to identify problems easily. In general you get very good recommendations but you should know when to follow them and when to ignore them :)

The metric that is much more important than any score, awarded by those testing tools, is the page load time of your site. And to achieve a good page load time a good server environment and optimised images are usually much more important than any theme optimisations you can do.

So make sure to not get obsessed with a good score, just for the sake of the score ;)
Also, while building our latest Enfold Update we set up a total of 12 test environments and probably did 1000 speed checks. The conclusion we came to, is that the trade offs for a perfect score are often times not worth it. (eg: compressing your images to a point were quality suffers dramatically, using a ton of inline css and javascript to satisfy above the fold rules, etc)

So here is what we are going to do:

  1. We will set up a new test site and activate our Enfold Theme
  2. We will install our Enfold 2017 Demo (it has a lot of content, images, slideshows so its a good guinea pig)
  3. We will optimize it to get to a 100/100 score on all testing tools
  4. We will tell you which of those optimisations are probably not worth the trade offs

 

1.) The theme by itself

After setting up the new WordPress Site and activating the theme, if we check the score we get pretty good results out of the box. After all, enfold is now heavily optimized ;)

A lot of the optimization that we will introduce you to in this article are content and server related and got nothing to do with Enfold.

The options that can be changed in the theme are not that many, most of the optimization is set up automatically by conditional checks we have implemented. Sort of an AI that does a lot of the optimization related stuff for you ;)

Here is a screenshot of the “main” optimisation options. It is recommended to enable both the merging and compression of your CSS and JS files. It is also recommended to only load template builder elements that you are using. The theme will try to keep track of those and automatically load the necessary files. We have already described how these settings work in our introduction blog post for Enfold 4.3.

Active default settings

(PS: Please note: if you are upgrading from a previous Enfold version those features are by default not active and you need to enable them manually. This is to prevent any undetected errors for users that are just updating and not checking their site afterwards. New installations will have these features enabled by default)

2.) The theme with content

After installing the Enfold 2017 Demo, our initial speed test results are rather mixed:

As you can see, especially the desktop score for pagespeed insights and gtmetrix pagespeed are rather bad. This is because the score is influenced heavily by the level of image optimisation. Since we did not do any optimization yet our score suffers, despite the fact that there is a lot of green bars and the theme scores really well with most of the other performance tests. So first things first: lets install an image optimization plugin.

 

3.) Image optimization

And here you already encounter your first decision since image optimization is a tricky business.

You have to strike a good balance between size reduction and image quality. If you reduce the file size too much the image might be small and the pagespeed tools might be satisfied, but the experience for your users would be rather crappy since they would see some ugly pixelated pictures. On the other hand, if you choose too little reduction your site might be too large and load slowly. And on top of that your score – and whats more important – your user experience and in the future also your mobile site ranking might suffer.

We have tested a long list of plugins and found that Shortpixel and Optimus did a really nice job for us.

Optimus worked well out of the box for the images we are using on our test site and shortpixel allowed us to fine tune the results a little better due to more options.

The Shortpixel “Lossy” Compression will heavily reduce the image size but is also rather aggressive. If image quality is not that big of a deal for you go with that. If quality is important use the “Glossy” compression setting. Some images might be too large for the pagespeed tools but you can then decide if you want to reduce the image size further individually or if you want to keep the image as is. If you don’t already have a preferred image optimization plugin you can download and install either of those two plugins directly from your Enfold Performance Panel:

The new image Optimization Panel of Enfold

For the sake of this demo we went with Optimus and after batch processing all images our results got much better already. Unfortunately thats sometimes not enough for the pagespeed tools so it sometimes happens that you need to individually process some images. Optimus does not allow that, but tools like shortpixel do. In the end its a little trial and error which plugin works best for the images you are using :)

Both Mobile and Yslow rating did not change much (because they do not really take images into account) but the others went from red straight into green with a score of at least 85+. This alone shows you how important image optimization is.

4.) Leverage browser caching

Next on the list of both pagespeed insights and GTmetrix is to set up browser caching. What this means is that static resources on your website, like CSS files, Javascript files and images, are only loaded once by a visitors browser: when he first visits. On consecutive visits of your website those resources will be loaded from the browser cache.

This only works if the webserver tells the browser on first load, that those resources are viable for a longer time. So, yes, this is neither a theme nor a WordPress optimization issue, it is something that needs to be changed for your server. Since most webhosts these days run an environment that allows you to easily change this all you need is to open the root directory of your WordPress installation, look out for the .htaccess file and paste the following lines of code at the top:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

If this does not work for you for whatever reason there are other steps you can try, described here.
So now that we have enabled browser caching we can do the test again and its gotten better once again.

As you can see this server optimization is also quite important. Slowly but steady we are getting there.

4.) Eliminate render-blocking JavaScript and CSS in above-the-fold content /Defer parsing of JavaScript

Those two messages essentially mean the same thing: In order to render the page as fast as possible there should be as little external resources likes CSS files, Fonts, Javascript be in the head of the theme. If it must be there the page speed tools ask you to move them to the bottom of the site, or put it inside the HTML document, instead of placing it in an outside file. This is because the browser needs to wait for those files to fully load before being able to display the site.

Enfold on its own tries to place as many of the files as possible at the bottom of the site to satisfy those requirements. However some external plugins may overwrite this. An example would be the Layerslider plugint that we use here. Luckily its quite easy to solve this issue, since the layerslider also got a few optimization settings. Head over to the Layerslider->Options Page and open the advanced tab. Set the options like this:

This will tell the slider to load its script in the footer of the page as well.

Another issue with above-the-fold content are custom fonts. If you are using one or more google fonts, provided by the theme, this will also hurt your score. The Enfold Performance page lets you change the way those fonts are loaded from header (which is the default) to footer. This is one of the settings that has a small trade off. Setting it to load fonts in your footer will slightly speed up the page and satisfy all the page checks.

But it will also cause a short flicker of text on page load, since the text will be rendered first with a fallback font, and only then will the Google font get applied.

Personally I am not using this setting for our websites because I consider that font flicker to be very annoying, but if you want to squeeze every millisecond out of your page this will be necessary. In order to get a perfect score this is also necessary so we will activate the setting as well.

As you can see, I also set jQuery to load in the footer and I disabled some other WordPress defaults that are not necessary for most sites (emojis and jquery migrate). If you are running a lot of plugins you might want to leave those settings untouched since they might cause problems with badly coded or outdated ones. (Please note that if you are running no plugins at all some of the options are set automatically for you and won’t be displayed)

Lets check our score:

As you can see we are getting there. Already 99/100 on insights and 100 on Gtmetrix Pagespeed. Whats left to do is no longer part of the theme but once again some server stuff :)

5.) Reduce server response time

This statement is shown by insights if your site is served too slow. And slow is relative here because it means longer than 20ms :)
In order to get that last 1 percent out of insights make sure that your site is using a caching plugin. Since I can remember our sites have run on Wp Super Cache. It is one of the easiest to use plugins that also offers options to fine tune it. In most cases you simply install and activate it and are done. Thats why it is also recommended on our Performance page ;)

Once the plugin is active visit the page once, so a cached version is generated. Once that is done your site will score 100/100 in google pagespeed insights as well ;)

As you can see, all thats left is Yslow ;)

6.) Yslow: 3 big Problems left: Using a CDN, use Cookieless Domains, too many DOM elements

  • Using a CDN with Wp Supercache is rather easy. Here is a good article that lists the steps you should take.
  • Cookiless domains: The Yslow testing tools are not up to modern standards here. With HTTPS almost everywhere now, this is no longer a necessary step. If you really want to do this for the sake of the page score, here is an article as well ;)
  • Reducing Dom Elements: One of the trade offs I spoke about earlier. Too many DOM elements basically means that our site is too large. In order to satisfy this I will delete a few elements from the page, but I would not do this in a real life situation, If I thought that content is important ;)

Once all those steps are performed we are coming close at Yslow as well:

We are getting there :)

 

To squeeze out the last few points Yslow wants you to reduce the number of HTTP requests (less JS and less CSS files) and add expires header to all files. The later can only be solved if you are not running any google fonts at all (tradeoffs, you remember? :P) because thats the file that Yslow is concerned about:

So in order to score perfectly we would work without our google fonts and disable them. Too many external JS and CSS files is a problem specific to our current test environment: the layerslider plugin has a few files that we can not compress at the moment with the current version of the Layerslider. We talked to the layerslider team and worked out some improvements to the slider together and applied those changes to the test server (they will be included in all future versions of the Layerslider Plugin so no need for you to do anything here)

Voila, we are there! (Here is a link to the test server test restults. It will probably be removed at some point in the future but for now you can use it to see that we were not cheating ;D )

 

Which steps do we ignore, here at Kriesi Media?

So in theory you can see it is possible with a little effort, to achieve a perfect score. But as I said from the beginning, there are some things that you can not easily fix, and I think its important to know when to ignore the pagespeed tool.

  • We will keep ignoring “above-the-fold” render blocking messages. Yes you can use a plugin and print all your CSS and Javascript to the HTML instead of loading it, but this will only hurt consecutive page loads. So you will almost always get a message about your merged css file and that it blocks rendering.
  • We will keep using external fonts from google, and we will load them in the header. This means we can no longer get a perfect page insights score since render blocking is active, and it also means that Yslow will reduce the score due to far-future expiration headers not sent for these resources (since they are served from google, the header must be set by google and its not going to be something they will do anytime in the future)
  • We will probably never get a perfect score for all of our images, because as a designer I want my website too look good as well :)
  • We will keep using external plugins like the Layerslider and WooCommerce which might reduce the score a little bit but offer amazing functionallity.

These 4 points alone will reduce the score we get awarded. However at the same time, the real and most important metric will barely be compromised. Load time for the visitor. And this is something that still will be heavily reduced if you take all those steps above:)

On our test page we went down to about half the size and half the page loading time from a previous enfold version when we apply realistic settings and do not delete any content at all. I would consider that a huge win, even if we do not score perfectly ;)

 

]]>
https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow/feed 12
Enfold 4.3: Performance Update https://kriesi.at/archives/enfold-4-3-performance-update https://kriesi.at/archives/enfold-4-3-performance-update#comments Tue, 24 Apr 2018 08:17:57 +0000 https://kriesi.at/?p=3604 As announced earlier we wanted to improve the speed and usability of Enfold. I think you will like what we came up with :)

This release is probably one of the most important in recent years, since its the first major step in changing some of the core workings of our Enfold theme.

Whenever software is written, a developer has to make certain decisions on how this software works. Most of the stuff we decided on, when first building Enfold has served us well. But unfortunately some of those decisions now started to affect our ability to improve the theme further. This is why we decided to do a few major overhauls and Enfold 4.3 is the first one. This release affects performance in a few major ways and its hard to overstate how important all those performance changes are. So before we describe what we did, here is how it affects the theme:

  • A typical Enfold based Website now loads anywhere from 15%-75% less CSS and JS
  • Enfold is now probably the best optimised multipurpose theme out there. We checked the competition and Enfold now uses less CSS and less JS on an average site than anyone else.
  • In addition to being leaner and cleaner than the competition out of the box, the theme is now also exceptionally easy to optimize and you can achieve perfect google/gtmetrix pagespeed scores if desired
  • Search rankings will be higher for Websites using Enfold since loading speed for mobile will be factored into search results soon
  • Conversion from visitors to customers will be better, since it’s a fact that every millisecond you can shave off the load time has a positive impact

Achieving a perfect score in google or gtmetrix is now possible ;) – Blog post here!

So what did we change and why?

Modules

In this release we switched to a “module based” feature system. Previously when we added a new option in the backend, or added a new template builder element, it was enabled for everyone by default and was always loaded. So as Enfold grew with time, the list of features to load grew with it and the amount of CSS and JS also grew.

Since only very large sites use every Enfold feature we offer, this means that a lot of smaller sites load a lot of unnecessary resources. It also means that adding new niche features is usually not a good idea since it affects all users who don’t use the feature negatively. We wanted to change that and therefore switched to a module based system.

From now on Enfold only loads the CSS and JS files it requires. The theme now keeps track of the elements and options you use. So if you don’t use a video player, a countdown and a portfolio, the theme will no longer load these features.

Enable and Disable Modules to your liking in the new “Performance” Theme options

What sounds like a little change, was actually a lot of work over several months. The effects on performance and loading times are well worth it:

A medium sized website (which I would say are 90% of our customers) now loads only about 35% of the resources it previously did. Thats 65% less stuff to load for your visitor, and therefore usually a huge speed improvement.

It also means that we can now easily add niche features if we consider them valuable without affecting everyone elses performance. (like our new timeline element for example)

Compression

Along with the module based approach, we added a file compression feature that generates and optimises CSS and JS files, based on the features you use. So not only does the theme need to load less resources, those that are loaded are also compressed and cached properly (without any plugins) which further reduces loading times.

File merging and compression for CSS and Javascript

Performance options

Since we were already doing the performance “dance” we added a whole performance theme options tab in your backend, that allows you to fine tune resource loading for your theme with a few clicks. We have already released an article on how to score perfectly on google pagespeed and gtmetrix.

The Performance tab allows you to deactivate unnecessary and often unused default WordPress settings, it allows to change the behavior of our new module loading and compression to previous defaults (if you run into any troubles with plugins) and it offers optimization hints like which image optimization plugin or which caching plugin to use :)

What else is new and deserves a mention?

1.) As always there are lots of changes and improvements in this release and one that we like a lot is the option to use a whole page as a “global template”.
The new template builder element called “page content” allows you to load another page into the page you are currently using.

As an example: lets say on each of your pages you want to display a list of links and logos to your business partners.
If you previously did that and a partner changed you had to change the list on every page individually. Now you can just create a “partnerlist” page that only contains this list and then load it into your frontpage, contact page, about page etc.

If a partner changes you simply edit the “partnerlist” page and those changes will be visible on all your other pages as well.

2.) Similar to that, we figured that using the same boring 3 or 4 column footer layout lost a lot of its appeal over time and is very limiting. You can now generate a footer page with your template builder and set that page to be your footer in your theme options at Enfold->Footer. A simple example of a nice custom footer can be seen in our latest demo.

Among other things we of course got a new demo, new template builder elements called “timeline” and “button row” (which lets you display multiple buttons in one row) full column linking, the option to display a notifications on pageload (eg cookie use) and so much more. Check the Change log for all the big and small details ;)

Whats up next?

Now that we only load features based on usage we are free to add niche template builder elements without affecting users who don’t need those elements. So you will probably see some of those niche elements with some niche demos. That said we are still keen on keeping Enfold easy to use for beginners, so we will of course not add every feature or element that comes to mind :D

We are planing a smaller release next that adds features that satisfy the upcoming General Data Protection Regulation which will be enforced accross the EU and also affect everyone doing business with someone in the EU.

As for the bigger changes that we plan: as I mentioned earlier the way we previously loaded our assests was one of the things that stood in our way to further improve the theme. Another thing that served us well for a time but is now rather limiting are shortcodes. Enfolds template builder is – like most other template builders – based on shortcodes. Back when we first built enfold this was a de-facto standard and it had its merits. However, they are now a thing of the past. Shortcodes are slow (in terms of processing), require a lot of overhead (coding wise), cause problems a lot (with improper html nesting and/or HTML special characters) and are not very flexible in some other regards (nesting, global elements).

WordPress itself is moving away from Shortcodes with their new Gutenberg Editor and we also noticed that some of the things we want to achieve with the builder (like unlimited nesting of columns, template builder content within toggles and tabs, etc) are not really doable while using shortcode as the “data structure” of a page. So this is the 2nd big task that we are tackling. We will change the data format of the builder and get rid of the shortcode structure in the long run to be able to improve the builder the way we would like. This will, like the implementation of modules, take a few releases but once done you are in for some big template builder improvements ;)

Change log

  • added: a new demo: Enfold Elegant Portfolio
  • added: performance tab in theme options that allows you to improve your website performance by using file compression/removal
  • added: button row element that allows to display multiple buttons beside each other
  • added: new “typewriter” animation for rotating header element
  • added: you can now set links for columns and cells
  • added: you can now set a page as footer. This allows completely different footer designs
  • added: option to close the notification template builder element and set a cookie to not display it again
  • added: option to use background gradients for cells, columns and sections
  • added: option to display a cookie use notification
  • added: option to display button label as tooltip (that way you can use icon only buttons with hover effect)
  • added: option to set a custom 404 page layout
  • added: copyright option for image element
  • added: plugin check for image optimization and caching plugins
  • added: plugin recommendation for image optimization and caching plugins
  • added: advanced styling option to style the active main menu item
  • added: new google fonts
  • added: margin spacing options for header element and header rotation element
  • improved: several CSS and JS files will now only load if they are required, based on the theme option settings
  • improved: demo import script
  • fixed: buttons in main menu now always got the same height
  • fixed: usage of the old jQuery Migrate Library no longer necessary due to JS improvements
  • fixed: backwards comp. with PHP < 5.5 in header.php
  • fixed: slideshow fallback link handling for easy slider
  • fixed: an issue with the size of self hosted videos
  • fixed: loading of instagram images works properly again
  • fixed: backwards compatibility issues wit RTL styling
  • fixed: ALB color section: Small Arrow in Bottom Border Styling shows up twice
  • fixed: ALB Product Purchase Button and WooCommerce > 3.0 lead to endless loop
  • fixed: Small issue in not creating attributes in breadcrumb for first element
  • fixed: an issue with event Calender tickets
  • fixed: an display issue with the shop main page and the breadcrumb navigation
  • fixed: an issue with image overlay display
  • updated: Layerslider plugin
]]>
https://kriesi.at/archives/enfold-4-3-performance-update/feed 80
A few updates regarding WPML: Introducing WPML’s Contractors System https://kriesi.at/archives/introducing-wpmls-contractors-system https://kriesi.at/archives/introducing-wpmls-contractors-system#comments Tue, 30 Jan 2018 11:40:24 +0000 https://kriesi.at/?p=3479 WPML’s new contractors system makes it easier for Enfold users to find experienced developers to help them on their multilingual projects and for developers to find Enfold users who need help.

WPML recently launched their contractors system to connect end users with contractors. End users can invite selected contractors to their projects in case they need help and the system will take care of the rest and distribute those invites. Once user and contractor are connected, WPML steps back and lets those two parties work out the details (WPML does not get involved in payments)

Now Enfold users can search for contractors on WPML’s Contractors System. Contractors are well experienced in both Enfold and WPML but services they can provide are not limited to making your Enfold site a multilingual one. Most contractors can help you build a new website, maintain an existing website, fix issues on your existing website, help with SEO and more.

If you are a developer/contractor looking to work on Enfold based projects, you can join WPML Contractors Club too. To join, you need to have at least 6 months of experience with WPML and have at least created 3 websites with it.

You will need to do two things to appear as a WPML contractor:

  • Fill the application form, which gives additional details about you and about the projects you can do.
  • Upload at least three showcase sites, which will appear on your contractor page as your showcase.

The WPML team will review your application, let you know if anything needs attention and will publish it when it’s complete.

We are hoping that this system will be beneficial for both users and contractors. You can find more information about WPML’s contractors system here.

New WPML feature, Display as translated

WPML also introduces a new translation mode called – display as translated – which is compatible with Enfold and invaluable for developers using Enfold demos.

About the display as translated feature:

  • Users can show original content if no translation is available.
  • Users can display untranslated content without the need to duplicate it anymore.
  • Useful for sites that don’t need to translate everything: listing, directory and membership sites as well as WooCommerce products and taxonomies.

You can find more information on How to translate pages built with Enfold using WPML tutorial on Enfold documentation.

Hope some of this is useful for you guys!

 

]]>
https://kriesi.at/archives/introducing-wpmls-contractors-system/feed 8
Enfold 4.2: Focus on Audio and 5 new Demos for creatives, as well as first steps in theme optimization https://kriesi.at/archives/enfold-4-2-focus-on-audio-and-5-new-demos-for-creatives-as-well-as-first-steps-in-theme-optimization Sat, 28 Oct 2017 15:29:07 +0000 https://kriesi.at/?p=3463 Since our last release only featured 2 new demos due to all the backend work, we decided to help our creative community with this release and a slew of new demos concepts

With that in mind we decided to cater for a few niche categories which were not really well supported by Enfold till now. Namely everything related to audio. And although we supported the WordPress audio player from the first release, it was more of an afterthought. We now added a dedicated audio player element with more options like autoplay so you can build Dj, Band, Nightclub and other sites that are focused on audio.

Also new are the demo for freelancers, which uses a fullscreen split design, the demo for visual artists, which might help everyone who frequently draws and the gaming demo, for everyone who builds gaming related apps. As always each of these demos looks vastly different from anything we have done before, just to give you a glimpse of the possibilities of the theme :)

 

What else is new, what else is next?

Since we announced that we are going to improve Enfolds performance this was also something we started to look into. We were already able to remove an entire stylesheet with more than 1000 lines of CSS and also removed a lot of the backend generated CSS. The idea for future releases is to streamline CSS and JS and then make it possible for users to remove resources based on the elements that are used. This should also allow us to implement stuff like Google Accelerated Mobile Pages (AMP), something which is currently not really possible.

Unfortunately this is no small undertaking since it will require a lot of core code changes. Since we want to keep everything running smoothly and since we do not want to break backwards compatibility we will carefully weave those changes into the next few releases, so stay tuned ;)

 

Change log

  • added: 5 new demos for creatives
  • added: new template builder element: audio playlist
  • added: new google fonts
  • added: option to select color for section scroll down arrow
  • added: new styling and color options for the toggle shortcode
  • added: new wordpress filter to modify or remove main menu
  • improved: better handling/loading times of deactivated lightbox script
  • improved: default mediaelement audio player styling is now more modern, cleaner and requires much less css
  • improved: several css files were trimed and others removed (1000 lines of css removed)
  • improved: performance of blog element and reduced database queries
  • improved: advanced options for link overlay display
  • improved: testimonials shortcode delimiter logic
  • improved: Plugin WP SEO integration with builder inserted images has been improved
  • improved: Horizontal gallery now shows navigation arrows on mobile devices
  • improved: Horizontal gallery allows to enter element ID now
  • improved: handling of special characters like line breaks in shortcodes
  • improved: tab section height handling when inner elements change their height
  • improved: scroll down arrow alignment
  • improved: several RTL css styles
  • improved: breadcrumb navigation in ssl environments
  • improved: removed an old filter from woocommerce
  • improved: google maps API key handling within the theme and the theme framework
  • improved: inclusion of layerslider plugin, so it does no longer show the update notice all the time
  • fixed: an issue with the toggle shortcode not animating when showing its content
  • fixed: issue with section overlays when a down arrow is used
  • fixed: an issue with tabsection names that did not contain any non special chars
  • fixed: an issue with the hamburger menu when empty links with subitems were used.
  • fixed: Horizontal gallery now works with custom links
  • fixed: Horizontal gallery now works with titles and captions in the lightbox
  • fixed: Horizontal gallery now no longer breaks if the number of the initial image is larger than the gallery image count
  • fixed: an issue with duplicate ids after a grid row element
  • fixed: a bug with tab section alignment on RTL setups
  • fixed: an issue with the Woocommerce checkout options on smaller screens
  • fixed: an issue with hotspot descriptions
  • fixed: an issue with demo import causing php notices
  • fixed: a few smaller issues with the new mobile menu
  • fixed: an issue with the post delimiter on custom made blog entries
  • fixed: an issue with the secondary menu items not visible if the main menu is displayed as burger icon
  • fixed: an issue with the shortcode wand and image with hotspot shortcode when not used as a template builder element
  • fixed: an issue with product search in woocommerce
  • fixed: an issue with mobile submenu cloning when the main menu is set to display in a sidebar
  • fixed: an issue with copy/pasted shortcodes
  • fixed: an issue with Zen Menu and Themify_Conditional_Menus
  • fixed: an issue with importing demo data in php 7
  • fixed: an issue with WPML and double language flags in the new mobile menu
  • fixed: an issue with diagonal bordered sections and scroll down arrows
  • fixed: an issue with burger menu social items on tablet screens
  • fixed: an display issue with icon elements following a delimiter
  • fixed: a bug with the caption shortcode within the textblock eelment
  • updated: layerslider plugin
  • updated: several translation files
]]>
Enfold 4.1: Mobile improvements, Photography Demos, new Gallery and more https://kriesi.at/archives/enfold-4-1-mobile-improvements-photography-demos-new-gallery-and-more https://kriesi.at/archives/enfold-4-1-mobile-improvements-photography-demos-new-gallery-and-more#comments Thu, 13 Jul 2017 12:55:07 +0000 https://kriesi.at/?p=3436 This update is the first in a series of updates to enhance Enfolds performance even more, both on mobile and desktop devices

Lets start with the new demos and the new layout builder element. We noticed a lot of photographers are using enfold for their projects and wanted to provide a few more demos for them to present their work. Therefore we created a new minimal photography demo, a dark photography demo and a horizontal gallery element.

What else is new?

After releasing Enfold Version 4 we took a closer look at the requests we got and one that keept poping up was an enhanced mobile experience. We figured thats a good idea since mobile devices are an every growing way to browse the web, and Enfold lacked in a few ways.

So what we added in this first release, which targets mobile devices are a much improved mobile menu that allows to change a lot of styles to make your mobile menu as unique as your site. It is also possible to use the site search on mobile, something that was also not possible.

Another part of the theme which was heavily improved was the mobile options you got for your advanced layout builder. Pretty much all of the elements got a new option tab called “Screen Options” and depending on the element you will find several new settings there. Text based elements, for example, received the option to set the font size based on screen size. Column based elements received the same option for columns. Pretty much all elements can now be shown or hidden depending on the screen size. This allows for some interesting ways to build your website:

Previously you had to set up an element for desktop size and then check if the theme properly scales it down on mobile devices. And although this usually works fine, there are elements or situations were this can get tricky.

Now what you can do is simply set up 2 versions of an element and display/hide them at a breakpoint of your choice. Although it is not recommended to overdo this for the sake of search engines, it is now much easier to present tables of data or various sized images for various devices, for example.

We also added 2 new tabs in your Enfold theme settings (“Main Menu” & “Layout Builder”) and added new options for those tabs, as well as placing existing once in there if they are a better fit than their previous parents ;)

There are of course a lot of smaller improvements and bugfixes which you can check out in the change log below.

What’s next?

We will keep improving the mobile experience with the next release and also want to improve the performance of Enfold in general. So if you got any suggestions in that direction feel free to use the comments.

Having Update Problems?

Since a lot of files have changed in this release there might be smaller issues (especially with menu customizations) some of you might encounter. If you encounter any issues please follow the steps in this thread and if that does not help: feel free to open a new thread in our support forum. We will do our best to take care of you :)

Change log

  • added: new photography theme demos: minimal photography and dark photography
  • added: new template builder element: horizontal gallery
  • added: new modern mobile menu with more options (old mobile menu item was removed)
  • added: new theme options tab for the main menu
  • added: several new options to edit and style the main menu on mobile devices
  • added: most elements received a “screen options” tab.
  • added: visibility settings based on the screen options for all template builder elements
  • added: font size settings to the screen options tab for text based elements (eg headings)
  • added: column count settings based on the screen options for complex column based elements (eg masonry)
  • added: advanced styling options for the mobile menu to create unique fly-out and overlay menus
  • added: new theme options tab for the layout builder
  • added: option to disable the live preview in backend
  • added: option to enable custom css classes for template builder elements
  • added: option to disable the post navigation between single posts
  • added: google maps options to display Satellite, Hybrid or Terrain maps
  • added: team element option to change image size
  • added: Woocommerce can now add structured data to template builder elements
  • added: tab sections can be pre-opened by url now
  • added: google maps key check is now done when entering the key for easier checking if the key is valid
  • added: new orientation for masonry image elements when set to “perfect grid” – you can now display images as squares, as well as landscape or portrait images of various sizes
  • fixed: an issue with broken columns in tab section in backend
  • fixed: breadcrumb function with custom shops
  • fixed: an issue with tab sections on firefox when more than one word was used for the tab title
  • fixed: several frontend issues with equal height tabs and columns within tabs
  • fixed: RTL related issues
  • fixed: an issue with shortcodes when they where copied from one page to another without using the default content field
  • fixed: several minor query issues with the latest version of Woocommerce
  • fixed: an issue with special chars in heading elements
  • fixed: woocommerce cart dropdown on the checkout page was not updated properly
  • fixed: several minor spelling errors in the template builder
  • fixed: portfolio custom links now work better with various slideshows
  • fixed: a woocommerce issue with out of stock items
  • fixed: an issue with google maps click events and firefox
  • fixed: an issue with initial active item on tab sections
  • fixed: a problem with product layout settings
  • fixed: an issue with linked images inside the layerslider slideshow
  • fixed: a bug with portfolio ajax slideshows not autorotating or stoping after one cycle
  • fixed: a minor character encoding problem in the template builder
  • fixed: a display issue with comment forms when displayed after certain elements
  • fixed: a few minor issues with php 7.1
  • fixed: a menu display bug in ios 10+ when the items are animated
  • fixed: a z-index issue with section overlays
  • fixed: a problem with disabled backend options not beeing rendered properly after enabling them
  • fixed: a flickering issue caused by css with the main menu on webkit engines (chrome, safari, opera)
  • fixed: a validation issue with the mailchimp API key
  • fixed: an issue with the live preview not updating properly after an option change
  • fixed: a blog gallery bug when no sidebar blog was used in conjunction with the sidebar main menu
  • fixed: menu overlay sub level menu items font size and line height are now set properly
  • fixed: an issue with custom menu color settings and transparent menus
  • improved: search functionality can now be used on mobile phones
  • improved: cleanup of several CSS classes
  • improved: removal of several JS functions that were no longer needed and improvement of existing functions like menu and smoothscroll
  • updated: layerslider to the latest version
  • updated: several language translation files
]]>
https://kriesi.at/archives/enfold-4-1-mobile-improvements-photography-demos-new-gallery-and-more/feed 20
Enfold reimagined – Version 4.0 https://kriesi.at/archives/enfold-reimagined-version-4-0 https://kriesi.at/archives/enfold-reimagined-version-4-0#comments Wed, 01 Mar 2017 10:59:24 +0000 https://kriesi.at/?p=3397 If Enfold were a new theme and we were to release it in 2017, that’s probably what it would look like

Everything in this release was geared toward the question: If we would release a new theme today, how would it look like and how would it behave? More detailed:

  • Would we build the site with a frontend editor or still use a backend editor?
  • How would it look like?
  • Would we need another slew of elements for the builder or are we fine with what we got?
  • What about the design of existing elements?
  • Which demos would we need?

First of all, I think a lot of the decisions and assumptions on how a theme should work that we made back when we built Enfold are still valid. And I think a lot of our customers agree with us, since Enfold is still the best rated top seller on Themeforest with an astonishing rating of 4.85 out of 5. If you think about it, thats quite insane. Our rating gets worse if someone rates the theme with 4 stars; yet 4 stars is already considered an excellent rating :)

But there are always things to improve so here here are a few explanations, thoughts and conclusions for those questions above, and what we plan to do in the future:

#1) The Editor

These days one of the core experiences to improve is the way a website gets built. So the first question we asked ourselves was if a frontend editor should replace (or be added) to the backend advanced layout editor that we currently use.

There are a lot of merits for that argument, and the most noticeable one was that you can see how an element looks like while you are editing it. This is especially beneficial if you take new users into account, who have little or no idea how a certain element will look like if they change an option or setting.

On the other hand, we consider lay-outing a site with front-end editors a pain. We have not seen an approach by anyone yet which works as fine as the visual dumbed down version of a backend editor. Even with several prototypes built by ourselves, there was no way we could reproduce the super simple and clear process of building a layout in your backend.

So we decided to marry the best features of both worlds and heavily improved our backend editor with a lot more visual cues for layout elements like sections, grids and columns (which now display their backend color, their id, their background image and more…)

More importantly we also added a live preview window to most of the content elements, which allows us to show to users how their changes visually affect an element without the need to switch to the frontend.

I built the whole Enfold 2017 Demo with these features already implemented and really loved the experience, so I am very curious about your feedback :)

#2) Design and availability of layout builder elements

In general we don’t think that there are a lot of elements that would be totally necessary to add to the theme. We already got about 70 different ones (also counting the ones that are only activated when plugins like WooCommerce are active) and our demos show that you can build pretty much everything you can think off.

BUT: every now and then we encounter something nice on other websites or get feature requests that make total sense at the time and then decide to add that element. I still like that approach and I think we will keep doing that in the future. This was also the case with the latest element that got added, the tab section.

Customers have requested a tab element that can take full advantage of the layout builder for a while now, but since it required a lot of rewriting of the way the builder works in the backend, we postponed it time and time again. However with the latest release and with the extensive rewrites to the layout builder that we already did, the time for this element has finally come :)

In addition to that, now that we got a visual preview for content elements, its also a lot easier for us to add more design options without overwhelming newer customers. The first few elements that received more styles to chose from are the progress bar, the testimonial element and the icon box but others will soon follow.

We also tried to streamline a lot of the design elements on our pages among all elements (e.g.: the loader that is visible once you click a light-box image, a portfolio Ajax item, a masonry load more button etc. was modernized and streamlined across all elements and also improved for retina display)

This is the way we intend to go forward in the future as well. Be careful with adding new elements, be careful with adding new theme options that don’t offer visual feedback, but try to add more options for elements that work with the preview window; and on top of that make sure that all of this stuff fits together well and then pack it into new amazing demos. Speaking of demos…

#3) The Main Demo

Another question to be asked when you release a new theme: How should the main demo look like?

We still like the Classic Enfold Demo that was released 4 years ago, but there are certain elements and design choices that look a little dated by now. They are still beloved by a lot of users, thats why we did not simply change existing elements, but as mentioned above, added additional style now that we got the preview window.

But in order to take full advantage of all the stuff that we built during the last 4 years we decided that we need a new main demo. This always takes a lot of effort, since other than the usual niche demo which seldom has more than 5-10 pages, these full feature demos have several hundred individual pages. We are really happy with the outcome and hope you like it as well!

The old main demo will of course still stay online and be available for demo import in the future.

And whats next?

Next thing on our agenda is to improve all the elements that could benefit from an overhaul on mobile devices. We have snuck a few things into this release already but will try to heavily improve the mobile experience with the next one. Feel free to leave any suggestions in the comment section of this post.

Last but not least we got the usual change log with a list of bug fixes and improvements.

Here are the most important changes.

 

]]>
https://kriesi.at/archives/enfold-reimagined-version-4-0/feed 31
Enfold 3.8: Medical + Creative Studio Demo, new menu options, new backend, slanted sections https://kriesi.at/archives/enfold-3-8-medical-creative-studio-demo-new-menu-options-new-backend-slanted-sections https://kriesi.at/archives/enfold-3-8-medical-creative-studio-demo-new-menu-options-new-backend-slanted-sections#comments Mon, 12 Sep 2016 13:24:08 +0000 https://kriesi.at/?p=3375 Enfold 3.8 comes with 2 new gorgeous demos, new features and improved backend usability

After our recent “no-thrills” Bugfix release it was time to add some new demos and features once again. This time we got 2 new demos. One of them – the Medical Demo – shows how you can achieve a unique look by applying negative top margins on your columns (which makes them overlap the section before) and a custom icon set.

The Creative Studio Demo is a one page demo that shows the 2 new main features of this release: the slanted section borders and the burger menu.

Some love for the admin area

This time we also put some focus on the backend of the theme. The backend options panel was completely re-designed and is now responsive and retina ready as well. It also received a more modern look that fits better to how WordPress looks nowadays. Colors are more fitting, buttons are larger, text is easier to read, etc

In addition to that we made some improvements to the template builder that should enable you to be even more productive (like cloning of single slides, single tabs, accordion items etc)

Last but not least we got the usual bugfixes, which are a little less this time, thanks to the recent major “bugfix only” release.

Here is the change log with the most important changes:

Changelog:

New demo content:

Added features:

  • added: new modern styling for the theme options backend, which supports retina screens and is also responsive
  • added: new options to the advanced styling generator for “body” and “p” tags
  • added: advanced styling option for the new main menu style (burger menu)
  • added: option to end a section with a slanted border
  • added: option to clone the last element of a group (eg: clone the last single slide of a slider, a catalogue item or an iconlist)
  • added: option to change the Fullscreen Slideshow background to scroll/fix/parallax
  • added: new google fonts
  • added: custom icons for enfold and portfolio item in admin main menu
  • added: more styling options to various advanced styling elements, like slideshow captions, slideshow buttons, buttons, etc
  • added: better google maps api key handling and error messages, as well as update of the documentation on the topic

Bugfixes:

  • fixed: a bug with meta box sorting when on the edit page screen
  • fixed: a bug with the animated countdown element not showing the correct date
  • fixed: a display bug with the animated countdown element on firefox
  • fixed: a display issue with the caption of non linking masonry elements
  • fixed: a positioning issue of the fixed fullwidth menu element when using the “fixed frame” layout option
  • fixed: an issue were long links were truncated in excerpts
  • fixed: an issue with mailchimp world list dropdown menus not displaying
  • fixed: an issue with the headline rotator not displaying correctly when multiline was active
  • fixed: an issue with the menu manager, caused by deprecated menu items
  • fixed: a bug with the display of the WooCommerce product review form
]]>
https://kriesi.at/archives/enfold-3-8-medical-creative-studio-demo-new-menu-options-new-backend-slanted-sections/feed 25