This is the first in what I plan to be a long-running series of videos where I take a well-known brand/business and redesign their website (probably just the homepage but we’ll see). It’s not to say there’s anything wrong with their sites, it’s just an exercise for myself and hopefully I can provide some insight into how I go about designing and building with Flatsome & WordPress.
UX Shortcode for the page
[row][col span__sm="12"][ux_banner height="608px" bg="20"][text_box text_color="dark" width="40" scale="103" position_x="95" position_y="15" text_align="right"]
<h3 style="line-height: 1.4em;"><strong>Make everyday life at home more beautiful</strong></h3>
[gap height="2px"] [button text="Shop Bedroom" letter_case="lowercase" style="underline"] [/text_box] [/ux_banner] [gap] [ux_banner_grid] [col_grid span="6" height="2-3"] [ux_banner height="500px" bg_color="rgb(242, 242, 242)" link="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/"] [text_box text_color="dark" width="38" scale="120" position_x="5" position_y="95" text_align="left"]
<h3 class="uppercase"><a style="color: #000;" href="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/" target="_blank" rel="noopener"><strong>Cabinets</strong></a></h3>
[/text_box] [ux_image id="24" width="65" link="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/" position_x="100" position_y="50"] [/ux_banner] [/col_grid] [col_grid span="6" height="1-2"] [ux_banner height="500px" bg_color="rgb(242, 242, 242)" link="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/"] [text_box text_color="dark" width="26" scale="120" position_x="5" position_y="95" text_align="left"]
<h3 class="uppercase"><a style="color: #000;" href="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/" target="_blank" rel="noopener"><strong> Cushions </strong></a></h3>
[/text_box] [ux_image id="23" width="42" link="https://www.ikea.com/gb/en/p/gamlehult-footstool-with-storage-rattan-anthracite-10434309/" position_x="90" position_y="50"] [/ux_banner] [/col_grid] [col_grid span="3" height="1-2"] [ux_banner height="500px" bg_color="rgb(242, 242, 242)"] [text_box text_color="dark" width="38" scale="120" position_x="5" position_y="95" text_align="left"]
<h3 class="uppercase"><strong> Lighting </strong></h3>
[/text_box] [ux_image id="26" width="31" position_x="90" position_y="50"] [/ux_banner] [/col_grid] [col_grid span="3" height="1-2"] [ux_banner height="500px" bg_color="rgb(242, 242, 242)"] [text_box text_color="dark" width="38" scale="120" position_x="5" position_y="95" text_align="left"]
<h3 class="uppercase"><strong>Armchairs</strong></h3>
[/text_box] [ux_image id="27" width="68" position_x="100" position_y="50"] [/ux_banner] [/col_grid] [col_grid span="6" height="1-3"] [ux_banner height="500px" bg_color="rgb(242, 242, 242)"] [text_box text_color="dark" width="38" scale="120" position_x="5" position_y="95" text_align="left"]
<h3 class="uppercase"><strong>Tables</strong></h3>
[/text_box] [ux_image id="25" width="46" position_x="100" position_y="50"] [/ux_banner] [/col_grid] [/ux_banner_grid] [gap height="83px"] [row_inner h_align="center"] [col_inner span="5" span__sm="12" padding="122px 56px 32px 0px"]
<h2 style="font-size: 2.1em;">Get Inspired</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
[button text="Browse Rooms" letter_case="lowercase" style="underline"] [/col_inner] [col_inner span="6" span__sm="12"] [ux_banner bg="29"] [ux_hotspot text="Table" position_x="40" position_y="60"] [ux_hotspot text="Shelf" position_x="95" position_y="20"] [ux_hotspot text="Lamp Shade" position_x="15" position_y="20"] [ux_hotspot text="Rug" position_x="75" position_y="95"] [/ux_banner] [/col_inner] [/row_inner] [gap height="83px"] [/col] [/row] [section bg_color="rgba(207, 227, 228, 0.78)" padding="50px" margin="50px"] [ux_slider style="container"] [row style="collapse" h_align="center"] [col span="8" span__sm="12" padding="0px 0px 0px 50px"] [ux_banner height="500px" bg="39" bg_pos="34% 85%"] [/ux_banner] [/col] [col span="4" span__sm="12" padding="0px 50px 0px 0px"] [ux_banner height="500px" bg_color="rgb(255, 255, 255)"] [text_box text_color="dark" width="74" scale="137" position_x="50" position_y="15" text_align="right"]
<h3 class="uppercase"><strong>SLATTUM</strong></h3>
[/text_box] [text_box text_color="dark" width="74" scale="137" position_x="50" position_y="90" text_align="right"] [button text="Shop now" letter_case="lowercase" size="large"] [/text_box] [/ux_banner] [/col] [/row] [row style="collapse" h_align="center"] [col span="8" span__sm="12" padding="0px 0px 0px 50px"] [ux_banner height="500px" bg="36" bg_pos="49% 51%"] [/ux_banner] [/col] [col span="4" span__sm="12" padding="0px 50px 0px 0px"] [ux_banner height="500px" bg_color="rgb(255, 255, 255)"] [text_box text_color="dark" width="74" scale="137" position_x="50" position_y="15" text_align="right"]
<h3 class="uppercase"><strong>GAMLEHULT</strong></h3>
[/text_box] [text_box text_color="dark" width="74" scale="137" position_x="50" position_y="90" text_align="right"] [button text="Shop now" letter_case="lowercase" size="large"] [/text_box] [/ux_banner] [/col] [/row] [/ux_slider] [/section]
