The customizer has a range of options that allow you to make changes throughout your website, and view the changes in real time. You can also greatly extend your customizing power by making use of LSX Blog Customizer Extensions.
Navigating to the Customizer
There are two ways you can navigate to your customizer:
- Select “Customize” from the top dashboard menu when viewing the front-end of your website
- Navigate to your website, and login by entering your username and password into the fields provided after you follow your website URL with the slug “/wp-admin” (eg: mysitename.com/wp-admin)
- From your Dashboard, select your site name next to the WordPress Icon in the corner of your Dashboards top menu
- Select the “view site” option
- You should now be viewing your website’s homepage. Select the “Customize option” from the top menu bar.
- Selecting Customize from the Dashboard
- Navigate to your website, and login to the back-end of your website
- Navigate to your Dashboard, and hover over the menu item labelled “Appearance”
- Select the sub-menu item “Customize”
There is a range of options available when designing with the customiser. Your customiser should match the one in the image below (the additional css option at the bottom will only be for the latest WordPress versions):
- Select the “Site Identity” option from your customizer menu
- Under this heading you will see the following fields:
- Site Title: Insert your site’s title in this field.
- Tagline: Insert your site’s tagline in this field.
- Logo (Your logo needs to be removed from the Title and Tagline to display.)
- To upload a logo for the first time, click on the Add Logo button (your logo can be any size, but we recommend a minimum height of 75px).
- If you would like to remove an existing logo, click on the “Remove Logo” button and the current logo will disappear.
- If you would like to change an existing logo, click on the “Change Logo” button.
- Select the “Core Settings” option from the Customizer menu
- Select the “Lazy Loading Images” checkbox to decrease the loading time of your pages. This features causes images to load only on the page area being viewed by the user
The layout options in the customizer allow you to do quick and easy layout changes to your header and body areas without touching code.
- Select the “Layout” option from your Customizer menu
- Here you will see a Header and a Body section. Each section has a thumbnail example display of the option you select
- Select one of the three display options for your header. Each option displays your menu items and logo in a separate layout
- Below the three options you will notice two checkboxes:
- Fixed Header: selecting this options causes your header to be fixed to the top of the display window when a user scrolls down the page/post
- Search Box in Header: this options allows you to automatically add a search bar to your header, allowing users to easily navigate your sites content
- Select one of the three layout options for your body text. Either choose to have a full-width body area or a sidebar on the left or right of the display
Configuring the color scheme of your website is hassle-free with the use of the custom color options integrated into the Customiser by the LSX theme.
- Select the “Colors” option from the Customiser menu
- Here you can configure the background color of your homepage
This area allows you to change the font style across your website. There are four font types to choose from.
- Select the “Font” option from the Customiser menu
- Your customiser menu should show four different font options
- The title of each font is displayed in in the font in represents, which gives you a basic preview of the font before you select it
- Selecting a font will automatically display that font on your website in the display section of the Customiser
- The following font options are available:
- Noto Serif
- Noto Sans
The background image option allows you to set and position a background image for your page body section.
The “menus” customiser options allow you to configure the menus of your website. Here you can add new elements to your menus, change the location of your menus, or add a new menu altogether.
- Select the “Menus” option from the Customiser menu
- Select the first option “Menu Locations”
- This options area allows you to configure the locations of your menu items.
- The LSX theme supports four menu locations: Primary Menu, Top Menu, Social Menu and Footer Menu. View more on the LSX menu options here
Edit your Menus
- Select the “Menus” option from the Customiser menu
- Below the “Menu Locations” option, you will see a list of all your current menus. (default of Primary Menu and Social Menu
- Select one of the menu items
- Here you will see a breakdown of the items listed in your menu.
- You can reorder the menu items, remove unwanted items, and add in new items.
- Under the “Menu Locations” title, you can change the location of the menu you selected (these changes can be done here instead of the “menu locations” settings area)
- Under the “Menu Options” title, there’s a checkbox option which allows you t o
Add a Menu
- The third option allows you to add a new menu
- Select the “Add a menu” option
- Create a suitable name for this menu
- Add items to your menu by selecting the “Add Items” option
The next settings area on the customiser is the “Widgets” section
- Select the “Widgets” option from the Customiser menu
- Here you will see the two widget areas supported by the LSX theme:
- Footer call to action
- Select one of the above widget areas, and add your desired widgets by selecting the “Add a Widget” option
The LSX theme supports a static front page.
- Select the “Static Front Page” option from the Customiser menu
- Choose whether your front page displays your latest posts, or a static front page.
- If you select the “Static front page” option, select which page to display as your frontpage (usually homepage), and which page to display as your posts page (usually blog page).
WordPress Login Screen
You can customize the appearance of the WordPress login screen when you use LSX theme.
Select Customize from the Appearance menu.
Or from the Admin bar on any page when logged in as Administrator.
Then select WP Login Screen, the following options are available:
- Upload a logo
- Set the link colour
- Set the link hover colour
- Add custom CSS
Login Form Settings
- Form background color
- Form label color
- Button colour
- Button Shadow Colour
- Button Hover Colour
- Button Text Colour
- Background Colour
- Background Image
- Background Repeat – repeats the image horizontally or vertically
- Background Size – set the size either to cover the screen or fill the container