If you only change the position of the Header element, you don’t need to reinsert it for each view. You may want to change the size of the imagelink like "" for each responsive view - for this you will need to reinsert the Imagelink ( Header tab > Controls > Imagelink) and repeat the operations with its resizing and Visibility settings. All elements in Header within Artisteer preview area are objects, they transform into an HTML code only after exporting. This issue is also related to the fact that Artisteer doesn't operate with HTML code within Header. You will see it only after previewing your template in a browser or after opening the exported project on a mobile device. Please note that the default background image won't disappear from the responsive views in Artisteer. You shouldn't insert all the code at once, because you may be satisfied with a Header background image position in a Tablet view and you won't need to use a custom background image for all responsive views. To get rid of it, go to File > Export > Options > CSS Options and insert this (max-width: 479px) Since you're using a new background image now, you don't need your default background image in this responsive view. You may also need to use the option “Send to Back”, so you can see other images, beyond this new image: Sometimes it's also easier to switch between Desktop and Responsive views to operate with elements, so you may need to edit "Visibility" settings in the last turn. In general, "Visibility" settings are available for each Header element in the Custom responsive mode. Right click on the image and choose “Visible”, unclick the Desktop view: Once the image is inserted, you need to change its “Visibility”, so it was visible only in the "Phone Portrait" view. You can change the size of the inserted image using the arrows provided for it. 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: 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |