{"id":24,"date":"2024-12-03T03:11:56","date_gmt":"2024-12-03T03:11:56","guid":{"rendered":"https:\/\/fullsitediting.com\/fossil\/doc\/docs\/fossil-documentation\/homepage-setup-with-elementor\/"},"modified":"2024-12-04T08:30:58","modified_gmt":"2024-12-04T08:30:58","slug":"homepage-setup-with-elementor","status":"publish","type":"docs","link":"https:\/\/fullsitediting.com\/fossil\/doc\/docs\/fossil-documentation\/homepage-setup-with-elementor\/","title":{"rendered":"Page Setup With Elementor"},"content":{"rendered":"\n<p>The <strong>Fossil<\/strong> WordPress theme includes pre-designed pages created using the <strong>Elementor Page Builder<\/strong> and custom widgets to help you build and customize your website easily. This guide will explain how to edit these pages and use the custom widgets effectively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pre-Designed Pages in Fossil Theme<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"827\" height=\"617\" src=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-3.png\" alt=\"\" class=\"wp-image-62\" style=\"width:500px\" srcset=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-3.png 827w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-3-300x224.png 300w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-3-768x573.png 768w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<p>The following pages are included in the Fossil theme and are fully editable with Elementor:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"825\" height=\"661\" src=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-4.png\" alt=\"\" class=\"wp-image-65\" style=\"width:500px\" srcset=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-4.png 825w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-4-300x240.png 300w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/image-4-768x615.png 768w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to Edit Pages with Elementor<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Access the Elementor Editor<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the WordPress Dashboard.<\/li>\n\n\n\n<li>Navigate to <strong>Pages > All Pages<\/strong>.<\/li>\n\n\n\n<li>Hover over the page you want to edit and click <strong>Edit with Elementor<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Edit Page Content<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the Elementor <strong>drag-and-drop editor<\/strong> to customize the content.<\/li>\n\n\n\n<li>Click on any section, column, or widget to open its settings in the left panel.<\/li>\n\n\n\n<li>Edit text, images, colors, and other content directly on the page.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Add Custom Widgets<\/strong><\/h3>\n\n\n\n<p>To use the Fossil custom widgets, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the Elementor editor, click the <strong>\u201c+\u201d button<\/strong> to add a new section.<\/li>\n\n\n\n<li>Drag and drop one of the Fossil custom widgets into the desired section.<\/li>\n\n\n\n<li>Customize the widget using the options in the left panel.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fossil Custom Widgets<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1585\" height=\"950\" src=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor.jpg\" alt=\"\" class=\"wp-image-60\" style=\"width:750px\" srcset=\"https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor.jpg 1585w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor-300x180.jpg 300w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor-1024x614.jpg 1024w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor-768x460.jpg 768w, https:\/\/fullsitediting.com\/fossil\/doc\/wp-content\/uploads\/sites\/3\/2024\/12\/fossil-elementor-1536x921.jpg 1536w\" sizes=\"(max-width: 1585px) 100vw, 1585px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Fossil About Area Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Display information about your company or organization.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Title and description fields.<\/li>\n\n\n\n<li>Add an image or video background.<\/li>\n\n\n\n<li>Style options for typography and colors.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Fossil Service Carousel Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Showcase your services in a carousel format.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add service titles, descriptions, and icons\/images.<\/li>\n\n\n\n<li>Control the carousel settings, such as autoplay, speed, and number of visible items.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Fossil Testimonial Carousel Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Display client testimonials in a carousel.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add client names, photos, and feedback.<\/li>\n\n\n\n<li>Customize layout and animation effects.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Skill &amp; Video Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Showcase skills or achievements with a video section.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add skill bars with labels and percentages.<\/li>\n\n\n\n<li>Embed a video from YouTube or Vimeo.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Fossil Service Grid Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Display services in a grid layout.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add service titles, descriptions, and icons\/images.<\/li>\n\n\n\n<li>Adjust grid columns and spacing.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Fossil Counter Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Purpose:<\/strong> Highlight key statistics or milestones.<\/li>\n\n\n\n<li><strong>Customization Options:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add counters with labels (e.g., projects completed, satisfied clients).<\/li>\n\n\n\n<li>Customize colors, typography, and animation effects.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Editing Specific Pages<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Homepages<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Each homepage has unique sections like banners, service highlights, testimonials, and counters.<\/li>\n\n\n\n<li>Use the Fossil widgets to customize these sections as per your requirements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Services Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the <strong>Fossil Service Grid<\/strong> or <strong>Fossil Service Carousel<\/strong> widget to display your services dynamically.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Team Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add team member details with images, designations, and short descriptions.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why Choose Us Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use a combination of widgets like <strong>Skill &amp; Video<\/strong> and <strong>Fossil About Area<\/strong> to showcase your strengths.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>FAQ Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Elementor\u2019s <strong>Accordion Widget<\/strong> to create collapsible FAQ sections.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Contact Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Elementor\u2019s <strong>Form Widget<\/strong> to create contact forms.<\/li>\n\n\n\n<li>Add Google Maps for location display.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pricing Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use Elementor\u2019s <strong>Pricing Table Widget<\/strong> to display your plans and pricing.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>About Page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the <strong>Fossil About Area<\/strong> widget to present your company\u2019s mission, vision, and story.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices for Editing<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Save Changes Frequently:<\/strong> Click the <strong>Update<\/strong> button to save your changes as you work.<\/li>\n\n\n\n<li><strong>Preview Changes:<\/strong> Use the <strong>Preview Changes<\/strong> option to see how the page looks before publishing.<\/li>\n\n\n\n<li><strong>Responsive Design:<\/strong> Use Elementor\u2019s responsive design tools to adjust content for mobile and tablet views.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Additional Resources<\/strong><\/h2>\n\n\n\n<p>For more details about using Elementor, refer to the official Elementor documentation: <a href=\"https:\/\/elementor.com\/help\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Help Center<\/a>.<\/p>\n\n\n\n<p>If you encounter any issues or need assistance with customizing your Fossil theme, please reach out to our support team.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"parent":20,"menu_order":4,"comment_status":"open","ping_status":"closed","template":"","meta":{"nav_title":"","positive":"","negative":"","footnotes":""},"docs_category":[],"class_list":["post-24","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":10,"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs\/24\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs\/24\/revisions\/67"}],"up":[{"embeddable":true,"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs\/20"}],"wp:attachment":[{"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/fullsitediting.com\/fossil\/doc\/wp-json\/wp\/v2\/docs_category?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}