Introduction

Thank you for supporting my small business in purchasing the Emma theme! This documentation covers the main settings of this theme to get you started and understand the majority of features offered. Please note this does not cover everything about WordPress or the Kadence Theme as these can be very extensive topics. However, there are many resources available online to refer to questions or troubleshooting you may have. Click on the linked text above to browse the help/support topics for each!

If you still have questions throughout this process, please contact me and I will respond as soon as possible!

Get More Out of Your Theme!

This theme is built with the FREE Kadence theme, a fantastic and user-friendly WordPress theme offering a generous amount of customization, functionalities, and Gutenberg blocks. However, maybe you’re looking for more features, capabilities or options that you might notice are offered in the Pro theme as you go through the editing process. While this theme ONLY needs FREE Kadence, it is also compatible with Pro! Explore everything Kadence Pro has to offer by clicking the link below!

Explore Kadence PRO

Share Your Site with me!

I LOVE seeing how my clients make these templates their own! Feel free to share what you create with me on Instagram, Etsy, or Email. I’d love to help you promote your site or business even further!

Helpful Links & Resources

Here are some useful links and resources for any questions you may have as you utilize the Kadence Blocks and Theme!

  • Kadence Block Tutorials – help and info on many of the different elements used throughout this theme, and others available to you

How to Use this Documentation

This documentation includes walkthrough videos of the theme! I am pleased to be able to offer this to you as I take you through key pieces of the theme to customize.
With each video, please take advantage of the Objective Checklists! This is to help you follow along in understanding those pieces of customization tools that video covers.

Before You Begin

Backup Your Site

As always, before making any major updates or installation to your website, please be sure to create a backup, and that your WordPress is updated to the latest version before proceeding! Many web hosts provide backups regularly so ensure you have an updated backup. Additionally, it is always a good idea to get in the habit of creating a backup manually, right before you start this process.

My personal favorite and recommendation is utilizing the FREE WordPress plugin All-in-One WP Migration to create your website backup for FREE. Information on how to create a backup, and restore with that backup, can be found on the linked page.

Theme Defaults

Please refer to the information below if you ever wish to revert back to theme-default settings or information.

Colors

  • #495E4F
  • #937666
  • #1D231F
  • #394A3E
  • #B4A293
  • #8A988C
  • #E2D6C5
  • #ECECEC
  • #FFFFFF

Refer to this section on how to use this code.

[{"color":"#495e4f"},{"color":"#937666"},{"color":"#1d231f"},{"color":"#394a3e"},{"color":"#b4a293"},{"color":"#8a988c"},{"color":"#e2d6c5"},{"color":"#ececec"},{"color":"#ffffff"}]

Fonts

  • Base Font: DM Sans, regular, 17px
  • Heading Font Family: Lustria
  • Script Font: Advantage

Plugins

These plugins are required for your theme to work properly, and look exactly like the demo. Click on the name of each to learn more. Each will install with the Demo Content import described in the next steps (Installation).

  • Kadence Blocks – Created specifically for themes built with Kadence, like this one! This plugin installs Gutenberg-editor blocks to create posts, pages and more on your site.
  • Smash Balloon Instagram Feed – Exactly how it sounds, this adds your Instagram feed to the site!
  • Use Any Font – Used for uploading the custom script font.

Installation

PLEASE NOTE: As of 2024, the Kadence Starter Templates plugin is now known as AI Powered Starter Templates by Kadence WP, with a change of the interface. The steps detailed below remain the same, but if you have trouble navigating, please contact me for assistance.

0:01 Hey everyone, let’s go over how to install your new theme. It is very quick, very simple so let’s just dive right in.

0:09 So first you’re going to go into appearance and themes, and we’re going to add new, and we’re going to search for the cadence theme.

0:19 And it’s the one. So go ahead and click install. And this is what the purchase theme needs to kind of work because it’s a child theme of this cadence theme, which basically means that it just takes the features of this theme.

0:37 So anytime this cadence theme is updated, the child theme or the theme you purchase will be ready to go. So go ahead and don’t need to activate it here.

0:48 Just go ahead and click upload the Now, because this is where you’re going to drop in that zip file of your purchase theme.

0:58 and click install and click activate. Just make sure you’ve unziped the file that you downloaded from Etsy because there’s more files than just the theme file in there.

1:13 So please, please, please make sure you have unzipped the zip file you downloaded from Etsy, or wherever you purchase this theme, because that will have the file you need to install.

1:26 So once you’ve installed that, if you see this pop up here, go ahead and click install, cadence starter templates. If you don’t see this, go ahead and go into plugins, add new, insert for cadence starter templates, and install that plugin.

1:41 So go ahead and click install and it should bring us to this screen here, so we are going to of course click on an mcreate of co as our builder and this Emma theme at demo content.

2:00 And these import details. This is just telling you what’s included with a theme and that’s going to install with it.

2:05 So this is great. This is exactly what we need. And then advanced settings just make sure these are checked because we do want to import everything we saw on the demo site.

2:17 So now click start importing. And you want to make sure you have a little bit of patience here because it can take up to about five-ish minutes.

2:26 So just wait it out, but we will come back to this. All right, now that it has finished importing, you should see this finished Viewersite button.

2:38 If you receive an error here, please go ahead and check the troubleshooting section because that’s going to tell you what to do next and how to resolve that error.

2:47 So go ahead and click Finish Viewersite if you see this and now we can see that everything imported beautifully and we can go ahead and see under pages that we have everything from the demo site as well as under posts everything is there.

3:11 So go ahead and continue on with the video tutorials on how to customize your new site look.

2:31 now that it has finished importing you should see this finish for your site button. If you receive an error here, please go ahead and check the troubleshooting section because that’s going to tell you what to do next and how to resolve that error.

2:46 So go ahead and click finish for your site if you see this. And now we can see that everything imported but you can go ahead and see under.

3:02 Pages that we have everything from the demo site as well as under posts everything is there. So go ahead and continue on with the video tutorials on how to customize your new site look.

Objective Checklist

  • Search for and install “Kadence” theme

  • Upload the Emma theme and install

  • Install Kadence Starter Templates plugin

  • Select ANMCREATIVECO as the builder

  • Import Emma Theme – Demo Content

  • Finished! View your site and continue with the video tutorials

Troubleshooting

If you are experiencing errors or other difficulties installing, please click here for troubleshooting.

Theme Introduction

Using the Theme Customizer

0:01 Now that we’ve installed our theme, I just want to do a quick overview on pretty much navigating how you’re going to customize this theme.

0:10 So let’s start with the WordPress Customizer. So you can activate or open Not from the Admin toolbar up here and click Customs.

0:19 Or if you’re in your admin dashboard, go to Appearance and Customize. Is. this is what the Customizer looks like. So first thing at the top, you have this section here called Emma Theme.

0:33 If you click on that, this is just some quick links here for you to open the theme documentation. Presentation. So, pre- you’re activating now, it’s going to take you straight to that.

0:43 So easy access for you there. And then this additional support section. So the quickest way to get a hold of me is to send me a message on Etsy.

0:54 So anytime you need to get any questions answered or just need me to help you and put point in the right direction.

1:02 Go ahead and click send me a message on Etsy and I can help you out with that. So that’s that section.

1:09 Your colors and fonts are going to be in this second section here. So self explanatory colors buttons typography. So we will go over Thank you for watching! That more in depth when you reach that section in the tutorial.

1:26 Now header. This is where you can customize how this looks up here. So you can see that it opened up these little pencil icons.

1:35 So you click in each section, you can see that this is a three column here. You can have up to three rows essentially for your header.

1:46 And that will, we will go more in depth on that in that section. And same situation with the footer. At the bottom, this is how you update the footer as well.

2:00 So here we do use those three sections. So again, we will cover that in the other section. And in general, this is pretty much the overall look and feel of your theme.

2:14 So this will pretty much, you can adjust kind of the width and the spacing of all the content. You’ll notice the biggest changes happen in kind of like the blog section.

2:26 So for example, the max width, this adjusts how wide everything is. And if you close out the sidebar, it’ll be easier to tell.

2:38 And same with sidebar, this adjusts like how wide that sidebar shows up. So you can play around with this if you want, but that is available for you to change if you decide.

2:52 And posts and pages layout, so really quickly, you can adjust how your posts show up like this. So right now it does have the no sidebar look, but if you wanted to add the sidebar, you can click on this one.

3:11 And it adds a sidebar there for you. And you can change it to the Emma theme sidebar is the main one that we use.

3:19 So there’s that. And you can get rid of that like gray background and change how the featured image appears. You can go ahead and click publish and go back to that post.

3:38 And that’s what that looks like. So back into our customizer to go over more details. So we were under post and pages layout.

3:49 And then archive layout, this will be like your page that uses that archive template. That’s where you edit that here.

3:59 And again, search results. Site identity, so this is where you change the title of your site. So that would be this right here.

4:15 And then your tagline does not show up. By default, so you can click on this and you have your tagline there and you can adjust the positioning of everything.

4:31 You can also add a logo if you want. You would just do that here. Don’t really have one right away.

4:43 Okay, we’ll do this for an example. And that’s where that is. And you can also switch to just a logo.

4:54 So that is where you do that. And menus. Editing your menus. This is where you’ll go. And you can edit menu here.

5:09 You can also do it under appearance menus in the main dashboard. It might be a little bit easier to edit there, but really quickly you can also do that here as well.

5:21 And you’ll notice that left of course is called left and then right is called right. And you can just drag over a little bit to make sub pages of things and drag out and above to make them their own links as well.

5:45 then widgets I highly recommend. You do this in the main admin dashboard. So we will go over that in that other section and then home page After you get imported, this is where you can define which home page layout you want to use.

6:06 So say we want the second one. We will just change that to a number 2 and there it is and your post page.

6:16 Make sure it’s a blank page. WordPress essentially overwrites that page. You cannot have any content And that pretty much covers the customizer sections that will be the main focus here so yeah, just familiarize yourself with all the different functions and settings and be sure to take a look at the

6:38 help documents that the cadence theme provides, I linked them up. Above in this kind of documentation as well. So just go ahead and play around, familiarize yourself.

6:49 And let’s continue on with the next video.

Objective Checklist

  • Helpful links located in Emma Theme section

  • Locating where to change Colors and Fonts

  • Updating site content width and spacing

  • Changing how posts look

  • Updating header, footer, menus and widgets

  • Set your homepage layout

Homepage #1 Editing

Header

0:00 Okay, so let’s go over how to edit kind of this main image here so you’ll just click in any of that empty space like I just did here any of this empty space and it will open up the settings so we are going to go to style and you see that the background images here so just click edit image you can

0:21 upload here or go into your media library and swap it out for something else let’s do this one for you example and you can see that’s changed and you can also kind of slightly adjust the position of it as well if needed and you can keep or change the kind of scrolling feature that’s included so that’ll

0:44 be here. I recommend keeping it on the parallax because that translates to mobile well. Now as you can see there’s kind of like a dark overlay here so that’s just this section right here.

0:57 You can change the color, it’s grabbing the current style from the theme. Excuse me, no it’s not, it’s just a simple 00 black color but if you did want to use a theme color you would just simply go in here and change that and you can also of course change it to anything you want as well.

1:17 So I’m going to keep it to black and you can change kind of the intensity of it. So if you want it even darker you just use the scroll bar here or lighter.

1:27 I recommend kind of keeping it between, excuse me, 50 to probably 70 and that looks pretty good. Okay

2:30 , now over to the social icons, so just click in this box and click on one of these icons and you can update the URLs so you can just type in whatever you need here and then this arrow button and same thing for all these other ones.

2:46 Now you can of course add and remove anything you don’t need, so you’ll just click on this plus button over here and you can go to browse all and this is the selection that WordPress offers so hopefully it has everything you need here, however if it does not you’ll just click out of this area and then

3:08 you’ll open up to this additional block button and we can add an icon. Now here’s where it gets a little tricky but or a little more involved I should say so let’s go ahead and add the Twitter icon all that I do believe it’s in that library but so we can adjust the icon size here and we are going to

3:29 change the style to stacked if we want it to kind of have that background color like the other ones do so we can do that with a white icon and border color the same as that or we can just remove the size there and then border radius we’re going to make that 50 to make it a full circle like that so there’s

3:54 how you do that and again you can add the there.com URL and then this section the second area is the hover color so there we go and that’s how you can kind of add your own manual one there but again we are kind of limited to the icons that are provided here but this does kind of offer a much larger

4:20 selection available to you here so hopefully that covers everything for your social icons and now this of course it’s just simple text so you’ll just type in whatever you want here but it should just be something very short just like this so it translates to mobile well kind

4:53 of customize this here. So you’ll just click on this kind of icon right here. So this selects everything and you’ll see that you can adjust the group settings completely.

5:11 And then we’ll go over to this second tab here and this is where you can change the background color of the icons and the shape of them as well.

5:22 And then to delete an icon, you will just simply click on it and then open this options key with this three dots there and then you’ll click on delete and that’s how you delete it.

Objective Checklist

  • Update the background image

  • Add or remove social icons

  • Update text

Page Content

0:01 Okay everyone, just a few things I wanted to cover on this first home page layout. Just scroll down, you’ll have your content section here, so just simply highlight and type in what you want.

0:17 Now if you see this, kind of like, you can just click on the transcript and type in what kind of box pop up here, this really long box.

0:23 That’s this kind of divider here you can change the length of it, but if you do that, be careful because it does kind of increase that height there.

0:34 So I recommend kind of keeping it here at that kind of level and then, so this is where you’re going to change the length.

0:44 So it’s at 10 right now, and you can make it longer if you want, but again, I kind of recommend keeping it here at, it’s 10%.

0:53 So, if you’re trying to edit and this gets in the way you can kind of do, do your best to work around it, but if it keeps getting in the way, just open up the, kind of the navigation tool over here, and this makes it much easier to navigate.

1:11 So, just pulling down through all these sections until you get to where you want to go. And then to edit these picture sections this is a background image here, so if you just click in this section and then you go to style, you can, can swap out the images in your media library here.

1:34 And same with all these other ones. Just click in and then go to style and then, These are linked buttons.

1:43 So you just click on the link that you want to change and click this pencil and change the link that you want.

1:52 And then hit this arrow to submit your change. And if you want, you can also link this entire box and you can add that link here in the overlay section.

2:15 Looks like it didn’t quite load effectively so you can just replace that with anything you need. Just kind of refresh that and there we go, that looks better.

2:28 Now these featured collections, you can do whatever you want here. The idea was kind of to just link manually to any blog post that you might have.

2:40 For example, this one is in fact a blog post that was included so you can just put that link in here.

2:47 And it will kind of show up or you, if you have dedicated pages for all of these, then you can do that here as well.

2:55 This one, again, same thing as above, this is a background image so you just go to style and swap out the image.

3:02 And this itself is, This is an actual image block and same with this one. And then here we have our carousel gallery.

3:15 So you just simply click in here and then you can, Click this pencil to edit the gallery. So you can just remove and then add to gallery to add some more images.

3:35 And again this is another manual. So just simply change the text to whatever you want and update the link to whatever you want.

3:48 And I will be back for some more when we get to this carousel.

0:01 Okay everyone, just a few things I wanted to cover on this first home page layout. Just scroll down, you’ll have your content section here, so just simply highlight and type in what you want.

0:17 Now if you see this, kind of like, you can just click on the transcript and type in what kind of box pop up here, this really long box.

0:23 That’s this kind of divider here you can change the length of it, but if you do that, be careful because it does kind of increase that height there.

0:34 So I recommend kind of keeping it here at that kind of level and then, so this is where you’re going to change the length.

0:44 So it’s at 10 right now, and you can make it longer if you want, but again, I kind of recommend keeping it here at, it’s 10%.

0:53 So, if you’re trying to edit and this gets in the way you can kind of do, do your best to work around it, but if it keeps getting in the way, just open up the, kind of the navigation tool over here, and this makes it much easier to navigate.

1:11 So, just pulling down through all these sections until you get to where you want to go. And then to edit these picture sections this is a background image here, so if you just click in this section and then you go to style, you can, can swap out the images in your media library here.

1:34 And same with all these other ones. Just click in and then go to style and then, These are linked buttons.

1:43 So you just click on the link that you want to change and click this pencil and change the link that you want.

1:52 And then hit this arrow to submit your change. And if you want, you can also link this entire box and you can add that link here in the overlay section.

2:15 Looks like it didn’t quite load effectively so you can just replace that with anything you need. Just kind of refresh that and there we go, that looks better.

2:28 Now these featured collections, you can do whatever you want here. The idea was kind of to just link manually to any blog post that you might have.

2:40 For example, this one is in fact a blog post that was included so you can just put that link in here.

2:47 And it will kind of show up or you, if you have dedicated pages for all of these, then you can do that here as well.

2:55 This one, again, same thing as above, this is a background image so you just go to style and swap out the image.

3:02 And this itself is, This is an actual image block and same with this one. And then here we have our carousel gallery.

3:15 So you just simply click in here and then you can, Click this pencil to edit the gallery. So you can just remove and then add to gallery to add some more images.

3:35 And again this is another manual. So just simply change the text to whatever you want and update the link to whatever you want.

3:48 And I will be back for some more when we get to this carousel.

Ojective Checklist

  • Video 1

  • Use the Navigation Tool to navigate the editor

  • Edit image content blocks

  • Manually edit Featured Collections with your posts or pages

  • Update Carousel Gallery and Portfolio links

  • Video 2

  • Configure Blog post settings

  • Edit Call to Action section

Homepage #2 Editing

0:01 Now I’m going to walk you through the second home page layout. So let’s go ahead and get started. This top section here, you can see that there’s a little bit of a slider action going on.

0:13 So very simple to change these pictures. So you’ll just click in any of this blank space. In the very top or bottom and go to the style tab and you will see that it loads the slides and the images here and if you can just click on these.

0:33 And upload or swap out the images however you want. If you don’t want the slider but you like this kind of layout we’ve got going here, you can just simply click on any of these and change it to whatever you want.

0:49 So if you just want a solid color just remove any image that might be there and this does have an overlay as well.

0:58 So for example let’s do this yellow color doesn’t quite look like the color we selected so we’ll also want to remove that overlay here and you can just click this arrow next to the color and it gets rid of it.

1:12 So that’s how you change that and this is just editing images so I believe I have this as a background image.

1:23 Oh no it is an image so, okay yeah if you need to if you have trouble selecting do what I just did and I opened the navigation tool just by clicking on that icon and drilling down into the area.

1:39 And you can edit that image there and again another image to the left of that and that’s an image and a background image and then simple text and button.

1:56 Now with this section here the offer ings you might notice that that. Offerings is kind of taking a background approach to being behind the script font here, and it’s just it doesn’t reflect on this side like the editor.

2:12 So that makes it much easier for you to edit the text. So that’s just simple editing there. And same here.

2:23 This is a simple editing for this kind of carousel gallery. So you’ll just click on any one of these images and click this pencil tool.

2:33 And this is how you edit the gallery here. You can drag to rearrange and click the X’s to remove any images.

2:42 And then on the left side just click add gallery to add more. And a button with a link. And then these logos.

2:53 This one didn’t load all the way so we can just refresh that. And that’s better. And you can also add links to this if you want.

3:05 So just click on any of the logo that you want to set a link to. And in this top hovering toolbar you’ll just click on this link looking icon I guess.

3:18 And you’ll just, Insert your link here and enter and do that to all the others that you want to. And I’m going to adjust the font here just so that it’s easier for me to visually edit.

3:39 I’m going to bring that font down a little bit. And then here this does need updating because it’s very large.

3:50 And let’s do medium looks good there. And this is a little high up so we can kind of nudge it down.

3:59 By going into the advanced tab and by changing this negative 20 in the margin to something greater like negative 15 and that brings it down and click update.

4:20 And then in the journal section it’s just very simply grabbing the three most recent posts. You can set it to pull in only from a specific category or tag however you please and again you can edit the kind of additional look settings of the text.

4:38 Everything in the style tab and then the podcast section you can do whatever you want here. It does not have to be a podcast.

4:48 You can just simply put in like maybe an about you like change this photo to a picture of you and then kind of like welcome to my website that sort of thing.

4:58 Follow me on social media. So you can do whatever you want and then a simple call to action section. So this is a background image and just take everything you’ve learned from here on and edit that.

5:16 However you please and along with the text and the button and link. So that is the second homepage layout.

Objective Checklist

  • Update photo slides in header

  • Update content and images

  • Edit the carousel gallery

  • Edit or link logos

  • Adjust blog feed settings and customize the Podcast section to suit your needs

  • Edit Call to Action section

Footer

0:01 So time to edit our site footer so you can open the WordPress customizer, scroll down to the bottom of the page and you can click on any of these blue pencil icons that show up in the preview or just click on the footer section in the sidebar.

0:19 So the way this is laid out, we use all three rows here. So this top row, it is a kind of like stacked column situation.

0:29 So you can see when we change it to row, that changes the look entirely. So make sure it is column because we want everything stacked here.

0:39 So widget one, you can click on this gear icon. This includes this logo here as well as kind of. Your site title and subtitle and this Instagram button.

0:52 Now the footer, it may be easier to edit the overall content in the WordPress dashboard. So I will go over that in just a moment, but I just want to keep going over the structure.

1:06 And then in your middle row, we have excuse me, still in the top row, we have another widget. This is where your Instagram feed will be.

1:15 And I go over how to connect that in a separate video. So more to come on that. This middle row has this navigation, the social icons, and this other widget which is a button to subscribe to the newsletter or you can make it whatever button you want.

1:32 And then this final row is just your copyright and you can link kind of like terms and conditions. Privacy policy, whatever you need.

1:40 So this is just a simple text box here and you can add links and anything else you need there. So footer navigation, very simple, just like you did in the header.

1:52 Click on, the menu, select menu, and go into your footer and edit menu here and you can see we just have those three links there.

2:01 And social icons, also very simple, much, like the mobile header, you’ll edit those there. And the button here as well.

2:11 Subscribe to the newsletter and make sure you link it to whatever you need. Currently it’s not linked. Okay, so same thing here.

2:19 Like the header, you can adjust the colors that you want. So the background colors and link colors, borders, whatever you please.

2:30 And another note with this top row, we do kind of have, you’ll see that it’s kind of overlaying this content section from the page.

2:40 So this just has a little bit of a negative margin which brings it up essentially. So let’s go ahead and edit this in the WordPress dashboard.

2:53 Because I’ll show you what I mean when it’s easier. So let’s go ahead and go into the dashboard. to appearance and widgets.

3:02 You can collapse that and the footer used this footer one and footer two, three, and I think that was it.

3:13 Yep, okay. So it’s easier here because we have this sidebar much like the page editors. So you can just adjust your logo here.

3:23 Just click on edit image and replace the image. And this also has that green background color. I recommend making sure it’s the color.

3:33 If you change the color of that top row, just make sure it’s this color too. And this is a header to update the text.

3:42 And then it’s kind of blending in here, but that is the tagline as well. And then an Instagram link. So if you open the list view navigator tool, you’ll see that this is a two column section here.

3:55 So you can make it bring it. Wider, shorter, whatever you please. And then footer two. So right now this is just set up with a gallery widget.

4:08 But so you can do it this way. Or if you truly do want your Instagram connected, just go ahead and click this ad I believe it’s called Instagram feed.

4:20 So you’ll click on that. And then this is where you’ll put in that short code of the Instagram feed you created, which I also cover in a separate section.

4:30 So once you put in that short code and your feed displays here. You can just go ahead and click on this gallery and delete it.

4:39 And then that’s where your Instagram feed will be. And then your button here. And these additional footer 4, 5, 6, etc.

4:49 These are just additional widget options you can add in your footer from the customizer. So we’re going to go back to the customizer and look at our changes.

5:02 you’ll see the Instagram feed is gone because we need to plug in our shortcode and then, so here’s the editing difference.

5:12 If you edit here, you don’t have that sidebar but you could click on show more settings, and that’s where those settings are.

5:21 So a little tricky there, so I recommend using that WordPress editing and then those additional four or five and six, those are here.

5:30 So you’ll just grab them from the sidebar and place them wherever you want, and then just make sure there’s no content here, so you can add whatever you need there.

5:40 So that covers our footer.

Objective Checklist

  • Understand layout and structure

  • Configure navigation

  • Edit social icons

  • Edit CTA button

  • Easier editing in WordPress dashboard

  • Change logo and site text

Experience Pages

Services Page

This page uses custom sliders. Refer to that section here on editing/customizing those.

0:01 Let’s go over the experience page. So this is the primary one that lists multiple experiences or services. So this is good if you just want to list everything.

0:14 And the other one. You can feature just a single service, but let’s go over this one that has multiple experiences.

0:21 So we’ll go ahead and edit the page. And you will use everything you’ve learned this far to edit. I feel like once you’ve edited, like, two or three pages at this point, everything else should be a breeze.

0:38 So This primary section is a background image and then two text headers. In this next section, we have a background image here.

0:49 Excuse me, just a image widget there and some text and a button. This, you can link it to a process section, so this uses an anchor link.

1:03 You’ll go into style. Excuse me. Advanced. Advanced. HTML anchor. That one is called process. And that’s when that will be linked because it uses hashtag process.

1:20 And this is a background image as well. And a slider. And we covered editing sliders in a separate video. So you can refer to that on editing this.

1:34 And then here’s your packages. So if we want to kind of duplicate or add and remove some. You can click in this blank area over here or let’s open the navigation.

1:48 It’s very easy and you’ll see this. This is a row layout and this is a separate row layout. So this section second service.

1:58 There so let’s add a third one. So let’s go ahead and just duplicate and move it down. And now we have a third one.

2:08 So that’s pretty cool. And we can also just adjust the. Move this over and let’s bring this in. So it’s very easy to edit the style and duplicate, which is pretty So with this section down here, we used different tabs to you can click on this main tab which up here, click the plus to add a new tab and

2:43 then refer to one of these once already open. So I believe we need to, yeah, the second tab, copy this entire role layout here, copy, go back into your other tab.

3:02 And then paste. And there you have another tab. And edit all the content. In the FAQ section, so you can of course add as much more that you need.

3:16 So just click on this primary accordion. Widget and add accordion item. And you can also rearrange by clicking on any item and using this toggle up here to move up and down.

3:33 And of course removing as well. So we just click on the item, click on three dots and delete. You can also adjust the background.

3:44 You can do that by clicking on the primary accordion and going to the style tab and also the hover colors and active colors.

3:56 Those can be done here as well. And then lastly, just another call to action section. So that is a very, very simple services page.

Objective Checklist

  • Update header image and text

  • Link to a section with anchor links

  • Edit custom sliders

  • Duplicating content and changing layouts

Single Service Page

This page uses custom sliders. Refer to that section here on editing/customizing those.

0:00 So this single experience page, this is kind of meant to house something with more content. So if you want to go more in depth on an experience or service, this is a great template to replicate.

0:13 And you can use this template as many times as you want. You can just simply create a new page, go into design, Bye.

0:22 I do cover the design library and locating templates in a separate video, so that will go over how to do that for you.

0:31 You’ll just search for single experience page template. Let’s dive right in. At the top here, this is a carousel gallery, so you’ll just click on any item in the pencil icon to edit the gallery there, and some simple text to edit in the next section.

0:53 Text text more text and pictures. So to edit this green box here, you’ll want to open this image but if you click here it’s not opening the image so let’s open the toolbar and drill down the section and then click image.

1:12 And this is where that green box is so you’ll just edit the color there. And another background image section and some text and some list items you can add and remove.

1:28 You can move as much as you need. You can just simply click enter at the end of any one of these and it’ll add more items for you.

1:37 And again another custom slider so refer to that video section on how to edit this. Some more text editing and simple box color editing if you need.

1:52 Again another custom slider refer to that section. And FAQ. This one uses two separate FAQ sections or excuse me, two separate accordion items to create this column look.

2:11 So you can see here this is a column. So I recommend keeping that 50-50. And having even items on both sides.

2:19 So this is just a two column look on that. So you’ll just click on any item, move it up and down, click on the main accordion item, and click add new item.

2:32 And same with this side. And then another call to action section with the background image and a background overlay. And that is.

2:45 Your single experience page.

Objective Checklist

  • Update photo slides in header

  • Update content and images

  • Add FAQ items

Portfolio Pages

Video coming soon!

Objective Checklist

  • Locate the templates in Block Gallery

  • Create new pages and utilize the templates

Podcast Page

0:01 So I will show you how to easily navigate editing the podcast page. So at the top here on the left you have the social icons So just follow along what we covered in homepage layout number one to edit these and then in this middle section here you have two text items and then this background image you

0:22 will open the navigator tool to make it easier and this image is in this first section here under the top row layout.

0:33 So click on section, go to style, and that’s where you’ll find the background image. So you can close out this to get a better view.

0:39 And just edit image. Let’s see how a horizontal image looks. So that’s how a horizontal image would look. Of course, you’d probably want to add changes to black text here, but that still looks pretty cool.

0:55 So you can keep it like that if you want, but I will keep it a vertical image because I like that look the best.

1:02 And then more text there. So the background of this section has this cool effect here, where it’s just this image kind of off to the side here a little bit.

1:14 So to edit this, you just click in this section, go to style, down to this background image, and this circle, kind of you can reposition the image with that.

1:23 So I have that all the way up in this corner here, and the image is contained. So that means it’s not going to stretch all the way, but you can if you want click cover and then that stretches through the whole section, but I kind of like that that contained off to the side look.

1:40 So there is also a white overlay to give it a much lighter look so this text is much more readable so you can adjust that if you need so you can make it brighter to make the text pop out even more or however you want and of course you can just delete the image as well.

1:59 And then down here this is pulling in blog posts categorized under the podcast category. So that is how the intent of this was set up.

2:12 But you can of course just make manual blocks here. So you would just delete this blog post blog right there and just add whatever it is that you want to put in here.

2:25 So, for example, you could do a row layout with three columns and then add an image block and whatever image you need to represent this item.

2:42 And then maybe below it, you could do a header text and link that to either a page on your site or directly to the podcast.

3:03 And then you would just do the same across the board. So that is how you can make this section your own.

3:08 If you did not want to house blog pages there. Same thing here, this also links, I believe I had this link to the pages.

3:18 No, it’s not currently linked anything yet, but so that is what you can do here. Link these icons to the episode blog post, whatever, and you can do that for this heading here as well.

3:32 And down here we have more channel links. And then this is a feed down here of just kind of resources you know if you wanted to highlight some resources these are manual so you will just go into each and every item and manually change it so this is image, text, text and a button and you would just do

3:54 that across the board and few more you can link this to maybe another page on your site where it has a whole archive of items that you want to feature so that is this podcast page

Objective Checklist

  • Update image in header

  • Customize section background image

  • Connect Podcast posts feed

  • Update Episode links & info

  • Customize manual content

Podcast Posts

0:01 So now I’d like to show you these blog posts that are for podcast episodes. So you’ll see this fun widgets that are included on this template.

0:13 So we have kind of like the episode overview at the top here and then this play button to, either link to the episode or whatever you’d like to link that to.

0:23 And then some kind of story behind the episode. And then I’ll listen now down here and some more links. So I will go back into the WordPress dashboard.

0:34 Go to posts and let’s add a new post. You can of course write over any of the default ones, but I want to show you how to find that template in the design library.

1:06 this to get the most updated design library blog post templates. And then we have podcast post template and just click on that and there we have it.

1:21 So you’ll just add your title, update this image here. And update these text titles and the rest of the text in here.

1:40 You can add photos, whatever you need and you can update this text. Check it out. And you can put in a URL, connect a URL to the audio or you can upload from your computer.

2:04 So that’s what you can do with that box there. And then we have these icons, these linked icons on where you can listen.

2:12 And you can add and remove more if you need as well. So there you go and make sure you Thank you.

2:21 Add a link or it won’t show up. So that is how you add a blog post under podcasts. Whoops. We forgot to categorize it.

2:31 Make sure we put it in our podcast category and add the featured image. The featured image is important if we wanted to display that photo in the podcast feed.

2:45 Wherever these posts show up. So update view post. And then that. I recommend a horizontal image if we have the page showing the featured image up there.

3:01 But let’s go back to our podcast page. And you can see it’s right there. So that is how you create your.

3:10 Podcast posts. Post.

Objective Checklist

  • Navigate the Design Library

  • Import Podcast Post Template

  • Update Episode module

  • Write your podcast post!

  • Add Listen Now file and links

  • Add Featured Photo and set to Podcast category

Custom Font

Upload Your Font

It’s easy to replace the custom/script font in just a few clicks. Any time you want to change your custom font to a different one, just follow these steps again!

0:00 Let’s go over adding your own custom font to your theme. Now in the import, you might not see this right away because we need to connect it.

0:14 In my case, this is already installed in my system and it’s probably just recognizing that from the import, but it is not showing up on some other pages like on this.

0:24 In this one, I noticed that it wasn’t. For example, right here, this should be that script font and there as well.

0:34 So if you see it looking funky and where the script font should be, this is because we need to install and connect our script font.

0:43 So let’s go into our dashboard and we are going to the use any font setting here with that plugin. So make sure that’s installed the use any font plugin and we are going to generate our free API keys.

0:57 This allows us to upload one font. So after you do that click verify and now we’re going to upload our font in this second tab.

1:09 So upload fonts, you can name your font. I’m going to do the Amalfi Coast font and select that file upload.

1:23 And there’s that font. And now we need to assign it. So the theme is designated to acknowledge anything that we assign script.

1:36 To to that custom font. So we are going to select Amalfi Coast and we are just going to go in this text box here and type in dot script and then click assign font.

1:56 So now we can refresh this and it should have a data. Perfect. So now it is recognizing that script font there and it is a much larger font than in the demo.

2:12 So make sure you kind of keep that in mind. And it’s just probably gonna have to be something that you go in and update per kind of block that you see, but should be quite simple to do that.

2:30 And now I will show you how to assign text to get this script font and to adjust this. The sizing of these things so I will go ahead and edit this page.

[TUTORIAL CONTINUED IN NEXT VIDEO]

Objective Checklist

  • Generate Free API Key and click “Verify”

  • Upload your font

  • Assign your font to .script under Custom Elements

Apply Your Custom Font to Text

Here’s how to apply your custom uploaded font to items you designate on your site.

0:00 So now into our page editor with that new custom font, let’s scroll down and you will see that it does not appear in the editor because that’s just kind of your main site viewing.

0:17 It won’t show in this back end here. By back end I mean like these page editors and your WordPress dashboard, but it will reflect on the main site.

0:26 However, if you do want, if it’s bothering you and you do want to display it here, you can just click on it and then go into the style tab of the text and go to font family.

0:39 And it does upload it here in this dropdown, which is pretty cool. And that should persist even if you assign any different font.

0:49 So it will always recognize your custom font that you put in. So here’s an example, let’s just do this kind of noticeable font difference here.

1:03 So let’s update that. And then go into our site preview page and it is still recognizing your script font because we have this assigned to take that script.

1:21 Now that is what typing that dot script and assigning our script font did because this recognizes that script font. So you will just do that for any kind of text that you want to display as a script.

1:39 So we can do that. Even for this one, probably not the best example because we probably don’t want that here.

1:46 It does already have a different class, but we can add another. Just make sure not to delete that because that’s kind of an important class for that.

1:55 To have and refresh and you can see that it changed there. So that script is very easy to apply to whatever you want.

2:08 I just recommend doing it this typing way. And this additional CSS classes in the advanced settings because you can just easily change out the font whenever you want instead of having to manually go in and change every single time you upload a font.

2:31 So I hope that makes sense. Again, highly recommend just assigning that script font to anything instead of changing manually as it will be a lot of work for you when you can just simply change out the uploaded font with something different anytime you want to change it.

Objective Checklist

  • Type “script” in Additional CSS Class(es) to apply the font

  • Upload your font

  • Assign your font to .script under Custom Elements

Adjust Custom Font Sizes

Your custom font size may not look the way you want, or you want to easily and quickly adjust the size of fonts elsewhere – here’s an easy way to do it!

0:01 Okay, now let’s edit our custom font kind of style setting, so if you import your custom font and the sizing just looks off I will go ahead and show you how to do that, like right here it’s quite large, and then in the section here this stretches to two lines when it would look better on one

0:26 . So let’s go ahead and edit the page. And scroll down and again this is kind of reflecting the demo font that is installed like on my computer system so that’s why it’s kind of looking funky here.

0:46 So just for this example purposes I will go ahead and set these fonts to that. And like I covered in the last video or the install video of the custom font it doesn’t matter if you set it in this dropdown or not because as long as these text boxes are assigned to this script class, Yes.

1:13 It will always take that script font that you defined when we went through that setup process. So just go ahead and keep doing this down the line.

1:32 Okay, now that I have fixed all the font previews here, let’s go ahead and show you how to adjust the sizing.

1:39 So go ahead and just click on any one of the fonts that you want to change the setting. And over here, under styles, for this and font size, there’s these quick and easy buttons here.

1:51 So let’s just go to large and that looks pretty good. You can also make it of course larger if you need to by using any of these other ones.

2:01 And then there’s also this kind of custom size setting here. And you can input your own number there, but I like to use these because it’s very quick and easy.

2:13 And so see how this is changing the two lines. Let’s just bring that down. This one is a custom parameter, but let’s see what we can do with these.

2:25 Or small. Yeah, that’s a little too small in my opinion. So I think we’ll go to 20. Now, because we have this sidebar here, this may, this kind of makes this screen smaller.

2:42 So. We can close out of this and that makes the page about the size that you would see on the live site.

2:50 So this looks pretty good. That size there. So, and to open it back up, I think it’s this that’s the page settings, this one, that first one to open up those settings again.

3:04 So let’s keep it consistent and we can adjust the font size for all the remaining ones too. So you can just do that wherever you need to.

3:18 And then this one is kind of big, so I’m going to change that to medium and same here. This can use a much smaller size and just click update.

3:30 And then go back to your page and it’s back on one line and that looks great.

Objective Checklist

  • Apply your font to the text in the editor, if desired

  • Use the Font Size quick buttons to adjust

  • View the page full-screen in the editor

Editing Sliders

Editing the sliders that use the Tabs block. This video shows how to add an additional slide, so repeat these steps for each additional slide you want to add. To remove, just delete the tab and update the button anchor links!

0:00 Okay, let’s talk about this testimony, testimonial carousel. So this is kind of a trick that I kind of implemented to trick the cadence blocks into thinking this is a carousel.

0:16 So just bear with me, but I promise this is gonna be worth it. So you will see in the editor here that you have these buttons up here that list the testimonial numbers.

0:27 Now, that’s not visible on the site. So this is one of the fun tricks that this carousel implements. So this is just helpful to you in navigating in the editor.

0:40 So let’s start with this first one. So you will edit the images simply by clicking on them and add the Edit Image button here.

0:50 To edit the image that you want and same with the other side. This is just simple text over here. This kind of gets in the way, but this is where you can edit that cursive and then this is a title and the text and the name.

1:10 Now this is a button and again you probably noticed it looks different on the live site. This is also intentional.

1:18 That is just kind of placeholder to where if you wanted text here. I personally don’t recommend keeping text. Putting text there so I would keep it that simple arrow.

1:28 So that is your first testimonial and you will just follow the same thing with your second one and then with your third.

1:37 Now to add or remove, you will want to think about how many slides you want here. So let’s say I want four slides.

1:49 So I’m gonna want something with both the backward and forward button. So I am going to duplicate this. Whoops, I duplicated the whole block, not the testimonial.

2:02 This is why I am walking you through it. So we will just undo that if it lets us, maybe not.

2:13 I just had to come in here and click delete on the second one that I duplicated. Okay, back into this.

2:20 We just want to duplicate this testimonial here. Okay, so we’re not going to be able to duplicate this whole tab.

2:32 Again, that’s a limitation. By the program that we’re using, or the cadence blocks that we’re using. So we are going to open our navigator tool here and we are going to go over to the tab.

2:47 So this tab and that row layout we want to select. So we are going to copy this and then we are going to add a new tab here.

3:03 But like I said we want it here and this is to help you navigate the tool here. So just simply click this first paragraph tool and then this is where you’ll do ctrl V and it copy everything for us.

3:23 So, now we can edit the images as we need. So let’s just do some simple photos for, this example and that’s good and of course change the text how you want.

3:45 So this is where it gets interesting because these are linked buttons to the tabs. As you can see, this, currently links to the first tab, but we want it to link to the second tab and then this other button links to the third tab.

4:06 So we are going to go back to the parent tab group. So again, open your navigator tool. Go up to this tabs.

4:16 So you select everything, go to style and anchor settings and this is now the third tab. So we are going to call it whatever is helpful to you, but since it’s that.

4:34 The third one make it recognizable to be the third and we’ll want to fix this fourth one. We’ll call it for a and we can change the text up here just to keep it simple for the example.

4:49 So we are only going to change the button on the third tab. Excuse me. The second, third and Thank you.

4:56 Fourth tab. So we are going to change this one to to a to a and it just needs this hashtag because that’s what the anchor link does want to a and for a and then.

5:14 Testimonial four that will need three a and then testimonial two. We want to change just that one or that that one is three a.

5:31 Okay. So now we are good with that. Let’s check out our change. So click update and then we’ll go back to our preview refresh.

5:43 Thank you so much. 2nd, 3rd, and we must have missed that button there. 4a. Let’s double check we named this correctly.

6:08 Yep, that’s 4a. 4a. There we go. It’s just a little finicky there, but that’s the beauty of cadence and technology, isn’t it?

6:40 Okay. And that’s how you edit your carousel.

Objective Checklist

  • Edit the content for each tab

  • Add or remove tabs

  • Edit the Tab Anchor Links

  • Update the buttons in each tab

Multiple Sliders on the Same Page

This section covers using the theme’s custom sliders on the same page and the importance of how you set them up. The custom sliders included in the theme utilze the Tabs block, so we cover here how to customize those. This does not apply to any other blocks, other than Tabs, when using the custom sliders.

This video also refers to objectives covered in Editing Sliders.

0:01 Okay, so now what if we wanted two of these custom sliders on one page? So for example, this one is kind of like a step-by-step process using a slider.

0:14 And then maybe down here we also have the testimonials with that custom slider. So you can use this as well, any, any slider really, but this is going to cover the custom sliders and I will show you what the difference is in just a moment.

0:31 So let’s go ahead and edit the page. I have the editor right here. So you can see that I have those four sliders here.

0:41 And when I mention custom slider, it is this tab group. So this is tabs, but this one down here is testimonials.

0:53 So that one is is a plugin that is very simple to just add and remove anything you want. So there’s that one.

1:03 And then the second section down here, again, this is tabs. So this is custom as well. And then lastly, this one also uses that testimonials.

1:14 Block so that these testimonial blocks that use this will not be affected by what I’m about to show you. So let’s go ahead and dive right in.

1:29 So when I covered those numbered buttons in editing the sliders, you will recall that we had to define a custom name for these.

1:46 So let’s show that these anchors are all called one, two, three, four, five, et cetera. And then this one, these tabs, oops, these tabs are called one, the actual numbers, one, two, and three.

2:10 So on the live page, these are all clicking through to their own sliders. Just as intended. So what I wanted to show you here is they have to be unique names.

2:33 So for example, if this has, we call this two and less. Refresh the page. This is going to jump to this one because that has the anchor link of the word two.

3:02 So that is what you should keep in mind if you are doing these custom sliders in one page, in the same page.

3:11 So just to make sure cause I think also in the demo site block gallery page, there were two sliders that had I kind of had the same naming convention.

3:25 So yeah, like that one is going to slide two on this one. But this one down here has its own naming convention.

3:34 So, that is working correctly, but yep, for that example, this one is just jumping to this one because they have the same kind of naming convention.

3:45 So, that’s just what I wanted to keep make sure you kept in mind. That made sense. Basically, just make sure you’re giving them unique names.

3:54 And again, it can be anything. I just like to do the numbers. So that is it.

Objective Checklist

  • Recognize what a custom slider is (Tabs vs. Testimonials block)

  • Set unique anchor links

  • Apply unique anchor links to all buttons

  • Confirm buttons & links work correctly

Design Library, Editing Blocks + Pages

Design Library, Blocks and Page Settings

This video covers how to use and navigate the Design Library, rearranging blocks (easily move up and down or delete), and adjust page settings.

0:00 Now I wanted to cover the kind of page settings and styles as well as walking you through creating your very own custom page with the block gallery.

0:12 So here I am creating a new page here, so we’ll just call it New Page Example and then Then we can start.

0:21 Opening up or creating your page as you want and I’m going to open the Design Library and this is what’s included with your theme.

0:30 So here we have, I’ve provided for you all of the blocks included with the theme and that is present throughout the entire site, so you can kind of mix and match.

0:41 However you want to create your own page. Now some of these might say something silly or funny, look funny like that, don’t worry about it, it should load as intended like that right there.

0:53 So let’s go ahead and add a kind of hero, like that’s the top of the page is called a hero.

1:01 So we can go down to hero and let’s do this one, so that looks good and then I recommend using this navigator because it’s quite easy to navigate throughout the site but after that’s added you would just click in this bottom space here.

1:20 And then you can go back into the design library and add some more, so let’s say we kind of want, you can look through here or even navigate there, let’s do like this number counter, that looks pretty good and then click enter.

1:39 And just keep going and building however you desire, and so I’m gonna do that and come back. Okay, so I have finished building my page with the blocks from the block gallery, and here is what we have.

1:58 So I want to go over a few more things. You can easily adjust the position of all of these. So, for example, right here, it doesn’t look that great with two different kind of content areas, both having the same type of background.

2:16 So you can either do like they both have a background image is what I’m getting at. And that doesn’t particularly look great.

2:24 So we can either just remove this image and set a color. And then that looks much better. Or if we want to keep both images, I could just simply swap these.

2:43 I can move these blocks down so clicking like these top and bottom most blank areas because it’s selects the entire section and then use this little toolbar, floating toolbar up here and just use this arrow and voila, there that still looks like a pretty great structure.

3:01 So publish. And let’s view our page and so here you can see it looks a little a little odd. With this content here for the purposes of how I want this page to look so I want to get rid of this up here and kind of like this boxy frame to look to the page so this is very simple so let’s go back to the

3:32 page editor and in this top right area click on this second icon and if you hover over it it says page settings and you will see all these cool page settings so we’re really you will probably only want to focus on page title, page layout, and content style you probably just for this example we won’t

3:59 get into the other ones but they’re kind of self-explanatory so just kind of explore them at your own pace but so page title it was showing so these defaults it’s showing default because that is actually how we have it set up in the customizer right now I will go over that in just a moment so we are

4:20 going to disable the page title and it was boxy but we want it a full width and unbox so now we can update and view the page and there we have it.

Objective Checklist

  • Navigating the Design Library

  • Adding blocks and content from the Design Library

  • Moving and rearranging blocks

  • Adjusting page settings

Default Page Settings

You can define a default “look” for new pages you create on your site, and you can also set specific settings per page. From hiding the header or footer on a page, to making the page full width – here’s how to do that!

0:00 Now I wanted to cover the kind of page settings and styles as well as walking you through creating your very own custom page with the block gallery.

0:12 So here I am creating a new page here, so we’ll just call it New Page Example and then Then we can start.

0:21 Opening up or creating your page as you want and I’m going to open the Design Library and this is what’s included with your theme.

0:30 So here we have, I’ve provided for you all of the blocks included with the theme and that is present throughout the entire site, so you can kind of mix and match.

0:41 However you want to create your own page. Now some of these might say something silly or funny, look funny like that, don’t worry about it, it should load as intended like that right there.

0:53 So let’s go ahead and add a kind of hero, like that’s the top of the page is called a hero.

1:01 So we can go down to hero and let’s do this one, so that looks good and then I recommend using this navigator because it’s quite easy to navigate throughout the site but after that’s added you would just click in this bottom space here.

1:20 And then you can go back into the design library and add some more, so let’s say we kind of want, you can look through here or even navigate there, let’s do like this number counter, that looks pretty good and then click enter.

1:39 And just keep going and building however you desire, and so I’m gonna do that and come back. Okay, so I have finished building my page with the blocks from the block gallery, and here is what we have.

1:58 So I want to go over a few more things. You can easily adjust the position of all of these. So, for example, right here, it doesn’t look that great with two different kind of content areas, both having the same type of background.

2:16 So you can either do like they both have a background image is what I’m getting at. And that doesn’t particularly look great.

2:24 So we can either just remove this image and set a color. And then that looks much better. Or if we want to keep both images, I could just simply swap these.

2:43 I can move these blocks down so clicking like these top and bottom most blank areas because it’s selects the entire section and then use this little toolbar, floating toolbar up here and just use this arrow and voila, there that still looks like a pretty great structure.

3:01 So publish. And let’s view our page and so here you can see it looks a little a little odd. With this content here for the purposes of how I want this page to look so I want to get rid of this up here and kind of like this boxy frame to look to the page so this is very simple so let’s go back to the

3:32 page editor and in this top right area click on this second icon and if you hover over it it says page settings and you will see all these cool page settings so we’re really you will probably only want to focus on page title, page layout, and content style you probably just for this example we won’t

3:59 get into the other ones but they’re kind of self-explanatory so just kind of explore them at your own pace but so page title it was showing so these defaults it’s showing default because that is actually how we have it set up in the customizer right now I will go over that in just a moment so we are

4:20 going to disable the page title and it was boxy but we want it a full width and unbox so now we can update and view the page and there we have it.

Objective Checklist

  • Difference between editor Page Settings and Customizer Page Settings

  • Editing Default page settings in the Customizer