Theme installation
The theme can be installed in two ways – through the WordPress admin dashboard or by manually uploading files through an FTP.
Installing the theme through the WordPress admin dashboard
- Log into the WordPress admin panel.
- Go to Appearance -> Themes.
- Click on the Add New button, at the top of the screen.
- In the Add Themes screen, click on Upload Theme.
- Click on Choose theme, and then browse for the theme file on your computer.
- Click on Install Now to start the installation.
- After the installation is done, click on Activate theme.
Installing the theme by manually uploading files
- Download the latest theme version from themetick.com.
- Extract the zip folder on your computer.
- Connect to your server using an FTP client.
- Upload extracted theme folder into ..wp-content/themes/ directory.
- Log into the WordPress admin panel.
- Go to Appearance -> Themes.
- Click on Activate theme.
Required plugins
To start the setup process, click the “Start” button.
In the second step, the Installer will take care of installing all the necessary plugins. If you want to see the list of plugins that will be installed, click the “Advanced” button. To initiate the plugin installation process, click the “Install” button.
Importing demo content
To view the content that will be imported, click the “Advanced” button. When you’re ready to begin importing the demo content, click the “Import” button. The time required for this process may vary depending on your chosen theme and hosting provider, but it typically takes a few minutes.
After the content has been successfully imported, you have two options: you can either preview your website or return to the WordPress Dashboard. If you click the “Advanced” button, you’ll find two additional links:
- Explore WordPress: This link will take you to the WordPress.org support page, where you can discover more about WordPress and explore its capabilities.
- Start Customizing: This link will direct you to the Customizer for your website.
Theme customization
Using the theme editor
With the Site Editor, you have the power to craft every aspect of your website, starting from the top header and extending all the way to the bottom footer, all through the utilization of customizable blocks. This tutorial will introduce you to the editor’s functionalities.
- Accessing the Site Editor To access the Site Editor, simply follow these steps:
- Begin from your website’s dashboard.
- Find “Appearance” on the left-hand side.
- Click on “Editor.
- Exploring the Site Editor Upon entering the Site Editor, you’ll encounter the following elements:
- A left-hand panel featuring various options, detailed further below.
- Your website’s homepage displayed on the right, reflecting the homepage you’ve configured in the Reading Settings.
Additionally, clicking anywhere on your site’s content to the right will activate the editor and conceal the left sidebar.
- Sidebar on the Left The left sidebar offers the following choices:
- Navigation: Control your website’s navigation menus.
- Styles: Customize colors, fonts, and design elements for your site.
- Pages: Modify the content of specific pages on your site.
- Templates: Adjust the structural layout of your site’s content.
- Patterns: Edit smaller components within your templates (e.g., header and footer) and any custom patterns you’ve designed.
Your homepage appears to the right of these selections. To toggle the left sidebar on and off, simply click anywhere within this region, opening your homepage in the editor.
- Top Menu
- Site Icon: A single click returns you to the options mentioned in the previous section. A double-click takes you back to your dashboard.
- + Block Inserter Button: Add a new block with a simple click.
- Tools: Choose between editing a block or selecting it. Opt for the Select tool to pick individual blocks, and press the Enter key to return to editing once a block is selected.
- Undo: Reverse your most recent action.
- Redo: Restore an action previously undone using the Undo button.
- List View: View a comprehensive list of all the blocks on your page, useful for assessing your page’s structure and managing blocks (edit, move, or remove). Learn more about List View.
- Command Center: Displays the name of the template you’re currently editing. Click here to search through your site’s templates. Explore more about template editing.
- View: Preview your site’s appearance with the applied changes.
- Save: Safeguard your modifications. Learn more about saving.
- Help Center: Access valuable guides or contact support for eligible plans.
- Settings: Toggle the settings sidebar on the right, showing or hiding it.
- Styles: Customize colors, fonts, and more. Delve deeper into Styles here.
- More Options: Unveils additional settings and tools.
- Saving Your Edits
After clicking the Save button to preserve your Site Editor alterations, it will pinpoint the areas where you’ve made adjustments. You can opt to save all modifications or select specific ones to save. It’s essential to remember that certain changes, such as those made to Header and Footer templates, will be applied universally across all pages utilizing these templates, not solely the page you were currently editing.
Setting up menus
This guide will demonstrate how to create a new menu from scratch by using Gutenberg.
- To easily identify the pages you want to include in your menu, it’s recommended to open your Pages in a separate tab. Unfortunately, the new menu system does not provide a comprehensive list of all your pages. However, if you already know which pages you want to add, you can skip this step.
- Now, return to the menu on the editing site and select “Start Empty” to begin with a blank menu. To create your first menu item, click the plus sign in the menu to add a block. The primary blocks to start with, are your pages . Simply type the name of the page you wish to add into the search bar, and a link to that specific page will be added.
- To include additional menu items, access the List View. Here, you will find a Navigation block along with your Page block. By selecting the Page block and pressing the “Return” key on your keyboard, you will create a placeholder for your next Custom Link.
- You can continue adding page links by pressing “Return,” searching for the page title, and selecting it from the dropdown menu.
- To create a dropdown menu, you can incorporate Post Categories under a menu item. Simply click on the desired menu item, and you will notice a small icon called “Add submenu” in the floating toolbar at the top of the page. This option will automatically insert a submenu placeholder, allowing you to add blocks as you did previously. To search for specific page category links, you can type directly into the toolbar. Additionally, you can use the plus sign to add more links, resulting in multiple dropdown menus for each menu item.
- To include a search box or search icon in your menu, follow these steps: 1) Select the menu item in your menu where you want the search box/icon to be placed. 2) Press the “Return” key on your keyboard, which will create a designated space for your item. 3) A drop-down menu of links to add will appear. 4) Scroll through the options and click on the “Search” item located at the bottom of the list.
Setting up site logo
- To modify the logo in the header of your site, in the back end click Appearance -> Editor
- Once the editor loads, click on the Template Parts button.
- In the templates screen, select Template parts on the left-hand side and then click on the header.
- The title placeholder will already be present but it will show text by default.
- To change this and make it possible to upload a site logo, click on the title icon and select Site Logo from the Transform to dropdown.
- Once the Site Logo element appears, click on it and either upload or browse for the desired logo file.
- Save your changes when you are done.
Setting up the site title
- To set the site title and favicon, start by navigating to Appearance -> Customize and selecting the Site Identity panel.
- To modify the title of your page template using the Site Editor, click on the down arrow near the template name at the top of the screen.
- Click on the Browse all templates button.
- In the templates screen, select Template parts on the left-hand side and then click on the header.
- The title placeholder will already be present and by clicking it you will be able to enter the desired text for your site title.
- When done, save your changes.
Editing page / template
- Open the Template Editor
To begin editing your template, navigate to the Editor from your dashboard. On the left-hand side panel, locate the Templates option and choose the Page template. Next, click on the pencil icon to initiate the editing process. This action will close the left sidebar, allowing you to concentrate on your edits.
2. Explore the Template’s Layout
Start by accessing the List View. Simply click the icon located at the top left of the screen, which resembles three horizontal lines stacked on top of each other.
In this view, you’ll find all the elements, referred to as blocks in the WordPress editor, that compose your template. A typical Page template includes the following components:
- Header: The header encompasses elements such as the site title, logo, and menu. It’s a template part that remains consistent throughout your entire website. Any modifications made to this header will affect all pages where the header template part is utilized.
- Title: The page title is represented by the Title block within the template. When visitors view an actual page on your site, the title you’ve written for that specific page will be displayed here.
- Featured Image: The featured image serves as a single image to represent your page visually.
- Content: The page’s content is presented as the Content block in the template. When you view an actual page, the content added through the Pages feature will appear here. Removing the Content block will result in pages using this template appearing devoid of content until it’s reintroduced.
- Footer: The footer includes elements like the site title, contact information, and a WordPress footer credit. This footer is a template part visible on every page. Any changes made to this footer will affect all pages where the footer template part is employed.
3. Customize the Design
For customizing the default design, you have the option to replace the text and images with your own content, as well as add or remove any elements from the page as needed:
- Add New Elements
If you wish to include an element on every page, such as a subscription box, contact form, or a button, you can incorporate it into the Page template, ensuring it displays on all pages using this template.
Simply click the + block inserter to introduce a new block in your desired location. You can utilize the List View to precisely determine the block’s placement. After saving your changes, the newly added block will be visible on all pages that employ the template you’re currently editing.
- Move the Page Title
While editing the previously mentioned page template, you will come across the Title block, which signifies the location where the actual page title will be displayed on your individual pages. If the Title block is not present, you have the option to include it. This block offers settings that allow you to modify alignment, size, color, and other attributes.
Additionally, if you prefer not to display the title on your pages, you can do so by deleting the Title block. Simply select the block, click the three dots icon in the toolbar above it, and choose the “Remove” option. For further guidance on removing a block, refer to the “Remove a Block” section.
- Remove the Featured Image
While editing the page template according to the instructions mentioned earlier, you’ll encounter the Featured Image block, which displays a featured image on your individual pages. In case the Featured Image block is not present, you can include it.
If you want to eliminate the featured image, simply choose the block, click on the three dots icon in the toolbar above it, and then select the “Remove” option. For additional information on removing a block, please refer to the “Remove a Block” section.
- Change the Content Width
To adjust the width of your page content, whether you want it wider or narrower, you have control over this in the Page template.
When you access the contents of the Page template, the width is generally managed by the blocks referred to as “Group.” To modify the width, follow these steps:
Utilize the List View to pick the Group containing the content.
A toolbar will appear alongside the content Group. Select “wide width” or “full width” to alter the width of your content.
- Show Missing Content
If your pages seem devoid of content, it’s possible that you inadvertently removed the Content block from the template. To ensure your pages display their content, follow these steps:
Edit the page template as previously explained.
In the List View, pinpoint the location where you intend your content to be displayed, often beneath the header or title within the template.
Click on the + block inserter to introduce a new block and select the Content block.
Finally, click “Save” at the upper right corner of your screen.
4.Apply the Page Template to a Page
As you reach the conclusion of this guide, you will likely have finalized your Page template’s layout. By default, any newly created pages will use this Page Template. To ensure a page utilizes the Page Template, follow these steps:
Begin from your dashboard and navigate to “Pages.”
Select the specific page you want to edit.
On the right-hand side, within the Settings sidebar, locate and click on “Template” as illustrated in the following image. If the Settings sidebar is not visible, click the settings icon adjacent to “Publish” or “Update” to reveal it.
If you’re editing a standard page, the Template should display as “Default template.” Alternatively, click on the template name and choose “Page template” from the dropdown menu.
Click “Update” or “Publish” to save your changes.
Review the page to confirm that it now adheres to the intended layout.
Global Styles
Font options
To modify the typography settings for various website elements, follow these steps:
- Open the Editor and click on the Styles icon located at the top right corner of the screen.
- Click on Typography to access the typography settings for different website elements.
- Once you click on Typography, you will find four distinct sections: Texts, Links, Headings, and Buttons. You can adjust the typography settings for each of these elements. For example, by clicking on Texts, you can choose a font, text size, appearance, and line height. There are many font options available to choose from.
Color options
Patterns
Block patterns offer pre-made layouts that you can effortlessly incorporate with just a few clicks. This guide will walk you through the process of inserting block patterns onto your website and personalizing them with your own unique content
- To explore the diverse range of block patterns at your disposal, follow these simple steps:
- Navigate to your dashboard.
- Access the editing interface by either selecting ‘Pages’ or ‘Posts’ and choosing a specific page or post to edit, or by visiting the site editor located at ‘Appearance’ → ‘Editor.’
- Within the editing screen, locate the ‘+ Block Inserter’ positioned at the top left corner.
- Click on the ‘Patterns’ tab.
- You have the option to explore collections of patterns categorized under various themes such as Text, Image Gallery, Header, Forms, and more.
- If you wish to view all patterns, click the ‘Explore all patterns’ button situated at the bottom of this section, which will open the patterns in a larger window.
- Simply click on any desired pattern once, and it will seamlessly integrate into your page at the precise location of your cursor.
- Utilizing a Block Pattern When you come across a block pattern that appeals to you, simply click it once to insert it seamlessly into your page. The entire pattern of blocks will be added to your page right where your cursor is located.
- After inserting a block pattern, you have the freedom to modify the content. Click on any block to edit the content within that specific block. Here are some of the things you can do:
- Replace existing text: Easily erase the current text and replace it with new text using your keyboard.
- Swap out images: If there are example images within the block, click on any image and choose ‘Replace’ from the block’s toolbar
- Utilize List View: To gain a comprehensive overview of all the blocks within the pattern, switch to List View. From there, you can rearrange, delete, or add blocks as needed.
Custom css clases