MENU

Adding a browser favicon

This is super simple in WordPress since they’ve added this as a standard option for any theme.

As of May 2019, Google now actually includes the icon next to search results if you have one, and can improve your SEO standing, so it’s important to take this little step.

In WordPress, click Appearance > Customize.

On the next screen, click continue.

Then, click “Site Identity”.

Finally, you’ll see an upload area to upload your site icon image.

WordPress requires the image be square with dimensions of 512 x 512px.

Your new icon will show up in browser tabs, and in google mobile searches.

La Lune® Social Font

Changing the size, color, and style of the font

The font size, color, and spacing can all be set under the La Lune Social font style in your design. To edit those attributes, in the ProPhoto customizer, click: Font Styles in the sidebar, and then look for the two styles we’ve set up. We’ll always go ahead and setup one with a dark color and one with a light color for you to start with. We’ll always name them “La Lune Social” to make it easy for you to find and use.

You can easily edit the size, spacing, and color just like you would any other font in ProPhoto. The below graphic explains all the different options you have when editing the font style.

After clicking the font style to edit it’s settings, there are 4 options to choose from.
– The top tab allows you to change the settings for how the font style looks in general.
– The link tab allows you to change the settings for how the font looks when the font is linked to something.
– The pointer tab allows you to change the settings for how the font link will look when hovered over.
– The active tab allows you to change the settings for how the font link will look when you’ve clicked on the link.

Each one has its own settings for size, line height, color, and spacing.

In your design, the icons will already be placed using a ProPhoto tile and an image module. So when you change settings from above they’ll be reflected in every place we’ve already added the social icons in the design.

Adding new social icons

To add new social icons, you’ll do this under “tiles” in ProPhoto 7. To start, in ProPhoto click “Elements” then “Tiles” in the customizer.

In the tiles screen, you can scroll down in the sidebar and select which social icons you want to play with. We’ve already set them up for you, so really the only reason to edit these is to make a copy of an existing social media tile, and change it to a new one you want to add.

To do that, simply hover over the one you want, and click the copy icon.

Once you copy the tile, it’s easy to edit it. Make sure to change the tile name first, then simply scroll down in the text layer and type the letter of the social icon you want. If we have it, it will display as a social icon.

Icons are case sensitive when you type them in. So Capital F and lowercase f might be two different icons. No need to type out the whole social icon name. Just the first letter it starts with.

See our release notes below for which icons we’ve added.

Placing new social icons in your design

To place the new icon tiles you’ve made in the previous step, you can click into any module that we added to your design to edit it. To do that, simply find where we’ve added the social icons in your design, hover over the image module and click the settings icon.


You might find the social icons placed in various parts of your site, you’ll need to edit them in all the places for them to be consistent. In most designs we place them in the footer, or in the sidebar if there is one on the blog. We might also place them in your mobile menu.

In the settings screen for the image module, you can delete an icon by simply hovering over the tab and pressing the delete icon.

You can edit the tile’s link, and change out the tile for a different one by clicking each of the image tabs.

Finally, you can also click the “add graphic” button to add a new tile to the existing ones.

Release Notes

Dates indicate when the update was released publicly.

Version 0.2 (Beta) – 3.19.2020

  • Added Shopping Cart Icon (Capital Letter)
  • Added Alternate Shopping Cart Icon (Lowercase Letter)

Version 0.1 (Beta) – 7.18.19

  • Added Facebook Icon (Capital Letter)
  • Added Twitter Icon (Capital Letter)
  • Added Pinterest Icon (Capital Letter)
  • Added Instagram Icon (Capital Letter)
  • Added Mail Icon (Capital Letter)
  • Added Youtube Icon (Lowercase Letter)
  • Added Vimeo Icon (Lowercase Letter)

ProPhoto WooCommerce Setup

Assigning Layouts

Some of our designs include WooCommerce layouts. When you install WooCommerce to WordPress, it should have generated a bunch of standard WC required WordPress pages like:

Shop
Cart
Checkout
Account
Terms & Conditions

In our design, we’ve created layouts for each of those pages that need to be assigned to these pages to work correctly and for you to be able to customize them.

Once you’ve assigned the layouts to their pages (see the below layout assignments for Lumina) you can customize them as you normally would in ProPhoto.

You’ll notice that the “Shop” layout includes assignments to all Product and WC pages as well as the general “shop” page.

WooCommerce Layouts Require at least one WordPress module in them to work. The layous we’ve created in the design already have all this setup for you as blocks. So if you wanted to create a new page, you would simply copy an existing layout (like shop) and customize the copied layout.

Customizing WooCommerce Buttons

Since there’s no way to customize the basic WC buttons, etc in WC or in ProPhoto we’ve added some custom CSS to match the design. To access it, in the shop or any of the other WC layouts, you can hover over the top of the layout and click the settings icon in gray.

There, when the layout popup comes up, SCROLL DOWN to the bottom of the popup to access the CSS area.

We’ve labeled all the CSS to make it easy to understand what we did to customize it.

You can find all the CSS below.

/*WC - Add to Cart Button Color and Size*/
.woocommerce div.product form.cart .button {
  background-color: #975030;
  color: #fff;
 padding: 17px;
}

/*WC - Checkout thumbnail size*/
.woocommerce-cart table.cart img {width: 160px;}

/*WC - Coupon Button Padding*/
.woocommerce .cart .button {padding: 12px;}

/*WC - Add to Cart Button Color On Hover*/
.woocommerce div.product form.cart .button:hover{
  background-color: #444;
  color: #fff;
}

/*WC - Button Colors When Added To Cart*/
.woocommerce .product .add_to_cart_button.button {
     background-color: #975030;
    color: #fff;
}

.woocommerce .product .add_to_cart_button.button:hover {
    background-color: #444;
    color: #fff;
}

/* WC - Money text color and size */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
color: #975030;
font-size: 1.2em;
}

/* WC - On Sale Icon Background Color*/
.woocommerce span.onsale {
background-color:#975030;
padding: 0px;
}

/* WC - Remove Default Results On Shop*/
.woocommerce-result-count,
.woocommerce-ordering {display: none;}

/*WC - Overall  Button Colors*/
.woocommerce button.button, .woocommerce a.button.alt, .woocommerce button.button.alt {
background-color: #975030;
color: #fff;
}

/*WC - Overall Button Colors On Hover*/
.woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
background-color: #444; 
color: #fff;
}

/*WC - Account Sidebar Color and Spacing*/
.woocommerce-account .woocommerce-MyAccount-navigation {
background-color: #F2EDEA;
padding: 15px;
}

/*WC - Field Margins*/
fieldset {margin-bottom: 10px;}

/*WC - Inputs*/
input {padding: 10px;}

If you wanted to change the colors, all you need to do is add your own hexcode in place of the ones in the css. A color hex code looks like this: #F2EDEA; it can also look like this if it’s in shorthand: #fff; or #444;.

Shorthand hex codes can only be added when all 6 of the color code is the same. For instance #fff is white and #000 is black.

WooCommerce Design Settings

You can also change the various design settings in WooCommerce by going into your WordPress dashboard and clicking “Appearance” and “Customize”.

Click “continue” when the notice pops up.

After clicking continue, click “WooCommerce” to bring up all the WC customization options.

Under these settings you can change any of the settings under all the tabs and they’ll work in ProPhoto. The “store notice” tab and settings do not currently work in ProPhoto, which is why we’ve added a store notice as part of your layout in ProPhoto instead.

For Lumina, we did change all the settings in all 3 tabs, but the important one to make sure the images look right is the product images tab. Here are the settings we used in the design below.

Turning off comments/reviews

You may have noticed that comments are enabled on products. In WC those are considered to be “reviews” not comments.

To change this setting, go in your WordPress dashboard, click “settings” > “products” and then “general”.

At the bottom there will be an option to enable/disable reviews. This turns off “comments” for all products.

If this option is enabled, the option will also show up on an individual product to turn on/off as well.

Adding a Subscribe Button

In some of our designs for WordPress and Showit we have a “dummy” subscribe form or button that’s a simple jpg. If you’d like to add your own email newsletter subscription form there are a lot of options to choose from.

Start by creating your own newsletter first at one of the sites of your choice.

FloDesk
Mailchimp
ActiveCampaign
MailerLite

We recommend Flodesk for it’s easier to use platform and affordable prices. You’ll have to learn how to use those apps and sites yourself, but below we’ll show you how to implement your own form into the site.

Once you’ve created your newsletter, you’ll be able to use an embed option to add to your own website.

The code will usually look something like this:

<div id="fd-form-5d9e40a93d578d000fe32ca2"></div>
<script>
  window.fd('form', {
    formId: '05ad9320refdsafdsadummyid',
    containerEl: document.querySelector('#fd-form-05ad9320refdsafdsadummyid')
  });
</script>

Adding a custom widget

To add the code to your site, first go log into your WordPress Dashboard, and click: Appearance > Widgets then click the tab that says “custom html“.

Next, after clicking the tab, be sure that “ProPhoto Widgets” is checked, and click “add widget” when you’re done. You can also simply drag and drop any widget over to the ProPhoto widgets dropdown on the right instead.

Next, it will auto scroll and open the widget you’ve added in place. Simply copy the code in from your favorite newsletter service and click save.

The next step is to add your widget into your ProPhoto template. To do that, go into ProPhoto > Customize in ProPhoto. Then, go to the layout you want to add your new newsletter form to.

When you’re ready, click the “elements” tab in the ProPhoto sidebar, and drag and drop a “widget” module anywhere into the layout.

Next, hover over the widget module you added, and click the settings icon and then click the “widget settings” tab.

There, you can assign the widget in the dropdown to the module.

That was the final step! Save your layout, and then view the layout on the front end to see it.

NOTE* ProPhoto will only show widgets on the front of your site, not in the backend.

The Form Design

The design of your form is usually done through the newsletter service you chose, but you can also alternatively use some CSS to customize them as well. You can add the custom css in the column that your module has been added to.

Header Code

Some services may require you to add some code to the “head” of your website. No problem!

In ProPhoto, click “settings“.

Next, click the “advanced” tab. Then click the “custom code” tab.

Paste your code into the “insert into header area” box and click save.

Image Optimization

There are many ways to optimize images for the web. Below, you’ll find a few methods you can use to further optimize your images before uploading. You should ALWAYS optimize your images for page loading.

TinyPNG

Over the years we’ve tried a few apps to help us optimize images, but TinyPNG’s photoshop plugin is really the best at what it does. It optimizes file sizes while keeping the same sharp image you’d expect. We’ve found file sizes get reduced more than others and still keeps the same image quality. It also works for JPEGS and PNG’s both are standard web image formats.

Short Pixel

Shortpixel is one of the new kids on the block in terms of popularity. It seems to have one of the highest optimization reduction rates while also keeping the same great quality with your images. The best thing is that it does it all on its own once installed. This plugin is a premium plugin and requires WordPress. You’ll likely get better results with a dedicated plugin like this one to do the job, but this one is only for image optimization on its own.

Image Sizing

At La Lune we use a standard image sizing for most things in our designs and in ProPhoto in general. Including blog posts. Each design is different and some designs have some odd sized images for header slideshows specifically made for that design, but in general these are the sizes we use.

Horizontals
2000 (w) x 1333 (h) @72dpi
JPEG Quality set to 6-7 In Photoshop or 50-70% in Lightroom.

Verticals
1200 (h) x 800(w) @72dpi
JPEG Quality set to 6-7 In Photoshop or 50-70% in Lightroom.

Image Ratios

Keeping the same image sizes across all your galleries ensures that your galleries load smoothly and efficiently. If you are uploading images with a ton of different image sizes and using anything but a “tiled” gallery, then it’s likely your gallery will be resizing oddly every time it loads an image with different height or width. This may cause the gallery to show unexpected spacing or not fit in certain areas of the design correctly, or worse, may try to squish or stretch the image to fit.

We highly encourage you to use standard ratios when cropping and be consistent with those ratios. We use a 2:3 / 3:2 ratio on galleries 99% of the time.

For non-galleries, we may use other ratios, but it’s rare. Usually, we’ll only do a 1:1 ratio for images in the design we want to be square.

Standard Crop Ratios are as follows:
1:1 (Square)
2:3 (4 x 6)
5:7 (5 x 7)
4:5 (8 x 10)

DPI

Standard web DPI or dots per inch is 72dpi. Saving at this lower resolution makes it so that if someone steals your image from your site and try to print it, it’s not going to look very good. If you’re uploading images at 300dpi, then if someone were to steal the image from your site, they can get a pretty decent print out of it at smaller sizes.

DPI doesn’t affect load times. So regardless of whether you save at 72 or 300, the file size shouldn’t change.

WordPress 5+

In WordPress 5 they introduced a brand new post block editor. There’s one really important step to note if your images aren’t looking sharp when you upload them.

After uploading your image to the post, and clicking it once to bring up the image options in the sidebar, make sure you select the “full size” option from the image size dropdown. This ensures that the image isn’t losing any quality because WordPress is trying to reduce the file size down in the post.

Table of Contents

Still can't find what you're looking for?