Zooey WordPress Theme User Manual

FAQ & Tips

1. How to use a page builder
2. Why are uploaded images blurry or small
3. How to modify element appearance
4. SEO - Search Engine Optimization
5. How to speed up a website
6. How to add custom CSS
7. How to set up custom fonts
8. How to remove gap between sections/elements
9. How to set decorative image
10. How to set sticky header
11. How to set progress bar value (width)
12. Block spacing "Content padding" value

1. How to use a page builder

   Zooey theme automatically recognizes 2 of the most popular page builders: Beaver Builder and Elementor. However, this only works in hybrid mode, when site editor is disabled.

   If you need to tweak a layout for using a page builder plugin, do so in theme options in Appearance → Customize → Theme Options → Page builders.

   Tip: Page builder with block theme

   If you really need to use a page builder plugin even if full site editing is enabled, and you experience some layout issues, you can create a custom "Page builder" template to use whenever you need to build a page/post content with your page builder plugin.

   ↑ Back to questions list

2. Why are uploaded images blurry or small

   Settings → Media → "Recommended image sizes" info

   The theme requires certain minimal image dimensions for optimal display. Info about recommended image size setup can be found at Settings → Media.

   Video: Setting up recommended image sizes

   Tip: Regenerate images

   Once you set correct image sizes, all your newly uploaded images will get processed with new settings. But for the images already uploaded to your website you need to use additional plugin to refresh their sizes. Regenerate Thumbnails plugin (or similar) will do the trick.

   Video: How to regenerate thumbnails

   Tip: File size optimization

   It is recommended to use an image optimization plugin to keep the file size of images uploaded to your server under control.

   ↑ Back to questions list

3. How to modify element appearance

   This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in a page builder, or however you find useful. These classes modify appearance of your website elements and blocks.

   For full up-to-date list of the helper modifier CSS classes and instructions on how to use them refer to theme demo website.

   

   Video: Using CSS classes in block editor.

   ↑ Back to questions list

4. SEO - Search Engine Optimization

   This theme is coded semantically, with the best SEO practices in mind.

   You can push your SEO performance even further with help of additional plugins such as Yoast SEO. You can also integrate support for microformats.

   Video: Free video course about basic WordPress SEO.

   ↑ Back to questions list

5. How to speed up a website

   Having a performant website is a must. It makes your website more SEO friendly and most importantly pleasing for your visitors, more accessible. This theme was coded with performance in mind but we can always take things even further:

   Use a good host

   A good hosting for your website is very important choice you can make towards a speedy website. Depending on your location it is also advised to use a host that has servers in your country or at least on the same continent.

   Check out Siteground (a very good personal experience), or have a look at WordPress hosting recommendation page.

   Optimize your images, video and audio files

   You should always keep the file size of your website media as low as possible. Prepare images before you upload them to your website: compress them, reduce their dimensions, maybe even crop them. Use plugins to optimize further more.

   In case of video and audio files set the optimal compression and formats before uploading them to your site. Consider also using services such as Vimeo, YouTube or SoundCloud to host your files off your servers.

   Also consider using a CDN service.

   Enable caching

   A basic browser caching and GZIP compression is a must!

   But you will get better results using a dedicated solutions such as WP Rocket or WP Super Cache or SiteGround Optimizer. Or maybe your hosting provider applies some sort of caching already? Check with them.

   Warning: Minify & combine

   Your caching solution may provide CSS and JS files minification and combination. Be cautious though: these are complex processes which may cause errors on your website. Test thoroughly!

   Tip: Measure performance

   For measuring your website performance and tips on how to improve it use services such as GTmetrix, Pingdom Tools and WebPageTest.

   ↑ Back to questions list

6. How to add custom CSS

   Appearance → Customize → Additional CSS

   Add your custom CSS code into Appearance → Customize → Additional CSS, or alternatively into your child theme's style.css file.

   You can also tweak theme provided CSS and add your own custom CSS code in "Styles" section of site editor.

   ↑ Back to questions list

7. How to set up custom fonts

   By default, the theme supports any Google Fonts font out of the box. So, if you want to use a font family from Google Fonts, simply set it up in font family option fields in Appearance → Customize → Theme Options → Typography.

   But if you want to use a custom font (a purchased premium font, or font not available at Google Fonts) follow this procedure:

   1. Use a plugin to upload your custom font to your website, such as Custom Fonts plugin. (Or upload it by other means, such as via a child theme or child theme plugin.)

      Tip: Use WordPress fonts library

      When using a block theme, you can upload your custom fonts using WordPress native fonts library.

   2. Disable Appearance → Customize → Theme Options → Typography → "Enable theme Google Fonts loading" option.

   3. Set font family fields in Appearance → Customize → Theme Options → Typography to use your custom font family. (These fields take a value valid for CSS font-family property.)

   ↑ Back to questions list

8. How to remove gap between sections/elements

   The theme applies vertical margin on elements to provide automatic harmonious spacing. Sometimes you may need to remove this gap between rows of columns with a background, for example.

   To remove the gap, null out (set value to zero, 0) vertical margin (usually top margin) of the block in block editor, or element in your page builder.

   Here is how you can set top margin in block editor:

   

   Illustrative image. May not represent this actual theme.

   ↑ Back to questions list

9. How to set decorative image

   The theme displays a decorative image in site header and footer. It is also used in block patterns.

   By default this image is set to theme's "Fingers" dynamic colors SVG image. You can change it to custom image or choose from other theme predefined images (check out theme demo example).

   The image is taken from custom header images.

   

   Alternatively, you can simply change it in template parts where it is used. (As this would be more tedious work, we recommend setting up custom header instead.)

   ↑ Back to questions list

10. How to set sticky header

    If you need to display the site header on top of the browser window (viewport) even when user scrolls the page, try one of these options:

    Set position option on "Header" template part

    Important: Only works in full site editing mode

    This solution only works when Site Editor is enabled so you can edit templates.

    Set "Sticky" position to all "Header" Template Part blocks in templates. This is a tedious task as you need to edit all (most) of the templates.

    

    Illustrative image. May not represent this actual theme.

    Use a plugin

    Use a plugin to set sticky position on elements, such as Sticky Menu & Sticky Header plugin. This option can be very flexible approach providing conditional control over header sticky positioning (depending on the plugin capabilities).

    Tip: Set up the plugin

    For setting up sticky header using a plugin use #masthead in plugin options as (theme default) site header selector.

    Alternatively use browser code inspector to determine the selector for your desired sticky element. Or check your plugin documentation for tips.

    Use custom CSS code

    You can even set the sticky positioning using a custom CSS code, such as:

    #masthead {
    	position: sticky;
    	top: var(--wp-admin--admin-bar--height, 0);
    }

    ↑ Back to questions list

11. How to set progress bar value (width)

    "Progress bar" block pattern consists of multiple nested blocks and it may be difficult to find out how to change the value and width of the progress bar. Here are instructions to do so:

    1. Insert "Progress bar" block pattern into page/post content.

       

       Illustrative image. May not represent this actual theme.

    2. Click on the text value of the progress bar (Paragraph block with 65% text by default) and change the number to desired value.

    3. Then select the parent Row block and in block options change the width to your desired value.

       

       Illustrative image. May not represent this actual theme.

    ↑ Back to questions list

12. Block spacing "Content padding" value

    Zooey theme provides multiple responsive spacing options for blocks (for margin and padding, for example).

    Among these there is a special option of "Content padding" added for setting up intelligent spacing on Content block (when editing templates).

    Once this spacing value is applied as a top padding on the Content block, the first block in the page/post content that is also a fully aligned block will mitigate for this content spacing and sticks to the upper edge of the page/post content, effectively removing the spacing automatically.
    If the block is not fully aligned, the spacing (content padding) is still present.

    

    Illustrative image. May not represent this actual theme.

    The opposite applies for bottom padding and the last block in the page/post content (in Content block).

    Feel free to use this "Content padding" spacing value everywhere it fits your needs. For example, it can be used for keeping vertical spacing between sections consistent in your page/post content. The default height of the "Spacer" block is also set to "Content padding" value.

    ↑ Back to questions list