Audrey - Code Tweaks

This page will be updated over time with small tweaks/customizations that you can make with the Audrey theme.

Front Page 1 Tweaks

Change Front Page 1 heading font size

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 48px value to whatever value you'd prefer.

Modify Front Page 1 Text Positioning

Increase or decrease the amount of padding above the Custom HTML widget in Front Page 1.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 100px value to whatever value you'd prefer.

Modify Front Page 1 Image Height

Increase or decrease the height of the left-aligned image in Front Page 1.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 500px value to whatever value you'd prefer.

Modify Front Page 1 Background & Text Color on Mobile

By default, the text section in Front Page 1 becomes an overlay for the image in Front Page 1. Because it's an overlay, the default background color is semi-transparent white to allow more of the image to be seen. This code snippet will allow you to change the background color and text color on mobile only.

  1. Click here and copy the code. 
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. The first color value (#000000) is the background color. Replace #000000 with your preferred background color.
  4. The second color value (#ffffff) is the text color. Replace #ffffff with your preferred text color.

Other Front Page Tweaks

Modify About Section Box Positioning

Increase or decrease the amount of space above the about section ('Hello, I'm Audrey') box on the homepage.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 50px value to whatever value you'd prefer.

Remove the About section accent line

Remove the line that follows the 'Hello, I'm Audrey' heading in the about section on the homepage.

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.

Change "Get to Know Us" section font size 

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 48px value to whatever value you'd prefer.

Change Testimonials section font size 

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Change the 32px value to whatever value you'd prefer.

Header and Navigation

Change site header background color

The site header will remain white by default. Here are instructions for changing it:

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.
  3. Replace #000000 with your desired color hex code.

Disable sticky navigation on desktop

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.

Disable sticky navigation on mobile

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.

Footer

Replace footer social icons with a navigation menu

By default, the bottom left footer in the Audrey theme displays your social media icons. If you'd prefer to display a navigation menu there instead, here are instructions:

  1. Go to Appearance > Menus and click Create a New Menu.
  2. Add your desired navigation links to the menu. No more than 3 are recommended for this particular menu location. Click Save Menu.
  3. Go to Appearance > Widgets. Open the Footer Social Icons widget area and remove any widgets that are inside that area.
  4. Drag a Navigation Menu widget into the Footer Social Icons widget area. Select the menu you created in steps 1-2.
  5. Lastly, click here and copy the code. Go to Appearance > Customize > Additional CSS.
  6. Paste the code in the box. Click Publish to save.

Miscellaneous Tweaks

Remove the Instagram feed from WooCommerce pages

  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS and paste the code in the box.