Tutorials
Creating Headers
WordPress roles required: Administrator, Editor, Author, Contributor
To build your first page, go into the Kurtosys app, click on the DXM tab and find the website you would like to add your page to. When you’re in the WordPress platform, click on the Pages tab in the left-hand navigation panel, then ‘Add New’.
If this is the first time creating a page for this website, the new page may be blank. If this is the case it means a template hasn’t been created or assigned for this website.
To create a new header, exit out of the Elementor page builder and click on the Templates tab in the WordPress side panel. Select ‘Theme Builder’ and go to the Header tab and click ‘Add A New Header’, give the header a name, and click on ‘Create Template’.
Now you will be in the Header template section which will be blank. Anything created on this page will appear at the top of all pages as we have told Elementor this will be the Header Template.
Creating Columns & Adding a Logo
This header will use 1 section and 2 columns. The left-hand column will contain the site logo and the right column will have the site navigation.
To create a new section, click on the ‘+’ icon and select a section that has 2 columns. Select the handles for the section and both columns, click on the advanced tab in the Edit Section in the sidebar and change the padding and margins to zero. This will ensure there aren’t any spaces between each block.
Setting the width of the header
Select the whole section, go to the Layout tab and make the content width ‘Boxed’. This will center the columns in the middle of the screen.
Now enter the width you would like your header to take up on the screen. In this example, we entered 1000 pixels. The pixels in the columns in this section will be split equally, therefore, both columns will be 50% of 1000 pixels.
Adding a logo
Click on the 9 little square dots on the top right of the side panel to open up the Elementor widgets. If you’re unable to see the ‘Image’ widget you can type in ‘image’ in the search field to bring this up. Drag the image widget into the left column as this is where we would like the logo to appear. The left-hand panel will change and show you the editing options for this image widget. When there isn’t an image selected, a default grey placeholder image will appear. Click on this default image to open up the media library. Select the logo you would like to appear and click ‘Insert Media’.
After inserting an image in a column, you may need to resize the image. To do this, hover over the right-hand side of the column to reveal a small pencil icon. Click on the pencil icon to open the image editing options. You can use a pre-set image size or enter your own custom size. Now you will need to change the alignment to left, to move the logo to the left-hand side of the column.
Adding Padding
In the column where you have the site logo, click on the handle in the top left, go to the advanced tab, and add padding to the left, bottom, and top of the column.
Adding A Border & Saving The Template
Now we have the basic structure for the header. Let’s add a border at the bottom to separate the header from the page content. Select the whole section, go to ‘Style’, then ‘Border’. Now we can see we have an option to add a border. By default, this will be set to none. When you select ‘Solid’ a border will appear all around the section. For this header, we only want a border at the bottom. To change this, set the pixel size for the top, right, bottom, and left to zero. You should see the border disappear. Now enter the pixel size you would like, just for the bottom of the section.
Once you have chosen the pixel size, you can now change the color of the border by clicking on the color palette.
To save the template, click on Publish at the bottom of the left panel. You will be asked to add a condition. In this section, you will tell Elementor where you would like the header to appear. You can include this across the entire website, single pages, or archives. For this header, we would like it to appear on all pages across the entire website, so let’s choose ‘Entire Site’ and press save.
Now when you open a new page in Elementor, you will see the header will appear by default.