and that's fine since the design type here we will continue with the actions on element it was bullying for wordpress i'm here with my screen open to start building our layout what our layout will be here and if you think I have here in photoshop that I used some time to train the it web he's been here in photoshop for a while let's put it in the air through the element in the other classes I spent a review on the tool make a little work now let's start building effectively so here we go let's start building this layout let's analyze it here is a layout of a portfolio site a quiet page of do let's start by parts are going to divide by share this layout to start building a first part element that we have here on the website is the top menu right then the menu on the right we also have this banner this image narrative with staff that is very common and on the website today but a call broke the name of the professional he makes an arrow person will navigate to continue scrolling the page right an indication so let's start at the top let's make the top there in the element to make the top we only need one thing in this case is to export this logo that's all we do there in the element to export this wolf I come here in the iconic right after exporting as or exporting fast as png the option to save the boy had except the already has the targets of then no gonna do let's go back there element we are here in an element they will build the menu is the top a new menu for that i will stay here in add session and there will give this structure our website have a structure here in this two part topic give two columns coming back element put here two columns beauty now in the left corner and placed in the right corner puts the simple menu so to do this I come here in the dwight gates options of the element in this option here of the egg is a choice of the image clicked dragged and ready now I have to put the image click here to choose a wordpress and beauty image already put my logo the man on the left and aquino in which I could put the link to my usual website, this convention is interesting, we have there on the internet and basically that’s not much to do here maybe it’s more interesting to put a Geneva s for being a wolf is going to have to expand and enlarge but we can use the image we will also use this example because it is more accessible ok so now the menu is missing if you have the option of the pro element when searching here on any of the jets you find this option here the menu ship just click drop drag and look he already created the right menu for me and then to finish the flavor the right this menu select here there to my right let's check out photoshop man about portfolio in contact with a good contact portfolio then everything is ok and if there is green team only that is not even combining much with our shows the website that our layout so get the color of my logo and here in this shortcut that I have in this extension that I have here in chrome for me you don't have that tac extension is zila heat you can pick up directly on photoshop and also a lot of aquino dropper and copy that option there I'm not going to copy it because it's a different color maybe because transparency that has the image so I'm going to use that color here in this solvers to change the one here in the menu select and it is already selected then I have a style and here I have the option of d'accord in the normal case in this case the government case when you click on the tie is worth in the over when hovering the mouse in the case of the state normal full support I think it's ok let's just change the man then in ovary is the fifth school i insert the color i copied from photoshop already identified beauty I will pass the mouse already modified we will also give if you can have collor which is the layout there under the item dominated when we pass the mouse beauty I will do the same thing here to when it is active and practically closed the menu what are we going to do now to leave the same menu as in photoshop is to leave the boy with a white background in this case it has a white background because it is the default of the web element it has a white background and it comes standard but we can force it to be white the menu if we want to change the background will not interfere with our menu so we can put the background of any color on the site let the boy white so i'm going to select from the menu already selected or iraq in the style option on the left toolbar and in the type of fund it gives me some options and choose the classic one to choose the white and then simple so our menu is ready now maybe you're wondering or maybe a question has arisen is a moment then how did you create the right menu as you already put it simply by clicking and dragging the romeo over the portfolio the contact in the same way as in simple photoshop i will show for you now I'm going to select a node again and here on the left side where we we have the layout options have that option first which is boy within this option we can select the fewer that we have in the wordpress so for example – that came my theme the initial theme the social network network menu you can select the boys have in there sir the press this menu of our website and forum I created in wordpress that this menu main brings haiti portfolio I selected here and it already modifies for I’m quiet easy like that and then I can continue using after doing the way I want I can change the photo for example here in our photoshop everything is in uppercase I came here in transformation leave everything with uppercase and basically everything is automatic doesn’t have much to stir as I made this menu today press I will not show you click the update button to save what I I just did it and I'm going to leave the element panel that I will now show you how to insert this boy so let's go back to the wordpress panel now in the press panel I come in the appearance option then in – and in the option I can create or delete or modify the less than tenor of feet as you can see i have the smallest one already on the site on the outside that i created but I can select the others that I have already presented in the element and I can create a new one if I want to also delete it of course there's a button on the link to then choose to vote for a new one just so you understand click create new menu creating name will not ask for a name for example is new portfolio menu has already been removed from the internet already saved on the piano now will insert the menu items have some options the first is to choose a page that I have in wordpress so for example there is a page that about files or select two click add boy he already has a boy for me, with the links, everything would be just right from the other options here is the option to create the menu including are showing is elton showing an element but it also works in other things you are going to use in wordpress are fine so three simple so because with this boy that I will not use right or rather it will not choose the menu or remove only the items that are deleted the smallest will delete all – I don't want this I want to add others items so we have the options here pages like I said or x also after adding categories to my menu and what it matters to us who are personalized links because links customized because our page has a one page navigation so we'll create an internal navigation for this we will use custom links we have the url option which is the link path and link text which is the description that will appear there the user clicks on home when clicking on home it goes to the link that will determine who can be a any website address or an internal link for that we use the ids m l will not put here is work the tic-tac-to game puts the name of my tip I'll call later regrets and here in the text of the link I put the name the best the brand here of mine has thumbnail so click here to add menu and already created here for me with a link to another one that will be on so again you same order about here i will give the label about and i will create a third one that that will be portfolio too the portfolio click on add to the boy and added I will save this menu now let's go back to our element to see how it went let's take a look there i came here in pages all pages I will access my page again that the element to edit with the element already I clicked on the shortcut and I or select on top of what we just created here an opel element beauty element already loaded now I selection again menu the option on the left layout after menu select my new portfolio and then he already shows me that boy that we just created a link everything right that we determine then as soon as the menu option works and so you can be the smallest easily quickly here in the element after you can use it however you want your menu you can put color text size they will check that the size of the text as it is just to make it equal to our layout is with 18 18 and tram let's check out our typography night menu put that 18 and then I can choose the font I’ll choose the one using the botton, it’s simple quick easy run the same way that I determined from photoshop beauty so that's it this was the first part let's continue our layout here inside the following element we will continue to build the other parts the other modules from the other sections of the site ok go going on studying gaucho one strong hug and even colder .
Curso de Elementor WordPress (Versão Gratuita)
Aula 04- Criando Header e menu
Como criar o menu sem a versão PRO do elementor:
Todas aulas de WP Elementor aqui nesta playlist:
Live de elementor:
➡️ Cupom com 10% de desconto na loja do Template Monster: mk9e8sw8y6x8ltdgtiedxa9yl (copie e cole)
➡️ Temas para Elementor da TemplateMonster –
➡️ Tema utilizado nas aulas Monstroid –
WP elementor é plugin de page-builder para WordPress. Com ele é possível criar páginas de sites em uma interface real-time e do tipo drag&drop.
O plugin WP elementor é um dos mais populares na comunidade WordPress, se tornando o principal page builder da plataforma.
Para utilizar o Elementor, basta ter um site em WordPress. Existem versões gratuita e paga do software.
Mesmo que você não tenha dinheiro para comprar o plugin, é possível instalá-lo e utilizá-lo.
Fique ligado nos próximos vídeo de Elementor.
🌟 Curso Fundamentos do Design Visual
🌟 Curso Web Designer PRO
🎩 eBook de HTML e CSS
🎩 eBooks do Chief:
🎩 Chief of Design
Inscreva-se agora no canal e fique por dentro das novidades!.
➡ Twitter: #chiefofdesign #design