• WP Themes
    • Free Themes
      • Oswald Lite WP Theme
      • MariGold WP Theme
    • Premium Themes
      • Oswald WP Theme
  • WP Tuts
  • WP Reviews
  • WP Hosting
  • Freebies
  • Book a Review
  • Contacts
Home/Top Tips on Customizing a WordPress Website + Helpful WP Daddy’s Tuts
2 shares
Tips on Customizing a WordPress Website + Helpful WP Daddy's Tuts
January 31, 2021 | Reviews, Tutorials | 0 comments

Top Tips on Customizing a WordPress Website + Helpful WP Daddy’s Tuts

Hello guys! These days I’m busy customizing a WordPress website for a certain clinic, and now I’ve resolved to share some interesting and helpful tips on website customization with you.

Of course, I am not allowed to disclose the name of the clinic, so I’m going to blur and cross out its logo and some of the texts on the snapshots in this post. Despite this, I am quite free to share the useful things on how to create a homepage of a cool website using WordPress Customizer options, as well as unlimited possibilities brought by Slider Revolution and WPBakery page builder.

So, let’s start!

I’ve got a WP theme with 5 homepage variations, several types of layouts for About Us, and different product pages. As WooCommerce functionality is not required for this site, I’ve used just layouts for home and about pages.

homepage layouts default

The very first thing to do is to choose what page is going to be displayed as a homepage. By default, the homepage of the theme showed the latest blog posts,

default homepage latest posts

wp customizer your latest posts

but if you want to replace it with something else, you should go to Homepage settings in your WP Customizer and choose a Static Page instead of Your Latest Posts and then select the required page to display from the drop-down menu.

wp customizer a static page

The fact was that I liked the slider from the 4th homepage with a girl sliding from the bottom and caption sliding from left to center, but the structure of the page itself wasn’t as appropriate. So I’ve resolved to create a custom structure under the chosen slider.

slide default

So I went to WP Customizer and selected the Homepage Sample #4 from the drop-down list of the Static Page menu.

homepage sample 4 in wp customizer

Now I can change the slider and build the structure of my homepage using the Composer’s blocks.

Slider Revolution Options

No matter what default slider you choose, you can change its animation effects and transitions, change its color, background, text, images, and other features.

To edit the slider, go to the Slider Revolution menu in your WP dashboard and select the main slider in the Modules section.

slider-modules-section

Here’s how the slider looked by default. It included the grey background, an image, an inscription, and its shadow as well as a clickable button.

standard slider layers in slider revolution

Here’s what is included in the Slider’s list: blue and white lines are the custom lines that can be moved, replaced, you can change their color, width, and length. They are used to highlight and underline the caption’s text.

The color is changed in Layer Options -> Style -> Background -> BG color. In the style section of the Layer Options editor of Revolution Slider, you can change the spacings, border, and other options.

style white line

Layer Options is the main area that includes all options you can use when editing the slider. Here you can change the position and size of every slide’s layer, and change everything that I am going to talk about further.

position and size slider

So, here you see the Welcome text which is the main caption (the title),

welcome text slider

the Text – which is the smaller caption under the title,

caption text slider

the additional text which plays the role of the title’s shadow here,

shadow text slider

and the image which is uploaded to the slider as a separate layer.

image of the slider

Of course, you can change the color of each text, the text itself, the font types of the text, and more. You can drag-and-drop and replace your texts, images, and any elements on the slider.

changing the welcome text slider

The styles are changed in the Layer Options -> Style tab of Slider Revolution.

font of the welcome text

I’ve resolved to select the colored background for every slide separately. So, I’ve got three different slides with different images, captions, and backgrounds. The background for each slide should be selected in the Slide Options -> Background menu of Slider Revolution.

colored background of the slider

After choosing the colored background, I’ve uploaded the new image instead of the default one. You just click the default image and press the Delete button on your keyboard or select a required layer and click the recycle bin icon on the above panel of the slider’s dashboard.

recycle bin slider

After that, click the plus icon in the same panel and choose a new layer to be added.

add new layer slider

If this is an image, then select the source where you want it to be uploaded from. I’ve selected the media library and uploaded a new custom image with a transparent background instead of the default one.

image uploaded

If you wish you can select the transparent background instead of the colored one for your slide or upload an image and make your slide to be a full-fledged photo that is going to look like a cover under the caption.

Of course, you can easily edit the button text in the corresponding layer and insert the link instead of ‘#’ sign to make the button clickable and to make it lead a user to a certain page. You can also change the button color in the Style tab of the Layer Options section.

image background slider

If you’ve selected the image with transparent background, you can select any animation in the Layer Options -> Animation menu and then select the ‘Anim from’ tab to pick the animated effect.

anim from slider

I’ve selected the ‘long slide from bottom’ transition effect in my slider to make the image appear in the slide unexpectedly.

animation for image in slider

You should also check the responsiveness of your slider to make sure it looks good on all devices.

responsiveness slider

There is a mobile-only text that is edited separately and especially for the mobile view of your slider.

mobile only text

On the mobile view, you should replace your image to make it look good enough on the vertical and narrow screen.

mobile view slider

So I’ve changed the font of a welcome text, the text itself and its shadow, as well as changed the caption text, its color, and style. I’ve changed the color of a blue line and made it a red line, changed the background color, and uploaded a custom image. I’ve selected the animation for my image and captions.

I’ve also changed some styling options in the WP Customizer (Appearance -> Customize) to replace the color scheme of the website which changed the color of all its buttons, fonts, and some other elements.

styling options color scheme

I’ve replaced the standard logo with a custom one as well, so here is what I’ve got:

This is just the first slide because I can’t disclose the overall design and all slides I’ve created, but be sure they are great thanks to the possibilities gifted by Revolution Slider and especially the ‘slide transitions’ that helped me to create cool effects. Try it!

Main Menu and Page Structure

As you see on the custom homepage slider, I’ve also rebuilt the standard menu and replaced it with a custom one. Here’s one of my older posts on WP menu creation. However, it explains how to add items to the menu from the list of pages.

On that current website, I used the custom links for creating the main and footer menus. You just select the ‘Custom Links’ tab in the ‘Add menu items’ section, add an URL and link text and then click the ‘Add to Menu’ button.  If you want to create sub-items, you just drag-and-drop your menu items and place them under the main items in the menu. All is easy!

custom links wp menu

Now I’ve resolved to change the initial page structure of the homepage demo #4 which I’ve chosen as my static page, and replace it with a custom structure.

Creating a structure of a page is pretty easy with the help of WPBakery page builder or Elementor front-end builder. This particular theme is based on the WPBakery one.

I guess you are probably aware of how to use and move the modules of this builder, so I am going to remind you in brief.

This is what the default structure of the homepage was:

default homepage structure

And I’ve selected different amount of headers in a row, added content boxes with icons and content boxes with images as well as some accordion content and testimonials carousels to create a custom page structure.

custom page structure wpbakery

Adding a module, as you know, is quite an easy task: You just click the edit with the ‘Backend Editor’ button,

backend editor button wpbakery

switch to the Classic mode,

classic mode button wpbakery

and then click the ‘+’ icon on the page to add a module from the list. After that, you can start to edit every module to create a structure for your page.

add a module wpbakery

list of modules wpbakery

Once you’ve added a module, you can select the number of modules in a row by clicking the corresponding icon.

number of modules in a row

You can easily look for a required module in the list of modules and pick the necessary one to insert it to the page.

look for module wpbakery

Once you add a block, you can edit it completely in the pop-up editor,

text block settings

or you can hover over the desired module and click the pencil icon on the green panel of instruments to edit what you want to edit in your module, add some images, links, select the font size, etc.

edit module wpbakery

edit block content wpbakery

If you want to highlight some separate rows with modules on your page you can upload an image background or select an HTML5 video background in mp4 format. Just upload the video to your WordPress media library and then insert the video ID into the corresponding field in the Video Background Options tab of the Row Settings pop-up.

Just click the video in the media library and it is going to be opened as a separate page or post with its unique URL, you’ll find the post ID in the address bar. By the way, you can find the guide on how to find the post ID here.

html5 video background options wpbakery

Well, as you’ve understood customizing the web-page with WPBakery page builder is an easy and pleasant process. I’ve told you more about customizing a site with WPBakery page builder here.

modules wpbakery customized

You just add the desired block, edit it and get the result:

Boxes with icons, headings, and accordion content.

ready custom structure of homepage

front end structure wpbakery

Accordion content.

accordion and timeline in modules wpbakery

Chained content.

chained content wpbakery

accordion content made with wpbakery

I’ve used a lot of additional modules like image carousels, testimonial carousels, and animated countdowns.

Depending on the chosen theme’s options and features you’ll be able to change your website’s styling, color scheme, logo, favicon, add widgets and social media icons to the footer and sidebars as well as use many more customization options.

So now, please check the following detailed tuts I’ve created for you could better understand the possibilities of WordPress when it comes to customizing your website.

How to Create Animated Countdown Timer in WordPress

How to Create Animated Countdown Timer in WordPress

How to Easily Add Forms On Your WordPress Website

How to Easily Add Forms On Your WordPress Website

How to Add Testimonial Rotator in WordPress

How to Add Testimonial Rotator in WordPress

How to Create an Appealing Event Timeline in WordPress

How to Create an Appealing Event Timeline in WordPress

How to Manage and Customize a WordPress Theme

How to Manage and Customize a WordPress Theme

Hope this tut was helpful,

Melany H.

 

melany hollywell wpdaddy
wpdaddy

Hi! I’m an experienced writer exploring WordPress for more than 5 years. I’m happy to share my knowledge and ideas with you and I hope you join me.

Cheers,
Melany H.

Share this post:
Related Posts
February 4, 2019

Asian Food and Sushi WordPress Themes + Gift Vouchers, Card Templates, and More

Sushi and rolls are favorite dishes of many devotees across the globe. This dish is popular both in Asian and European countries, although initially, it was absolute...
Read this post
September 13, 2019

Top 10 Donation, Crowdfunding and Fundraising WordPress Plugins You Should Try

The following collection of donation plugins includes the solutions compatible with WordPress and supporting PayPal, Stripe, and more payment gateways as well as Woo...
Read this post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to our Newsletter
Never miss out on the latest news, updates and tips. Subscribe now!
Top Marketing WordPress Theme 2021
Ewebot Marketing WordPress Theme
Download Revolution Slider Here!
revolution slider image
Categories
  • Art and Culture
  • Blog and Magazine
  • Business
  • Cars and Transport
  • Cleaning and Janitorial
  • Crypto ICO Token Sales
  • Design
  • Directory and Listing
  • Education
  • Entertainment
  • Events
  • Fashion
  • Free Themes
  • Freebies
  • Gutenberg
  • Health and Beauty
  • Hosting
  • Industry and Construction
  • Inspiration
  • Interview
  • Kids
  • Landscape and Gardening
  • Multipurpose
  • Non-Profit and Charity
  • Pets and Animals
  • Photography
  • Plugins
  • Portfolio
  • Real Estate
  • Restaurant
  • Reviews
  • Sports
  • Technology
  • Traveling
  • Tutorials
  • WooCommerce
Popular Posts:
  • Best Face Generators to C...
  • How to Add Video in the S...
  • How to Enlarge Images Whe...
  • How to Center a Shortcode...
  • How to Fix ‘Browser...

Copyright © 2021 WP Daddy. All Rights Reserved.

Follow Us: