Загрузка страницы

Making Sections in Elementor - Three Easy Methods! WordPress Beginner Tutorial

The first step to customising your blog is to start replacing the starter site images with your own. If you don’t have enough high quality images, that’s totally fine. Head over to pexels.com where you will find a lot of nice high quality photos that are free for you to use.

You can change most images in Elementor can by simply clicking them. Then, choose a new image from the sidebar. Background images are a little different though…
Hover the mouse over the top of your section and click the middle ‘edit section’ tab.
From the left sidebar, select style
Delete the background image and choose a new image.
You’ll get to upload all your images here. Choose the ‘upload files’ tab and select files.
Upload your new images to the media library (it can take a few moments).
When you’ve chosen your new background image, click ‘insert media’.
Then you will have your new background image ready!
Changing Text in Elementor
You can change text within sections by clicking on it and editing. Very easy!
Removing Sections
To delete a section, hover above the top of a section. Then click the blue ‘x’ button.
Making New Sections
We will cover three different ways to make new sections. My three favourite ways to do this are.
Copying a section from another part of the website. Pasting into a new section, then editing it.
Creating a new section, choosing the number of columns, then drag elements into the columns
Creating a new section from a pre-designed ‘block’
How to copy a section, then edit it to make it ‘new’
Hover over the section tab, right click and select ‘copy’.
Scroll to the position on the page where you would like a new section. Hover on the section below this, then click the blue ‘+’ on the section tab.
Right click inside the new section area and click ‘paste’.
You can then edit this section by changing its background and text.
Linking a Button to Another Page
A button can take the user to another page by clicking on it. To set this up, click on the button.
Copy the address of the page you want to link to from your browser bar
In this case we are making a link to the contact page.
Paste the link address into the link field in the Elementor sidebar.
Click update to save any changes you’ve made along the way.
Background Overlays
Background overlays are a nice to use when you want to write text on top. You can use a black overlay to suit dark text, or a white overlay to suit dark text. You can also give the overlay some colour for extra visual effect.
Click the section you want to edit, click the ‘style’ tab on the sidebar, then click ‘background overlay’.
From here you can chose the colour by clicking the colour swatch. We choose black here.
Change the opacity by sliding the opacity slider.
Move the slider around until you are happy with how it looks. In this case we wanted our white text to be easily readable on the dark background.
Making a New Section From Scratch
Finally, you can design a section totally from scratch. Click the blue ‘+’ button on the section tab to make a new section.
Click the pink ‘+’ round button to a add the section.
Then chose your structure. It’s usually better to use only one or two columns. In this case we used two columns.
Now click the ‘elements’ icon on the top right of your sidebar.
Now you can drag and drop elements into your new column. In this demo we dragged an image element into the left column.
Now click the image and delete the placeholder image in the sidebar.
Choose an image from your library and click ‘insert media’.
Next, we dragged a ‘heading’ element into the right column.
Under the content tab, we can centre the heading with ‘alignment’.
Now we drag a ‘text editor’ element below the the heading, to add some basic text.
We can make the heading and text sit in the middle of the column by clicking the column icon.
Then under layout, ‘vertical align’ choose ‘middle’.
You can change the width of the columns by dragging the column divider with your mouse.
We added some space below our new section by dragging in a ‘spacer’ element and dropping it below our image.
Under the style tab, we edit the background colour by choosing ‘background type’, ‘classic’.
Pick a colour by clicking the colour swatch.
Change the colour of the heading text by clicking the ‘style’ tab.
We’d like a black title. So, choose a new colour for the title by clicking the title colour swatch.
Then and choose your colour.
Adding a Pre-designed Section.
My favourite method for adding a new section is to use pre-designed template.
First, add a new section (blue ‘+’ icon on the section tab).
Then click the grey folder icon to add a template.
Click ‘blocks’.
We chose the ‘check out our work’ block.
Click the block you like, then click insert.
Delete the images and replace them with your own.

Видео Making Sections in Elementor - Three Easy Methods! WordPress Beginner Tutorial канала IdeaSpot
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
14 июля 2019 г. 17:17:28
00:13:12
Яндекс.Метрика