Custom image dimensions for each eCatholic theme

You can easily upload your own images to your eCatholic website to customize your design.

This article provides:

  1. A breakdown of each area of your site that can be customized with images.
  2. The specific dimensions at which you should upload your images to get the best results.

IN THIS ARTICLE:

  1. Homepage feature region dimensions
  2. Page image dimensions
  3. Custom logo dimensions
  4. Custom logo with site name dimensions
  5. Button dimensions
  6. Thumbnail dimensions

*All dimensions are listed in pixels.

1

Homepage feature region dimensions

Your website can have a Standard, WideFull, or Full Video homepage feature region format. Look in the Design Studio to identify the homepage feature region format currently in use on your site.

Standard: 650 x 325 pixels

The Standard homepage feature region format (illustrated below, Milan theme) is 650 x 325 pixels.

Themes with Standard feature region: Antioch, Milan, Guadalupe, Carmel, Siena, Traditions 2.0, Avila, Assisi, Lisieux, Hippo, Summit, Base

Wide: 975 x 325 pixels

The Wide homepage feature region format (illustrated below, Krakow theme) is 975 x 325 pixels.

Themes with Wide feature region: Krakow, Antioch, Chamblanc, Milan, Padua, Clairvaux, Guadalupe, Siena, Traditions 2.0, Molokai, Avila, Assisi, Lisieux, Hippo, Cupertino, Base

Full: 1920 x 480 pixels

The Full homepage feature region format (illustrated below, Porres theme) is 1920 x 480 pixels (a 4:1 aspect ratio).

Themes with Full feature region: Verona, Loyola, Krakow, Porres, Sebastian, Xavier, Bethany, Padua, Molokai, Assisi, Base

Full Video: 1440 x 810 pixels

The Full Video homepage feature region format (illustrated below, Lourdes theme) is 1440 x 810 pixels (a 16:9 aspect ratio).

Themes with Full Video feature region: Lorenzo, Verona, Loyola, Santiago, Lourdes
2

Page image dimensions

Some eCatholic themes allow you to  add a page image (illustrated below) at the top of any interior page (i.e., any page except the homepage). Look in the Design Studio to identify the theme currently in use on your site. Then, use the list below to learn your specific page image dimensions.

  • Lorenzo: 1920 x 350
  • Verona: 1920 x 312
  • Loyola: 1920 x 336
  • Lourdes: 1920 x 505
  • Santiago: 1920 x 442
  • Krakow: 1920 x 300
  • Porres: 1920 x 380
  • Antioch: 975 x 272
  • Sebastian: 1200 x 222
  • Xavier: 1440 x 200
  • Chamblanc: 975 x 205
  • Milan: 1440 x 1100
  • Bethany: 1440 x 200
  • Padua: 1680 x 200
  • Clairvaux: 975 x 212
  • Guadalupe: 642 x 214
  • Carmel: 698 x 225
  • Siena: 1475 x 700
  • Traditions 2.0: 975 x 225
  • Molokai: Page image not available
  • Avila: 2000 x 267
  • Assisi: Page image not available
  • Lisieux: Page image not available
  • Hippo: Page image not available
  • Cupertino: 975 x 325
  • Summit: 2000 x 244
  • Base: 975 x 225

Identifying your site's theme

Not sure which theme your website is using? Log in and click Design Studio in the blue Admin Toolbar at the top of the interface, then click Change Theme. Your site's published theme will be marked with the green Published badge (pictured below).

3

Custom logo dimensions

You can edit your site's Header Settings to display a custom logo (illustrated below). With this option, you may upload an image that acts as your Site Title. To do this, open the Header Settings dialog and make sure Logo is selected. Then, use the list below to learn the specific dimensions at which you should upload your logo.

Maximum logo resolution

To display your custom logo at maximum resolution, use the Recommended image dimensions column to identify the optimal dimensions at which you should upload your custom logo file.

Note that your custom logo will actually display at a smaller size than what is uploaded. The values listed in the Logo size displayed on site column are the size at which your logo will actually display on your website.

Essentially, it is recommended that you upload an image that is twice the size of the actual logo region. This means twice the amount of pixels will be packed into that region, allowing your logo to display at a crisp, high resolution.

Theme Recommended image dimensions Logo size displayed on site
Lorenzo 720 x 166 360 x 83
Verona 950 x 180 475 x 90
Loyola 840 x 86 420 x 43
Lourdes 500 x 200 250 x 100
Santiago 1100 x 318 550 x 159
Krakow 900 x 190 450 x 95
Porres 1100 x 242 550 x 121
Antioch Custom logo not available Custom logo not available
Sebastian 716 x 160 358 x 80
Xavier 630 x 180 315 x 90
Chamblanc 784 x 164 392 x 82
Milan 1300 x 180 650 x 90
Bethany 1120 x 210 560 x 105
Padua 1760 x 230 880 x 115
Clairvaux 520 x 76 260 x 38
Guadalupe 1950 x 272 975 x 136
Carmel 576 x 260
288 x 130
Siena 1120 x 300
560 x 150
Traditions 2.0 1040 x 224 520 x 112
Molokai 800 x 220 400 x 110
Avila Custom logo not available Custom logo not available
Assisi Custom logo not available Custom logo not available
Lisieux 1190 x 240 545 x 120
Hippo 1080 x 120 540 x 60
Cupertino 600 x 310 300 x 155
Summit 940 x 250 470 x 125
Base 1120 x 300 560 x 150
4

Custom logo with site name dimensions

You can also edit your site's Header Settings to display a custom logo next to your Site Name (illustrated below). To do this, open the Header Settings dialog and select Both so that both a custom logo and site name appear in your Site Title. (If your theme does not display Both as an option, make sure Logo is set to On.) Then, use the list below to learn the specific dimensions at which you should upload your logo.

Maximum logo resolution

To display your custom logo at maximum resolution, use the Recommended image dimensions column to identify the optimal dimensions at which you should upload your custom logo file.

Note that your custom logo will actually display at a smaller size than what is uploaded. The values listed in the Logo size displayed on site column are the size at which your logo will actually display on your website.

Essentially, it is recommended that you upload an image that is twice the size of the actual logo region. This means twice the amount of pixels will be packed into that region, allowing your logo to display at a crisp, high resolution.

Theme Recommended image dimensions Logo size displayed on site
Lorenzo 132 x 166 66 x 83
Verona Custom logo with site name not available Custom logo with site name not available
Loyola Custom logo with site name not available Custom logo with site name not available
Lourdes Custom logo with site name not available Custom logo with site name not available
Santiago 318 x 318 159 x 159
Krakow 250 x 190 125 x 95
Porres 240 x 242 120 x 121
Antioch 144 x 144 72 x 72
Sebastian 160 x 160 80 x 80
Xavier Custom logo with site name not available Custom logo with site name not available
Chamblanc 164 x 164 82 x 82
Milan Custom logo with site name not available Custom logo with site name not available
Bethany 210 x 210 105 x 105
Padua Custom logo with site name not available Custom logo with site name not available
Clairvaux 100 x 76 50 x 38
Guadalupe Custom logo with site name not available Custom logo with site name not available
Carmel 576 x 150 
288 x 75
Siena 300 x 300
150 x 150   
Traditions 2.0 224 x 224 112 x 112
Molokai 220 x 220 110 x 110
Avila Custom logo not available Custom logo with site name not available
Assisi 140 x 220 70 x 110
Lisieux 240 x 240 120 x 120
Hippo 120 x 120 60 x 60
Cupertino Custom logo with site name not available Custom logo with site name not available
Summit 250 x 250 125 x 125
Base 300 x 300 150 x 150
5

Button dimensions

With most free themes, you can use the Buttons module to create buttons with customized images in many free themes. The table below lists the specific button dimensions for each theme and layout.

NOTE: In some free themes, you can effectively split one button into two by setting the Number of Buttons value to 2 in the Button Settings dialog. The values in parenthesis in the table below identify the height of buttons when the Number of Buttons value is 2 (i.e., when one button is split into two).
Theme 3-button layout 4-button layout
Lorenzo 279 x 279 372 x 279
Verona 292 x 146 217 x 146
Loyola 324 x 189 238 x 189
Lourdes 321 x 265 229 x 184
Santiago Layout not available 255 x 185
Krakow Layout not available Custom images not available
Porres 308 x 200 Layout not available
Antioch 300 x 200 (81) Layout not available
Sebastian 276 x 170 193 x 170
Xavier 289 x 124 (39) 205 x 124 (39)
Chamblanc 313 x 180 (80) Layout not available
Milan 308 x 200 (88) Layout not available
Bethany 297 x 212 (157) 213 x 212 (157)
Padua 308 x 200 (88) 225 x 200 (88)
Clairvaux 287 x 196 (84) 208 x 196 (84)
Guadalupe 301 x 196 (80) 217 x 196 (80)
Carmel Layout not available
Layout not available
Siena Layout not available
Layout not available
Traditions 2.0 294 x 163 (70) 214 x 163 (70)
Molokai 267 x 196 (76) 209 x 196 (76)
Avila 304 x 196 (84) 221 x 196 (84)
Assisi 307 x 196 (86) 224 x 196 (86)
Lisieux 294 x 166 (69) 213 x 166 (69)
Hippo 287 x 146 (59) 208 x 146 (59)
Cupertino 294 x 146 (59) 213 x 146 (59)
Summit 305 x 150 (60) Layout not available
Base 304 x 196 (84) 221 x 196 (84)
6

Thumbnail dimensions

Dimensions for the following items are identical in all free themes, with a few noted exceptions:

  • Thumbnail image for News Module: 128 x 128
  • Thumbnail image for Events Module: 128 x 128
  • Thumbnail image for Photo Albums Module: 128 x 128
  • Thumbnail image for People Module: 128 x 128

Loyola Theme: News & Event Thumbnail dimensions

When using the Loyola theme, thumbnails for News and Events modules will display at 154 x 154 pixels.

Still need help? Contact Us Contact Us