} }

So we talked about building your brand and setting up your wordpress installation.

Let's talk about how to format your installation for an artist web page.

What is a theme?

First off, Wordpress sites require a "theme". Themes are just the structure of your content. It's a layout basic layout that helps you organize your content. Here's the current default theme for WordPress in 2017.

A google images search for WordPress themes:

Divi

Themes can be free or paid. I really suggest getting
this theme called Divi. It's $89/yr. To me this is worth it because of how much time creating a website can take.

This guide will use Divi.

Installing Divi

Once you sign up and download Divi, you're going to get a .zip file.

Get to the Theme Upload screen by clicking Appearance->Themes

Click Add new theme and then click upload theme on the next page.

Then click 'Choose File' and go find where you downloaded 'Divi.zip'. Or you can click and drag 'Divi.zip' onto the 'Choose file' box.

Click install now! After it installs, click activate!

Formatting Divi for an artist page

When Divi is installed, this is what your home page will probably look like.

This looks nothing like what we're going for. So let's clean it up and make it look like this.

INCLUDE FINISHED EXAMPLE HERE.

Change your site from a blog to an artist landing page

WordPress is really a blogging platform that we're using as a website service or CMS (content management service).

All this "post" stuff is not what you want. So let's get rid of it.

Simple Custom CSS

In order to make customizations, let's add a plugin called Simple Custom CSS.

In the main left-hand wordpress menu go to plugins and click 'Add New'. Search in the top-right for 'Simple Custom Css'.

Click Install, then click Activate, then click 'Add CSS'.

Remove the sidebars

Copy and paste all of this code below into the Custom CSS text box and hit 'Update Custom CSS'.

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}

/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
width: 100%;
padding: 23px 0px 0px !important;
float: none !important;
}
}

/*** Hide Sidebar ***/
#sidebar {display:none;}

Now the front page of your site should look at this.

Go to settings->Permalinks

Switch the Common Setting from Custom Structure to Post Name then click Update.

Switching to a static home page

This part is super easy.

Go to Pages->Add New

Title it 'Home' and then click 'Use Divi Builder'. Click Publish.

Feel free to go back to All Pages and delete the Sample Page that comes stock with Divi.

Next go to Settings->Reading and switch the homepage display from 'Your latest posts' to 'A static page' and then select the home page you just made. Click save changes.

Changing the menu, logo, and footer bar.

For now, I'll show you how to disable these features. Feel free to replace the Divi logo with your logo. You can also replace the menu links with new pages you create (About, Contact, etc.), and the footer credits/social media links with your info.

Menu - Go to Divi->Theme Options and then click on the green check mark next to "Exclude pages from the navigation bar" to turn it off.

Click the toggle bar next to Display Home link to turn it off.

Then click "Categories" towards the top and do the same for the "Exclude categories from the navigation bar".

Then click Save Changes at the top.

Disable the search bar - Go to Divi->Theme Customizer and then select 'Header and Navigation'. Then click on "Header elements" and de-select "Show search icon". Click Publish.

Disable the logo - If you want to disable the logo you can find it in Divi->Theme Customizer->Header and Navication->Primary Menu Bar. Simply click Hide Logo Image.

Disable the footer credits and social media

Go to Divi->Theme Customizer and select Footer->Bottom Bar. Scroll down and Select Disable Footer Credits or enter your own name to give yourself credit.

Then go to Divi->Theme Options and scroll down. You'll see the social media icons listed. Feel free to turn them off or add the URL's to your social media below.

Delete the header bar

Last we need to get rid of the line at the top of your page.

Simply go back to Appearance->Simple CSS editor and paste this code in after the code that's already there.

/* Hide the header */
#main-header { display:none; }
#page-container { 
padding-top:0px !important; 
margin-top:-1px !important 
}

/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}

Building your home page

Now we have a totally blank slate! Get ready to add your content.

Go to Pages->All pages and then click on your home page.

Click on the hamburger button of the blue box.

Then click on the photo tab (third) and upload the coolest background photo you have. Feel free to use a service like Unsplash to find a cool stock background photo.

If you want to use a solid color, the default tab is for that.

Click the green Save & Exit button.

Then click the grey "Insert Module(s)" box.

Scroll down to choose the "Text" module.

To add your logo click Add Media and upload your logo.

Click the 'Alight-center' option to center your logo on your page. Feel free to resize your image by clicking on it and dragging the edges.

Insert another Text module and add some text.

We are releasing our debut album completely free... ...through a first-of-its-kind interactive house party.

Select this text and click where it says "Paragraph" to try out different pre-set text sizes. Select all of your text and hit the Align center button or hit Shift+Alt+C to center the text.

If your background is dark click the Design tab at the top and change your Text Color from Dark to Light.

Mailchimp

Check out this article about setting up a Mailchimp account.

Once you have your account set up, find your API key by going to your account settings.

Then click Extras->API keys

Scroll down and click Create a Key.

Copy the API Key and go back to your Wordpress account. On your homepage, below the text modules you already added, add an Email Optin Module. Open this module and scroll down to the Email Account section. Click the black Add button to add an account. Give this account a descriptive name and paste in your API key. Click submit. Click the dropdown box and select the Mailchimp list you want to use. Then hit Save and Exit.



Show Comments