LIMITED OFFER  Get the All Themes Package [31 Themes] for only $99 View Details →

Foodica – Recommended Image Sizes & Optimizations

Written by Pavel Ciorici on in 0 comments

Jump to:

  1. Recommended Image Sizes
  2. Image Sizes in different locations in Foodica
  3. How to change the Aspect Ratio of Thumbnails
  4. Recipe Image
  5. Recommended Plugins for Image Optimization

Just migrated to Foodica from a different theme? We highly recommend regenerating thumbnails. This process will ensure all your images are cropped at the right size.

Recommended Image Sizes

Featured Images should always be uploaded at 1200x1200px. For better quality on devices with retina display, you can try a larger size like 1500x1500px or 2000x2000px

You don’t have to crop your images to this exact size, but simply make sure that both dimensions have at least 1200px. For example, a portrait-oriented image can be 1200x2000px.

Image Sizes in different locations in Foodica theme:

Homepage Slider: 750x500px (retina: 1500x1000px)
Homepage Slider (transparent style): 1140x500px (retina: 2280x1000px)

Post thumbnail (landscape): 360x240px (retina: 720x480px)
Post thumbnail (portrait): 360x540px (retina: 720x1080px)

Single Post Image at the top: 750x500px (same as Homepage Slider)

How to change the Aspect Ratio of Thumbnails

Do you want to change the cropping area of a specific image size? Check out this article: How to set how a Thumbnail is Cropped

The Aspect Ratio of your thumbnails and other images can be changed from the Theme Options:

If your website displays your latest blog posts on the front page, you can change the aspect ratio in the Homepage Posts section from Theme Options.

Similar options are available for thumbnails on the Category and Recipe Index pages.

If you want to prevent your Featured Image at the top in single posts to not being cropped, you can enable the following option:

Just don’t forget to regenerate thumbnails if you are not seeing any difference.

If you’re using Elementor to create the front page, the Image Size for posts can be changed in the settings of the Posts Grid widget:

Recipe Card Image

If you’re using a recipe plugin like our Recipe Card Blocks or a different one, it’s crucial to keep in mind that your featured image and recipe card image are shown in different locations in search results.

The recipe card image appears in the recipe carousel from Google or a different search provider:

The featured image appears in other locations, like in regular search results or as a preview when you share the link on social networks:

Having troubles with the Featured Image not shown when sharing on Facebook or Twitter? Check out this article: How to fix incorrect Facebook thumbnails.

Recommended Plugins for Image Optimization

We highly recommend you apply the following optimizations to your images:

Lazy Load Images
This is something that can be enabled using one of the following plugins:
WP Rocket
Lazy Load Images
Jetpack (Site Accelerator feature) – view details

WebP images

Using a plugin like Imagify you can both increase your website’s speed by optimizing images and reducing their file size and also serve them in modern image format called WebP.

TinyPNG is also a great tool available for free on which you can optimize your images before uploading them to WordPress. There is a WordPress plugin available as well.

Foodica – Classic Layout vs. Elementor

Written by Pavel Ciorici on in 0 comments

On the Quick Start page you will notice that there are 2 demo content options:

In the Classic option, the layout of the front page is a fixed one, like in most blogging themes for WordPress. The slider will be displayed automatically at the top, followed by a few widgets areas and a section showing your most recent posts. While this is an easy and quick way to set up the theme as in the demo, you might find it challenging to alter the layout if you’d like to change the position of specific elements or add new sections.

In the Elementor demo, the homepage can be easily edited and customized using the Elementor page builder. This option gives you a lot of control over sections and opens a path on adding custom sections and more.

You can also skip the demo content importer step and manually import the homepage layout using Elementor.

Foodica – Recipe Index Page (Elementor)

Written by Pavel Ciorici on in 0 comments

If you’re looking for more control over your Recipe Index, we recommend creating it using Elementor, and then you will be able to customize each section as you want.

Instructions for creating the Recipe Index page using Elementor are similar to the ones for creating the front page.

Assuming that both Elementor and Elementor Addons by WPZOOM plugins are installed on your website, simply create a new page and import the Recipe Index template:

Each section can be customized or duplicated. In the “Query” section of the Posts Grid widget, you can configure what posts are displayed.

Right-click on a section to find the option to Duplicate it:

Don’t forget to add links to your categories for each button:

Foodica – Setting up the Homepage using Elementor

Written by Pavel Ciorici on in 0 comments

Finally, starting with Foodica 3.1.0, you can easily edit the front page using Elementor. This means that you get complete control over what sections are included and their position.

The Classic layout in Foodica is a great way to get started in no time, as it automatically displays the slider and the most recent posts. However, being able to customize the front page using Elementor will take your website to the next level.

Below we’ll explain how to set up your front page using Elementor.

1. Create the front page & choose the right Page Template

The theme includes several Page Templates to create pages, but we recommend you to use the following one:

Full-width Page (Page Builder)

Here are some advantages why you should use a Page Builder to create your homepage:

– A page builder gives you more control and flexibility: full-width sections, image, and video backgrounds;
– Custom sections with different number of columns;
– Easily adjust design options of each section, column, or widget individually: margin, padding, fonts, etc.
– Advanced tools like Import/Export, templates, etc.

Now that the differences are known to you let’s proceed to the first step.

First, create a new page or edit an existing page (e.g. your current static page) and make sure to select the right Page Template:

2. Assign the new page as your Front Page

Once you’ve published or edited the page you want to use as your front page, go to Settings > Reading page and select your page in the option: “A static page > Homepage“:

3. Start building with Elementor!

Now that the right page with the correct template is assigned as your front page, you can import the homepage layout.

The Slideshow at the top is a part of the theme, so the content can’t be edited or added using Elementor.

In this article, you can find out how to display specific posts in the slider.

If you selected to build your homepage using the Page Builder, go back to edit that page, and click on the blue button “Edit with Elementor“:

If you don’t see this button available, the Elementor plugin is probably not installed or active on your website.

If you haven’t loaded the theme’s demo content and want to start building your website from scratch, importing a layout would be one of the starting points.

Click on the blue W icon (WPZOOM Library) in Elementor to load the homepage template.

If you don’t see this icon, please install the Elementor Addons by WPZOOM plugin.

Choose the homepage template and click on the Insert Template button.

If you’re new to the Elementor page builder, this Getting Started guide could be of help.

Foodica – Activating License Key

Written by Pavel Ciorici on in 0 comments

After purchasing and installing the Foodica theme, you will receive a license key which can be found on the Licenses page.

Copy the License Key, then add it to the WPZOOM > Theme License + Quick Start > License tab.