In this video, I will show you how to use the Neve WordPress theme and the Beaver Builder page builder plugin to create and customize a Portfolio website.
This is the homepage that you will get exactly as it is after importing the demo with all these sections, rows, and modules you can entirely edit with Beaver Builder.
You also get a ready-made page for About us, with modules where you can enter more details about you, social icons, and testimonials.
Some pictures containing your best creations and the way people can contact you.
There is a nice looking portfolio page and this is the page you can use as a template for each product or service.
The blog is the page where you can display your latest articles and finally, this is the contact page with everything you need.
Now you can go ahead and click Import.
Once everything is imported, you can check out the look of your site as it is right now and then you can start adding your own content.
So, let me start with the homepage, which you can edit by clicking on this Beaver Builder button on your top bar.
If you don’t see this black bar above which belongs to your dashboard, you have to log in first by accessing your site’s address followed by login.
When you click on Beaver Builder it will reload the page and open its editor window on top of your content, so you can visually edit everything.
To close the editor, click Done or Done and Publish if you already made some changes.
If you click on this plus icon, it will open a pop-up window where you can access resources like Modules, which are elements you can simply drag over to create buttons, contact forms, add images or videos, and so on.
The Rows tab is where you can choose the structure and number of columns for new sections and inner sections.
And the templates zone is where you can save and reuse your layouts.
This window can stick to the left or right side of your screen, or you can make it pop-out only when needed.
Now, if you hover over the modules on this page, you can see the editing handles for modules surrounded by a blue border, and the editing handle for your Row as gray.
This is where you can change things like width, colors, and the background which is an image in this case.
To replace the image, go to Background Photo settings and click Edit.
Pick a new image, click Select Photo and then Save, if you don’t want to change anything else.
You can adjust the size of this window if needed, move it around or even maximize it to have a clear vision over the available settings.
The advanced tab is where you can add more spacing with margins and padding, change the visibility, add animation, and modify the HTML Element.
To close this window click Save or Cancel but remember that if you click Cancel your changes will be lost.
Let me show you how module settings work, and for that, I will open the Heading Settings.
It looks and works pretty much the same only the content is different.
The first tab is where you can modify the text, link, and its structure.
The separator below the Heading could be Line, Line With Icons, Line With Image or Line With Text, added to the top, bottom, or between the heading and description.
I will get back to the default selection of the separator which is None, and move to the Typography tab where you have everything you need to make your text look stunning.
To open the advanced settings of a module, you have to click on these three dots, and then Advanced.
This is, more or less, the way you can edit every piece of your content on pages created with Beaver Builder.
The header and footer though must be edited through the Customizer of the theme which you can easily access over here.
But before doing that, I would like to explain this menu.
So, these are the tools of Beaver Builder which you can use to Publish your Layout.
Alternatively, you can push CTRL + P on your keyboard.
To duplicate this layout, click here, for Preview click this link and so on.
If you would like to adjust your content for mobile devices, click Responsive Editing and switch between mobile and tablet view over here.
It is the same selector you see for settings that have a separate adjustment for mobile and tablets.
Revisions and History are useful features when you observe something wrong and want to go back to a specific step and start over.
The Global Settings will open this window where you can change the default settings for Page Heading, Columns, Modules as well as for the Responsive Layout.
If you know how to code, you can use the CSS tab and the JavaScript tab to fine-tune your website.
Don’t like the brightness of the user interface?
Switch to dark mode over here.
#WordPress #PortfolioWebsite #BeaverBuilder
source