If you are using the free version of Elementor with the Hello theme you will quickly realise the layout of your header and footer is extremely limited. This is where switching to another theme will be an advantage. Astra is a good choice as is Blocksy. Both allow much better control of the appearance of the header and footer. Both also have a reasonably good mobile menu – certainly better than the Hello one which can only be described as “poor”.
Where Blocksy excels is with layout of posts or custom post types in that it provides multiple ways of styling the layout of the list and the single posts. Crucially it can style any custom post type which makes it a very good choice of theme.
But the next drawback you are going to hit is the choice of fonts. Blocksy has a very short list of system fonts to choose from, all pretty boring. Blocksy will offer you the ability to add Google Fonts but you have to upgrade to Blocksy Pro and add an extension to store the Google fonts locally. But at $69 per annum I don’t think this is the way to go if custom fonts is all you want.
In fact, there is an easy work around to load custom fonts locally for free. This article explains how to do it. You will need a plugin to use Code Snippets (I use WP Code Lite). Interestingly although the article explains the method for Blocksy it should work with any theme including Hello. [The method used to upload the font files to a custom directory in the uploads folder is exactly the same method that Elementor uses to load Google fonts locally in the Pro version.]
An important point is that you should use the wp_enqueue_scripts function to add the css file to load the fonts. If you use the <link rel=”stylesheet” …> method then the font you loaded won’t be available in the theme. I will add that you should leave the font family set as default in both Blocksy and Elementor. The custom font is assigned by way of the HTML tag so for example as soon as you assign a heading to H1 then the custom font is applied. You will find the theme has a long list of HTML tags it assigns the font-family to and you need to override this list in the Additional CSS of the theme.
body, h1, h2, h3 etc {
font-family: ‘Open Sans’;
}
Control other attributes of heading and text styles in Elementor’s Global Fonts like the font size, font-weight and line spacing.
Rather than upgrading to a paid theme, I believe it is better to invest in Elementor Pro Essentials at $59 per annum because it can give you many more features and keep layout control in one place.
Elementor Pro Essentials provides full control of the Header and Footer layout. It also comes with the Loop Grid so you can control the layout of your posts and custom post types. That means you can switch to the very basic Hello theme since Essentials is providing all the functionality that Blocksy provided. Essentials also provides custom font capabilities as well as the built-in option to host Google fonts locally.
Perhaps the next hurdle you may hit with Essentials is the lack of support of custom post types (CPT) within Dynamic Data. For example you may want to display a CPT field in the loop grid. The work around is to use a shortcode instead. The CPT plugin I use is PODS and to add a field like “cost” I just need to add this shortcode . If you want to style it, even if only to make it bold, put the shortcode into a Text widget rather than the shortcode widget and then format to your liking.