Your site header is one of the most Important parts of your site because it Has to be well thought easy to navigate And if possible contain some other Important information Therefore you need a theme that allows You to create complex headers in each Way and blocks is a team that allows you To do all that it has been my go-to team For a couple of years now and this Header here and this header here and Also this one here has built with a Proxy header Builder Today I'm gonna show you how to use this Header Builder how to create sticky Headers how to create transparent Headers and how to create multiple Headers also I'm gonna show you how to Create Mega menus and use some hidden Feature of this team as So if you're interested then jump in If you're not familiar with the proxy Team then it's one of the most highest Rated teams in WordPress repository as You see at the moment it has more than 90 000 active installations mind-blowing 701 5 Star reviews only one four star Review nothing less here it has a free Version which itself is awesome but even More awesome is a pro version Prices are quite reasonable for one site Here the license is 49 per year it also Has a lifetime license as you see 149 Dollars per year and for agencies the
Lifetime license for unlimited sites is 299 dollars now if we take a look at the Description of this video there is also A nice 10 discount coupon for you if you Follow the link and use a coupon then You'll get 10 off now when this is out Of the way let's take a look at how to Create a headers with a proxy team But before we start be sure that you Have bloxy Team installed proxy Companion add-on installed and if you're Using the proxy pro version then go to Extensions Choose pro extensions and activate Advanced menu And woocommerce extra add-ons Now let's start customizing let's go to The appearance and customize Now as you see I have set up a blank Page here with a blank here there are Only logo is over there so let's start Customizing it therefore let's set up The colors for the top row and for the Main row Main row here Design Default state This color here And top row Design And this color here Now I need to change the logo here Therefore I'm going to open up the logo Delete this one and select
The white version of it Okay Next one let's put the search box here If you're using the pro version then you Have it already Here just drag it in the right place Too close to the logo therefore I'm Gonna move it a bit maybe here Also not go therefore it goes here now The search box you can set the width Here I'm gonna set it with a bit longer 350 15 pixels I can set also the height it seems that It should be a bit higher 40 pixels Live results and since I'm using the Woocommerce I don't want it to search The posts and Pages I'm just gonna leave The products here Now we go to the bloxy context element And delete the mobile and address and Just customize this one here And now let's design it a bit Icon size I don't want the icon to be Rounded or outlined therefore I'm Gonna Leave It to none So I can say is a bit bigger Design default family maybe 14 pixels This way I can customize the header Using this blocks element here And I can set the margin left 40 pixels Let's publish it and let's move to the Next hidden feature probably some of you Don't know And this feature is useful for those who
Are using WP ml for a multilingual site So I have a wpml installed and I need a Language switcher Therefore I'm going to go to the header And as you see if I have a language Switcher activated I have a language is Element here I'm just gonna drag it Above my header Three languages English Estonian French If I open it up I can customize it Whether it's shown inline or dropped as A drop down so let's choose a drop down To see what happens here and it works Like this I like inline option more Therefore I'm gonna choose this one Whether to show the flag and label or Just a label or only a flag I'm gonna activate both label style is Short that means I'm not gonna show English Estonian French but short Version of the languages here I can hide the current language I can Set the item spacing as you see Bigger or smaller 10 pixels is enough For me and under the design I can choose The font colors and so on and with a Couple of clicks I can add my language Switcher in a place I like Also if you open up the footer Builder You can add the language switcher in the Footer in a similar way just drag it in A place you would like the language Switcher to be Great feature isn't it
Next feature is about header account Element I talked to Sergio from the bloxy team About the features that their customers Doesn't seem to know about or the Features their customers don't find Easily and he told me that this one is One of those that their customer doesn't Seem to find as you see there are two States for the account element Logged in option and logged out option If you click on it you'll see what Happens logged out options you'll see That there is a icon and text is login And if I click here it switches to the Logged in option and now the icon is Different and the text is different so You can customize it for two states so For logged in options you can choose Avatar icon Account action Icon size label visibility position and So on and label text Also you can choose the design here and For logged out options basically the Same Only there is no Avatar here account Action whether it's modal custom link or Woocommerce account now if you're using Woocommerce and you allow your customers To log in then this is a Nifty feature For you and this means that we can move To the next hidden feature and this Hidden feature is all about second
Mobile menu here As you see I have mobile menu one here But if I want I can add another one I'm Sure most of you don't know that there Is another menu option here so I'm gonna Just drag it here or there And for the sake of this video Let's Drag this one down below the header it's Here I can select the menu for example Foot Romania I can set the alignment Whether to stretch it or not I'm not Gonna do that pay attention though that It's not the responsive menu that means It it's not like your main menu on it Off canvas panel so that means it should Be a short one element visibility Whether to show it on tablets and Mobiles or only mobiles or only tablets You can choose this one and you can Design it as you like so let's make a Spacing a bit smaller 20 pixels and as you see now it's shown Nicely up here I can design the Row Background color for example this one Here I'm not going to activate it but you get The picture I'm gonna delete the menu and move to The next hidden feature And this feature is once again about the Header elements so I'm going to open up The desktop view and let's talk about This icon here if you hover on it you'll See that there is a clone item written
Here you can duplicate only those items That have this icon here for example Button if I drag it here It has all the same options activated as A button number one so I have two Similar patterns here but I can open up This one up and customize it as I like You can have up to two buttons up to Four contact elements up to six dividers And up to four HTML elements Just clone or delete as you like Also there are social items you can Clone up to two social item elements And this cloning option for me is one of The most powerful features of the header Element it allows me to customize my Header in every way like awesome feature And dero Kudos proxy team well done Now last one we need to add this cart Icon in the header Luckily we have a cart element therefore Let's drag it here Open it up and you can customize it you Can choose the icon here you can set Type and size Whether to show the badge or not Top level totals I'm not going to show Them And whether it opens up as a drop down Or a of canvas drawer I like the drawer More therefore I activate this this one Here and panel width It's gonna be 400 pixels for me And I can also design the panel
Background and so on but so far as you See three icons here you can set the Element margin that means spacing Between the icons here I set it for the Middle element that means for the Wishlist icon I set it to 20 pixels left Or right if I change it as you see there Are Too Close therefore I'm gonna add Those two 20 pixels here main row is Done let's add the top row here And now I'm going to open up the top row And there should be a HTML item Therefore I'm gonna clone it and move it Over there Text goes here Design Font color white font size 11 pixels And I guess it should be a bit thicker So I'm gonna give it a 500 or even 600 Yeah looks better Now since we cloned this HTML item we Need to get rid of the margin here Well There it is so let's move the menu up Here And this time we're gonna Grab the menu too It's gonna be the top menu With 11 pixels of font size and with This color And it's not gonna be uppercase Item spacing I'm gonna Make it 10 pixels Or even a bit less
I'm gonna take the color of the header And put it here and make it a bit Slightly lighter something like this I'm gonna go and grab social icons here These Under the design there's a default state Color is gonna be this one And the hover color Well maybe a darker one Like this Looks good Now if you want to add links or add Icons then links you can add from this Button here Or you can remove them and also take a Look you can configure social URLs here If you go here I can give them links And now let's publish it Or go to main row and ROM height 98 Pixels Okay almost finished we only need to add Two elements this menu here and this Menu here therefore let's go to the Bottom row And Move the menu one here So let's go to the menu here And under the design this is our initial Color and this one here is our hover Color Now let's customize the drop down So drop down design items background Color white Font color this one
Hover color this one Looks a bit better but not quite yet Therefore I'm gonna tweak this color Make the font bigger 15 pixels And I'm gonna add a divider It's gonna be solid And ebeb At the moment what I have to tweak is This color here therefore I'm gonna go To menus open up the main menu here Open up the about menu here menu item Settings design and as you see there is A heading color I'm gonna reset it I made it a bit earlier today therefore It was messed up But now it's good to go Now let's go back to customizer again And now we need to tweak it a bit since This bottom row is too high It's going to be 60 pixels and we need To add border down bottom It's gonna be one pixel a b a b a b One more thing though it seems that this Border is not full width therefore Bottom border width set it to full width And publish Next as you see I scroll down there is No sticky header therefore I'm going to Open up the header Click on headers and open up the global Header There you see the sticky functionality Activated
And now you can decide what part of the Header will be sticky if you hover on The thumbnails you'll see what is it That will be sticky if you click on it Only main row As you see this one is a main road this Is a top row and this is a bottom row so If I want the main road to be sticky I Choose that one here and if I scroll Down the main row is sticky Top and Main row Those two All rows That means the whole header is sticky Main and bottom row Only top row Or only bottom row Now it depends on your header but I Don't want anything else but this Bottom Road to be sticky therefore I'm gonna Choose only bottom row And if I scroll down it's sticky but as You see the sticky part is white and Therefore the navigation is not visible Very good here therefore I'm gonna Change it a bit I'm going to open up the bottom row Design And there is a sticky state I set it to Blue and now it looks much Better Publish A couple of other options for you to Know about and those are the sticky
Effects here You can set it to show it by default Slide down fade or Auto Hide and show I usually prefer the default option There so therefore I'm Gonna Leave It Usually as it is Next thing if you set the main road to Be sticky then you have some sticky State row shrink options that means if You enable it you can set the row Maximum height So let's take a look how does it look Like So we're gonna set the main road to be Sticky Open up the settings here Sticky state is blue now if we scroll it Down then you'll see that To maximum height is what we set up here Whether it's bigger 100 pixels Or smaller 40 pixels But let's leave it to 60 pixels Like this Now as you see the icons here Do not look good therefore we have to Open up the contacts element and the Sticky state for Icon colors has to be Set up here Like this Next let's open up the mobile view And as you see there is no sticky option For mobile at the moment therefore go Back to header headers Global header and
See whether it is enabled on mobiles yes It is but as you remember the bottom row Is the one which is sticky That means that you have to drag those Elements on your mobile here And then you see that it is sticky but The main part is white and the logo and The other elements are not visible here Now open up the design and under the Mobile you can set the default state to Blue if you want That means that if someone opens up your Site with a mobile this is a header and This is a sticky header Or if you want you can change it all Also do some other color but I'm Gonna Leave it to Blue here Now publish and basically everything is Done Couple of other things for you to point Out though so we customize the desktop And the mobile but if we open up the Tablet then you'll see that on the Tablet the bottom row is still white Therefore you have to set this color Also here And if I click on the cart element and Design then then you'll see that every Element has a sticky State here Which means that I can set this color to Be yellow on the tablets Or black GIF I want But I'm Gonna Leave It white as it was And that's it this setting is for every
Element you add on your header as you See a search has a sticky state Trigger out of the sticky State and so On You can even change the log of water Sticky header here sticky logo of our Desktop And sticky Glover for mobiles you can't Set it for the tablets though And you can set the logo height here for The Mobile's tablets and the desktops So that's all about this topic couple More tweaks let's take a look at this Top bar here as you see the height of This bar is 42 pixels it seems to me That our is a bit higher yes it's 50 Pixels so let's set to 42. Publish and now let's tweak the mobile Header This one is our mobile header First one is a trigger here let's design It a bit I'm gonna add white for the Color And I need the cart here Therefore I'm gonna move it here Also I need the search icon here It's gonna be here And it's gonna be white Search from the products only Now as you see the header becomes Crowded a bit therefore let's tweak the Logo height for the mobiles I'm gonna make it smaller 30 pixels Now let's add the account I'm gonna go
To the header it's going to be an Account With Avatar and label and icon and label As you see my account is written here But it's not visible So it's gonna be white And there it is So we have finished the mobile header Let's take a look at the tablet here Header well bottom row design once again It's gonna be main color Logo is a bit too high and we're gonna Leave it to 30 pixels here And let's publish it As you see I have a header here it's a Blue one and a nice hero image also as You see they don't look good together And this is the reason I would like to Create a transparent header for this Page here oh in order to create the Transparent theater go to appearance and Customize And for your information it doesn't Matter whether you have a pro version or A free version of the blocks you can Create a transparent header with both of Them now go under the headers choose Headers Global header And now you can activate the transparent Functionality And there it is If I scroll down there is a sticky Header Now here is my transparent header but I
Would like to customize it a bit Therefore I'm going to open up the main Row design and here is a transparent State So I'm gonna give it a bit background so That the menu and all other items on the Header would stand out a bit better Looks good Now take a look at the menu or all other Items here if you open up the design Then you'll see always a transparent State that means that if you have a Transparent header activated for this Page you can customize the colors For example I have the search opened up I can set it to be something like this Yellow here Only for the transparent state if I Scroll down and there is a sticky header Then it's white So I'm gonna set it to be white as it Was Now if I open up the about page It looks good if I open up the blog page It's not looking good since it does not Have any background image here therefore I'm gonna open up the global header Settings and set the conditions I want The transparent header only to be shown On specific page ID and the page is About now I'm gonna add the display Condition include On front page So what did I do right now I set it up
To show the transparent header only on About page and on front page and not on Any other pages You can also use the exclude rule so There is include and exclude you can use Exclude for example show on an entire Site but exclude the 404 search or Archives Now let's save the conditions and Publish And as you see the shop page has a Regular header we have here And the shop page Has also the regular header but if we Open up the front page It has a transparent header And also the about page has a Transparent header Now pay attention though that all those Conditions you have to set them up here There is no way you can set them up on The page itself there is no transparent Either options here so if you want to Set some conditions you have to set them Up here also pay attention that you can Set the rules whether you want to enable It on the mobiles or not for example I'm Gonna deactivate it for mobile And for mobile it shows a regular header If I enable it it will use the Transparent header What you see here is a blocks in mega Menu as you see three columns with icons And content Block in the first column in
This tutorial I'm going to show you how To do that in order to create the mega Menu with the bloxy you need to have a Bloxy pro addon installed If you don't have a block chip Pro yet Then take a look at the description of This video there is a link to it So let's start Go to the bloxy Open the bloxy menu And take a look at the extensions Now choose Pro Extensions And activate the advanced menu extension Now in order to create the mega menu go To the appearance And menus What you see here is a structure this Here is a first level menu this year is A second level and this is third level I'm going to create the mega menu titles From disclosing music and hats And these will be the sub items Now open up menu first level menu and Click on a menu item settings Next activate the mega menu here And choose the width of the content Whether it's content width or full width Next choose how many columns would you Like to see in the menu and choose a Layout here I'm gonna show four columns And all columns are 25 percent that Means even columns Item labels are enabled links are also Enabled
If I want to add the icon to this menu I'm going to select it here for example This one here I can change the icon size alignment And the menu batch settings so I'm gonna Put it right and move it above -10 Pixels So under the design I can design the Background link color and so on but I'm Not going to do it therefore just save Settings Close it save the menu and let's see What happened So this is my shop menu with the icon And the label NB So I forgot to tell you that you can Also add the label and this is the label Here Under the main menu batch settings I'm Going to delete it so save it And refresh it There you go Now since I don't want the icon to be Shown here I'm going to delete it I Showed it just for your information that You can do that Now save settings and let's go to the Next level This one here also again menu item Settings Here I can choose a content type it's Going to be the menu item and since I Want it to be a heading I'm gonna choose That it's heading and if I want to
Disable the link I can deactivate it but I'm gonna leave it as activated And once again I can add the icon here For example home Save settings Close it I'm gonna leave those three as they are But also you can change the menu item Settings here Next one Once more it's gonna be a heading And it's gonna have a icon for example Dashboard And Save Third one category Once again It's gonna be a heading and I'm gonna Add the icon for example this one here It does not have any sub items I'm gonna Just add something Here Save it and let's take a look There you go we have three columns Those are the headings with the icons Now as you see this shop has a green Menu batch here I have to deactivate it So I'm gonna open up the shop menu and Menu batch deactivate it save it Save the menu refresh And there is no batch So we have three columns and fourth Column is empty let's add some kind of Good number blocks over there So I'm gonna go to the Block C content
Blocks Add new Menu block Create template And in order to give the tutorial short I'm going to just add some random block Here for example Info box I'm using the Cadence blocks plugin but You can use whatever Gutenberg or Elementor page builder widget you would Like to use oh we are open Monday to Friday 9 A.M to 5 PM Saturday 9 00 am to 3 P.M for example I can customize it as I like for example The title here It's too big at the moment And font weight I'm gonna change it Okay update Now let's go back to the appearance And menus And I'm gonna add another menu here this Time it's gonna be a Content block a Menu block at the menu I'm gonna drag it here Menu item settings content type content Block Menu block Item label disabled link disabled And save it And save the menu also Refresh
And there you will go Doesn't look any good Therefore I go to the menu settings Open it up and instead of four equal Columns I'm going to choose that last Column is a bit bigger I'm going to save It Save here now refresh the page And looks much better Also I can tweak the content block Itself here But as I told you in order to give the Tutorial short I'm not gonna do it It's just an overview for you how you Can add the content blocks to the mega Menu And there it is Mega menu with a Content Block inside it What you see here is a site created with Bloxy Team this is a shop page And services page and so on Now let's take a look what happens if I Open up the lightning category and voila As you see we have a totally different Header here and totally different footer Here Therefore in this video I'm gonna show You how to create a multiple conditional Headers it's not gonna take long but It's much easier than you think so Dive In Now before we start customizing I have To point out though that in order to Create the multiple conditional headers
And sidebars you need to have a bloxy Pro extension So if you don't have it yet then take a Look at the description of this video And the link to it is there So buy it install it and activate it and Then jump in and see what happens now Let's go to the appearance and customize And see what can we do here As you see this is our default header I'm going to open up the shop and I'm Gonna create another header for Lightning category and for all the Products in this category here Basically otherwise this header is shown And this footer is shown but If I open up the lightning category or Products inside this category we're Gonna create another header Now open up a header headers and click On create new header give it a name For example lightning category header And I'm going to copy elements from the Global header because there are some Things I want to use over there create Header I'm going to open it up And I'm gonna edit the conditions here So display conditions I'm gonna include this header only the Specific taxonomy ID is and now I'm Gonna select Product category lightning here Also I'm gonna add another condition I'm
Gonna show it on specific posts with Taxonomy ID and once again I'm gonna Choose lightning from the categories Here So these are the rules it is shown in The lightning category page and posts That means products with lightning Category ID so save it and let's Customize it First I'm gonna change the header color Here It's gonna be dark one for example this One here I'm gonna change the main menu color Default State it's gonna be white Sticky State also white because I'm Gonna make a dark sticky header And this one here Search icon is gonna be also white for The default and sticky state Next one card icon Once again White Patch color also White Well not this It's gonna be orange And text is black And last one account here once again I'm Gonna change the colors a bit Now I'm gonna change the menu appearance Font size is going to be semi bold And uppercase And a bit smaller for example 13 pixels And I'm gonna change the logo because I
Need a another logo here it's going to Be this white logo Now let's change the sticky options main Row design and sticky color it's going To be the same But I'm gonna make it a bit transparent As you see a little bit transparent And I'm gonna delete the Border I don't Like the Border here None So far so good let's publish it and Refresh a lightning category page as you See it's already working Open up that products also good let's go Back on the front page There is a global header let's open up Another products And it's working like a charm Now before we finish with the header a Couple of reminders First one At the moment the menu I'm using here is A main menu but I can add whatever menu I want up here at the moment it is the Same menu I have globally on my site Another one in order to give the Tutorial short term I did not show you How to customize the mobile header but You can do it as you do usually If we don't do anything it inherits the Elements I copied from the global header But I can customize it as I like Now as you saw the blocks header Builder Is a really awesome tool it's easy to
Use and it allows you to create all Sorts of header layouts I'm really pleased with it and I have Used it for last couple of years now Before you go wait If you find this tutorial helpful then Press thumbs up this one here and take a Look at this side of the screen it Contains two good videos I think you may Find the mutual meanwhile take care bye
One of the most important aspects of a blog is its structure. While the look and feel of a blog can vary, there are certain standard elements that all blogs should have. These include a header with a menu, the main content area, sidebars, a call-to-action, and a footer.
The SeaShell theme is SEO-friendly and quick to install. It also comes with several customization options and works with the WooCommerce plugin, which lets you build a store for your blog. It also features an elegant page-spanning featured image, non-intrusive sharing buttons, and is optimized for Google AdSense. If you’re serious about making your blog as successful as possible, you’ll want to use this theme. It will keep your blog running smoothly and attract more readers.
Creating a niche is key. While it’s tempting to write about all topics, you’ll end up not being liked by a large audience. Remember, attempting to please everyone ultimately results in appeasing nobody. Developing a unique voice is an important part of building a successful niche. For example, if you love swearing, create a blog with content geared toward that audience.
When writing a blog post, it’s best to outline it beforehand. It’s essential to know what the main points are and what order to address them. Then, break the content into smaller sections and use descriptive headers. The outline should have an introduction, a body section, and a conclusion. The body section of your blog post should be short and concise, containing the main point or two points. This is also the section that draws the reader’s attention.
Blogs are important to businesses, as they allow new business owners to reach their target audience. They also make a website more competitive and searchable. Blogging helps a business reach a larger audience by building a community of loyal followers. In addition, blogging helps increase traffic and increase brand exposure. It also allows you to target a niche audience that is interested in a certain topic.
Another important aspect of a blog’s success is the monetization method used to promote it. If you’re looking to earn money through ad revenue, you can install Google AdSense. This program works by connecting advertisers and publishers. The ads appear in your blog based on your audience’s behavior. The ads are contextually relevant and placed in the right locations.
While blogging is not a get-rich-quick career, it is an excellent alternative to traditional careers. With a blog, you can share parts of your life with the world. Many people have turned blogging into a full-time career. As more people become involved in blogging, it continues to become a popular alternative.
The first step to monetizing your blog is to apply for Google AdSense. The rules for attracting advertisers are easy to follow and the amount of traffic a blog receives is not as important as the quality of its content. However, you must make sure that your blog adheres to Google’s policies. You can sign up for Google AdSense through your Google account or by using an existing one. After registering, fill out the form and click “Save and Continue.”