- How to Use a Custom Header Image
- How to Configure the Site Header Banner Image
- How to Configure the Navigation Menus
- How to Configure the Home Page
- How to Configure the Home Page Welcome Widget Area
- Sidebar Widget Areas
- How to Configure the Primary Sidebar Area
- How to Configure the Split Sidebar Left Widget Area
- How to Configure the Split Sidebar Right Widget Area
- How to Configure the Bottom Sidebar Widget Area
- Statigram Widget Settings Page (Instagram Image Gallery)
- How to Configure the Footer Widget Areas
- Special Widget areas Included in the Beautiful Pro Theme
How to Use a Custom Header Image
For those that prefer a Logo Image rather than a text based site title it is also possible to use a small logo style image that will display in the upper left corner of the site.
To upload your header image, navigate to Appearance > Header menu. Images of exactly 320 × 120 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.
How to Configure the Site Header Banner Image
The Beautiful Pro theme demo displays an image below the header area of the site using the WordPress custom background feature.
- Navigate to Appearance > Background in your WordPress admin panel.
- Use the “Choose File” button to select the background image you wish to use from your computer.
- Click the “Upload” button to load the image for use on your site.
- Alternatively you can use the “Choose Image” button to select the background image you have loaded to your site previously.
- The Display Options settings for Position, Repeat, and Attachment will be used as set.
- To select a Background Color to show as the Background image loads in click “Select Color” and choose a color or enter a color code. The theme uses #ffffff as a default color.
- Click the “Save Changes” button to preserve your changes.
Note: This background image will work best if it is exactly 200px high. Taller images will display only the middle 200px on the screen. The image included in the theme is 2000px wide and intended to not be repeated. Experimentation may be needed to find an image that will work well in this location.
How to Configure the Navigation Menus
In the Beautiful Pro theme, the Primary Navigation menu area is not used in the demo.
In order to create a custom menu for your theme you’ll need to first create pages that you’d like on that menu.
Once you’ve created your pages
1. Navigate to Appearance -> Menu
2. Click “create a new menu”
3. Select the pages you’d like on your menu and click “Add to menu”
4. Keep “Theme locations” unselected
5. Click “Save Menu”
How to Configure the Home Page
Blog Post Display
The number of posts displayed can be changed by navigating to Settings > Reading and setting the “Blog pages show at most” option to the number of excerpts you would like to have display on the home page.
How to Configure the Home Page Welcome Widget Area
The Welcome Message Widget displays before the most recent posts on the home page only.
Be Sure to click the “Save” button to preserve your changes
Sidebar Widget Areas
This theme uses a total of Four(4) individual widget areas in the sidebar for added flexibility when adding widgets to your sidebars. You’ll find all of the following widgets by navigating to Appearance -> Widgets:
- Primary Sidebar
- Split Sidebar Left
- Split Sidebar Right
- Bottom Sidebar
How to Configure the Primary Sidebar Area
The following widgets are used in the Primary Sidebar area that displays to the right side of the website.
Text Widget Settings:
Simple Social Icons Widget Settings:
On the simple social icons make sure that you make the following selections:
- Icon Font Color: #333
- Icon Font Hover Color: #fff
- Background Color: #eee
- Background Hover Color: #e5554e
Genesis Latest Tweets Widget Settings:
How to Configure the Split Sidebar Left Widget Area
The left side of the Split Sidebars is configured with the following widgets:
- Text Widget (Use the text of your choice)
For the Split Sidebar Left that appears on the demo site we’ve selected a Text Widget as shown below. The text shown within the text widget below renders the small square images that appear on the Beatiful Pro Theme. You’ll want to create your own text to go in this widget.
How to Configure the Split Sidebar Right Widget Area
The right side of the Split Sidebars is configured with the following widgets:
- Custom Menu Widget
- Archives Widget
How to Configure the Bottom Sidebar Widget Area
The Below the Left and Right split sidebars an additional single sidebar is configured with the following widgets:
- Stratigram Widget (Instagram Image Gallery)
Statigram Widget Settings Page (Instagram Image Gallery)
To configure the Instagram Image Gallery select the settings as follows:
- Navigate to Appearance > Statigram Widget
- Content: My Feed
- Username: You Instagram Username
- Informations: Uncheck
- Linking to: Instagram
- Width & Height: 360 x 360
- Mode: Grid
- Layout: 3 x 2
- Padding: 10
- Photo border: Uncheck
- Background Color: FFFFFF
- Text Color: 333333
- Widget Border: Uncheck
- Be Sure to click the “Save Changes” Button to preserve your changes
How to Configure the Footer Widget Areas
The Beautiful Pro theme demo includes three (3) widget areas that will display in the footer area of the site when widgets are added to the individual Footer Widget Areas.
Footer 1 Widgets:
- Text Widget (Use the text of your choice)
Footer 2 Widgets:
- Recent Posts Widget
Footer 3 Widgets:
- Tag Cloud Widget
- Search Widget
Special Widget areas Included in the Beautiful Pro Theme
The Beautiful Pro theme includes two special widget area designed to display additional content on your site:
- Before Header Widget Area – Displays before the Header area of the site
- After Entry Widget Area – Displays after the content on single posts
Before Header Widget
After Entry Widget
The After Entry Widget edit screen.
The After Entry Widget on the demo site.
Congratulations! You are now ready to begin adding content and personal touches to your new Genesis powered website.