To insert your new image, please go to Header tab > Image > From File. Taking into account this information, we will need to create a Header background image (or images) that would fit screens with such values. Artisteer provides approximate width values that are used for each responsive view: Let's imagine we want to create a new background image, because the current one doesn't fit the screen as we want to. Once you switch to this mode, you will notice that the height of your Header will be changed – now it's the same as the height of Header in the Desktop view, and all simple images (pink line in our case) will appear:
Artisteer responsive code#
This issue is related to the fact that Artisteer doesn't operate with HTML code within Artisteer preview area when working with a responsive Header. You will see them when previewing your template in a browser or after opening the exported project on your mobile device.
Please note that the changes will not be visible within Artisteer. You can change horizontal or vertical alignment of the image, choose whether to use original Height or no, and change CSS Size property. In this view you can play with background image options to find the best position for your Header background image: In this mode, Artisteer shows you how your Header will look like by default, if you simply export your project right now: Please note, that unlike imagelinks, simple images or shapes do not appear in this mode. Let's review both of the modes in the "Phone Portrait" view using the following example of Header that consists of a Header background image – the car on the street, an Imagelink - the "" clickable logo, Headline - the "Vintage Collection" line and a simple image - a pink line-divider: Default Responsive mode However, if you want to customize Header, there is the Custom responsive mode that allows dragging objects, resizing them and adding new ones: To see how your Header will look like in the Default responsive mode, you need to switch to one of the responsive views by going to the top right corner of Artisteer and navigating to one of the views: The size of Header elements doesn't fit all screens and you may want to customize the size of each Header element.Īrtisteer generates responsive Header automatically - it uses certain algorithms to place header objects in the most logical and correct way. The position of Header elements doesn't work for all responsive views – on smaller screens elements can overlap each other and you may want to reposition them for different kind of screens. That means that your header may have an unpleasant look on your website. This issue is related to the fact that sometimes background image can't be stretched proportionally according to your screen size. Your Header contains a background image which doesn't become responsive. There are 3 different situations where you may want to use those options: Starting from the version 4.2 Artisteer provides options for customizing Header for all kind of responsive views.
0 kommentar(er)
