Hello Iris Theme – HYD Support Site

All Kadence Themes have the same initial setup and install. To view these steps, head over here. Then when complete head back here for your theme specific tutorials.

IMPORTANT Color Palette Notes

Hello Iris has custom code that adds line acents and a navigation underline. Because you can not adjust this directly in your editor we have tied it to the #1 & #8 spot in your color palette. Keep this in mind when choosing your specific colors.

MEET JENNIFER

Advanced Styling Options

Turn any navigation item into script with an underline.

STEP 1 – Go to Appearance > Menus > Find the menu and menu item you would like to add this styling to
STEP 2 – Open the menu item up, and in the CSS Classes add iris-nav

** If you do not see the CSS Classes option, then you must enable it. In the top right corner is “Screen Options” click that and then from the dropdown select CSS.

You can add left or right lines to any image, or section. You can also remove these from the block sections if you do not want them.

**You will not see the lines in the editor, only live page view

STEP 1 – Click the Image, or Container you want the line to go on.
STEP 2 – Over in the editor on the right, click the “Advanced” tab and scroll down to Additional CSS.
STEP 3 – In the additional CSS spot choose the type of line you want. Options below.

Line Options

iris-leftline – left line at the top of the image or container

iris-rightline – right line at the bottom of the image/container

iris-rightline-top – right line at the top of the image/container

To Remove Styling: Follow the steps above, then delete the line code in the additional css spot.

Rotate any image by adding iris-rotate to the Additional CSS spot in the theme.

STEP 1 – Click the Image you want to roate
STEP 2 – Over in the editor on the right, click the “Advanced” tab and scroll down to Additional CSS.
STEP 3 – Add iris-rotate to the additional CSS spot

Angle Text right or left

STEP 1 – Click the text you want to angle
STEP 2 – Over in the editor on the right, click the “Advanced” tab and scroll down to Additional CSS.
STEP 3 – Add the angle code to the additional CSS spot

iris-ltextangle – Rotates left 10 degrees
iris-rtextangle – Rotates right 10 degrees

You may need to also modify the margins of the text in the editor depending on the wording being angled.

Category & Tag Archives

You can create a custom description for both your Category and Tag archives. The theme allows HTML in the description spot.

Step #1: Go to Posts > Click on Categories or Tags > Then click Edit on the archive you want to add a description to.

Step #2: In the Description box, add your description. If you would like to add links, it will need to be with HTML. The Span below will default to your header font and the links to your Primary Navigation font. Copy/paste as many of these as you like.

Title: You may also love….

<span>You may also love...</span>

The Link code: Notice the · at the end. Remove for your last item, or change to something different for a spacer.

<a href="YOUR LINK GOES HERE"> Dessert </a>  ·

Full Demo Code:


<span>You may also love...</span> <a href="YOUR LINK HERE"> Dessert </a>  ·  <a href="YOUR LINK HERE"> Dinner </a>  ·  <a href="YOUR LINK HERE"> Drinks </a>

Site Credit

Many of you are signed up as an affiliate for the theme shop. We have included a Site Credit template to help with this. You can link this page in your footer, then change the button, and other links to your affiliate link.

If you are not already signed up as an affiliate and would like to be, you can do so here. We can also create a unique coupon code with your name, or blog name.

General Tips For All Kadence Themes

Anywhere you find a video or slide section, you can easily change that to be a single image, slide, or video.

Step 1 – Select the entire block then open the Background Settings Tab on the right

Step 2 – If you want to keep what is currently in that block simply replace the content with your own

Change Content Type

Step 2B – If you want to change a video to a Slider (or vice versa) remove the content there by clicking the X.

Step 3 – Then click on the type of content you want, single image, slider or video and add your content.

Step 1 – Select the Block that you want the button to go to. You need to name this block. Over on the right scroll down to the Advanced Tab. If you do not see it, you have not selected the entire block or row.

Step 2 – In the Advanced Tab is an option for HTML Anchor. Name your block something simple that makes sense and be sure to remember what it is. Example – yourblocklink

Step 3 – Go to the button you want to add the Anchor link to and add your new Anchor. It will always be #yourblocklink It is only a # then the block name. Adding anything else to it and it will not work.

If you want to add a link to an anchor on a different page, you can do so by adding the link, then at the end your anchor. Example

https://yourdomainhere.com/thepage/#yourblocklink

Almost every newsletter provider will allow you to create a form and then embed it on your site. You will want to refer to your providers instructions on how to create the form and then get the code that is needed for your site. Once you have done that, you use a Custom HTML block and paste your form code into the block.

STYLING – The styling of the form will depend on what you have done when creating it, and what your provider adds to the code. It may match the theme perfectly and take on the theme styling, or you may need to modify it to match. This is not theme support.

INSERT HEADER/FOOTER SCRIPT FORMS – To add a form to your header or footer spot you will want to download the plugin Insert Header Footer Scripts. After you activate the plugin you can add the script to the appropriate spot.

If you plan on using the Custom Blog page as your blog page, you will need 2 blog pages. 1 is your custom page that you create, the 2nd is the traditional blog roll or archive. The reason for this is WordPress automatically filters posts to an assigned page. This will override any customizations you have on that page. So create your custom blog page and assign that in your menu. Then create a second page and go to Settings > Reading > and assign this page to your blog page. Having this second blog page in the settings allows your site to have pagination, or show more than one page of posts.

The tutorial for this can be found here.

No Posts Found

Import Issue

This happens, when permalinks do not match up. Running the demo import again will not fix it. This is okay though, because you need to change each block to match your post categories or tags. The Fix: go to any block that has “No Posts” click on it and then over in the right of the editor, choose what category or tag you want to show.