This a duplicate of my new frontpage prototype. Like I said in class I don’t have much Elementor experience yet, but I can share what I have tried so far. What I want from the new frontpage is a more attractive layout with large images and clickable titles with background colours that will represent different categories of content. Exactly what the categories and the colours are going to be will be decided later, but right nor blue is data visualization, orange is either travel or photos and green and yellow is dummy content. I think the Cooper Hewitt museum home page does this well, so I will try to rip of their design.
One thing I want different is the phone view. The Cooper Hewitt museum page places all the clickable elements (image + title) inside a slide gallery, I want them stacked vertically which is also Elementors default way of dealing with this.
If you are making a front page there are many nice elements to use within Elementor even eith the free version. If you were making a magazin or news paper front page you could use the ‘Image box’ element. Here are two image boxes sharing a section 50:50.
This is the heading
By default the image above is set to about 30% width which I find way too low. I like big images and always scale it up tp 100%. You find the width property in the 'Style' tab in the elmentor panel.
This image box is a link
If you click me you will end ut at the homepage of the Volvo owner's club. The title and the image act as clickable elements, but not this paragraph text.
The image boxes are nice, but I want something else and there was no element that seemed to fit the need. I want a large image with the title as a clickable link on the image. I also wanted the image to be part of the link but have not found a solution for that yet. The answer to my needs is to split up a section and then set background images in each split. Below is a section structured into three equal columns and there are background images set to each column. Click the grey icon in the top left corner of the column where you. want the bacground image. Click on ‘Style’ for that column in the Elementor panel and then choose background type ‘Classic’, or explore some of the other background types. You can now build these three columns as tall as you want. If you want the entire image background to be visible and not jus the top right corner, set the size propert of the background image to be ‘cover’.
Add CSS classes to Elementor and make them reusable
The big advantage of CSS and learning code in general is that you can make rules that are applied to several elements. Rather than making the same adjustments for all elementor elements of the same type, you can give it a Class name and write CSS rules to target all elements with the same class. When making a new class name try to think of more possible use cases for this class. You can add several classes to each element, so if you want two elements to share some CSS properties and but not all CSS properties you can use several classes. In the example below I have made an Elementor section with three columns. Each column has a background image and for each I had to go in to the Elementor panel, choose the image and set size to cover (Style tab, Background type > Image > Size).
If I am only making this layout once and not reusing it that is fine, but if I want to reuse this layout many times I should do this with CSS instead. In order to do this I add a CSS class name to the section that contains the three columns.
Here I want to try several images in columns
